Esercizio realizzato insieme
/bootstrap/uno.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Primo esercizio con bootstrap</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Revalia" rel="stylesheet">
<!-- Bootstrap -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<!-- 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="#topFixedNavbar1" 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.png" width="167" height="62" alt=""/> </a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sezioni <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#galleria">Galleria</a></li>
<li><a href="#dovesiamo">Dove Siamo</a></li>
<li><a href="#">Something else here</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>
<section id="home" class="full-screen">
<header class="home-header">
<div class="container">
<h1>dal 23 giugno al 30 novembre</h1>
<h2>Leonardo in mostra</h2>
<p>Palazzo dei Diamanti Ferrara</p>
</div>
</header>
</section>
<section id="galleria" class="page-section">
<div class="container">
<header class="section-header">
<h1 class="text-center">Galleria</h1>
</header>
<div class="row">
<div class="col-sm-4">
<a href="http://unsplash.it/1280/720/?image=128" style="background-image:url(http://unsplash.it/1280/720/?image=128)" class="gallery-item" data-fancybox="gallery" data-type="image" data-caption="Paesaggio autunnale">
<div class="gallery-dida">Paesaggio autunnale</div>
</a>
</div>
<div class="col-sm-4">
<a href="http://unsplash.it/1280/720/?image=129" style="background-image:url(http://unsplash.it/1280/720/?image=129)" class="gallery-item" data-fancybox="gallery" data-type="image" data-caption="Pesaggio estivo">
<div class="gallery-dida">Paesaggio estivo</div>
</a>
</div>
<div class="col-sm-4">
<a href="http://unsplash.it/1280/720/?image=145" style="background-image:url(http://unsplash.it/1280/720/?image=145)" class="gallery-item" data-fancybox="gallery" data-type="image" data-caption="Paesaggio invernale">
<div class="gallery-dida">Paesaggio invernale</div>
</a>
</div>
</div>
</div>
</section>
<section id="dovesiamo" class="page-section dark">
<div class="container">
<header class="section-header">
<h1 class="text-center">Dove siamo</h1>
</header>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2845.6066984890335!2d11.334380514512553!3d44.50272510510126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477fd49af6627969%3A0xbffdcb1d065812ec!2sMAMbo!5e0!3m2!1sit!2sit!4v1490803655149" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
</body>
</html>
/css/custom.css
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: 400;
font-size: 18px;
color: #333333;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Revalia', coursive;
font-weight: 400;
}
.navbar-inverse{
background-color: darkmagenta;
border-color: transparent;
}
.navbar-inverse .navbar-nav > li > a {
color: #dddddd;
}
.navbar-brand {
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand > img {
max-height: 100%;
width: auto;
}
.full-screen {
height: 100vh;
width:100%;
background-image: url(http://unsplash.it/1600/900/?image=255);
background-size: cover;
background-position: center;
position: relative;
}
.home-header {
background-color: rgba(0,0,0,0.6);
color: white;
padding: 10px 15px;
position: absolute;
bottom: 50px;
width: 100%;
}
.gallery-item {
display: block;
width: 100%;
padding-bottom: 100%;
position: relative;
background-size: cover;
background-position: center;
}
.gallery-dida {
position: absolute;
bottom:0;
left: 0;
width: 100%;
text-align: center;
padding: 30px;
background-color: rgba(0,0,0,0.6);
color: white;
}
.page-section {
padding-top: 100px;
padding-bottom: 100px;
}
.dark {
background-color:#555555;
color:white;
}
Altri esempi
Sezione contenente un form per inviare dati
<section class="page-section dark" id="dati">
<div class="container">
<header>
<h1>Informazioni</h1>
</header>
</div>
<form>
<div class="container">
<div class="row">
<div class="form-group col-md-6">
<label>Nome</label>
<input type="text" class="form-control" placeholder="Inserisci il nome">
</div>
<div class="form-group col-md-6">
<label>Cognomeo</label>
<input type="text" class="form-control" placeholder="Idirizzo completo">
</div>
</div>
<div class="form-group">
<label>Indirizzo</label>
<input type="text" class="form-control" placeholder="Url della pagina web">
</div>
<div class="form-group">
<label>Pagina web</label>
<input type="text" class="form-control" placeholder="Url della pagina facebook">
</div>
<div class="form-group">
<label>Messaggio</label>
<textarea class="form-control" rows="12" placeholder="Descrizione e motivazioni"></textarea>
</div>
</div>
</form>
</section>
Sezione contenente un video
<section class="page-section" id="video">
<div class="container">
<header>
<h1>Questo è un video</h1>
</header>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/U-dFEiRxjow" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
Attenzione! Gli esempi che seguono funzionano correttamente solo quando sono pubblicati su un sito web
Sezione galleria di immagini con iconcine che rimandano all'immagine ingrandita o a google maps
<!-- ATTENZIONE Per i Link a Google Map devi usare il link di condivisione (Condividi Link) non il codice di incorporamento. Tieni conto che fancybox per i link di Google Maps funziona solo quando è online -->
<section class="page-section section-galleria" id="galleria2">
<div class="container">
<header>
<h1>Galleria</h1>
</header>
<div class="row">
<div class="col-md-4">
<div class="gallery-item" style="background-image:url(http://unsplash.it/1600/900/?image=270)" >
<div class="gallery-dida">Cliccare qui sotto<br>
<a data-fancybox data-type="image" data-caption="Bella foto" href="http://unsplash.it/1600/900/?image=270"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a> <a data-fancybox data-caption="Barberia di <br>via testoni" href="https://www.google.it/maps/place/Liberty+Island/@40.6898353,-74.0464527,18z/data=!3m1!4b1!4m5!3m4!1s0x89c2508ed1e8d553:0x79084fab31e7ed6c!8m2!3d40.6895453!4d-74.0449292?hl=it"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a> </div>
</div>
</div>
<div class="col-md-4">
<div class="gallery-item" style="background-image:url(http://unsplash.it/1600/900/?image=271)" >
<div class="gallery-dida">Cliccare qui sotto<br>
<a data-fancybox data-type="image" data-caption="Bella foto" href="http://unsplash.it/1600/900/?image=271"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a> <a data-fancybox data-caption="Barberia di <br>via testoni" href="https://www.google.it/maps/place/Empire+State+Building,+350+5th+Ave,+New+York,+NY+10118,+Stati+Uniti/@40.7484444,-73.9878441,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a9aeb1c6b5:0x35b1cfbc89a6097f!8m2!3d40.7485413!4d-73.9857577?hl=it"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a> </div>
</div>
</div>
<div class="col-md-4">
<div class="gallery-item" style="background-image:url(http://unsplash.it/1600/900/?image=272)" >
<div class="gallery-dida">Cliccare qui sotto<br>
<a data-fancybox data-type="image" data-caption="Bella foto" href="http://unsplash.it/1600/900/?image=272"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a> <a data-fancybox data-caption="Barberia di <br>via testoni" href="https://www.google.it/maps/place/Golden+Gate+Bridge/@37.8103664,-122.4680066,14z/data=!4m5!3m4!1s0x808586deffffffc3:0xcded139783705509!8m2!3d37.8199286!4d-122.4782551?hl=it"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a> </div>
</div>
</div>
</div>
</div>
</section>
Lo stesso esempio live
See the Pen Galleria con link a Google Maps by Bruno Migliaretti (@magicbruno) on CodePen.
Se clicchi su "Editi on Code Pen" puoi provare a modificare il codice.
Sezione galleria di immagini con iconcine che rimandano all'immagine ingrandita o a un video youtube
<section id="galleria" class="page-section section-galleria">
<div class="container">
<header>
<h1>Galleria filmati</h1>
</header>
<div class="row">
<div class="col-md-4">
<div class="gallery-item" style="background-image:url(../img/band-1.jpg)" >
<div class="gallery-dida">Cliccare qui sotto<br>
<a data-fancybox data-type="image" data-caption="Muse" href="../img/band-1.jpg"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a> <a data-fancybox data-caption="Muse" href="https://www.youtube.com/watch?v=b4ozdiGys5g"><span class="glyphicon glyphicon-film" aria-hidden="true"></span></a> </div>
</div>
</div>
<div class="col-md-4">
<div class="gallery-item" style="background-image:url(../img/nosferatu.jpg)" >
<div class="gallery-dida">Cliccare qui sotto<br>
<a data-fancybox data-type="image" data-caption="Nosferatu il principe della notte" href="http:../img/nosferatu.jpg"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a> <a data-fancybox data-caption="Nosferatu il principe della notte" href="https://www.youtube.com/watch?v=dCT1YUtNOA8" aria-hidden="true"><span class="glyphicon glyphicon-film"></span></a> </div>
</div>
</div>
<div class="col-md-4">
<div class="gallery-item" style="background-image:url(../img/un-chien-andalou.jpg)" >
<div class="gallery-dida">Cliccare qui sotto<br>
<a data-fancybox data-type="image" data-caption="Bella foto" href="../img/un-chien-andalou.jpg"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></a> <a data-fancybox data-caption="Surrealismo..." href="https://www.youtube.com/watch?v=pjpT9h-ONxo"><span class="glyphicon glyphicon-film" aria-hidden="true"></span></a> </div>
</div>
</div>
</div>
</div>
</section>
Lo stesso esempio su Code Pen (con immagini random e video diversi)
See the Pen Galleria con link a YouTube by Bruno Migliaretti (@magicbruno) on CodePen.