Struttura pagina HTML5 by @Alessiadefra - Codewith.it

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

References

<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<h2>Titolo di intestazione di secondo livello
hreflangConsente di dichiarare la lingua del documento collegato.
<h3>Titolo di intestazione di terzo livello
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML

Users

Log in to search for users

Explore

Find inspiration

Federica Bachini Lab

esercitazione 1

Heads Or Tails Random Tally

5/10/24 es. 9 - 3 bottoni

Barra di ricerca per sito

noc-fisicas-reroll-parcial1

JS Esercizio Concetti Gen es3

Estrazione Casuale Studenti

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