HTML
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<!-- Impostazione viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tipografia</title>
<!-- Caricamento fonts da Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800|Oswald" rel="stylesheet">
<!-- Caricamento foglio di stile -->
<link href="Stili.css" rel="stylesheet">
</head>
<body>
<!-- Barra menù -->
<!-- Gli elementi che flotano devono essere ontenuti in un elemento con classe clearfix -->
<header class="main-header clearfix navbar-fixed">
<!-- La classe contenitore centra il contenuto impostato margini uguali a destra e sinistra -->
<div class="contenitore">
<div class="logo">Logo </div>
<nav class="navbar">
<ul>
<li><a href="#titoli">Titoli</a></li>
<li><a href="#liste">Liste</a></li>
<li><a href="#figurine">Figurine</a></li>
</ul>
</nav>
</div>
</header>
<!-- Sezione Titoli -->
<section id="titoli">
<header>
<h1>Titoli</h1>
</header>
<div class="contenitore">
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
</div>
</section>
<!-- Sezione Liste -->
<section id="liste">
<header>
<h1 class="maiuscoletto">Liste</h1>
</header>
<div class="contenitore">
<ul>
<li>Elemento lista</li>
<li>Elemento lista</li>
<li>Sottolista
<ul>
<li>Elemento sottolista</li>
<li>Elemento sottolista</li>
</ul>
</li>
<li>Elemento lista</li>
<li>Elemento lista</li>
</ul>
</div>
<div class="contenitore">
<ol>
<li>Elemento lista</li>
<li>Elemento lista</li>
<li>Sottolista
<ul>
<li>Elemento sottolista</li>
<li>Elemento sottolista</li>
</ul>
</li>
<li>Elemento lista</li>
<li>Elemento lista</li>
</ol>
</div>
</section>
<!-- Sezione Figurine -->
<section id="figurine">
<header>
<h1>Figurine</h1>
</header>
<!-- La classe contenitore centra il contenuto impostato margini uguali a destra e sinistra -->
<div class="contenitore">
<!-- Gli elementi che flotano devono essere ontenuti in un elemento con classe clearfix -->
<div class="riga clearfix galleria">
<figure class="colonna-50"> <img class="img-responsive immagine-galleria" src="http://lorempixel.com/1024/640?p=1" alt="Immagine casuale">
<figcaption>Immagine numero 1</figcaption>
</figure>
<figure class="colonna-50"> <img class="img-responsive immagine-galleria" src="http://lorempixel.com/1024/640?p=2" alt="Immagine casuale">
<figcaption>Immagine numero 2</figcaption>
</figure>
</div>
<!-- Gli elementi che flotano devono essere ontenuti in un elemento con classe clearfix -->
<div class="clearfix riga">
<figure class="colonna-50">
<video controls width="100%">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Il tuo browser non supporta il tag HTML5 video </video>
</figure>
<figure class="colonna-50">
<div class="iframe-responsive">
<iframe width="100%" src="https://www.youtube.com/embed/aCI_uYdgNrM" frameborder="0" allowfullscreen></iframe>
</div>
</figure>
</div>
</div>
</section>
<!-- Animazioni con CSS -->
<section id="animazioni">
<header>
<h1>Animazioni</h1>
</header>
<!-- La classe contenitore centra il contenuto impostato margini uguali a destra e sinistra -->
<div class="contenitore">
<div class="rettangolo-rosso"></div>
<div class="cerchio-blu scale"></div>
<div class="quadrato-arancio rotate"></div>
<div class="quadrato-arancio scale"></div>
<div class="quadrato-arancio skew"></div>
<p>
<a class="bottone-nascosto" href="http://www.accademiadiurbino.it">Cliccami</a>
</p>
</div>
</section>
<footer class="page-footer">
<!-- La classe contenitore centra il contenuto impostato margini uguali a destra e sinistra -->
<div class="contenitore"> © 2017 Accademia di Belle Arti di Urbino </div>
</footer>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
/* Impostazione generali */
body {
font-family:'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Oswald", sans-serif;
font-weight: 400;
line-height: 1.1;
color: #333333;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.7em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.5em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.8em;
}
/* Classe creata per sperimentare font-variant */
.maiuscoletto {
font-variant: small-caps;
}
/* Gli elementi section diretti discendenti (figli) di body
hanno un padding superiore di 60px ch fa in modo che il
contenuto non sia coperto dalla barra di navigazione
fissa. */
body > section {
padding-top: 60px;
}
/**********************************************
Stilizzazione della header di ogni section
***********************************************/
/* Titolo */
section > header > h1 {
font-size: 3.5em;
text-transform: uppercase;
text-align: center;
letter-spacing: 4px;
text-shadow: 2px 2px 6px #555555;
margin: 0;
line-height: 1;
}
/* Header */
section > header {
padding-top: 15px;
padding-bottom: 20px;
border-top: 4px solid #333333;
border-bottom: 4px solid #333333;
width: 60%;
min-width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
/***********************************************
Impostazione di stile generali per le liste
ordinate e non ordinate
************************************************/
ul {
list-style: square;
}
ul > li > ul {
list-style: circle;
}
ol {
list-style: lower-alpha;
}
ol > li > ol, ol > li > ul {
list-style: lower-greek;
}
/* Classe che va assegnata ai contenitori di
oggeti che flotano (float:left o float:right) */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/************************************************
Stili dei vari componendi della barra di
navigazione.
************************************************/
/*logo*/
.logo {
float: left;
padding-top: 15px;
padding-bottom: 15px;
}
/* Il gruppo dei bottoni di navigazione è
appoggiato a destra e il contenuto che segue si
affianca alla sua sinistra */
.navbar {
float:right;
}
.main-header {
background-color: #444444;
color: white;
margin-bottom: 15px;
}
/* Lo stile della lista che contienme i
bottoni di navigazione viene azzerato */
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Disposizione arizzontale degli
elementi della lista*/
.navbar ul li {
display: inline-block;
}
/* Stile dei bottoni di navigazione */
.navbar ul li a {
color: white;
display: block;
padding: 15px 20px;
text-decoration: none;
}
/* Stile dei bottoni di navigazione quando il
puntatore del mouse passa loro sopra*/
.navbar ul li a:hover, .navbar ul li a:focus {
background-color: #888888;
text-shadow: 0 0 7px #333333;
outline: 0;
}
/* Clsse che fa sì che la barra sia fissa
in cima alla finestra */
.navbar-fixed {
position:fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
}
/* La classe contenitore centra il contenuto
impostando margini uguali a destra e sinistra */
.contenitore {
width: 90%;
margin: 0 auto;
}
/* Questo elemento flota a sinistra e occupa metà
pagina. Su schermi piccoli diventerà 100%.
Per distanziare il contenuto delle colonne
viene usato un margine interno (padding) */
.colonna-50 {
width: 50%;
padding: 0 15px;
float: left;
box-sizing: border-box;
}
/* Allinea il contenuto degli elementi con classe
colonna-50 esternamente grazie ad un margine
negativo a destra e sinistra uguale al padding
destro e sinistro dello stesso*/
.riga {
margin: 0 -15px;
}
/* Rende un'immagine responsive imponendgli una
larghezza massima uguale a quella dell'elemento
che la contiene */
.img-responsive {
max-width: 100%;
display: block;
}
/* Azzeramento di tutti i margini*/
figure {
margin:0;
}
/* Effetto di ingrandiumento e semitrasparenza
delle immagini al passaggio del mouse*/
.immagine-galleria:hover {
transform: scale(1.4,1.4);
opacity: 0.6;
}
.immagine-galleria {
transition: all 1s;
}
/* =================================================
Posizionamento e stilizzazione della didascalia
================================================= */
/* Taglia il contenuto che va oltre i margini e
il posizionamento è relativo */
.galleria figure {
position: relative;
overflow: hidden;
}
/* Didascalia: posizione assoluta all'interno
della sua figure. Ancorato in basso, a destra e
a sinistra tenedo conto del margine interno
della figure. */
.galleria figure figcaption {
position: absolute;
width: auto;
bottom:0;
left:15px;
right: 15px;
background-color: rgba(0,0,0,0.7);
color: white;
padding: 20px 10px;
text-align: center;
}
/*===========================================
Rende responsive l'iframe
===========================================*/
.iframe-responsive {
position: relative;
/* equivale a 16/9 */
padding-bottom: 56.24%;
box-sizing: border-box;
}
.iframe-responsive > iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
}
.page-footer {
background-color: #333333;
color: white;
text-align: center;
padding: 10px;
font-size: 85%;
}
/*===========================================
Media query -> Tablet verticale
===========================================*/
@media only screen and (max-width:768px) {
/* Colonna-50 si allarga a pieno schermo */
.colonna-50 {
width: 100%;
}
/* contenitore non è più a percentuale
ma è largo come lo schermo con un piccolo
margine a destra e sinistra*/
.contenitore {
width: auto;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
}
/*===========================================
Esempi di animazione
===========================================*/
.rettangolo-rosso {
width: 200px;
height: 150px;
background-color: red;
transition: width 2s;
}
.rettangolo-rosso:hover {
width:400px;
}
.cerchio-blu {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
transition: all 1s;
}
.quadrato-arancio {
width: 120px;
height: 120px;
background-color: orange;
transition: all 1s;
}
.skew:hover {
transform: skewX(45deg);
background-color: green;
}
.rotate:hover {
transform: rotate(720deg);
}
.scale:hover {
transform: scale(2,2);
opacity: 0.5;
}
.bottone-nascosto {
display: inline-block;
padding: 15px 25px;
font-weight: 700;
text-transform: uppercase;
background-color: purple;
color: transparent;
transition: all 1s;
}
.bottone-nascosto:hover {
color: yellow;
transform: scale(1.3,1.3);
}