One Page Responsive Website Template By Ahsan Khurshid

index.html

<!-- Google Web Fonts -->
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
  
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>


        <!-- Header: begins -->  
        <header id="header">
        	
            <!-- Centered Wrapper: begins -->
            <div class="centered-wrapper">
                
                <!-- Logo: begins -->
                <div id="logo">  
                    <span class="logo">Your Logo</span> 
                </div>
                <!-- Logo: ends -->
                
                <!-- Menu Icon: begins -->
                <div class="menu-icon"></div>
                <!-- Menu Icon: ends -->
            
                <!-- Navigation: begins -->
                <nav id="navigation">
                
                    <!-- Main Navigation: begins -->
                    <ul id="mainnav" class="sf-menu">
                        <li><a href="#About"><span>About</span></a></li>
                        <li><a href="#Services"><span>Services</span></a></li>
                        <li><a href="#Contact"><span>Contact</span></a></li> 
                    </ul>
                    <!-- Main Navigation: ends -->
                
                </nav>
                <!-- Navigation: ends -->
            	
            </div>
        	<!-- Centered Wrapper: eds -->
        </header> 
        <!-- Header: ends --> 
        
        <!-- Wrapper: begins -->
        <div id="wrapper">
        
            <!-- Section: begins -->
            <section id="About" class="section darker">
        
                <!-- Double Space: begins -->
                <div class="double-space"></div>
                <!-- Double Space: ends -->
        
                <!-- Centered Wrapper: begins -->
                <div class="centered-wrapper">
                    <h1>About</h1>
                    <h2>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry
                    </h2>
                    <p class="box">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
                    </p>
                </div> 
                <!-- Centered Wrapper: eds -->
                
                <!-- Double Space: begins -->
                <div class="double-space"></div>
                <!-- Double Space: ends -->
        
            </section>
            <!-- Section: ends -->
        
            <!-- Section: begins -->  
            <section id="Services" class="section lighter">
        
                <!-- Double Space: begins -->
                <div class="double-space"></div>
                <!-- Double Space: ends -->
        
        		<!-- Centered Wrapper: begins -->
                <div class="centered-wrapper">
                    <h1>Services</h1>
                    <h2>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry
                    </h2>
                    <p class="box">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </p>
                </div>
                <!-- Centered Wrapper: ends -->
                
                <!-- Double Space: begins -->
                <div class="double-space"></div>
                <!-- Double Space: ends -->
        
            </section>
            <!-- Section: ends -->
            
            <!-- Section: begins -->  
            <section id="Contact" class="section darker">
        
                <!-- Double Space: begins -->
                <div class="double-space"></div>
                <!-- Double Space: ends -->
        
        		<!-- Centered Wrapper: begins -->
                <div class="centered-wrapper">
                    <h1>Contact</h1>
                    <h2>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry
                    </h2>
                    <p class="box">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </p>
                </div>
                <!-- Centered Wrapper: ends -->
                
                <!-- Double Space: begins -->
                <div class="double-space"></div>
                <!-- Double Space: ends -->
        
            </section>
            <!-- Section: ends -->
            
        </div>
        <!-- Wrapper Ends -->

one-page-responsive-website-template-by-ahsan-khurshid.markdown

One Page Responsive Website Template By Ahsan Khurshid

One page responsive website - Parallax Scrolling

A Pen by Stan Williams on CodePen.

License.

script.js

/* SmoothScroll */

