<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
<div class="container">
<h1 class="title">Slide</h1>
<img class="logo" src="http://sarahcarneycreative.com/codepens/images/penguin.png">
</div>
</header>
<div class="container">
<a id="back-to-top">Back to Top</a>
<div class="gallery">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
<div class="slide"></div>
<div class="gallery two">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
<div class="fargo"></div>
<div class="gallery three">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-stuff">
<div class="footer-logo"></div>
<h2>Slide</h2>
<p>Walking in a winter wonderwhat. </p>
<a class="social twitter" href="https://twitter.com/sarahsellaphix">Twitter</a>
<a class="social codepen" href="https://twitter.com/sarahsellaphix">CodePen</a>
<a class="social linkedin" href="https://twitter.com/sarahsellaphix">LinkedIn</a>
</div>
<div class="blood-orange"></div>
</div>
</footer>
<script>
// When the window loads, note the scroll position
// and add and remove classes accordingly
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("sticky");
} else {
$('header').removeClass("sticky");
};
});
// Make the Back To Top slide smoothly
$('#back-to-top').each(function() {
$(this).click(function() {
$('html,body').animate({scrollTop: 0 }, 'slow');
return false;
})
})
</script>
/* ------------------- */
/* TEMPLATE -- */
/* ----------------- */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://sarahcarneycreative.com/codepens/webfonts/font-awesome-4.5.0/css/font-awesome.min.css);
body {
height: 100%; width: 100%;
margin: 0;
color: whitesmoke;
font-size: 16px;
font-family: 'Lato';
background: url(http://sarahcarneycreative.com/codepens/images/bgs/stardust.png);
}
h1 {
padding-bottom: 10px;
font-size: 32px;
border-bottom: 1px solid tomato;
}
h2 { font-size: 26px; }
h3 { font-size: 18px; }
p { margin: 15px 0; line-height: 24px; color: gainsboro; }
a { color: dodgerblue; text-decoration: none; border-bottom: 1px dotted; }
a:hover { color: tomato; }
.container {
max-width: 960px;
height: 100%;
margin: 0 auto;
padding: 20px;
}
/* ------------------- */
/* STICKY HEADER -- */
/* ----------------- */
/* Header */
header {
padding: 10px 20px;
background-color: whitesmoke;
transition: 0.5s;
}
header .container {
padding: 0;
}
h1.title {
float: left;
color: #111;
font-family: 'Lato';
font-weight: 900;
text-transform: lowercase;
letter-spacing: 2px;
border-bottom: 0;
}
img.logo { height: 60px; width: 60px; }
/* Sticky */
/* added to the header with jQuery */
header.sticky {
position: fixed;
left: 0; right: 0;
height: 60px;
padding: 20px 0 10px 0;
box-shadow: 0 5px 15px black;
}
.sticky img.logo { height: 40px; width: 40px; }
.sticky h1.title {
padding: 10px 0 0 0;
margin: 0;
font-size: 24px;
}
/* ------------------- */
/* EVERYTHING ELSE -- */
/* ----------------- */
/* Back to Top */
a#back-to-top {
position: fixed;
bottom: 0; right: 0;
margin: 20px;
color: whitesmoke;
text-shadow: 0 0 10px black;
border: none;
transition: 0.5s;
cursor: pointer;
}
a#back-to-top:before {
content: '\f01b';
font-family: 'FontAwesome';
margin-right: 10px;
}
a#back-to-top:hover { color: dodgerblue; }
/* Gallery */
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* combining styles common to every image */
.gallery .pic,
.gallery.two .pic,
.gallery.three .pic {
display: block;
height: 300px; width: 33.33%;
background-position: top center, 0 0;
background-blend-mode: color;
cursor: pointer;
transition: 0.5s;
}
/* Images */
.gallery .pic:nth-child(1) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://unsplash.it/350/?image=755);
background-size: 300px 1000px, cover;
}
.gallery .pic:nth-child(2) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://unsplash.it/350/?image=730);
background-size: 300px 1000px, cover;
}
.gallery .pic:nth-child(3) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://unsplash.it/350/?image=718);
background-size: 300px 1000px, cover;
}
.gallery .pic:nth-child(4) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://unsplash.it/300/?image=905);
background-size: 300px 1000px, cover;
}
.gallery .pic:nth-child(5) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://unsplash.it/350/?image=559);
background-size: 300px 1000px, cover;
}
.gallery .pic:nth-child(6) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://unsplash.it/350/?image=691);
background-size: 300px 1000px, cover;
}
.gallery.two .pic:nth-child(1) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/penguin1.jpg);
background-size: 300px 1000px, cover;
}
.gallery.two .pic:nth-child(2) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/penguin3.jpg);
background-size: 300px 1000px, cover;
}
.gallery.two .pic:nth-child(3) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/penguin4.jpg);
background-size: 300px 1000px, cover;
}
.gallery.two .pic:nth-child(4) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/penguin5.jpg);
background-size: 300px 1000px, cover;
}
.gallery.two .pic:nth-child(5) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/penguin2.jpg);
background-size: 300px 1000px, cover;
}
.gallery.two .pic:nth-child(6) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/penguin6.jpg);
background-size: 300px 1000px, cover;
}
.gallery.three .pic:nth-child(1) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/snow1.jpg);
background-size: 300px 1000px, cover;
}
.gallery.three .pic:nth-child(2) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/snow2.jpg);
background-size: 300px 1000px, cover;
}
.gallery.three .pic:nth-child(3) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/snow3.jpg);
background-size: 300px 1000px, cover;
}
.gallery.three .pic:nth-child(4) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/snow4.jpg);
background-size: 300px 1000px, cover;
}
.gallery.three .pic:nth-child(5) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/snow5.jpg);
background-size: 300px 1000px, cover;
}
.gallery.three .pic:nth-child(6) {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/snow6.jpg);
background-size: 300px 1000px, cover;
}
.gallery .pic:hover,
.gallery.two .pic:hover,
.gallery.three .pic:hover { background-position: bottom center, 0 0; }
@media (max-width: 800px) {
.gallery .pic,
.gallery.two .pic,
.gallery.three .pic { width: 50%; }}
@media (max-width: 580px) {
.gallery .pic
.gallery.two .pic,
.gallery.three .pic { width: 100%; }}
/* Big Ones */
.slide, .fargo {
width: 100%; height: 300px;
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/slide.jpg);
background-size: 100% 600px, cover;
background-position: top center, 0 0;
background-blend-mode: color;
transition: 0.5s;
}
.fargo {
background:
linear-gradient(black, rgba(0,0,0,0)),
url(http://sarahcarneycreative.com/codepens/images/fargo.png);
background-size: 100% 600px, cover;
}
.slide:hover,
.fargo:hover { background-position: bottom center, 0 0; }
/* Footer */
footer {
width: 100%; height: 300px;
background-color: #222;
}
footer .container { padding: 0; }
.footer-stuff {
width: 40%;
box-sizing: border-box;
float: left;
padding: 20px;
}
.footer-logo {
height: 60px; width: 60px;
float: left;
margin-right: 20px;
background: url(http://sarahcarneycreative.com/codepens/images/penguin.png),
whitesmoke;
background-size: 100%, cover;
}
footer h2 {
color: whitesmoke;
font-family: 'Lato';
font-weight: 900;
text-transform: lowercase;
letter-spacing: 3px;
border-bottom: 0;
}
/* Social Media */
a.social{
display: inline-block;
margin-bottom: 10px;
float:left;
clear: left;
color: whitesmoke;
border: none;
transition: all 0.5s ease;
}
a.social:hover { color: dodgerblue; }
a.twitter:before {
content: '\f081';
font-family: 'FontAwesome';
margin-right: 10px;
}
a.codepen:before {
content: '\f1cb';
font-family: 'FontAwesome';
margin-right: 10px;
margin-left: -2px;
}
a.linkedin:before {
content: '\f08c';
font-family: 'FontAwesome';
margin-right: 10px;
}
/* Sigh */
.blood-orange {
width: 60%; height: 100%;
box-sizing: border-box;
float: right;
background:
linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
url(http://sarahcarneycreative.com/codepens/images/blood-orange.gif);
background-size: 100% 600px, cover;
background-position: top center, 0 0;
background-blend-mode: color;
}
@media (max-width: 580px) {
.footer-stuff { width: calc(100% - 40px);}
.blood-orange { width: 100%; }}
@media (min-width: 581px) and (max-width: 1015px) {
.blood-orange { width: calc(60% - 20px); margin-right: 20px; }}
