Home principale by @Gianluca_Pet - Codewith.it

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

References

controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<table>Tag primario per la creazione di tabelle
valueValore alfanumerico o booleano contenuto in un elemento
<i>Formatta il testo in corsivo/italico non enfatizzato
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server

Users

Log in to search for users

Explore

Find inspiration

AirPods Shop LOGIN

media ponderata voti pesi

Product Landing Page

verifica 1parte

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