nakome
1/2/2015 - 10:44 AM
One page theme
One page theme
*,
:after,
:before {
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after,
.clearfix:before {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
body,
html {
position: relative;
height: 100%;
font-size: 62.5%;
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
padding: 0;
background: #fff;
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #555
}
.caption,
a {
-webkit-transition: all .5s linear;
transition: all .5s linear
}
a {
color: #000;
text-decoration: none
}
a:focus,
a:hover {
color: #555;
text-decoration: underline
}
a:focus {
outline: 5px;
outline-offset: -2px
}
hr {
margin-top: 21px;
margin-bottom: 21px;
border: 0;
border-top: 1px solid #eee
}
nav ul {
margin: 0;
padding: 0
}
.lightModal {
position: fixed;
top: 0;
height: 100%;
background: #f2f2f2;
opacity: 0;
visibility: hidden;
-webkit-transition: all .8s ease;
transition: all .8s ease;
z-index: 1024
}
.lightModal .lightModal-inner {
display: block;
width: 75%;
height: 75%;
margin: 0 auto;
padding: 0
}
.lightModal .lightModal-inner .lightModal-title {
font-family: sans-serif;
font-weight: 300;
color: #777
}
.lightModal .lightModal-inner .lightModal-close {
position: absolute;
top: .2em;
right: .2em;
border: none;
font-size: 3em;
line-height: 1;
font-family: serif;
background: #F2F2F2;
color: #000
}
.lightModal .lightModal-inner .lightModal-close:hover {
color: #f55
}
.lightModal .lightModal-inner .lightModal-image {
display: block;
margin: 0 auto;
width: 100%;
max-height: 95%
}
.wrapper {
width: 100%;
height: 100%;
padding-left: 250px;
position: relative;
z-index: 55;
background: #f2f2f2;
clear: both;
display: none
}
.wrapper .box {
display: block;
width: calc(100% / 3);
height: auto;
float: left;
position: relative;
overflow: hidden
}
.wrapper .box .media {
width: 100%;
vertical-align: middle
}
.wrapper .box .caption {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #f7f7f7;
background: rgba(247, 247, 247, .6);
opacity: 0
}
.wrapper .box a:hover .caption {
opacity: 1
}
.wrapper .box a img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform .5s ease;
transition: transform .5s ease
}
.wrapper .box a:hover img {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: -webkit-transform .5s ease;
transition: transform .5s ease
}
.box .caption .box_title {
display: block;
width: 100%;
position: absolute;
text-align: center;
top: 50%;
margin-top: -50px
}
.wrapper .box .caption h3 {
position: relative;
display: inline-block;
max-width: 90%;
padding: .8em .5em;
z-index: 77;
color: #191919;
font-size: 1.3em;
border: .4em solid #1D1D1D
}
.preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
background: #f2f2f2;
visibility: hidden;
opacity: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 99999999999999
}
.preloader_inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 4em;
height: 2em;
line-height: 2em;
text-align: center;
font-size: 1.2em;
font-family: monospace;
font-weight: 300;
color: #333
}
.inner {
background: #FFF;
border: 1px solid #E7E7E7;
margin: 1em;
padding: 0;
display: block;
}
.inner .inner_thumb {
position: relative;
overflow: hidden;
max-height: 200px;
}
.inner .inner_thumb img{
width:100%;
display:block
}
.inner .inner_text {
padding: 1em;
}
form {
width: calc(100% / 2);
margin: 0;
}
form label {
display: block;
margin: 1em auto;
}
form input[type="text"],
form input[type="email"],
form textarea {
display: block;
width: 90%;
padding: 0.5em;
border: 1px solid #E8E8E8;
}
form textarea {
min-height: 8em;
width: 100%;
}
form input[type="submit"] {
display: block;
padding: 0.5em 0.2em;
background: #FFF;
border: 1px solid #1C1C1C;
color: #1B1B1B;
min-width: 5em;
text-transform: uppercase;
}
form input[type="submit"]:hover {
border-color: #F00;
color: #F00;
transition: border 0.5s ease, color 1s ease;
}
@media (min-width: 1000px) {
.header {
display: block;
position: fixed;
top: 0;
left: 0;
width: 250px;
min-height: 100%;
padding: 0 0 0 50px;
background: #fff;
float: left;
overflow: hidden;
z-index: 9999
}
.header .logo {
margin-top: 50px;
width: 100%
}
.header .logo a {
height: 100px;
display: block;
text-align: center;
line-height: 100px;
color: #333
}
.header nav ul {
margin: 60px 0 0;
padding: 0;
display: block;
overflow: hidden;
list-style: none
}
.header nav ul li {
display: block;
margin-bottom: 30px
}
.header nav ul li a.active,
.header nav ul li a:hover {
color: #969595
}
.header .footer {
position: absolute;
bottom: 1em
}
.header ul.social {
list-style: none;
margin: 0 0 5px;
padding: 0
}
.header ul.social li {
display: inline-block;
position: relative;
margin: 0 .5em .5em 0
}
.header ul.social li a {
display: inline-block;
padding: .1em .5em;
border: 1px solid #000;
color: #000
}
.header ul.social li a:hover {
border-color: #f55;
color: #f55
}
.toggle_menu {
display: none
}
.lightModal,.preloader_inner {
left: 250px;
width: calc(100% - 250px)
}
}
@media (max-width: 1023px) {
.header {
display: block;
width: 100%;
min-height: 100px;
padding: 0;
position: relative
}
.header .logo {
width: calc(100% /2);
min-height: 100px;
line-height: 100px
}
.header .logo a {
display: block;
width: 100%;
margin: 0;
padding: 0;
height: auto;
text-align: center;
color: #333
}
.header .footer {
display: none
}
.header .toggle_menu {
margin: 0;
display: block;
padding: 1em;
position: absolute;
top: 2em;
right: 3em;
background: #F2F2F2;
color: #A8A8A8
}
.header .toggle_menu:hover {
background: #1B1B1B
}
.header nav ul {
list-style: none;
display: none;
margin-top: 35px;
position: relative
}
.header nav ul li a {
display: block;
width: 100%;
padding: 30px 0;
text-align: center;
color: #ADABAB;
font-size: 1.2em;
text-decoration: none;
border-top: 1px solid #E5E5E5;
background: #F4F4F4
}
.header nav ul li a:active {
background: #f7f5f5
}
.toggle_menu {
display: block
}
.wrapper .box {
width: calc(100% / 2);
max-height: 200px;
}
.wrapper {
width: 100%;
position: relative;
padding-left: 0
}
.lightModal {
left: 0;
width: 100%
}
.lightModal .lightModal-inner {
margin: 10% auto
}
}
@media (max-width: 550px) {
form,form input,form label{
width:100%;
}
.lightModal .lightModal-inner {
margin: 10% auto
}
.wrapper .box {
width: 100%
}
}
.show_menu {
display: block!important;
-webkit-transition: all .8s ease;
transition: all .8s ease
}
.show {
opacity: 1;
visibility: visible;
-webkit-transition: all .8s ease;
transition: all .8s ease
}
.show-section {
display: block;
opacity: 1;
-webkit-animation: fade 1s 1 ease;
animation: fade 1s 1 ease
}
@-webkit-keyframes fade {
0% {
opacity: 0
}
}
@keyframes fade {
0% {
opacity: 0
}
}/*====================================
* Vars
======================================*/
// links of pages
// data-link="foo" show data-section="foo"
var links = Array.prototype.slice.call(
document.querySelectorAll('[data-link]')),
sections = Array.prototype.slice.call(
document.querySelectorAll('[data-section]'));
// menu vars
var menu = d('.menu').querySelector('ul'),
menuBtn = d('.toggle_menu');
/*====================================
* window load
======================================*/
window.addEventListener('load',init,false);
/*====================================
* Short Selector
======================================*/
function d(el){
if(el) return document.querySelector(el);
}
/*====================================
* Init app
======================================*/
function init(){
// first time active home
d('[data-section="home"]').classList.add('show-section');
d('[data-link="home"]').classList.add('active');
try{
loader();
navigation();
lightModal();
toggleSections();
}catch(e){
alert(e);
}
}
/*====================================
* Toggle sections
======================================*/
function toggleSections(){
Array.prototype.forEach.call(links,function(o,i){
o.addEventListener('click',function(e){
var section = d('[data-section="'+this.getAttribute('data-link')+'"]');
e.preventDefault();
removeLinks(function(){
o.classList.add('active');
section.classList.add('show-section');
menu.classList.toggle('show_menu');
if(menu.classList.contains('show_menu')){
menuBtn.innerHTML = '<i class="fa fa-close"></i>';
}else{
menuBtn.innerHTML = '<i class="fa fa-navicon"></i>';
}
});
});
});
}
/*===========================================
* Remove active and show-section classes
=============================================*/
function removeLinks(_success){
Array.prototype.forEach.call(links,function(o,i){
o.classList.remove('active');});
Array.prototype.forEach.call(sections,function(o,i){
o.classList.remove('show-section');
});
if(_success()) return _success();
}
/*====================================
* Menu
======================================*/
function navigation(){
menuBtn.addEventListener('click',function(){
menu.classList.toggle('show_menu');
if(menu.classList.contains('show_menu')){
menuBtn.innerHTML = '<i class="fa fa-close"></i>';
}else{
menuBtn.innerHTML = '<i class="fa fa-navicon"></i>';
}
});
}
/*====================================
* Custom LightModal
======================================*/
function lightModal(){
var links = document.querySelectorAll('.lightCustom'),
arrayOfLinks = Array.prototype.slice.call(links);
Array.prototype.forEach.call(arrayOfLinks, function (obj, index) {
obj.addEventListener('click', function (e) {
e.preventDefault();
var title = obj.title ? obj.title : '...';
d('.lightModal').classList.add('show');
d('.lightModal-title').innerHTML = title;
d('.lightModal-image').src = obj.href;
d('.lightModal-image').alt = title;
});
d('.lightModal-close').addEventListener('click', function (e) {
e.preventDefault();
d('.lightModal').classList.remove('show');
d('.lightModal-title').innerHTML = '';
d('.lightModal-image').src = '';
d('.lightModal-image').alt = '';
});
});
}
/*====================================
* Loader
======================================*/
function loader(_success) {
var obj = document.createElement('div');
obj.className = 'preloader';
var inner = document.createElement('div');
inner.className = 'preloader_inner';
d('.wrapper').appendChild(obj);
obj.appendChild(inner);
obj.classList.add('show');
var w = 0,
t = setInterval(function() {
w = w + 1;
inner.textContent = w+'%';
if (w === 100){
obj.classList.remove('show');
clearInterval(t);
w = 0;
obj.remove();
if (_success){
return _success();
}
}
}, 20);
}
<header class="header">
<div class="logo">
<a href="javascript:void(0);">LOGO HERE</a>
</div>
<a href="#" class="toggle_menu">
<i class="fa fa-navicon"></i>
</a>
<nav class="menu">
<ul>
<li><a href="#" data-link="home">Home</a></li>
<li><a href="#" data-link="about">About</a></li>
<li><a href="#" data-link="contact">Contact</a></li>
</ul>
</nav>
<div class="footer clearfix">
<ul class="social clearfix">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
<div class="right">
<p>Copyright © 2014.</p>
</div>
</div>
</header>
<section class="wrapper clearfix" data-section="home">
<div class="box">
<a class="lightCustom" href="https://ununsplash.imgix.net/uploads/1412100990864810490bc/0c412568?fit=crop&fm=jpg&h=700&q=75&w=1050">
<img src="https://ununsplash.imgix.net/uploads/1412100990864810490bc/0c412568?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Dakota Roos</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050">
<img src="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Ales Krivec</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://ununsplash.imgix.net/photo-1416949929422-a1d9c8fe84af?fit=crop&fm=jpg&h=700&q=75&w=1050">
<img src="https://ununsplash.imgix.net/photo-1416949929422-a1d9c8fe84af?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Sebastian Boguszewicz</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://unsplash.imgix.net/photo-1416512149338-1723408867e9?fit=crop&fm=jpg&h=725&q=75&w=1050">
<img src="https://unsplash.imgix.net/photo-1416512149338-1723408867e9?fit=crop&fm=jpg&h=725&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Casey Fyfe</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://unsplash.imgix.net/photo-1416512107527-34cebecbac33?fit=crop&fm=jpg&h=725&q=75&w=1050">
<img src="https://unsplash.imgix.net/photo-1416512107527-34cebecbac33?fit=crop&fm=jpg&h=725&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Casey Fyfe</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://ununsplash.imgix.net/photo-1415639636295-61ae91a98b39?fit=crop&fm=jpg&h=725&q=75&w=1050">
<img src="https://ununsplash.imgix.net/photo-1415639636295-61ae91a98b39?fit=crop&fm=jpg&h=725&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Ales Krivec</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://unsplash.imgix.net/photo-1414541944151-2f3ec1cfd87d?fit=crop&fm=jpg&h=700&q=75&w=1050">
<img src="https://unsplash.imgix.net/photo-1414541944151-2f3ec1cfd87d?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3> Ali Inay</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050">
<img src="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Ales Krivec</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://ununsplash.imgix.net/reserve/oY3ayprWQlewtG7N4OXl_DSC_5225-2.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050">
<img src="https://ununsplash.imgix.net/reserve/oY3ayprWQlewtG7N4OXl_DSC_5225-2.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Kyle Richner</h3>
</div>
</div>
</a>
</div>
<div class="box">
<a class="lightCustom" href="https://ununsplash.imgix.net/photo-1414788020357-3690cfdab669?fit=crop&fm=jpg&h=700&q=75&w=1050">
<img src="https://ununsplash.imgix.net/photo-1414788020357-3690cfdab669?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
<div class="caption">
<div class="box_title">
<h3>Rula Sibai</h3>
</div>
</div>
</a>
</div>
</section>
<section class="wrapper clearfix" data-section="about">
<div class="inner">
<div class="inner_thumb">
<img src="https://ununsplash.imgix.net/reserve/ZF75d1lhQ0SyLWYEGOqO_21_forest_mountains.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
</div>
<div class="inner_text">
<h2>ABOUT ME.</h2>
<p class="lead">Hello. My name is Moncho Varela . I'm a web designer, web developer, illustrator & musician. I live in Spain, La Coruña, the best place of the World.</p>
<p>I'm extremely passionate about the web, design, illustration, animation, typography, web standards, user experience & photography. I've got tons of experience designing logos, icons & mascots for businesses & producing unique online brand experiences. I've been designing websites since 5 years old.</p>
<p>I like to
<a href="https://twitter.com/nakome">tweet</a> a lot about stuff, so
<a href="http://twitter.com/intent/user?screen_name=nakome">follow me</a> on Twitter if you can put up with my ramblings.
</p>
</div>
</div>
</section>
<section class="wrapper clearfix" data-section="contact">
<div class="inner">
<div class="inner_thumb">
<img src="https://unsplash.imgix.net/photo-1414541944151-2f3ec1cfd87d?fit=crop&fm=jpg&h=700&q=75&w=1050" class="media" alt=""/>
</div>
<div class="inner_text">
<form action="">
<label>
Name
<input type="text" placeholder="Your name" />
</label>
<label>
Email
<input type="email" placeholder="Your email" required />
</label>
<label>
Menssage
<textarea placeholder="Your message"></textarea>
</label>
<label>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
</section>
<!-- lightModal -->
<div class="lightModal">
<div class="lightModal-inner">
<button class="lightModal-close" role="button">×</button>
<h3 class="lightModal-title"></h3>
<img class="lightModal-image" src="http://placehold.it/350x150" alt="Title here">
</div>
</div>
<!-- / lightModal -->