<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/crisbnk/pen/MaJYGj?depth=everything&limit=all&order=popularity&page=11&q=thumbnail&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">html, body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
}
body {
background-color: #ddd;
}
body, main, aside, footer {
margin-top: 50px;
}
p {
font-family: 'Merriweather', serif;
}
/*HEADER*/
header, .navbar-default {
background-color: #ddd;
}
.navbar-default {
border-color: none !important;
}
.navbar-fixed-top {
border-width: 0;
}
#brand, .navbar-default .navbar-nav>li>a, header h1, .arrow-down {
color: #095057;
}
.navbar-default .navbar-nav>li>a:hover {
color: #095057;
}
header nav a:after, .navbar-header a:after {
content: '';
display: block;
margin: auto;
height: 1px;
width: 0%;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
header nav a:hover:after, .navbar-header a:hover:after {
width: 100%;
background: #D38947;
}
.welcome {
padding: 200px;
background: url("https://unsplash.it/g/1200/600/?image=6") center center no-repeat fixed;
background-size: cover;
}
.upAndDown {
transition: color 0.3s linear;
}
.upAndDown:hover {
color: #D38947;
}
.arrow-down a {
color: #095057;
}
.arrow-down a:hover {
transition: color 0.3s linear;
color: #D38947;
}
/*MAIN*/
main {
background-color: #ddd;
}
main h2 {
padding: 30px 0;
color: #D38947;
position: relative;
text-align: center;
}
main h2 span {
background: #ddd;
padding: 0 15px;
position: relative;
z-index: 1;
}
main h2:before {
background: #D38947;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 100%;
}
h2:before {
left: 0;
}
main .container {
padding-bottom: 40px;
border-bottom: 1px solid #D38947
}
.thumbnail {
position:relative;
overflow:hidden;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: #D38947;
width: 100%;
height: 100%;
padding-top: 2%;
opacity: 0;
text-align: center;
color: #fff !important;
z-index: 2;
}
.thumbnail .caption {
padding: 25% 0;
}
/*ASIDE*/
aside {
background-color: #D38947;
padding: 200px 0 200px 0;
}
aside h3 {
display: inline-block;
}
.profile-picture {
width: 150px;
height: 100%;
}
/*FOOTER*/
footer {
background-color: #ddd;
color: #095057;
margin-bottom: 30px;
}
footer .social {
margin: 80px 0;
}
footer h4 {
margin-bottom: 40px;
}
footer a {
color: #095057;
transition: color 0.3s linear;
margin-right: 20px;
}
footer a:hover {
color: #D38947;
}
footer ul, footer small {
display: inline;
}
footer small {
margin: 5px 20px;
font-size: 0.7em;
}
.list-inline>li {
margin-top: 20px;
}
/*MEDIA QUERY*/
@media screen and (max-width: 990px) {
.thumbnail .caption {
padding: 20% 0;
}
.profile-picture.pull-right {
float: none !important;
margin: 40px auto 0 auto;
}
.description {
text-align: center;
}
}
@media screen and (max-width: 770px) {
.navbar-default .navbar-collapse {
border: none;
text-align: center;
}
.navbar-default .navbar-collapse>li>a {
display: inline-block;
clear: both;
}
.thumbnail .caption {
padding: 12% 0;
}
.navbar-default .navbar-toggle {
border: 1px solid #095057;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #095057;
}
header nav a:hover:after, .navbar-header a:hover:after {
width: min-content;
background: #D38947;
}
}
@media screen and (max-width: 660px) {
.welcome h1 {
font-size: 4em;
}
}</style></head><body>
<!--HEADER / Logo and Navigation-->
<header>
<div class="container-fluid navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a id="brand" href="#welcome" class="navbar-brand .sliding-u-r-l">CRISBNK</a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse" id="myCollapsible">
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid welcome" id="welcome">
<h1 class="text-center">
<span class="upAndDown">W</span>
<span class="upAndDown">E</span>
<span class="upAndDown">L</span>
<span class="upAndDown">C</span>
<span class="upAndDown">O</span>
<span class="upAndDown">M</span>
<span class="upAndDown">E</span>
<span class="upAndDown">!</span>
</h1>
<div class="arrow-down text-center">
<a href="#portfolio"><i class="fa fa-angle-down fa-2x"></i></a>
</div>
</div>
</header>
<!--MAIN / Portfolio-->
<main role="main" id="portfolio">
<div class="container">
<h2><span>PORTFOLIO</span></h2>
<section>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="https://codepen.io/crisbnk/full/MapvyM" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 1" alt="placeholder">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 2" alt="placeholder">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 3" alt="placeholder">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 4" alt="placeholder">
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 5" alt="placeholder">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 6" alt="placeholder">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 7" alt="placeholder">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#" target="_blank">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
</div>
<img data-src="holder.js/100px200?bg=095057&text=Portfolio 8" alt="placeholder">
</div>
</a>
</div>
</div>
</section>
</div>
</main>
<!--ASIDE / About informations-->
<aside class="about" id="about">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 description">
<h3>Something about me...</h3>
<p>I'm Cristiano Bianchi, a mechanical engineer and aspiring web developer. I'm currently living in Florence, Italy.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="profile-picture pull-right">
<img src="https://avatars2.githubusercontent.com/u/11244339?v=3&s=400" class="img-responsive img-circle" alt="profile-picture">
</div>
</div>
</div>
</div>
</aside>
<!--FOOTER / Contact informations-->
<footer id="contact">
<div class="container">
<div class="row text-center social">
<h4>CONTACT</h4>
<ul class="list-unstyled list-inline">
<li>
<a href="mailTo:cristiano.bianchi@gmail.com" target="_blank"><i class="fa fa-envelope fa-2x"></i></a>
</li>
<li>
<a href="https://plus.google.com/100942463708634376614/about" target="_blank"><i class="fa fa-google-plus-square fa-2x"></i></a>
</li>
<li>
<a href="https://twitter.com/crisbnk" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</li>
<li>
<a href="https://www.facebook.com/cristiano.bianchi.509" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
</li>
<li>
<a href="https://github.com/crisbnk" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</li>
<li>
<a href="https://codepen.io/crisbnk" target="_blank"><i class="fa fa-codepen fa-2x"></i></a>
</li>
<li>
<a href="https://www.freecodecamp.com/crisbnk" target="_blank"><i class="fa fa-fire fa-2x"></i></a>
</li>
</ul>
</div>
<div class="row">
<small class="pull-right">© 2015 CRISBNK</small>
</div>
</div>
</footer>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.8.1/holder.min.js'></script>
<script >$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
$('.thumbnail').hover(
function(){
$(this).find('.caption').animate({opacity: 0.8}, 400); //.fadeIn(250)
},
function(){
$(this).find('.caption').animate({opacity: 0}, 400); //.fadeOut(205)
}
);
$("button").hover(function(){
$(".icon-bar").css("background-color", "#D38947");
$(".navbar-default .navbar-toggle").css({"border": "1px solid #D38947", "background-color": "transparent"});
},
function(){
$(".icon-bar").css("background-color", "#095057");
$(".navbar-default .navbar-toggle").css({"border": "1px solid #095057", "background-color": "transparent"});
});
});
//# sourceURL=pen.js
</script>
</body></html>
