a.logo.scroll.scroll-1(href="#section-1")
span.icon
nav.main
button.hamburger
span
ul
li.menu-title choose your destiny
li
a.scroll.scroll-1(href="#section-1") home
li
a.scroll.scroll-2(href="#section-2") about
li
a.scroll.scroll-3(href="#section-3") work
li
a.scroll.scroll-4(href="#section-4") contact
nav.dots
a.scroll.scroll-1.tooltip.tooltip-left.active(href="#section-1" data-tooltip="home")
a.scroll.scroll-2.tooltip.tooltip-left(href="#section-2" data-tooltip="about")
a.scroll.scroll-3.tooltip.tooltip-left(href="#section-3" data-tooltip="work")
a.scroll.scroll-4.tooltip.tooltip-left(href="#section-4" data-tooltip="contact")
section#section-1.section-1
h2 Home
p I guess this is where the house is.
section#section-2.section-2
h2 About
p I do stuff... and things.
section#section-3.section-3
h2 Work
p This is what I do. I love what I do.
section#section-4.section-4
h2 Contact
p Don't call me.
a.codepen(href="https://codepen.io/joshuaward/pens/public/" target="_blank")
i.fab.fa-codepen
a.geekstudios(href="http://joshuaward.me" target="_blank")
svg#logo.brand(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', x='0px', y='0px', viewBox='0 0 50 50', style='enable-background:new 0 0 50 50;', xml:space='preserve')
defs
mask#image-mask
circle#outer(cx='50', cy='50', r='50', fill='white')
circle#inner(cx='50', cy='50', r='25')
circle.circle(cx='25', cy='25', r='25')
polygon.mountains(points='34.1,25 27.7,13.9 21.3,25 19.2,28.7 16.5,24 13,30 9.5,36.1 14.9,36.1 16.5,36.1 23.5,36.1 27.7,36.1 40.5,36.1')
.hipster(data-tooltip="That's not what I would do.")
View Compiled
$base-duration: 250ms;
// Colors
$primary: #4DB6AC;
$accent: #46627f;
$white: whitesmoke;
$black: #333;
// Breakpoints
$sm: 20rem;
$med: 48rem;
$lg: 64rem;
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
html {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
}
body {
position: relative;
// display: flex;
// align-items: center;
// justify-content: center;
// width: 100%;
// height: 100vh;
overflow: hidden;
}
h2 {
margin: 0;
padding: 0;
color: $white;
font-family: 'VT323', monospace;
font-size: 32px;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
}
a {
color: $white;
text-decoration: none;
transition: 0.25s;
}
button {
border: none;
}
.logo {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 40px;
height: 40px;
padding: 10px;
background-color: rgba($white,0.1);
z-index: 9998;
span.icon {
position: relative;
display: block;
width: 20px;
height: 20px;
border: 2px solid $white;
border-radius: 50%;
}
}
.hamburger {
position: fixed;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(white,0.1);
z-index: 9999;
&.is-open {
span {
height: 0;
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
span {
position: relative;
display: block;
width: 80%;
height: 2px;
background-color: $white;
border-radius: 99px;
&:before,
&:after {
position: absolute;
content: '';
left: 0;
width: 100%;
height: 2px;
background-color: $white;
transition: 0.25s;
}
&:before {
transform: translateY(-5px);
}
&:after {
transform: translateY(5px);
}
}
}
.codepen {
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba($white,0.1);
z-index: 9998;
}
.geekstudios {
position: fixed;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba($white,0.1);
z-index: 9998;
> svg {
width: 50%;
height: 50%;
.circle {
fill: $white;
mask-mode: alpha;
}
.mountains {
fill: $primary;
}
}
}
nav.main {
ul {
position: fixed;
top: 0;
//left: -100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
margin: 0;
padding: 20px;
background-color: rgba(black,0.9);
list-style-type: none;
transition: 0.25s;
opacity: 0;
visibility: hidden;
z-index: 9998;
&.is-open {
opacity: 1;
visibility: visible;
li {
opacity: 1;
&:nth-of-type(odd) {
transform: translateX(0%);
}
&:nth-of-type(even) {
transform: translateX(0%);
}
}
}
li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 2px;
opacity: 0;
transition: 0.25s;
&:before {
position: absolute;
content: '';
width: 0;
height: 100%;
background-color: transparent;
transition: 0.25s;
}
&:nth-of-type(odd) {
transform: translateX(-50%);
&:before {
left: 0;
}
}
&:nth-of-type(even) {
transform: translateX(50%);
&:before {
right: 0;
}
}
&:hover {
&:nth-of-type(odd),
&:nth-of-type(even){
&:before {
width: 100%;
background-color: #1CB5E0;
}
}
}
&.menu-title {
color: yellow;
font-family: 'VT323', monospace;
font-size: 24px;
font-weight: bold;
}
a {
position: relative;
width: 100%;
font-family: 'VT323', monospace;
font-size: 5vh;
font-weight: bold;
text-align: center;
}
}
}
}
section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
&.section-1 {
background: linear-gradient(45deg, #1CB5E0 0%, #000851 100%);
}
&.section-2 {
background: linear-gradient(45deg, #FDBB2D 0%, #22C1C3 100%);
}
&.section-3 {
background: linear-gradient(45deg, #d53369 0%, #daae51 100%);
}
&.section-4 {
background: linear-gradient(45deg, #efd5ff 0%, #515ada 100%);
}
p {
color: $white;
}
}
nav.dots {
position: fixed;
right: 20px;
top: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
//background: red;
transform: translateY(-50%);
z-index: 9997;
a {
position: relative;
display: block;
width: 10px;
height: 10px;
margin: 5px 0;
background-color: transparentize($white,0.6);
border-radius: 50%;
&:hover {
background-color: transparentize($white,0.1);
}
&.active {
background-color: $white;
transition: 0.25s;
}
}
}
.tooltip {
position: relative;
&:before,
&:after {
position: absolute;
line-height: 1;
opacity: 0;
transition: 0.25s;
visibility: hidden;
}
&:before {
content: attr(data-tooltip);
top: -110%;
right: 200%;
padding: 10px;
background-color: rgba(black,0.9);
border-radius: 5px;
font-size: 12px;
font-weight: bold;
transform: translateX(-10%);
}
&:after {
content: '';
right: 20px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(black,0.9);
transform: translateX(-10%);
}
&:hover {
&:before,
&:after {
opacity: 1;
visibility: visible;
}
&:before {
transform: translateX(0%);
}
&:after {
right: 15px;
transform: translateX(0%);
}
}
}
.hipster {
position: fixed;
bottom: -15%;
right: 20%;
width: 100px;
height: 120px;
background-image: url('http://mentalsociety.com/images/hipster.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
transition: 0.5s ease-in-out;
z-index: 99999;
&:before,
&:after {
visibility: hidden;
transform: translateY(30px);
}
&:before {
position: absolute;
content: attr(data-tooltip);
top: -108px;
padding: 10px;
background-color: rgba(black,0.9);
border-radius: 5px;
color: white;
font-size: 12px;
font-weight: bold;
}
&:after {
position: absolute;
content: '';
top: -4px;
left: 50%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(black,0.9);
transform: translateX(-50%);
}
&.show {
bottom: -8.55%;
&:before,
&:after {
visibility: visible;
}
&:before {
top: -120px;
}
&:after {
top: -16px;
}
}
}
View Compiled
$('.scroll').click(function(e) {
e.preventDefault();
var url = this.href;
var urlHash = this.hash;
var parts = url.split('#');
var trgt = parts[1];
var target_offset = $('#'+trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({
scrollTop:target_top
}, 500);
if($('nav.dots a').hasClass('active')) {
$('nav.dots a').removeClass('active');
}
if (urlHash == '#section-1') {
$('nav.dots a.scroll-1').addClass('active');
}
if (urlHash == '#section-2') {
$('nav.dots a.scroll-2').addClass('active');
}
if (urlHash == '#section-3') {
$('nav.dots a.scroll-3').addClass('active');
}
if (urlHash == '#section-4') {
$('nav.dots a.scroll-4').addClass('active');
}
});
$('nav.dots a').click(function(){
if($('nav.dots a').hasClass('active')) {
$('nav.dots a').removeClass('active');
}
$(this).addClass('active');
});
$('.hamburger, nav.main ul li a').on('click', function(e) {
e.preventDefault();
$('.hamburger').toggleClass('is-open');
$('nav.main ul').toggleClass('is-open');
});
$('.geekstudios, .scroll-2').mouseenter(function() {
$('.hipster').addClass('show');
});
$('.geekstudios, .scroll-2').mouseleave(function() {
$('.hipster').removeClass('show');
});
