Struttura pagina HTML5 by @Alessiadefra - Codewith.it

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

Referenze

<p>Serve a definire paragrafi di testo
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<input>Definisce un area di input per l'invio di dati e informazioni
requiredRende obbligatorio un campo di input
hrefDefinisce l'URL della risorsa/pagina di destinazione.
heightDetermina l'altezza di un elemento HTML in pixel

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Compito di merda numero 1

Ricetta Cous Cous

INFORMATICA - ESERCIZIO 1 RISOLTO

5/10/24 es.1 - palindromi

Éclat Couture - Alta Moda Artigia

Esercizio tabella e form

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