Home principale by @Gianluca_Pet - Codewith.it

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

Referenze

colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
requiredRende obbligatorio un campo di input
<html>Tag primario di un documento HTML
<meta>Definisce i meta dati di una pagina web.
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
multipleConverte in lista a selezione multipla

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Download 7-Zip for PC Windows

Review of Functions I

Heads Or Tails Random Tally

Esercizi 05/03/2024 es6

Compito informatica

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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