<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 ---------->
<div class="content-container">
<div class="plus-button"></div>
<div class="social-button twitter-button"></div>
<div class="social-button facebook-button"></div>
<div class="social-button pinterest-button"></div>
<div class="social-button insta-button"></div>
<div class="rela-block nav-bar">
<h1 class="rela-block page-header">Hipster Stuff</h1>
<div class="rela-block nav-links">
<ul>
<li class="nav-link home">Home</li>
<li class="nav-link project">Projects</li>
<li class="nav-link limerick">Limericks</li>
<li class="nav-link nacho">Nachos</li>
<li class="nav-link about">About</li>
</ul>
</div>
<div class="link-line"></div>
</div>
<div class="inner-content-container">
<div class="rela-block content-section first-section">
<div class="section-half left-half top-left-half"></div>
<div class="section-half right-half top-right-half">
<div class="square-text">
<h1 class="square-header"><span>GRASS</span><br>tastes bad.</h1>
<div class="square-words"><p class="abs-cent-text">Kale chips etsy chia sustainable. Man braid tumblr mixtape, gastropub try-hard listicle iPhone drinking vinegar ennui cliche lumbersexual.</p></div>
</div>
</div>
</div>
<div class="rela-block second-section">
<div class="mat-tile">
<a class="rela-block mat-tile-image else-art" href="https://soundcloud.com/else-official/else-zephyr"></a>
<div class="rela-block mat-tile-text">
<p class="abs-cent-text"><span class="bold"><span class="gold">Else</span><br>Zephyr</span><br><br>Funky, synthy, chill, groovy goodness! Like it or your money back!</p>
</div>
</div>
<div class="mat-tile">
<a class="rela-block mat-tile-image madeon-art" href="https://soundcloud.com/madeon/madeon-cut-the-kid"></a>
<div class="rela-block mat-tile-text">
<p class="abs-cent-text"><span class="bold"><span class="gold">Madeon</span><br>Cut the Kid</span><br><br>An awesome, feel good track from that masterful french dude.</p>
</div>
</div>
<div class="mat-tile">
<a class="rela-block mat-tile-image trey-frey-art" href="https://soundcloud.com/treyfrey/airglow"></a>
<div class="rela-block mat-tile-text">
<p class="abs-cent-text"><span class="bold"><span class="gold">Trey Frey</span><br>Airglow</span><br><br>A stellar track made on Nintendo Gameboys! Currently listening to this now!</p>
</div>
</div>
</div>
<div class="rela-block content-section third-section">
<div class="section-half short-left-half third-left-half">
<div class="image-info right">
<p class="abs-cent-text"><span class="bold big">Image Title</span><br>Fashion axe fingerstache literally, before they sold out tattooed 90's brooklyn deep v. Mlkshk sriracha trust fund narwhal, meditation selfies tumblr bushwick everyday carry fixie pork belly tousled disrupt plaid etsy.</p>
</div>
</div>
<div class="section-half long-right-half third-right-half"></div>
</div>
<div class='rela-block content-section fourth-section'>
<div class="section-half long-left-half fourth-left-half"></div>
<div class="section-half short-right-half fourth-right-half">
<div class="image-info left">
<p class="abs-cent-text"><span class="bold big">Image Title</span><br>Post-ironic vinyl marfa you probably haven't heard of them literally. Kickstarter taxidermy post-ironic sriracha. Messenger bag put a bird on it echo park trust fund. Synth chillwave beard gastropub narwhal slow-carb.</p>
</div>
</div>
</div>
<div class='rela-block content-section fifth-section'>
<div class="section-half short-left-half fifth-left-half">
<div class="image-info right">
<p class="abs-cent-text"><span class="bold big">Image Title</span><br>Fixie brooklyn cold-pressed, health goth hashtag DIY lumbersexual sustainable hella flannel. Gastropub before they sold out stumptown, next level mumblecore mustache truffaut green juice ethical chambray.</p>
</div>
</div>
<div class="section-half long-right-half fifth-right-half"></div>
</div>
<div class="rela-block gradient-section"></div>
<div class="rela-block content-section sky-section">
<div class="bottom-text">THE END<br><br>BE COOL :)</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
@import url("https://fonts.googleapis.com/css?family=Yesteryear");
* {
-webkit-transition: 0.35s ease;
transition: 0.35s ease;
}
body {
background-color: #d9e3e3;
}
.rela-block {
display: block;
position: relative;
overflow: hidden;
}
.abs-cent-text {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
}
.bold {
font-weight: 600;
text-transform: uppercase;
}
.big {
font-size: 30px;
}
.gold {
color: #fc3;
}
.content-container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 80%;
width: 90%;
max-width: 1100px;
background-color: #fff;
overflow: hidden;
box-shadow: 5px 8px 20px 2px rgba(0,0,0,0.4);
z-index: 2;
}
.plus-button {
position: absolute;
bottom: 25px;
left: 25px;
z-index: 15;
height: 75px;
width: 75px;
border-radius: 100%;
background-color: #e91e63;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
.plus-button::before {
content: "+";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 28px;
font-weight: 600;
}
.plus-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.plus-button.open {
-webkit-transform: rotate(45deg) scale(0.92);
transform: rotate(45deg) scale(0.92);
background-color: #333;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
}
.plus-button.open:hover {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button.open:active {
-webkit-transform: scale(0.96) rotate(45deg);
transform: scale(0.96) rotate(45deg);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.social-button {
position: absolute;
bottom: 38px;
left: 36px;
height: 50px;
width: 50px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
background-size: 153% !important;
border-radius: 100%;
box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.4);
cursor: pointer;
z-index: 14;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
}
.social-button.twitter-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center;
}
.social-button.twitter-button.active {
bottom: 105px;
left: 16px;
}
.social-button.facebook-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center;
}
.social-button.facebook-button.active {
bottom: 100px;
left: 68px;
}
.social-button.pinterest-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center;
}
.social-button.pinterest-button.active {
bottom: 62px;
left: 104px;
}
.social-button.insta-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center;
}
.social-button.insta-button.active {
bottom: 10px;
left: 100px;
}
.nav-bar {
height: 130px;
width: calc(100% - 21px);
padding-top: 12px;
box-sizing: border-box;
text-align: center;
background-color: #fdfdfd;
box-shadow: -1px 5px 15px -2px rgba(0,0,0,0.4);
overflow: hidden;
z-index: 20;
}
.nav-bar .page-header {
display: inline-block;
position: relative;
font-size: 56px;
line-height: 64px;
margin: 0 auto 5px;
font-family: "Yesteryear";
overflow: visible;
}
.nav-bar .page-header::before,
.nav-bar .page-header::after {
content: "";
position: absolute;
top: 25px;
height: 8px;
width: 36px;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.nav-bar .page-header::before {
background-color: #c6d5d0;
left: -44px;
}
.nav-bar .page-header::after {
background-color: #d8d7c5;
right: -44px;
}
.nav-links {
height: 45px;
text-align: center;
font-family: "Raleway";
font-weight: 400;
text-transform: uppercase;
}
.nav-links ul {
display: inline-block;
position: relative;
height: 100%;
margin: auto;
}
.nav-links .nav-link {
display: inline-block;
position: relative;
float: left;
font-size: 16px;
letter-spacing: 4px;
margin: 0;
padding: 18px 18px 15px;
cursor: pointer;
}
.link-line {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0px;
background-color: #222;
}
.link-line.home {
width: 70px;
}
.link-line.project {
width: 116px;
}
.link-line.limerick {
width: 126px;
}
.link-line.nacho {
width: 98px;
}
.link-line.about {
width: 82px;
}
.inner-content-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 130px;
overflow-x: hidden;
color: #444;
font-family: "Raleway";
font-size: 18px;
letter-spacing: 3px;
line-height: 24px;
font-weight: 300;
}
.content-section {
height: 100%;
}
.section-half {
position: absolute;
top: 0;
bottom: 0;
}
.section-half.left-half {
left: 0;
right: 50%;
}
.section-half.right-half {
right: 0;
left: 50%;
}
.section-half.long-left-half {
left: 0;
right: 45%;
}
.section-half.long-right-half {
right: 0;
left: 45%;
}
.section-half.short-left-half {
left: 0;
right: 55%;
}
.section-half.short-right-half {
right: 0;
left: 55%;
}
.section-half.top-left-half {
background: url("https://rightsideofthebrian.files.wordpress.com/2014/01/tycho_lpghostly_600.jpg?w=600&h=600") no-repeat center;
background-size: cover;
}
.section-half.top-right-half {
background-color: #cfded9;
}
.square-text {
position: absolute;
height: 75%;
width: 90%;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #fdfdfd;
box-shadow: 4px 4px 14px -1px rgba(0,0,0,0.35);
}
.square-text::before {
content: "";
position: absolute;
top: -40px;
left: -40px;
right: 40px;
height: 54%;
max-width: 430px;
box-sizing: border-box;
border: 10px solid rgba(180,150,20,0.45);
}
.square-text .square-header {
display: block;
position: relative;
margin: 50px 50px;
font-size: 48px;
line-height: 54px;
font-weight: 600;
}
.square-text .square-header span {
color: #c92;
}
.square-text .square-words {
position: absolute;
bottom: 30px;
left: 30px;
height: 200px;
width: 90%;
margin: auto;
}
.second-section {
text-align: center;
background-color: #f4f4f4;
padding: 40px 0 20px;
}
.mat-tile {
display: inline-block;
position: relative;
background-color: #fff;
width: 260px;
margin: 0px 20px 40px;
box-shadow: 2px 2px 11px 1px rgba(0,0,0,0.4);
}
.mat-tile-image {
height: 250px;
box-shadow: 0px 3px 13px -1px rgba(0,0,0,0.4);
background-size: cover !important;
z-index: 5;
}
.mat-tile-image.madeon-art {
background: url("http://soundisstyle.com/wp-content/uploads/2014/02/madeon-cut-the-kid.jpg") no-repeat center;
}
.mat-tile-image.else-art {
background: url("https://i1.sndcdn.com/artworks-000112103645-ykjdtr-t500x500.jpg") no-repeat center;
}
.mat-tile-image.trey-frey-art {
background: url("https://f1.bcbits.com/img/a3951860714_10.jpg") no-repeat center;
}
.mat-tile-text {
height: 300px;
background-color: #fff;
}
.third-section {
z-index: 7;
overflow: visible;
height: 92%;
}
.fourth-section {
z-index: 6;
overflow: visible;
height: 92%;
}
.fifth-section {
z-index: 5;
overflow: visible;
height: 92%;
}
.third-right-half,
.fourth-left-half,
.fifth-right-half {
background-size: cover !important;
-webkit-filter: grayscale(1);
filter: grayscale(1);
overflow: visible;
}
.third-right-half {
background: url("https://static.tumblr.com/9d89c1de6fd27d2fe1f1988bb4261267/2icx37z/eXemsx67l/tumblr_static_aas.jpg") no-repeat center;
box-shadow: -2px 5px 15px 2px rgba(0,0,0,0.45);
z-index: 4;
}
.fourth-left-half {
background: url("https://glitteringafterthoughts.files.wordpress.com/2015/02/vintage_by_tinec.jpg") no-repeat top;
box-shadow: 2px 5px 15px 2px rgba(0,0,0,0.45);
z-index: 4;
}
.fifth-right-half {
background: url("https://s-media-cache-ak0.pinimg.com/564x/32/19/d3/3219d3ab0358bf1696ea1aa1cba37f48.jpg") no-repeat center;
box-shadow: -2px 5px 15px 2px rgba(0,0,0,0.45);
z-index: 4;
}
.third-left-half,
.fourth-right-half,
.fifth-left-half {
background-color: #607d8b;
overflow: visible;
}
.image-info {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 80%;
width: 75%;
background-color: rgba(255,255,255,0.8);
}
.image-info.right {
right: 0;
text-align: right;
box-shadow: -2px 5px 10px 1px rgba(0,0,0,0.35);
}
.image-info.left {
left: 0;
text-align: left;
box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.35);
}
.gradient-section {
height: 250%;
background: -webkit-linear-gradient(#607d8b, #141611);
background: linear-gradient(#607d8b, #141611);
}
.sky-section {
background: url("https://unsplash.it/4000/2660?image=992") no-repeat center;
background-size: cover;
}
.bottom-text {
position: absolute;
width: 90%;
max-width: 300px;
top: 65%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
font-size: 30px;
letter-spacing: 6px;
color: #d3d3d3;
}
@media screen and (max-width: 965px) {
.square-text .square-header {
margin: 25px 50px;
}
}
@media screen and (max-width: 800px) {
.square-text .square-header {
margin: 25px 35px;
}
.square-text .square-words {
left: 15px;
}
}
// #Pinspiration
// http://www.awwwards.com/awards/gallery/2015/01/UI-inspiration-VX1.jpg
$(document).ready(function(){
// Social plus button function
$('.plus-button').click(function(){
$(this).toggleClass('open');
$('.social-button').toggleClass('active');
});
// Nav-link-line function
$('.nav-link').hover(function(){
$leftPush = ($(this).offset().left) - (($(window).width() - $('.content-container').width())/2) + 13;
$('.link-line').css('left', $leftPush);
if ($(this).hasClass('home')) {
$('.link-line').addClass('home');
}
else if ($(this).hasClass('project')) {
$('.link-line').addClass('project')
}
else if ($(this).hasClass('limerick')) {
$('.link-line').addClass('limerick')
}
else if ($(this).hasClass('nacho')) {
$('.link-line').addClass('nacho')
}
else if ($(this).hasClass('about')) {
$('.link-line').addClass('about')
};
},function(){
$('.link-line').attr('class', 'link-line');
$('.link-line').css('left', '0');
});
});
