Vedi l'esercizio a piena pagina
/bootstrap/esercizi2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Esercizi Seconda Parte</title>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/custom.css" rel="stylesheet" type="text/css">
<link href="../css/custom-fonts.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
</head>
<body>
<!-- The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Tip: By default, the navbar is 50px high. -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/Logo-Accademia-bg-light.png" alt="Logo Accademia di Belle Arti di Urbino" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#galleria">Gallerie</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Altri esempi <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="esercizi2.html">Titolo Centrato</a></li>
<li><a href="home2.html">Titolo allineato a sinistra</a></li>
<li><a href="home3.html">Slide show</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron fullscreen-cover">
<div class="center-title bg-gray">
<h1>Titolo principale</h1>
<p>Questo è un sottotitolo</p>
</div>
</div>
<section id="galleria">
<div class="container">
<h1 class="text-center">Galleria fotografica</h1>
<div class="galleria">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=123)" href="https://unsplash.it/1280/720/?image=123" data-fancybox="gallery"></a>
</div>
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=223)" href="https://unsplash.it/1280/720/?image=223" data-fancybox="gallery"></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=323)" href="https://unsplash.it/1280/720/?image=323" data-fancybox="gallery"></a>
</div>
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=23)" href="https://unsplash.it/1280/720/?image=23"
data-fancybox="gallery"></a>
</div>
</div>
</div>
</div>
</div>
<h1 class="text-center">Galleria film</h1>
<div class="galleria">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://i.ytimg.com/vi/HhBXZJzEy-w/hqdefault.jpg)" href="https://m.youtube.com/watch?v=HhBXZJzEy-w" data-fancybox="gallery-film"></a>
</div>
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://i.ytimg.com/vi/_N04G1InBLs/hqdefault.jpg)" href="https://www.youtube.com/watch?v=_N04G1InBLs" data-fancybox="gallery-film"></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://i.ytimg.com/vi/ph5Ck5Zy6Fc/hqdefault.jpg)" href="https://www.youtube.com/watch?v=ph5Ck5Zy6Fc" data-fancybox="gallery-film"></a>
</div>
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://i.ytimg.com/vi/CPhdzJ7KPks/hqdefault.jpg)" href="https://www.youtube.com/watch?v=CPhdzJ7KPks"
data-fancybox="gallery-film"></a>
</div>
</div>
</div>
</div>
</div>
<h1 class="text-center">Galleria mappe</h1>
<div class="galleria">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=939)" href="https://www.google.it/maps/place/Flatiron+Building,+New+York,+NY+10010,+Stati+Uniti/@40.7409807,-73.9898451,18.75z/data=!4m5!3m4!1s0x89c259a40794246d:0x7f7d23c7cffbd3ad!8m2!3d40.7410065!4d-73.9896538?hl=it" data-fancybox="gallery-map"></a>
</div>
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=899)" href="https://www.google.it/maps/place/Empire+State+Building/@40.7484768,-73.9859416,19z/data=!4m5!3m4!1s0x89c259a9b3117469:0xd134e199a405a163!8m2!3d40.7484405!4d-73.9856644?hl=it" data-fancybox="gallery-map"></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=818)" href="https://www.google.it/maps/place/Liberty+Island/@40.6898353,-74.0464527,18z/data=!4m5!3m4!1s0x89c2508ed1e8d553:0x79084fab31e7ed6c!8m2!3d40.6895453!4d-74.0449292?hl=it" data-fancybox="gallery-map"></a>
</div>
<div class="col-sm-6">
<a class="miniatura" style="background-image: url(https://unsplash.it/1280/720/?image=554)" href="https://www.google.it/maps/place/Ponte+di+Brooklyn/@40.7058134,-73.9981622,17z/data=!3m1!4b1!4m5!3m4!1s0x89c25a2343ce7b2b:0x2526ddba7abd465c!8m2!3d40.7060855!4d-73.9968643?hl=it"
data-fancybox="gallery-map"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
if (!window.jQuery ) {
document.write('<script src="../js/jquery-3.2.0.min.js"><\/script>');
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.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;
}