Line 8: | Line 8: | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <style> | ||
+ | #myImg { | ||
+ | border-radius: 5px; | ||
+ | cursor: pointer; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | #myImg:hover {opacity: 0.7;} | ||
+ | |||
+ | /* The Modal (background) */ | ||
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 1; /* Sit on top */ | ||
+ | padding-top: 100px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
+ | } | ||
+ | |||
+ | /* Modal Content (image) */ | ||
+ | .modal-content { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | } | ||
+ | |||
+ | /* Caption of Modal Image */ | ||
+ | #caption { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | text-align: center; | ||
+ | color: #ccc; | ||
+ | padding: 10px 0; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /* Add Animation */ | ||
+ | .modal-content, #caption { | ||
+ | -webkit-animation-name: zoom; | ||
+ | -webkit-animation-duration: 0.6s; | ||
+ | animation-name: zoom; | ||
+ | animation-duration: 0.6s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes zoom { | ||
+ | from {-webkit-transform:scale(0)} | ||
+ | to {-webkit-transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | @keyframes zoom { | ||
+ | from {transform:scale(0)} | ||
+ | to {transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | color: #f1f1f1; | ||
+ | font-size: 40px; | ||
+ | font-weight: bold; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #bbb; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* 100% Image Width on Smaller Screens */ | ||
+ | @media only screen and (max-width: 700px){ | ||
+ | .modal-content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
Line 18: | Line 105: | ||
<div class="container-fluid"> | <div class="container-fluid"> | ||
<div class="row"> | <div class="row"> | ||
− | <div class="col-md-12 thumbnail" style="background-image:url(https:// | + | <div class="col-md-12 thumbnail" style="background-image:url(https://www.spring-green.com/wp-content/uploads/2015/12/Tree-that-needs-pruning1.jpg)"> <!-- EDIT style url (this should lead to an image) --> |
<div class="caption"> | <div class="caption"> | ||
Line 45: | Line 132: | ||
<div><a class="anchor" id="section-1"></a> | <div><a class="anchor" id="section-1"></a> | ||
<h2 class="h2">Section 1</h2> | <h2 class="h2">Section 1</h2> | ||
+ | <img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> | ||
+ | |||
+ | <!-- The Modal --> | ||
+ | <div id="myModal" class="modal"> | ||
+ | <span class="close">×</span> | ||
+ | <img class="modal-content" id="img01"> | ||
+ | <div id="caption"></div> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | // Get the modal | ||
+ | var modal = document.getElementById('myModal'); | ||
+ | |||
+ | // Get the image and insert it inside the modal - use its "alt" text as a caption | ||
+ | var img = document.getElementById('myImg'); | ||
+ | var modalImg = document.getElementById("img01"); | ||
+ | var captionText = document.getElementById("caption"); | ||
+ | img.onclick = function(){ | ||
+ | modal.style.display = "block"; | ||
+ | modalImg.src = this.src; | ||
+ | captionText.innerHTML = this.alt; | ||
+ | } | ||
+ | |||
+ | // Get the <span> element that closes the modal | ||
+ | var span = document.getElementsByClassName("close")[0]; | ||
+ | |||
+ | // When the user clicks on <span> (x), close the modal | ||
+ | span.onclick = function() { | ||
+ | modal.style.display = "none"; | ||
+ | } | ||
+ | </script> | ||
+ | |||
<blockquote class="visible-xs"> <!-- quote from masterhead duplicate --> | <blockquote class="visible-xs"> <!-- quote from masterhead duplicate --> | ||
Line 54: | Line 173: | ||
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. | Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. | ||
</p> | </p> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> <!-- /overview--> | </div> <!-- /overview--> | ||
Revision as of 12:17, 16 October 2016
Title
leader under the title, short introduction. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his.
Section 1
![Trolltunga, Norway](img_fjords.jpg)
Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 2
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 2.1
Paragraph
Paragraph
Section 2.2
Paragraph
Paragraph
Section 2.3
Paragraph
Paragraph
Section 3
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 4
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 5
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.