<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ---------->
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700,400italic|Montserrat:400,700|Cardo:400italic|Advent+Pro:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HOME -->
<div id="home" class="content-section">
<div class="layer">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="title">
<h1>Vincent van Gogh</h1></h1>
<h5>A PORTFOLIO BY ADAM FOSTER</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-7">
<h1>About</h1>
<p class="lead">Objective: Build a CodePen.io app that successfully reverse-engineers <a href="https://codepen.io/ThiagoFerreir4/full/eNMxEp" target="_blank">this <em class="fa fa-external-link"></em></a></p>
</div>
<p>Perhaps the most famous artist in the world, Vincent Van Gogh (1853-1890) is perceived by many as the 'mad' artist, the man who painted in a frenzy or simply the tormented soul who cuts off his ear. His artistic genius is often overshadowed by those who see his paintings as mere visual manifestations of his troubled mind. Whilst in part this may be true, in reality his innovative and unique artistic style was of enormous importance to a host of artists who followed in his wake. Even when openly influenced by his predecessors or contemporaries his art remained identifiably his own, developing a distinctive style that failed to be accepted by the art-buying public in his own time.</p>
<div class="col-sm-4 col-lg-5 hidden-xs">
<img src="https://s4.postimg.org/wzkxhfy59/lego_dimensions_patent.jpg" alt="" class="pull-right img-responsive">
</div>
</div>
</div>
</div>
<!-- PORTFOLIO -->
<div id="portfolio" class="content-section">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Paintings</h1>
<p class="lead">Below you'll find some of his greatest works</p>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://www.vincentvangogh.org/images/paintings/sunflowers.jpg" alt="Project Dummy">
<div class="caption">
<h4>Sunflowers</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://www.vincentvangogh.org/images/paintings/the-starry-night.jpg" alt="Project Dummy">
<div class="caption">
<h4>Starry Night</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://www.vincentvangogh.org/images/paintings/cypresses.jpg" alt="Project Dummy">
<div class="caption">
<h4>Cypresses</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://dg19s6hp6ufoh.cloudfront.net/pictures/17944/large/a-field-of-yellow-flowers-1889%281%29.jpeg?1339167442" alt="Project Dummy">
<div class="caption">
<h4>Dandelions</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://www.vincentvangogh.org/images/paintings/irises.jpg" alt="Project Dummy">
<div class="caption">
<h4>Irises</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
<p class="text-right">
<a href="http://bootsnipp.com/iframe/xbElW" target="_blank">Best viewed full screen</a><br>
<a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fbootsnipp.com%2Fiframe%2FxbElW" target="_blank"><small>HTML</small><sup>5</sup></a>
</p>
</div>
/*--- GENERAL STYLES ---*/
body { font-size: 16px; line-height: 1.5em; font-family: 'Quattrocento Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', serif; font-weight: 700; color: #1a1a1a; }
.content-section { min-height: 100vh; padding-top: 70px; padding-bottom: 20px; }
.content-section h1 { color: #9C9C9C; font-weight: 400; font-size: 30px; display: inline-block; }
.content-section h1:after { content: ''; display: block; border-bottom: 1px solid #DFDFDF; padding-top: 3px; }
.content-section p.lead { font-family: 'Cardo', serif; font-size: 19px; line-height: 1.35em; margin-bottom: 25px; }
.content-section p.lead em { font-size: 14px; }
.content-section p em { font-size: 14px;}
.content-section p mark em { font-size: inherit;}
.content-section img.pull-right { border:1px solid #DFDFDF; margin-top: 140px; }
@media screen and (min-width: 768px) {
.content-section { padding-top: 130px; }
.content-section h1 { font-size: 34px; }
.content-section p.lead { margin-bottom: 30px; }
}
@media screen and (min-width: 992px) {
.content-section { padding-top: 160px; }
.content-section h1 { font-size: 38px; }
.content-section h1:after { padding-top: 5px; }
.content-section p.lead { font-size: 21px; margin-bottom: 35px; }
}
@media screen and (min-width: 1200px) {
.content-section { padding-top: 5%; }
.content-section h1:after { padding-top: 7px; }
.content-section p.lead { font-size: 22px; margin-bottom: 35px; }
}
/*--- HOME ---*/
#home {
background: url('https://www.vincentvangogh.org/images/paintings/almond-blossom.jpg') no-repeat center center fixed;
background-size: cover; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); text-align: center;
background-color:#171717;
}
.layer{
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#home h1 { font-family: 'Advent Pro', sans-serif; font-size: 96px; font-weight: 400; color: #fff; display: inline-block; margin: 0; padding: 0; margin-top: 50%; }
#home h5 { font-size: 16px; color: #fff; font-weight: 600;}
@media screen and (min-width: 768px) {
#home h1 { font-size: 120px; line-height: 114px; margin-top:50%;}
#home h5 { font-size: 19px; }
}
@media screen and (min-width: 992px) {
#home h1 { font-size: 132px; margin-top: 50%; }
#home h5 { font-size: 21px; }
}
@media screen and (min-width: 1200px) {
#home h1 { font-size: 142px; line-height: 124px; }
#home h5 { font-size: 24px; }
}
#about h1 { color: #9C9C9C; font-weight: 400; font-size: 30px; display: inline-block; }
#about p.lead { font-family: 'Cardo', serif; font-size: 19px; line-height: 1.35em; margin-bottom: 25px; }
#about h1:after { content: ''; display: block; border-bottom: 1px solid #DFDFDF; padding-top: 3px; }
#about{
margin:5%;
}
#about h1 { color: #9C9C9C; font-weight: 400; font-size: 30px; display: inline-block; }
#about p.lead { font-family: 'Cardo', serif; font-size: 19px; line-height: 1.35em; margin-bottom: 25px; }
#about h1:after { content: ''; display: block; border-bottom: 1px solid #DFDFDF; padding-top: 3px; }
#about{
margin:5%;
}
/*--- PORTFOLIO ---*/
.content-section .thumbnail { position: relative; overflow: hidden; cursor: pointer; }
.content-section .thumbnail * { transition: all .25s; }
.content-section .thumbnail h4 { font-size: 19px; font-weight: 400; }
.content-section .thumbnail p { line-height: 24px; }
.content-section .thumbnail img { width:100%; height:100%; margin-bottom:1em;}
/*--- CONTACT ---*/
#contact {
background: url('https://s18.postimg.org/z7eckrogp/seagulls_984529_1920.jpg') no-repeat top center fixed;
background-size: cover;
}
.social-cont { max-width: 400px; }
a.btn-default { height: 44px; border-radius: 0; border: 0; width: 180px; text-align: left; margin: 0 5px 10px 0; position: relative; background-color: #FFFFFF; padding: 10px; transition: all .35s; padding: 0; line-height: 47px; overflow: hidden; }
a.btn-default i { display: block; float: left; position: absolute; left: 12px; top: 10px; font-size: 24px; color: #FFFFFF; position: relative; z-index: 1; }
a.btn-default span { position: relative; z-index: 1; padding-left: 30px; }
a.btn-default:after { content: ''; display: block; width: 44px; height: 44px; position: absolute; top: 0; left: 0; z-index: 0; transition: all .35s; }
a.twitter-btn:after { background-color: #55ACEE; }
a.github-btn:after { background-color: #171515; }
a.linkedin-btn:after { background-color: #0077B5; }
a.fcc-btn:after { background-color: #4B2B0D; }
a.btn-default:hover, a.btn-default:focus { background-color: #FFFFFF; color: #FFFFFF; }
a.btn-default:hover:after { width: 100%; }
$(document).ready(function(){
$(".scroll").click(function(event){
event.preventDefault();
$("html,body").animate({scrollTop:$(this.hash).offset().top}, 500);
$('.navbar-default a').removeClass('selected');
$(this).addClass('selected');
});
});
