<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>
<nav class="nav-bar" role='navigation'>
<a href="#" class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.8 60.2">
<path fill="#928E88" d="M24.4 32c-1.2 2.3-2.4 4.6-3.8 6.8-.6 1-1.5 1.8-2.5 2.4-2.7 1.7-5 1-7.1-2.2-.4.8-.6 1.6-1 2.3-.1.2-.5.3-.7.5-.1-.3-.2-.6-.4-1v-.1c2.1-3.9 1.7-8.3 2.7-12.4.7-3.1 2-6 3.9-8.5.3-.4.9-.6 1.4-.9.1.6.4 1.3.3 1.8-.7 2.5-1.6 5-2.3 7.3 1.6-1 3.4-1.9 5-3.1 1.2-.9 2-2.2 3-3.4.1-.1.2-.3.1-.4-1.1-1.4.2-2.1.9-3.1-.2-1-1-1.5-2.1-1.7-2.8-.5-5.4.2-8 1.1-1.4.5-2.1 1.2-2.4 2.7-1.4 6.1-3 12.2-4.5 18.3-.2.9-.3 1.9-.6 2.8-.1.3-.7.5-1 .7-.1-.4-.3-.9-.2-1.2l4.8-19c.2-.8.3-1.5.5-2.3-.1-.1-.3-.2-.4-.2-.5.7-1.1 1.4-1.6 2.1-.2.2-.5.5-.8.4-.4 0-.8-.2-1-.5-.1-.2.1-.8.3-.9 1.6-1.1 3.2-2.4 4.9-3.3 2.8-1.4 5.8-2.4 9.1-2.1 2.1.2 2.5.4 4 1.8 2.8-1.4 5.5-2.8 8.2-4 1-.4 2.1-.6 3.1-.8 2-.2 3.3.7 3.6 2.7.2 1.3 0 2.7 0 3.8.7.3 1.8.5 2.3 1.2.5.7.4 1.8.6 2.8 1.7-.3 2.8-1 3.1-3.1.5-3.5 1.4-7 2.1-10.5.1-.7.4-1.4.7-2 .2-.3.6-.4.9-.7.1.4.3.8.2 1.1-.6 2.7-1.4 5.5-2 8.2-.4 1.6-.6 3.3-.8 5 .9-1.6 1.8-3.2 2.7-4.7 2.8-4.6 5.7-9.1 9.9-12.6 2.5-2 5.2-3.5 8.6-3.4 1.7.1 2.2.9 1.4 2.4-.5.9-1.2 1.7-1.9 2.5-5.1 5.9-11 11.1-17.1 16-.1.1-.3.2-.3.3.7 1 1.5 2 2.2 3 .8-.4 1.4-2.2 2.5-1.2 1.2-.3 2.2-.5 3.1-.7.3-.1.5-.4.8-.5.7-.2 1.4-.4 2.2-.6 0 .1.1.3.1.4 1.6-1.2 3.3-2.3 4.9-3.5.3-.2.5-.5.8-.5.8-.1 1.5 0 2.3-.1-.2.7-.1 1.5-.5 2-3.8 4.9-5.1 10.8-7.4 16.6 3.3-.9 6.3-1.8 9.3-2.5 2.9-.7 5.9-1.3 8.8-1.8.4-.1.8.3 1.3.4-.4.3-.7.7-1.1.8-5.9 1.5-11.8 2.9-17.6 4.4-.8.2-1.2.6-1.4 1.3-.8 3.6-1.6 7.1-2.3 10.7-.2 1.2-.8 1.7-2 1.2-.7-.3-1.3-.7-1.9-1.2-3.8-2.9-8.1-4-12.7-4.4-.6 0-1.2.2-1.7.5C31 49.3 22.1 53.3 13.1 57c-3.1 1.3-6.4 2.2-9.7 3.1-.9.3-2.3.2-3-.4-1-.8-.1-2.1.4-2.9 1.7-2.9 4.1-5.2 7-6.8 8.3-4.6 17.2-7.3 26.8-7 1 0 2 0 3 .2 2.3.5 4.3-.1 6.4-.9 4.8-1.9 9.7-3.6 14.6-5.3.9-.3 1.3-.8 1.7-1.7 1.3-3.6 2.6-7.2 4-10.8-1.9-.4-1.9-.4-2.1-2.4-.5.8-1 1.7-1.6 2.5-.5.7-.7 2-2.1 1.7.2-.8.4-1.7.7-2.5.1-.4.5-.7.7-1-.1-.1-.2-.2-.4-.3-.8 1.1-1.6 2.2-2.3 3.3-.5.7-.8 1.6-1.2 2.4-.1.2-.7.4-.8.4-.2-.2-.5-.7-.4-.9.3-1 .8-1.9 1-3-.3.6-.7 1.1-1 1.7-.4.7-.6 1.5-1 2.2-.2.3-.7.4-1 .5-.1-.4-.4-.8-.3-1.1.4-1.1 1-2.1 1.5-3.2-.1-.1-.2-.2-.3-.2-.8 1.2-1.6 2.3-2.4 3.5-.6 1-1.1 2.2-1.7 3.2-.2.3-.7.3-1.1.4-.1-.4-.3-.8-.2-1.1.5-1.1 1.1-2.2 1.6-3.3.3-.6.6-1.3.7-2 .3-1.2.1-2.3-1.3-2.7-1.4-.4-2.2.5-2.7 1.5-.7 1.6-1.2 3.2-1.7 4.9-1.1 3.6-2.3 7.2-3.4 10.7-.1.2-.1.4-.2.5l-1.1 1.1c-.1-.5-.4-1.1-.3-1.5.9-3.2 1.9-6.5 3-9.7.5-1.6 1.1-3.1 1.7-4.8-1.8.7-2.8 1.7-3.3 3.6-1.3 4.6-3.6 8.6-7.8 11.2-3.2 1.9-6.2 1.8-8.5-1.3-.5.3-1 .6-1.5.8-.2-.5-.6-1-.5-1.4.1-.6.5-1.1 1-1.6.1-1.5.2-3.1.4-4.6.5-1.2 1.4-2.4 1.6-3.6.7-3.8 1.2-7.6 1.7-11.4-1 .5-2 1.1-2.5 1.9-1 1.8-1.8 3.8-2.7 5.8 1.5.4 2 1.8 2 3.5.1 1.2 0 2.5-.1 3.8zm16-4c-.1-.1-.2-.2-.3-.2-.8.4-1.6.8-2.4 1.1-.5.1-1-.1-1.6-.1.1-.5.1-1.1.4-1.4 1.2-1.1 2.4-2.2 3.7-3.2 1-.8 1.6-2.1 1.1-3.3-.2-.3-.8-.7-1.2-.7-1.1 0-1.7.7-2.2 1.6-1 2-2.2 4-4.4 5-.4.2-1 0-1.5.1 0-.5-.1-1.2.1-1.5 1.3-1.6 2.5-3.4 4.1-4.5 2-1.5 2.5-3.3 2.4-5.5-.1-1.6-.9-2.3-2.4-1.9-2.5.7-4.9 1.5-7.2 2.3.1.8.1 1.2.1 1.5-.2 2.1-.4 4.2-.7 6.3-.3 2.1-.5 4.2-.9 6.2-.4 1.9-1 3.8-1.7 5.6-.5 1.4 0 2.5.9 3.4 1.4 1.5 3.2 1.6 5 .8 5.1-2.2 6.9-6.9 8.7-11.6zm-39 31.4c13.1-3.1 24.7-9.5 36.7-14.7-7.2-.9-14.1 0-20.8 2.5C12.4 49 7.6 50.9 4 54.8c-1.2 1.2-2.3 2.4-2.6 4.6zm22-30c-.1-.7 0-1.2-.2-1.5-.3-.7-.5-1.7-1.1-1.9-.5-.2-1.5.3-2 .7-1.4 1.1-2.5 2.6-4 3.4-2.2 1.2-3.3 3.1-3.9 5.4-.5 1.7.1 3.9 1.4 4.8 1.2.8 3 .7 4.4-.6 3.1-2.8 5-6.3 5.4-10.3zM68.7 1.6c-.1-.2-.2-.3-.3-.5-.6.1-1.3.1-1.9.2-2.7.6-4.9 2-6.9 3.8-3.4 3.2-6 7-8.4 10.9l-2.4 4.2c7.3-5.4 14.1-11.4 19.9-18.6zm-9.5 36.5C54 40 48.9 41.8 43.8 43.7c0 .1 0 .2-.1.4 5 .2 9.2 2.4 12.9 5.4 1-3.9 1.8-7.5 2.6-11.4zm7.4-18c-.2-.2-.4-.3-.6-.5l-2.3 2.9c.2.1.3.3.5.4.8-1 1.6-1.9 2.4-2.8zM12.3 30.4c.1.1.2.1.4.2.8-2.3 1.6-4.7 2.3-7-.1 0-.2-.1-.4-.1-.7 2.2-1.5 4.5-2.3 6.9z"
/>
</svg>
</a>
<a href="#" class="hamburger">
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In -->
<svg viewBox="0 0 90 90" >
<path fill="#F4EFE7" d="M45,0C20.1,0,0,20.1,0,45c0,24.8,20.1,45,45,45s45-20.2,45-45C90,20.1,69.9,0,45,0L45,0z M20.1,65.8
c-2.4,0-4.4-2-4.4-4.4s2-4.4,4.4-4.4h49.7c2.4,0,4.4,2,4.4,4.4s-2,4.4-4.4,4.4H20.1z M20.1,49.4c-2.4,0-4.4-2-4.4-4.4
c0-2.5,2-4.4,4.4-4.4h49.7c2.4,0,4.4,2,4.4,4.4s-2,4.4-4.4,4.4H20.1z M20.1,32.9c-2.4,0-4.4-2-4.4-4.4s2-4.4,4.4-4.4h49.7
c2.4,0,4.4,2,4.4,4.4s-2,4.4-4.4,4.4H20.1z"/>
</svg>
</a>
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">About The King</a></li>
<li><a href="#">Songs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<div class="poster">
<h1 class="poster-title">The King of The Blues<br><span>September 16th, 1925 - May 14th, 2015</span></h1>
</div>
<div class="quote">
<blockquote>
<p>The Blues Was Bleeding
<br>the same blood as me</p>
<p class="author"> - B.B. King</p>
</blockquote>
</div>
<div class="about cf">
<div class="early-life">
<div class="content">
<h2>Riley B. King</h2>
<p>was born on September 16, 1925, on a cotton plantation near the town of Itta Bena, Mississippi, the son of sharecroppers Albert and Nora Ella King. He considered the nearby city of Indianola, Mississippi to be his home.</p>
</div>
<img src="http://codepen.vincebrown.me/the-king/the-king-3.jpg" alt="" />
</div>
<div class="career">
<div class="content">
<h2>Career</h2>
<p>As a guitarist, King is best-known for his single-note solos, played on a hollowbody Gibson guitar. King’s unique tone is velvety and regal, with a discernible sting. He’s known for his trilling vibrato, wicked string bends, and a judicious approach that makes every note count.</p>
</div>
<img src="http://codepen.vincebrown.me/the-king/the-king-4.jpg" alt="" />
</div>
</div>
</main>
<footer class="poster the-thrill">
<h1>The Thrill Is <br>Gone.</h1>
<div class="copyright">
<p>RIP B.B. King - The King of The Blues</p>
</div>
</footer>
html {
box-sizing: border-box;
font-family: 'lato';
padding-bottom: 500px;
position: relative;
}
@media screen and (min-width: 45em) {
html {
padding-bottom: 600px;
}
}
*, *:before, *:after {
box-sizing: inherit;
}
h1, h2, h3, h4, h5 {
margin: 0;
color: #F4EFE7;
font-family: 'rock salt';
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #F4EFE7;
}
img {
width: 100%;
}
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.nav-bar {
position: relative;
background-color: #222;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 1em .5em .5em;
}
.logo {
width: 15%;
padding-left: 1em;
}
.logo svg {
width: 60%;
max-width: 150px;
min-width: 100px;
height: auto;
}
.hamburger {
width: 40px;
position: absolute;
top: 26%;
right: 3.5%;
}
@media screen and (min-width: 45em) {
.hamburger {
display: none;
}
}
.hamburger svg {
width: 100%;
}
.nav-list {
display: none;
width: 80%;
}
@media screen and (min-width: 45em) {
.nav-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.nav-list li {
width: 25%;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: center;
padding-top: .95em;
}
.nav-list li a {
font-family: 'lato';
text-transform: uppercase;
font-size: .75em;
font-weight: 400;
letter-spacing: 2px;
}
.nav-list li a:after {
display: block;
content: '';
padding-bottom: 5px;
border-bottom: solid 1px #F4EFE7;
-webkit-transform: scaleX(0.0001);
transform: scaleX(0.0001);
-webkit-transition: -webkit-transform 350ms ease-in-out;
transition: -webkit-transform 350ms ease-in-out;
transition: transform 350ms ease-in-out;
transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}
.nav-list li a:hover:after {
-webkit-transform: scaleX(0.6);
transform: scaleX(0.6);
}
.poster {
margin: 0;
height: 500px;
background-image: url("http://codepen.vincebrown.me/the-king/the-king-1.jpg");
background-size: cover;
background-position: top center;
position: relative;
}
.poster:after {
content: '';
position: absolute;
display: block;
border-bottom: 30px solid #F3F5F5;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.poster-title {
font-size: 2.4em;
position: relative;
top: 40%;
padding: 1em .5em;
line-height: 1;
}
.poster-title span {
font-size: .4em;
font-family: 'lato';
font-weight: 300;
letter-spacing: 2px;
text-align: center;
}
.quote {
padding: 2.25em;
background-image: url("https://subtlepatterns.com/patterns/paper_fibers.png");
}
.quote p {
font-family: 'rock salt';
line-height: 1.3;
font-size: 1.95em;
text-align: center;
width: 95%;
margin: 0 auto;
color: #091463;
letter-spacing: 2px;
}
.quote .author {
font-family: 'Lato';
font-weight: 300;
font-size: 1.15em;
letter-spacing: 2px;
padding-top: 1em;
color: #091463;
}
.about {
background-color: #fff;
}
.about img {
width: 100%;
}
@media screen and (min-width: 45em) {
.about img {
width: 50%;
}
}
.about .content {
width: 100%;
padding: 25px;
background-color: #fff;
position: relative;
}
@media screen and (min-width: 45em) {
.about .content {
padding-top: 40px;
}
}
@media screen and (min-width: 70em) {
.about .content {
padding-top: 60px;
}
}
@media screen and (min-width: 45em) {
.about .content {
width: 50%;
}
}
.about .content h2 {
color: #928E88;
}
.about .content p {
color: #222;
line-height: 1.6;
font-weight: 300;
font-size: 1.125em;
}
@media screen and (min-width: 900px) {
.about .content p {
font-size: 1.4em;
}
}
.early-life {
position: relative;
}
.early-life img {
display: block;
float: left;
}
.early-life .content {
float: right;
}
.career {
position: relative;
clear: both;
background-color: #fff;
}
.career .content {
float: left;
}
.career img {
display: block;
float: right;
}
.the-thrill {
position: fixed;
bottom: 0;
z-index: -100;
width: 100%;
background-image: url("http://codepen.vincebrown.me/the-king/the-king-2.jpg");
background-position: top left;
}
@media screen and (min-width: 45em) {
.the-thrill {
height: 600px;
}
}
.the-thrill:after {
width: 0;
height: 0;
content: '';
border: none;
}
.the-thrill h1 {
text-align: right;
line-height: 1;
width: 90%;
font-size: 3.5em;
padding-top: 275px;
text-shadow: 2px 4px 3px #222;
}
.the-thrill .copyright {
position: absolute;
bottom: 0;
width: 100%;
padding: .5em 0;
background-color: #222;
}
.the-thrill .copyright p {
text-align: center;
color: #F4EFE7;
font-size: .75em;
letter-spacing: 2px;
font-weight: 300;
text-transform: uppercase;
}
