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 &amp; 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 &amp; photography. I've got tons of experience designing logos, icons &amp; mascots for businesses &amp; 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">&times;</button>
      <h3 class="lightModal-title"></h3>
      <img class="lightModal-image" src="http://placehold.it/350x150" alt="Title here">
    </div>
  </div>
  <!-- / lightModal -->