Struttura pagina HTML5 by @Alessiadefra - Codewith.it

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

Referenze

controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
_selfApre collegamenti ipertestuali nella stessa pagina del browser
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Leggere Lolita a Teheran Azar Nafi

JavaScript Debug Console

VERDERAME | Serra e Orto Botanico

VerdeTech (v3) - Orto Botanico | P

Esercitazione 3

Neon Flux - Visual Design in Motio

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.

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