Home principale by @Gianluca_Pet - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

animationDefinisce i parametri dell'animazione di un elemento o selettore
downloadConsente di scaricare file al click di collegamento ipertestuale.
<i>Formatta il testo in corsivo/italico non enfatizzato
<label>Mostrare un testo di etichetta per un elemento di input.
valueValore alfanumerico o booleano contenuto in un elemento
Inserisce un commento nel codice

Users

Log in to search for users

Explore

Find inspiration

“esercitazione7.html”

Primo esercizio in classe

Informazioni Cliente - Quiz a Rami

I Giornali sul Web

Ximena sanchez CSS Styling Assignm

Festava Live - Bootstrap 5 CSS Tem

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<html>
<head>
    <meta charset="utf-8">
    <title>MENU a tendina</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <section>
    <div align="center">
        <nav class="navigation">
            <ul>
                <li><a href="#">Inserisci</a>
                    <ul>
                        <li><a href="#">Auto</a></li>
                        <li><a href="#">Modello</a></li>
                        <li><a href="#">Marca</a></li>
                    </ul>
                </li>
                <li><a href="#">Modifica</a>
                    <ul>
                        <li><a href="#">Auto</a></li>
                        <li><a href="#">Modello</a></li>
                        <li><a href="#">Marca</a></li>
                    </ul>
                </li>
                <li><a href="#">Cancella</a>
                    <ul>
                        <li><a href="#">Auto</a></li>
                        <li><a href="#">Modello</a></li>
                        <li><a href="#">Marca</a></li>
                    </ul>
                </li>
                <li><a href="#">Query</a></li>
            </ul>
        </nav>
    </div>


<h1>Scopri chi siamo...</h1>
<div class="box">
	<a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<h2>AutoHUB</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
Quanto tempo sprechiamo alla ricerca di scorciatoie magiche per il successo e la realizzazione imprenditoriale, quando sappiamo bene che l’unica vera strada è guardare la fatica, le difficoltà, le persone dritte in faccia: veri imprenditori che avviano in modo pratico dei business reali, che impiegano persone reali e che forniscono prodotti e servizi reali a veri clienti.
AutoHUB nasce nel 1960, e si sa che gli anni sessanta sono stati periodo di grandi cambiamenti e rivoluzioni, infatti nasce il nostro autosalone.
L’Autosalone nasce dal lavoro di 5 soci che hanno portato l’azienda a essere una delle più importanti della regione e speriamo che diventi anche la più importante a livello nazionale.
L’autosalone offre servizi di ogni genere:
Servizi finanziari: offriamo servizi su misura.
Preventivi gratuiti: Il nostro staff è sempre a disposizione per aiutarvi nella valutazione del vostro acquisto con diverse soluzioni con preventivi gratuiti.
Officina: Prenota online il tuo servizio nella nostra officina.
Esperienza e professionalità, quando si parla di automobili, è su questo presupposto che si fonda L’Autosalone S.r.l., AutoHUB. Nel nostro ampio autosalone avrete la possibilità di scoprire ed ammirare le autovetture della gamma Fiat, Lancia, Ferrari Peugeot e molte altre, con vetture nuove a Km 0 e vetture aziendali, Il nostro personale qualificato vi aiuterà nella scelta, presentandovi le soluzioni più adatte alle vostre esigenze.
L’Autosalone nasce dal lavoro di 5 soci che hanno portato l’azienda a essere una delle più importanti della regione e speriamo che diventi anche la più importante a livello nazionale.

		</div>
	</div>
</div>



</section>

</body>
</html>

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


html {
    font-size: 70.5%
}
body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: white;
    font-size: 1.6em;
      -webkit-font-smoothing: antialiased;
}
.navigation {
    height: 80px;
    width: 100%;
    background-color: black;
}
.navigation li {
    display: inline;
    float: left;
    text-align: center;
    width: 150px;
}
.navigation li a {
    display: block;
    padding: 17px 0 15px;
    text-decoration: none;
    box-sizing: border-box;
    height: 50px;
    font-weight: bold;
    border-bottom: 0px solid #f4a003;
    transition-property: border-bottom-width;
    transition-duration: 200ms;
    animation-timing-function: ease-in;
    background-color: black;
    color: white;
    box-sizing: border-box;
}
.navigation li a:hover {
    border-bottom: 4px solid #f4a003;
}
.navigation ul ul {
    display: none;
    border-radius: 3px;
}
.navigation ul li:hover > ul {
	display: block;
}
.navigation ul {
    position: relative;
    display: inline-table;
}
.navigation ul:after {
    content: "";
    clear: both;
    display: block;
}
.navigation ul li {
    float: left;
}
.navigation ul li a {
    display: block;
    font-size: 0.9em;
}
.navigation ul ul {
	position: absolute;
	top: 100%;
}
.navigation ul ul li {
	float: none;
	position: relative;
	width: 150px;
	display: block;
	-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.23);
	box-shadow: 2px 3px 3px rgba(0,0,0,0.23);
}
.navigation ul li ul li ul {
	position: absolute;
	left: 101%;
	top: 0;
    z-index: 1000;
}
  section{
    background: url(https://s1.1zoom.me/b5050/669/Mercedes-Benz_Maybach_Vision_6_Front_Wine_color_528959_1920x1080.jpg) no-repeat;
    background-size: cover;
    height: calc(100vh - 80px);
  }














body {
  font-family: Arial, sans-serif;
  background: black;
  background-size: cover;
  height: 100vh;
}

h1 {
  text-align: center;
  font-family:rgba(255,128,3,0.28)serif;
  color: #f4a003;
  margin: 80px 0;
}

.box {
  width: 30%;
  margin: 0 auto;
  background: rgba(255,255,255,0.28);
  padding: 30px;
  border: 2px solid #f4a003;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #f4a003;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #f4a003;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 10;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 100px auto;
  padding: 20px;
  background: #FFFFFF00;
  border-radius: 5px;
  width: 30%;

}

.popup h2 {
  margin-top: 0;
  color: #FFFFFF;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 120px;
  right: 600px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
}

.popup .content {
  max-height: 70%;
  
  color:white;
}

@media screen and (max-width: 600px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}