Home principale by @Gianluca_Pet - Codewith.it

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

References

<th>Definisce una cella di intestazione di una tabella HTML.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
getDefinisce un metodo di invio di dati al server
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<tbody>Definisce il contenuto principale di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Esercitazione n. 2

Costruzione form

esercitazione6.html

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