Home principale by @Gianluca_Pet - Codewith.it

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<ol>Crea liste ordinate o numerate.
<td>Definisce una cella di una tabella HTML.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
heightDetermina l'altezza di un elemento HTML in pixel
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Users

Log in to search for users

Explore

Find inspiration

La danza del Fuoco e delle Ombre

Heads Or Tails Random Tally

Gesù nostro signore(2)

The Equalizer(2)

Chronē — Orologi d\'autore •

media ponderata voti pesi

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%;
  }
}