[mod] update example
This commit is contained in:
Laurent Peuch
parent
a8c4a0f76f
commit
d81fec847e
@ -1,79 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/fonts.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/fonts.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/>
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>my first gallery · Example gallery</title>
|
||||
</head>
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>my first gallery · Example gallery</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
<div class="picture-text">
|
||||
<div class="picture-text-column">
|
||||
<h1>Beautiful Title</h1>
|
||||
<h2>pouet pouet</h2>
|
||||
<div class="datetime">08 December 2015</div>
|
||||
</div>
|
||||
<div class="picture-text">
|
||||
<div class="picture-text-column">
|
||||
<h1>Beautiful Title</h1>
|
||||
<h2>pouet pouet</h2>
|
||||
|
||||
|
||||
<div class="datetime">08 December 2015</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="bordered-picture baguette">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
<div class="caption">
|
||||
<a href="stuff.png ">
|
||||
<img src="stuff.png">
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="text">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="bordered-picture baguette">
|
||||
<div class="caption">
|
||||
<a href="stuff.png data-caption="plop"">
|
||||
<img src="stuff.png">
|
||||
|
||||
<div class="caption__overlay">
|
||||
<h5 class="caption__overlay__title">plop</h5>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="text">
|
||||
« voici plein de blabla à rajouter et <b>ceci est du gras</b> et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
|
||||
</section>
|
||||
|
||||
<section class="pictures-group baguette">
|
||||
|
||||
|
||||
<section class="pictures-group baguette">
|
||||
|
||||
<div class="pictures-line">
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-x600.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
<div class="picture caption">
|
||||
<a href="stuff.png" data-caption="test">
|
||||
<img src="stuff-x600.png">
|
||||
|
||||
<div class="caption__overlay">
|
||||
<h5 class="caption__overlay__title">test</h5>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-x600.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
<div class="picture caption">
|
||||
<a href="stuff.png" data-caption="test">
|
||||
<img src="stuff-x600.png">
|
||||
|
||||
<div class="caption__overlay">
|
||||
<h5 class="caption__overlay__title">test</h5>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-x600.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="picture caption">
|
||||
<a href="stuff.png" data-caption="test">
|
||||
<img src="stuff-x600.png">
|
||||
|
||||
<div class="caption__overlay">
|
||||
<h5 class="caption__overlay__title">test</h5>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -82,22 +132,26 @@
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-x600.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
<div class="picture caption">
|
||||
<a href="stuff.png" >
|
||||
<img src="stuff-x600.png">
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-x600.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="picture caption">
|
||||
<a href="stuff.png" >
|
||||
<img src="stuff-x600.png">
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -106,37 +160,45 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<div class="back-to-home">
|
||||
<hr>
|
||||
<a href="../">
|
||||
<div id="logo" src="./../static/img/logo.svg"/>
|
||||
HOME
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
baguetteBox.run(".baguette", {});
|
||||
$(".panorama").panorama_viewer({
|
||||
repeat: true,
|
||||
direction: "horizontal",
|
||||
animationTime: 150,
|
||||
easing: "linear",
|
||||
overlay: true
|
||||
});
|
||||
|
||||
<div class="back-to-home">
|
||||
<hr>
|
||||
<a href="../">
|
||||
<div id="logo" src="./../static/img/logo.svg"/>
|
||||
HOME
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
baguetteBox.run(".baguette", {});
|
||||
$(".panorama").panorama_viewer({
|
||||
repeat: true,
|
||||
direction: "horizontal",
|
||||
animationTime: 150,
|
||||
easing: "linear",
|
||||
overlay: true
|
||||
});
|
||||
</script>
|
||||
<footer>
|
||||
<p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<footer>
|
||||
<p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,26 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="static/css/fonts.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="static/css/style.css" media="screen,projection"/>
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Example gallery</title>
|
||||
</head>
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Example gallery</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="gallery-header">
|
||||
<div class="gallery-header">
|
||||
|
||||
<img id="logo" src="static/img/logo.svg" />
|
||||
|
||||
<h1>Example gallery</h1>
|
||||
<h4>The subtitle</h4><hr>
|
||||
</div>
|
||||
<h1>Example gallery</h1>
|
||||
<h4>The subtitle</h4><hr>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -33,7 +32,7 @@
|
||||
<div class="gallery-title">
|
||||
<h2>my first gallery</h2>
|
||||
<h3>some subtitle</h3>
|
||||
|
||||
<div class="gallery-datetime">08 December 2015</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
@ -48,8 +47,12 @@
|
||||
<p style="visibility: hidden">.</p>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
<footer>
|
||||
<p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -8,6 +8,7 @@ body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #FBFBFB;
|
||||
color: black;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -103,7 +104,6 @@ a {
|
||||
line-height: 1.8em;
|
||||
margin-left: 21%;
|
||||
margin-right: 21%;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
@ -112,7 +112,6 @@ a {
|
||||
font-size: 1em;
|
||||
margin-left: 21%;
|
||||
margin-right: 21%;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.paragraph h2 {
|
||||
@ -120,7 +119,6 @@ a {
|
||||
font-weight: normal;
|
||||
font-size: 2.5em;
|
||||
text-transform: uppercase;
|
||||
color: black;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
@ -148,7 +146,6 @@ footer {
|
||||
|
||||
.back-to-home hr {
|
||||
width: 14%;
|
||||
margin-top: 8em;
|
||||
color: #DDD;
|
||||
}
|
||||
|
||||
@ -197,3 +194,145 @@ footer a {
|
||||
.gallery-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.caption {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.caption__media {
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption__overlay {
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 20px 0 30px 0;
|
||||
color: white;
|
||||
transform: translateY(-100%);
|
||||
transition: transform .35s ease-out;
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.85)), color-stop(100%, transparent));
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.caption:hover .caption__overlay {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.caption h5 {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: 0 auto 10px auto;
|
||||
font-size: 20px;
|
||||
font-family: "adobe-garamond-pro", serif;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
padding: 2px 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bordered-picture .caption__overlay {
|
||||
margin-left: 11.5%;
|
||||
margin-right: 11.5%;
|
||||
}
|
||||
|
||||
.center, .center-align {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.share, .author {
|
||||
text-align: center;
|
||||
height: auto;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
padding: 0 0 10px 0;
|
||||
font-family: 'crimson', serif;
|
||||
}
|
||||
|
||||
|
||||
ul.icon {
|
||||
padding: 0;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
ul.icon li {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
ul.icon a {
|
||||
display: block;
|
||||
float: left;
|
||||
background: url(../img/social-share.png) no-repeat;
|
||||
background-size: 196px 23px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.icon li, ul.icon a {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
text-indent: -999999em;
|
||||
overflow: hidden;
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.twitter {
|
||||
background-position: 5px 0 !important;
|
||||
}
|
||||
|
||||
a.facebook {
|
||||
background-position: -57px 0 !important;
|
||||
}
|
||||
|
||||
a.pinterest {
|
||||
background-position: -114px 0 !important;
|
||||
}
|
||||
|
||||
a.google {
|
||||
background-position: -172px 0 !important;
|
||||
}
|
||||
|
||||
.author img.circle {
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.author {
|
||||
padding-bottom: 7em;
|
||||
}
|
||||
|
||||
.author-meta {
|
||||
color: #ccc;
|
||||
font-style: italic;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.author h4 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.author .desc {
|
||||
width: 350px;
|
||||
margin: auto;
|
||||
padding-bottom: 10px;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user