!function(){function e(){var e=!1;e&&c("keydown",r),v.keyboardSupport&&!e&&u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")>=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight<=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v.accelerationDelta){var i=(1+30/a)/2;i>1&&(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<M.length;c++){var s=M[c],d=r-s.start,f=d>=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&&(h=p(h));var m=s.x*h-s.lastX>>0,w=s.y*h-s.lastY>>0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&&(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&&(e.scrollLeft+=a),i&&(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&&/\.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&&f(i)?!0:(Math.abs(a)>1.2&&(a*=v.stepSize/120),Math.abs(i)>1.2&&(i*=v.stepSize/120),o(r,-a,-i),e.preventDefault(),void 0)}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&&e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&&(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d>0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o)return i(t,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow-y"),"scroll"===overflow||"auto"===overflow))return i(t,e)}while(e=e.parentNode)}function u(e,t,o){window.addEventListener(e,t,o||!1)}function c(e,t,o){window.removeEventListener(e,t,o||!1)}function s(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function d(e,t){e=e>0?1:-1,t=t>0?1:-1,(k.x!==e||k.y!==t)&&(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&&D[1]==D[2],o=h(D[0],120)&&h(D[1],120)&&h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e>=1?1:0>=e?0:(1==v.pulseNormalize&&(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&&K&&(u("mousedown",a),u("mousewheel",n),u("load",t))}();

/* Parallax */
!function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,i,r){function u(){var r=t.scrollTop();a.each(function(){var t=n(this),u=t.offset().top,c=h(t);r>u+c||u>r+e||a.css("backgroundPosition",o+" "+Math.round((l-r)*i)+"px")})}var h,l,a=n(this);a.each(function(){l=a.offset().top}),h=r?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===i)&&(i=.1),(arguments.length<3||null===r)&&(r=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);

$(function(){
  
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || ($("#Services").parallax("50%", .4)), /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && $(".parallax-section").css({
        "background-attachment": "scroll"
    });
});
   
$(window).bind('resize', function(){
  if($('.menu-icon').css('display') == "none") {
    $('#navigation').show();
  } else {
    $('#navigation').hide();
  }  
});            
                     
$('.menu-icon').on('click', function(event){ 
  event.preventDefault();
  if($('#navigation').css('display') != 'block') {
    $('#navigation').slideDown();
  } else {
    $('#navigation').slideUp();
  }   
});

$('#mainnav li a').on('click', function(event){
  
  var target = $(this).attr('href');
  var offsetTop = $(target).offset().top;
     
  $('html, body').animate({
    scrollTop: offsetTop
  }, 1000);
  
  if( $('.menu-icon').css('display') == 'block') { 
    $('#navigation').slideUp();
  }  
  event.preventDefault();
});
            

            
 

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body, p { 
  padding: 0; 
  margin: 0; 
  font-family : 'PT Sans'; 
  font-weight : 300;
  font-size: 18px;
  line-height: 28px;
}

h1 { 
  font-size: 36px; 
  line-height: 42px; 
  font-family : 'Oswald'; 
  font-weight : 400; 
}

h2 { 
  font-size: 30px;
  line-height: 36px; 
  font-family : 'PT Sans Narrow';
  font-weight : 300;
}

#header {
  height: 100px;
  width: 100%;
  position: fixed;
  top: 0px;
  background-color: #fff;
  border-bottom:1px solid #ccc;
}

#logo { 
  float: left; 
  width: 130px; 
}

.logo {
  font-size: 36px;
  line-height: 100px;
  padding:0;
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: 700;
}

#navigation { 
  display: block; 
  margin-left: 130px; 
  text-align: right;
  margin-top: 20px;
}

#mainnav { font-size: 0px; }

#mainnav li { 
  display: inline-block;
  font-size: 22px;
  margin: 15px;
}

#mainnav li:last-child { margin-right: 0px; }

#mainnav li a {
  text-decoration: none;
  color: #333;
}

#mainnav li a:hover {
  color: #999;
}

.double-space { height: 150px; }

.section { 
  min-height: 700px;
  overflow: hidden;
}

