NKpage

In this example below you will see how to do a NKpage with some HTML / CSS and Javascript

take 2

Thumbnail
This awesome code was written by SamrajM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SamrajM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>NKpage</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
      <ul class="nav navbar-nav">
        <li class="target active text-uppercase" id="home-button"><a href="#">Home</a></li>
        <li class="target text-uppercase" id="about-button"><a href="#">About</a></li>
        <li><img src="http://number-krunchers.co.uk/wp-content/themes/Superted/img/logo.png" id="me"/></li> 
        <li class="target text-uppercase" id="portfolio-button"><a href="#">Reviews</a></li>
        <li class="target text-uppercase" id="contact-button"><a href="#">Contact</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="icon"><a href="https://codepen.io/SamrajM/" target="_blank"><i class="fa fa-codepen"></i></a></li>
        <li class="icon"><a href="https://twitter.com/SamrajMoorjani" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li class="icon"><a href="https://github.com/smoorjani" target="_blank"><i class="fa fa-github"></i></a></li>
        <li class="icon last"><a href="https://www.linkedin.com/in/samraj-m-a74372120
" target="_blank"><i class="fa fa-linkedin"></i></a></li>
      </ul>
    </nav>
  
  <div class="pages-container">
    <div class="page active-page" id="home-page">
      <h1>Number Krunchers Ltd.</h1>
      <h2></h2>
    </div>
    
    <div class="page" id="about-page">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-5">
          <h1>About us</h1>
          <p>For 9 years, Number-Krunchers has been providing quality, personalized financial guidance to local individuals and businesses. Number-Krunchers expertise ranges from Corporate tax returns to Self-assessment.

Number-Krunchers is one of the leading firms in and throughout Hounslow. By combining our expertise, experience and the team mentality of our staff, we assure that every client receives the close analysis and attention they deserve.
Number-Krunchers is dedicated to provide sole traders and small businesses with professional tax and accounting services at an affordable rate without compromising the quality of our services. We strive for excellence.</p>
        </div>
      </div>
    </div>
    
    <div class="page" id="portfolio-page">
      <div class="row">
        <div class="col-sm-0 col-md-2"></div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="" target="_blank"><img src="#" alt="Alan Turing Tribute"></a>
            <div class="caption">
              <h3>Project 1</h3>
                <p>sumary</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="" target="_blank"><img src="#" alt="Personal Portfolio"></a>
            <div class="caption">
              <h3>Project 2</h3>
              <p>summary</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="#" target="_blank"><img src="#" alt="Project 3"></a>
            <div class="caption">
              <h3>Project 3</h3>
              <p>summary</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-2">
          <div class="thumbnail">
            <a href="#" target="_blank"><img src="#" alt="Project 4"></a>
            <div class="caption">
              <h3>Project 4</h3>
              <p>summary</p>
            </div>
          </div>
        </div>
      </div> 
    </div>
    
    <div class="page" id="contact-page">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
      <div class="jumbotron">
        <h1>Contact me</h1>
        <p>You can contact me on <span class="mail">smoorjani@live.com</span> or...</p>
        <a href="https://codepen.io/SamrajM/" target="_blank"><i class="fa fa-codepen fa-2x"></i></a>
        <a href="https://twitter.com/SamrajMoorjani" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="https://github.com/smoorjani" target="_blank"><i class="fa fa-github fa-2x"></i></a>
        <a href="https://www.linkedin.com/in/samraj-m-a74372120
" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
      </div>
    </div>
    
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SamrajM/nkpage-rwLoXN */
body {
  font-family: 'Roboto', sans-serif;
  color: #000;
}

nav {
  height: 40px;
}

#me {
  width: 250px;
  height: 50px;
  border: 5px solid #;
}

#about-button {
  padding-right: 10px;
}

#portfolio-button {
  padding-left: 10px;
}

.icon {
  margin-left: -15px;
}

.last {
  margin-right: 10px;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#home-page {
  background: url('http://cdn.wallpapersafari.com/70/62/uCepga.jpg');
  background-size: cover;
  text-align: center;
}

#home-page h1 {
  font-family: 'Lobster', serif;
  font-size: 6em;
  margin-top: 370px;
}

#home-page h2 {
  font-family: 'Roboto', sans-serif;
  margin-top: -10px;
  font-size: 1.5em;
  font-weight: bold;
}

#about-page {
  background: url('http://cdn.wallpapersafari.com/70/62/uCepga.jpg');
  background-size: cover;
  text-align: justify;
}

#about-page h1 {
  font-size: 3em;
  font-weight: bold;
  font-family: 'Lobster', 'Roboto', serif;
  text-align: center;
}

#about-page .row {
  font-size: 1.1em;
  margin-top: 24%;
}

#portfolio-page {
  background: url('http://cdn.wallpapersafari.com/70/62/uCepga.jpg');
  background-size: cover;
}

.row {
  margin-top: 10%;
  width: 100%;
}

.row div {
  padding-top: 20px;
}

#contact-page {
  background: url('http://cdn.wallpapersafari.com/70/62/uCepga.jpg');
  background-size: cover;
  text-align: center;
  color: #fff;
}

.jumbotron {
  background: none;
}

.mail {
  color: white;
}

.jumbotron .fa {
  color: #fff;
  margin: 0px 3px;
}

.jumbotron .fa:hover {
  color: palevioletred;
}

/*Downloaded from https://www.codeseek.co/SamrajM/nkpage-rwLoXN */
$(document).ready(function() {
  $('.page').not('.active-page').hide();
  
  $('.target').click(function() {
    $('.target').removeClass('active');
    $(this).addClass('active');
    switch($(this).attr('id')) {
      case 'home-button':
        changePage('#home-page');
        break;
      case 'about-button':
        changePage('#about-page');
        break;
      case 'portfolio-button':
        changePage('#portfolio-page');
        break;
      case 'contact-button':
        changePage('#contact-page');
        break;
    }
  });
  
  $(window).bind('mousewheel', function(e){
    if (e.originalEvent.wheelDelta / 120 > 0) {
      var prevPage = $('.active-page').prev().attr('id');
      if (prevPage.length > 0) {
        changePage('#' + prevPage);
        $('.target').removeClass('active');
        switch(prevPage) {
          case 'home-page':
            $('#home-button').addClass('active');
            break;
          case 'about-page':
            $('#about-button').addClass('active');
            break;
          case 'portfolio-page':
            $('#portfolio-button').addClass('active');
            break;
          case 'contact-page':
            $('#contact-button').addClass('active');
            break;
        }
      }
    }
    else {
      var nextPage = $('.active-page').next().attr('id');
      if (nextPage.length > 0) {
        changePage('#' + nextPage);
        $('.target').removeClass('active');
        switch(nextPage) {
          case 'home-page':
            $('#home-button').addClass('active');
            break;
          case 'about-page':
            $('#about-button').addClass('active');
            break;
          case 'portfolio-page':
            $('#portfolio-button').addClass('active');
            break;
          case 'contact-page':
            $('#contact-button').addClass('active');
            break;
        }
      }
    }
  });
});

function changePage(page) {
  var currentPage = $('.active-page');
  if('#' + currentPage.attr('id') == page) return 0;
  currentPage.fadeOut(600);
  currentPage.removeClass('active-page');
  $(page).fadeIn(600);
  $(page).addClass('active-page');
}

Comments