Struttura pagina HTML5 by @Alessiadefra - Codewith.it

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

References

nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<tr>Definisce le righe di una tabella (rows)
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<blockquote>Inserisce citazioni in un documento HTML
<link>Collega il documento corrente con una risorsa esterna

Users

Log in to search for users

Explore

Find inspiration

Esercitazione Esame

Review of Functions I

Questa è una pagina dimostrativa

esercizio esame 2

congettura di golbach a 3

Esercizi 05/03/2024 es2

Prova javascript

PixFlow Agency | Web Design, Video

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