Struttura pagina HTML5 by @Alessiadefra - Codewith.it

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

References

actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<div>Crea contenitori generici o sezioni in una pagina
<h4>Titolo di intestazione di quarto livello
<i>Formatta il testo in corsivo/italico non enfatizzato
hreflangConsente di dichiarare la lingua del documento collegato.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto

Users

Log in to search for users

Explore

Find inspiration

Tabella esercitazione esame

form per il torneo misto disfor s

Esercizio sui cicli

borghi d-italia

media ponderata voti pesi

Copia testo in appunti

Con nome bandiera

Il bambino e le stelle ma(2)

JS Istruzioni condizionali es3

Tracker delle attività 2

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.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Struttura pagina HTML5</title>
<style>@import url(‘css/style.css’);</style>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700" rel="stylesheet" type="text/css">
</head>
<body>
<header id="header">
<div class="content">
<h1>Pagina Web con HTML5</h1>
</div>
<nav class="content">
<ul>
<li><a href="#" class="active" >Home</a></li>
<li><a href="#html5">HTML5</a></li>
<li><a href="#">Link uno</a></li>
<li><a href="#">Link due</a></li>
<li><a href="#">Link tre</a></li>
</ul>
<div class="clearer"></div>
</nav>
</header>
<div class="content">
<main>
<section>
<h2>FAQ</h2>
<h2><a href="#rispostauno">Domanda uno</a></h2>
<h2><a href="#rispostadue">Domanda due</a></h2>
<h2><a href="#rispostatre">Domanda tre</a></h2>
<h2><a href="#rispostaquattro">Domanda quattro</a></h2>
<h2><a href="#rispostacinque">Domanda cinque</a></h2>
</section>
<section>
<h2 id="rispostauno">Risposta uno</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis rhoncus ultrices magna semper mattis.
Duis auctor magna tellus...</p>
<h2 id="rispostadue">Risposta due</h2>
<p>Vestibulum sed leo nec mi pulvinar lacinia.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus...</p>
<h2 id="rispostatre">Risposta tre</h2>
<p>Nam a justo magna. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Morbi porta lorem eu suscipit iaculis...</p>
<h2 id="rispostaquattro">Risposta quattro</h2>
<p>Maecenas vitae turpis non odio placerat ultrices
eu nec nibh. Proin eu nisi id massa accumsan tempus
id eu elit. Etiam porta sed...</p>
<h2 id="rispostacinque">Risposta cinque</h2>
<p>Nulla in varius lectus. Suspendisse et eros
quis est placerat sodales sed nec nisl. Integer luctus tortor
at orci efficitur, vel egestas dolor tincidunt. Nullam
suscipit ornare leo at tincidunt...</p>
</section>
</main>
<aside>
<p>Nulla in varius lectus. Suspendisse et eros
quis est placerat sodales sed nec nisl. Integer luctus tortor
at orci efficitur...</p>
<img id="html5" src="immagini/html5logo.jpg"
width="180" height="270" alt="logo html5" title="il logo di HTML5">
</aside>
</div>
<div class="clearer"></div>
<footer>
<div class="content">
<p><a href="#header">Torna al top</a></p>
</div>
</footer>
</body>
</html>

@charset “UTF-8”;
/* CSS Document */
* {
margin:0;
padding:0;
}
.clearer {
clear:both;
}
img {
border:none;
}
body {
background-color:#F0F0F0;
font-family: ‘Roboto’, sans-serif;
}
.content {
width:1170px;
margin:0 auto;
}
/* header */
header {
width:100%;
background-color:#00897B;
margin-bottom:30px;
}
header h1 {
font-size:56px;
color:#fff;
font-weight:400;
padding-top:135px;
}
/*nav*/
nav ul {
float:left;
list-style:none;
}
nav li {
float:left;
}
nav a {
height:35px;
width:100px;
color:#fff;
font-size:18px;
text-align:center;
line-height:35px;
font-weight:500;
text-decoration:none;
margin:40px 30px;
display:block;
float:left;
}
nav a:hover, nav a:active {
color:#00685d;
border-bottom:2px solid #00685d;
}
nav a:nth-child(1) {
margin-left:0;
}
.active {
border-bottom:2px solid white;
}
/* main */
main {
float:left;
width:870px;
}
section {
background-color:#fff;
padding:30px 20px;
margin-bottom:30px;
border-radius:3px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
section h2 {
font-size:20px;
color:#00897B;
font-weight:300;
margin-bottom:20px;
}
section a:link, section a:visited {
text-decoration:none;
color:#00897B;
}
section a:hover, section a:active {
text-decoration:underline;
}
section p {
font-weight:300;
font-size:13px;
color:#212121;
margin-bottom:30px;
}
section:nth-child(1) {
height:250px;
}
section:nth-child(2) {
height:790px;
}
/*aside*/
aside {
height:1070px;
width:240px;
float:left;
margin-left:20px;
background-color:white;
padding:30px 20px 90px 20px;
border-radius:3px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
aside p {
font-size:16px;
font-weight:300;
color:#00897B;
margin-top:30px;
}
aside img {
margin:70px 30px;
}
/*footer*/
footer {
height:500px;
}
footer p {
font-weight:300;
}
footer a:link, footer a:visited {
text-decoration:none;
color:#00897B;
}
footer a:hover {
text-decoration:underline;
color:#00897B;
}