Vedi l'esercizio a piena pagina
/index.html
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Sito in costruzione</title>
<meta name="description" content="Accademia di Belle Arti di Urbino - Sezione Esercizi Online di Sistemi Interattivi I.">
<meta name="author" content="Bruno Migliaretti">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Quicksand:300,700" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/custom-fonts.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<!--
================================================================
TESTATA DELLA PAGINA
Viene utilizzato l'elemento <header> a cui si assegna la classe
Bootstrap jumbotron.
È divisa in tre parti:
1. Logo: Per determinare con più precisione la
larghezza resposnsive del logo (che varia cioè a seconda del
dispositivo) utilizzo due strutture riga > colonne annidate.
2. Corpo della testata: due colonne che si riducono a una su
schermo sm (tablet verticale). Su schermo lg (desktop)
riduco la larghezza della colonne da 6 a 5 e aggiungo un
offset di una colonna per distribuire meglio i contenuti.
3. Piede: semplice testo centrato utilizzando l'elemento <small>
NOTE: Al logo (1) e al Corpo della testata (2) ho aggiunto la
classe mb-md che aggiunge un margine inferiore di 15px su
smartphone e di 30px sugli altri dispositivi.
Ho creato e utilizzato la text-center-sm che rende il testo
centrato solo su martiphone (schermo xs) e tablet verticale
(schermo sm).
================================================================
-->
<header class="jumbotron bg-deepblue">
<!-- container: larghezza fissa con
margine destro e sinistro uguali -->
<div class="container">
<!-- row: contenitore per elementi con classi col-*-* -->
<!-- mb-sm classe che aggiunge un margine
inferiore di 15px definito in custom.css -->
<div class="row mb-md">
<!-- Per definire meglio la larghezza del logo uso due sistemi righe colonne annidati-->
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 ">
<a href="http://www.accademiadiurbino.it" title="Vai al sito dell'Accademia di Belle Arti di Urbino" target="_blank">
<img src="img/Logo-Accademia.png" alt="Logo Accademia" class="img-responsive center-block" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- container: larghezza fissa con
margine destro e sisistro uguali -->
<div class="container">
<!-- row: contenitore per elementi con classi col-*-* -->
<div class="row mb-md">
<!-- La testata è divisa in due colonne. Su schermo md (tablet orizzontale),
su schermo lg (desktop) viene dato un offset di 1 col su sm (tablet vertivale) e
smartphone si passa ad un unica colonna -->
<div class="col-md-5 col-md-offset-1"> <img src="img/bruno.jpg" alt="Immagine casuale da lorempixel" class="img-responsive img-circle" /> </div>
<div class="col-md-5">
<h1 class="text-center-sm">Bruno Migliaretti</h1>
<h2 class="text-center-sm">Accademia di Belle Arti di Urbino<br/>
<small>Scuola di Nuove Tecnologie per l'Arte</small></h2>
<p class="text-center-sm">Docente di <strong><a href="http://sisteminterattivi.org">Sistemi Interattivi I</a></strong></p>
<p class="text-center-sm"> <a class="btn btn-default btn-lg btn-outline" href="http://brunomigliaretti.com">Sito personale</a> </p>
</div>
</div>
</div>
<div class="container">
<p class="text-center"><small><a href="http://www.sisteminterattivi.org" target="_blank">http://www.sisteminterattivi.org</a></small></p>
</div>
</header>
<!--
================================================================
SEZIONE "IN PRIMO PIANO"
Viene utilizzato l'elemento <section>.
L'obiettivo è creare una struttura di contenuti divisi su
quattro colonne su schermi lg e md (desktop ad alta e media
risoluzione) che diventino due su schermo sm (tablet verticale)
e una su smartphone.
Per ottenero il risultato utilizzo una struttura di riga >
colonne anniadata composta di una righa che continene due
colonne ciascuna della quali contiene a sua volta una riga con
due colonne.
================================================================
-->
<section id="inPrimoPiano">
<div class="container">
<div class="row">
<!-- Le colonne rimangono affinacate su desktop a media (md) e alta (lg) risoluzione-->
<div class="col-md-6">
<!-- Ogni colonna contiene una riga composta da due colonne che rimangono affiancate su tablet (sm) -->
<div class="row">
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-text-size glyphicon-circle"></span><br />
<small>Tipografia</small> </h1>
<p class="text-center">Esercizio su HTML.</p>
<p class="text-center"> <a href="tipografia/index.html" class="btn btn-primary">Vai all'esercizio</a> </p>
</div>
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-bold glyphicon-circle"></span><br />
<small>Bootstrap</small> </h1>
<p class="text-center">Esercizio su Bootstrap.</p>
<p class="text-center"> <a href="bootstrap/index.html" class="btn btn-primary">Vai all'esercizio.</a> </p>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Ogni colonna contiene una riga composta da due colonne che rimangono affiancate su tablet (sm) -->
<div class="row">
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-console glyphicon-circle"></span><br />
<small>Javascript</small> </h1>
<p class="text-center">Esercizi su javascript</p>
<p class="text-center"> <a href="bootstrap/esercizi.html" class="btn btn-primary">Per saperne di più</a> </p>
</div>
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-education glyphicon-circle"></span><br />
<small>Esame</small> </h1>
<p class="text-center">Esempi utili.</p>
<p class="text-center"> <a href="bootstrap/esercizi2.html" class="btn btn-primary">Guarda gli esempi</a> </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
Carico file javascript necessari a Bootstrap
-->
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
/css/custom.css
@charset "utf-8";
/* CSS Document */
/* Modifica colori di fondo e di primo piano di jumbotron*/
.jumbotron {
background-color: #333333;
color: white;
}
/* =================================================
COLORI
================================================= */
/*
=========================================================
Invece che definire i colori per l'elemento con classe
jumbotron posso definire classi generiche che applichino
accoppiamenti di colore e di caratteristiche di font
applicabili a qualsiasi elemento
=========================================================
*/
/* colori di sfondo e di primo piano per gli elementi com
class bg-dark */
.bg-dark {
background-color: #333333;
color: white;
}
/* Definisto a colori per il link ipertestuale */
.bg-dark a {
color: #ffffaa;
}
.bg-dark a:hover {
color: #bbbb99;
}
/*
Bootstrap definisce un colore specifico per l'elemento
small (elemento html che serve a identificare una
parte di testo scritta in corpo minore dello standard)
quando e dentro un titolo. Questo colore (#777777) è poco
leggibile con il background che ho scelto quindi lo
cambio. Uso l'opzione !important per fare in modo che
questa regola sostituisca qualsiasi regola precedente
anche se più specifica.
*/
.bg-dark small, .bg-dark .small {
color: #bbbbbb !important;
}
/* Altro esempio */
.bg-deepblue {
background-color: #001633;
color: #ffffee;
}
.bg-deepblue small, .bg-deepblue .small {
color: #bbbbaa !important;
}
.bg-deepblue a {
color: #bbffff;
}
.bg-deepblue a:hover {
color: #bbbbaa;
}
/* =================================================
UTILITÀ
================================================= */
/* Aggiungono margine inferiore
classe responsive più sotto vengono definiti
margini maggiori per schermi superioni a 768px*/
.mb-sm {
margin-bottom: 5px;
}
.mb-md {
margin-bottom: 15px;
}
.mb-lg {
margin-bottom: 30px;
}
/* Classe sostituita da quella definita sotto */
.icon-circle {
border: solid 2px #888;
padding: 12px 7px 7px 15px;
border-radius: 50%;
}
/* Ho creato questa nuova classe da aggiungere alla classe gluphicon
per ottenere un incona grande circondata da un bordo circolare
Migliore della precedente e meno legata alla grandezza del carattere*/
.glyphicon-circle {
border: solid 2px #888;
padding: 12px 15px;
border-radius: 50%;
font-size: 36px;
top: 2px;
}
/* La classe text-center-sm allinea
il testo al centro solo sui dispositivi a schermo piccolo */
.text-center-sm {
text-align: center;
}
/* =================================================
BOTTONI
================================================= */
/* Elimina l'arrotondamento dei pulsanti */
.btn {
border-radius: 0;
/* Converte i maiuscolo e aumente lo spazio tr i caratteri */
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-outline, a.btn-outline {
background-color: transparent;
color: #ffffee;
border: solid 2px #ffe;
letter-spacing: 3px;
}
.btn-outline:hover, a.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.6);
color: #333333;
}
/* =================================================
NAVBAR
=================================================*/
.navbar-fixed-padding {
padding-top: 50px;
}
.navbar-darkblue {
background-color: darkblue;
}
.navbar-darkblue .navbar-brand {
color: yellow;
}
.navbar .navbar-header .navbar-brand {
padding-top: 5px;
padding-bottom: 8px;
height: 70px;
}
.navbar .navbar-header .navbar-brand img {
max-height: 100%;
width: auto;
display: inline-block;
margin-right: 10px;
}
.navbar .navbar-header .navbar-brand span {
padding-top: 19px;
padding-bottom: 25px;
display: inline-block;
}
.navbar {
height: 70px;
}
.navbar-nav >li > a {
padding-top: 25px;
padding-bottom: 25px;
}
/* =================================================
SEZIONI
================================================= */
.sezione {
padding: 80px 0;
}
/* =================================================
ANIMAZIONI
================================================= */
.animated {
transition-property: all;
transition-timing-function: ease-in-out;
transition-duration: 1s;
}
.delay05 {
transition-delay: 0.5s;
}
.delay1 {
transition-delay: 1s;
}
.delay2 {
transition-delay: 2s;
}
.slow {
transition-duration: 1.5s;
}
.fast {
transition-duration: 0.5;
}
.animated.out {
opacity:0;
}
.fade-top.out {
transform: translateY(-50px);
}
.rotate.out {
transform: rotate(-720deg);
}
/* ==================================================
INTERRUTTORE
================================================== */
.interruttore {
border: 0;
background-color: transparent;
height: 90px;
width: 90px;
background-image: url(../img/interruttore.png);
background-position: top left;
}
.interruttore.on {
background-position: top right;
}
.interruttore:focus {
outline: 0;
}
#esercizio4 img {
transition: all 0.7s;
}
.shrink {
height:0;
transition: all 1s;
opacity: 0;
}
/* ==================================================
FULLSCREEN
================================================== */
.fullscreen-cover {
min-height: 100vh;
background-size: cover;
background-position: center;
background-image: url(https://unsplash.it/1280/720/?image=279);
position: relative;
}
.center-title {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bg-gray {
background-color: rgba(50,50,50,0.4);
}
.bottom-title {
width: 100%;
position: absolute;
top: 75%;
transform: translateY(-50%);
}
/* ==================================================
GALLERIA
==================================================*/
/* Miniature responsice a proporsione fissa (75% = 4/3)*/
.miniatura {
display: block;
padding-bottom: 75%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Contenitore galleria: definisce un margine superiore e uno
inferiore*/
.galleria {
margin-top: 30px;
margin-bottom: 50px;
}
/* Gli elementi con classe row all'interno della galleria ha
margini destro e sinistro di -1px anzich+è di -15px */
.galleria .row {
margin-left: -1px;
margin-right: -1px;
}
/* Gli elementi con classe che contene col- all'interno della
galleria hanno padding destro e sinistro di 1px anzichè
15px. Si aggiunge poi un padding inferiore di 1px per
distanziare l'immagine da quella sotto'*/
.galleria [class*="col-"] {
padding-right: 1px;
padding-left: 1px;
padding-bottom: 1px;
}
/* =================================================
RESPONSIVE
================================================= */
/* Tablet verticali */
@media only screen and (min-width:768px) {
.mb-sm {
margin-bottom: 15px;
}
.mb-md {
margin-bottom: 30px;
}
.mb-lg {
margin-bottom: 60px;
}
}
/* Tablet orizzontali */
@media only screen and (min-width:992px) {
/* Su tablet orizzontali e desk top la classe text-center-sm allinea
il testo a sinistra */
.text-center-sm {
text-align: left;
}
}
/css/custom-fints.css
In questo foglio di stile ho inserito solo le regole di stile che riguardato i font personalizzati (Google Fonts) che ho utilizzato nelle mia pagina di esempio
@charset "utf-8";
/*
================================================================
File: /css/custom-fonts.css
Ho creato uno foglio di stile specifico per i fonts in modo da
non modificare custom.css.
In questo file:
1. Importo con la direttiva @import le regole di stile che mi
consentono di utilizzare i fonts Google
2. Imposto le regole di stile di body e di h1 - h6 e delle
classi bootstrap .h1 - .h6 per l'utilizzo dei font scelti.
=================================================================
*/
/* Importo le regole che mi consentono di utilizzare i Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700|Quicksand:300,700');
body {
font-family: 'Inconsolata', monospace;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Quicksand', sans-serif;
}
.giant {
font-size: 3.38em;
}
.huge {
font-size: 2.95em;
}
h1, .h1 {
font-size: 2.58em;
}
h2, .h2 {
font-size: 1.82em;
}
h3, .h3 {
font-size: 2.48em;
}
h4, .h4 {
font-size: 1.29em;
}
h5, .h5 {
font-size: 1.15em;
}
h6, .h6 {
font-size: 1em;
}
.small, small {
font-size: .85em;
}