Embedded Files
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Pagina Navigabile</title>
<style>
/* Stili CSS per la pagina */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
.content {
display: none;
}
.content:target {
display: block;
}
nav {
text-align: right;
}
nav a {
text-decoration: none;
background-color: #ffd700;
padding: 10px 20px;
margin: 0 10px;
color: #333;
border: 1px solid #333;
}
/* Stile per le figure geometriche */
.figure-geometriche {
width: 150px;
height: 150px;
display: inline-block;
margin-right: 40px;
margin-left: 40px;
}
.quadrato {
background-color: #ffcc00; /* Colore quadrato */
}
.rettangolo {
background-color: #ff9966; /* Colore rettangolo */
width: 200px;
}
.cerchio {
background-color: #99ccff; /* Colore cerchio */
border-radius: 50%; /* Forma circolare */
}
.citazione {
font-size: 20px;
}
</style>
</head>
<body>
<header>
<h1>Pagina Navigabile</h1>
</header>
<nav>
<!-- Collegamenti ai tuoi contenuti -->
<a href="#sezione1">Sezione 1</a>
<a href="#sezione2">Sezione 2</a>
<a href="#sezione3">Sezione 3</a>
</nav>
<div id="sezione1" class="content">
<h2>Sezione 1: il cerchio</h2>
<p class="citazione">
Il cerchio è una linea retta che ritorna al suo punto di partenza<br>
Frédéric Dard
</p>
<div class="figure-geometriche cerchio"></div>
</div>
<div id="sezione2" class="content">
<h2>Sezione 2: il quadrato</h2>
<p class="citazione">
Il quadrato è la figura più stabile e regolare, e per questo è la
base di molte costruzioni<br>
Leonardo da Vinci
</p>
<div class="figure-geometriche quadrato"></div>
</div>
<div id="sezione3" class="content">
<h2>Sezione 3: il rettangolo</h2>
<p class="citazione">
Un rettangolo è una figura con quattro angoli uguali e quattro angoli diversi<br>
Paul Halmos
</p>
<div class="figure-geometriche rettangolo"></div>
</div>
</body>
</html>
Ritorna agli Esempi
Page updated
Google Sites
Report abuse