.darker { background-color : #333; }
.lighter { background-color : #fff; }

#About { }
#Services { background : url(https://thumbs.dreamstime.com/b/big-brown-floors-wood-planks-texture-background-wallpaper-stand-product-showcase-43918185.jpg) 50% 0 repeat fixed;  }
 
.centered-wrapper { margin: 0 auto; text-align: center; max-width: 1250px; overflow: hidden; }

.section.darker h1 { color: #fff; }
.section.darker h2 { color: #ccc; } 
.section.darker p  { color: #fff; }

.section.lighter h1 { color: #333; }
.section.lighter h2 { color: #555; }
.section.lighter p  { color: #333; }

.section p.box { text-align: left; }

.section .box { 
  background-color: rgba(0,0,0,0.2); 
  border: 1px solid rgba(0,0,0,0.2); 
}

.box { 
  padding: 25px; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.menu-icon { 
  display:none;  
  position: absolute;
  width: 24px;
  height: 24px;
  background:url(https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/menu-24-32.png) left top no-repeat;
  -webkit-background-size:100%;
  -moz-background-size:100%;
  -ms-background-size:100%;
  -o-background-size:100%;
  background-size:100%;
  right: 0px;
  top:40px;
  cursor:pointer;
}


@media only screen and (max-width:319px) {
  .centered-wrapper { width: 94% !important; }
  #navigation { 
    display: none; 
    width: 100%;
    top: 81px;
    background: #e9e9e9;
    position: absolute;
    z-index:9999;
    margin-left: -3%;
    text-align: left;
  }
  
  #mainnav { 
    padding : 0px;
    margin : 0px; 
  }
  
  #mainnav li { 
    display: block;
    border-bottom : 1px solid #ccc;
    padding: 0 !important;
    margin: 0px; 
  }
  
  #mainnav li:last-child {
    border-bottom: 0px;
  }
  
  #mainnav li a {
    color:#333;
    padding: 10px 15px;
    display: block;
    margin: 0px !important;
  }
  #mainnav li a:hover {
    background-color: #555;
    color: #fff;
  }
  
  .menu-icon { display:block !important; right: 20px;  }
}

@media only screen and (min-width:320px) and (max-width:479px) { 
  .centered-wrapper { width: 94% !important; }
  #navigation { 
    display: none; 
    width: 100%;
    top: 81px;
    background: #e9e9e9;
    position: absolute;
    z-index:9999;
    margin-left: -3%;
    text-align: left;
  }
  
  #mainnav { 
    padding : 0px;
    margin : 0px; 
  }
  
  #mainnav li { 
    display: block;
    border-bottom : 1px solid #ccc;
    padding: 0 !important;
    margin: 0px; 
  }
  
  #mainnav li:last-child {
    border-bottom: 0px;
  }
  
  #mainnav li a {
    color:#333;
    padding: 10px 15px;
    display: block;
    margin: 0px !important;
  }
  #mainnav li a:hover {
    background-color: #555;
    color: #fff;
  }
  
  .menu-icon { display:block !important; right: 20px; }
}

@media only screen and (min-width:480px) and (max-width:767px) {
  .centered-wrapper { width: 96% !important; }
  #navigation { 
    display: none; 
    width: 100%;
    top: 81px;
    background: #e9e9e9;
    position: absolute;
    z-index:9999;
    margin-left: -2%;
    text-align: left;
  }
  
  #mainnav { 
    padding : 0px;
    margin : 0px; 
  }
  
  #mainnav li { 
    display: block;
    border-bottom : 1px solid #ccc;
    padding: 0 !important;
    margin: 0px; 
  }
  
  #mainnav li:last-child {
    border-bottom: 0px;
  }
  
  #mainnav li a {
    color:#333;
    padding: 10px 15px;
    display: block;
    margin: 0px !important;
  }
  #mainnav li a:hover {
    background-color: #555;
    color: #fff;
  }
  
  .menu-icon { display:block !important; right: 20px; }
}

@media only screen and (min-width:768px) and (max-width:1023px) { 
  .centered-wrapper { width: 96% !important; }
}

@media only screen and (min-width:1024px) and (max-width:1279px) { 
  .centered-wrapper { width: 96% !important; }
}

@media only screen and (min-width:1280px) { 
  .centered-wrapper { width: 1250px !important; }
}