CodePen

HTML

            
              <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>MAVEN DAZZ</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/contact.css">
<link rel="stylesheet" href="css/style.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body style=" overflow-x:hidden;background-color:white;">
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
			
			<div class="header" id="header">
<div class="expand">
<!--<img  style="margin-left: 5%; margin-top: 8%; margin-bottom:2%; width:40%; height:37%;z-index:999; " src="img/0.jpg" />-->
<a  href="#" style="margin-top:11%;padding-left:80%;">MENU</a>
</div>
<img  style="margin-left: 5%; margin-top: 6%; margin-bottom:0%; width:40%; height:37%;z-index:999; " src="img/0.jpg" />
<ul id="navigation" class="menu" style="display:none;" >
<li><a href="javascript:window.scroll(0,30);" onclick="myFunction()" > HOME </a></li>
<!-- <li ><a href="#home">HOME</a></li> 
<li ><a href="#exp">EXPLORE</a></li> -->
<li><a href="javascript:window.scroll(0,350);" > EXPLORE </a></li>
<li><a href="javascript:window.scroll(0,1500);" > ABOUT US </a></li>
<!-- <li ><a href="#about">ABOUT US</a> </li>
<li ><a href="#access">ACCESS</a></li> -->
<li><a href="javascript:window.scroll(0,2000);" > ACCESS </a></li>
<li ><a href="">FACEBOOK</a></li>
<li ><a href="">TWITTER</a></li>
<li ><a href="">PINTEREST</a></li>
</ul>
</div>

			

       <div class="main" id="section" >
           

                
                    <header id="home">
					 <img id="home" src="img/1_4.jpg" style="width:100%;margin-top:10%;" />
					<img src="img/t1.png" style="width:80%; height:90%;position:absolute; top:5%; left:10%;" /> 
				<div class="arrows" style="position:fixed;z-index:999;">
				<a href="">	<img src="img/arrow1.png"style="width:4.85%;height:4%;position:fixed;top:95%;left:44%;"/></a>
                        <a href=""><img src="img/arrow2.png"style="width:4.85%;height:4%;position:fixed;top:95%;left:53%;"/></a>
						<img src="img/divider.png"style="width:0.5%;height:6%;position:fixed;top:95%;left:50.5%;"/>
				</div>					

					</header>
					
					<section>
						<img  id="exp" src="img/3_2.jpg" style="width:100%;"  />
					<!--<a href="#indulge"><img src="img/arrow1.png"style="width:3.5%;height:2.75%;position:absolute;top:150%;left:45.5%;"/></a>
                        <a href="#home"><img src="img/arrow2.png"style="width:3.5%;height:2.75%;position:absolute;top:150%;left:53%;"/></a>
						<img src="img/divider.png"style="width:1%;height:3%;position:absolute;top:150%;left:50.5%;"/>-->
						</section>
						<section>
						<img id="indulge" src="img/4_1.jpg" style="width:100%;"  />
						<!--<a href="#moments"><img src="img/arrow1.png"style="width:3.5%;height:2.75%;position:absolute;top:262%;left:45.5%;"/></a>
                        <a href="#exp"><img src="img/arrow2.png"style="width:3.5%;height:2.75%;position:absolute;top:262%;left:53%;"/></a>
						<img src="img/divider.png"style="width:1%;height:3%;position:absolute;top:262%;left:50.5%;"/>-->
						</section>
						<section>
                    	<img id="moments" src="img/5_1.jpg"  style="width:100%;" />
						<!--<a href="#about"><img src="img/arrow1.png"style="width:3.5%;height:2.75%;position:absolute;top:330%;left:45.5%;"/></a>
                        <a href="#indulge"><img src="img/arrow2.png"style="width:3.5%;height:2.75%;position:absolute;top:330%;left:53%;"/></a>
						<img src="img/divider.png"style="width:1%;height:3%;position:absolute;top:330%;left:50.5%;"/>-->
						</section>
						
						<section>
							<img id="about" src="img/6_1.jpg" style="width:100%;"  />
						
						<!--<a href="#access"><img src="img/arrow1.png"style="width:3.5%;height:2.75%;position:absolute;top:453%;left:45.5%;"/></a>
                        <a href="#moments"><img src="img/arrow2.png"style="width:3.5%;height:2.75%;position:absolute;top:453%;left:53%;"/></a>
						<img src="img/divider.png"style="width:1%;height:3%;position:absolute;top:453%;left:50.5%;"/>-->
						</section>
						
						
						<section>
                         <img id="access" src="img/9_1.jpg" style="width:100%;" />
						<!--<a href="#contact"><img src="img/arrow1.png"style="width:3.5%;height:2.75%;position:absolute;top:530%;left:45.5%;"/></a>
                        <a href="#about"><img src="img/arrow2.png"style="width:3.5%;height:2.75%;position:absolute;top:530%;left:53%;"/></a>
						<img src="img/divider.png"style="width:1%;height:3%;position:absolute;top:530%;left:50.5%;"/>-->
						
						<img src="img/text_contact.png" style="width:70%;position:absolute;top:480%;left:15%;" />
					<a href="mailto:MEMBERSHIP@MAVENWORLD.CO" ><img src="img/email.png" style="width:60%;position:absolute;top:500%;left:15%;" /></a>
					<a href="tel:+91 99588 12121">	 <img src="img/phone.png" style="width:30%;position:absolute;top:508%;left:15%;"  /></a>
						 <img src="img/social_icons.png" style="width:60%;position:absolute;top:515%;left:15%;" />
						 </section>
						 
						 <section>
						 <img id="contact" src="img/9_1.jpg" style="width:100%;" />
						 <!--<img src="img/arrow1.png"style="width:3.5%;height:2.75%;position:absolute;top:620%;left:45.5%;"/>
                        <a href="#home"><img src="img/arrow2.png"style="width:3.5%;height:2.75%;position:absolute;top:620%;left:53%;"/></a>
						<img src="img/divider.png"style="width:1%;height:3%;position:absolute;top:620%;left:50.5%;"/>-->
                    <div class="formSection fl" style=" width:90%;height:auto; position:absolute;top:580%;left:10%;">
<!--                    <div class="topText fl" style="position:relative;width:100%;height:15%"> <p style="color:white;"><span class="textChange"></span> Request more information or call back from </br>a member of our team.</p>
								</div> -->
                    
                    <div class="formBox fl" >
                        <div class="boxs" >
                            <div class="title fl">NAME<span style="color:white;">*</span></div><div class="fl"><input id="contact_name" type="text" size="49" name="cf_name" class="inputBox" style="width:80%;height:55%; position:absolute;bottom:0%;left:19%;top:5%;color:white;"></div>
                        </div>
                        <div class="boxs">
                            <div class="title fl">EMAIL<span style="color:#CFC17C;">*</span></div><div class="fl"><input id="contact_email" type="text" size="49" name="cf_name" class="inputBox" style="width:80%;height:55%; position:absolute;bottom:0%;left:20%;top:5%;color:white;"></div>
                        </div>
                        <div class="boxs">
                            <div class="title fl">PHONE</div><div class="fl"><input id="contact_phone" type="text" size="49" name="cf_name" class="inputBox" style="width:80%;position:absolute;bottom:0%;left:21%;top:5%;color:white;"></div>
                        </div>
                        <div class="boxs">
                            <div class="title fl">COUNTRY</div>
							<div class="fl"><input id="contact_country" type="text" size="49" name="cf_name" class="inputBox" style="width:70%;position:absolute;bottom:0%;left:26%; top: 5%; color:white;">
                        </div>
						</div>
                        <div class="boxs" >
                            <div class="title fl">PREFERRED TIME FOR CALL BACK</div><div class="fl"><input id="pre_time_call" type="text" size="49" name="cf_name" class="inputBox" style="width:30%;position:absolute;bottom:0px;left:70%;top:5%;color:white;">
							</div>
                        </div>
                        <div class="boxs" style="height:70%;">
                            <div class="title fl">MESSAGE <span style="color:#CFC17C;">*</span></div>
							<div class="fl">
							<textarea id="contact_message" rows="3" cols="43" name="cf_message" class="inputBox" style="width:70%;position:absolute;bottom:0%;left:27%;color:white;"></textarea>
							</div>
                        </div>
                        
                        <div class="boxs">
    
    <p style="font-family:Gotham; color:#CFC17C; font-size:7px; float:right; margin:0px; padding-right:5px;">* MANDATORY FIELDS</p>
                                
                                </div>
		<img src="img/send.png" style="width:20%;height:12%;position:absolute;left:35%;top:90%;" onclick="javascript: validateData();">
                        </section>
                        
                        
                    </div>
                    
        
		</div>
            
        </div> <!-- #main-container --> 
		

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.plusanchor.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('body').plusAnchor({
				easing: 'easeInOutExpo',
				offsetTop: -20,
				speed: 1000,
				onInit: function( base ) {

					if ( base.initHash != '' && $(base.initHash).length > 0 ) {
						window.location.hash = 'hash_' + base.initHash.substring(1);
						window.scrollTo(0, 0);
		
						$(window).load( function() {
		
							timer = setTimeout(function() {
								$(base.scrollEl).animate({
									scrollTop: $( base.initHash ).offset().top
								}, base.options.speed, base.options.easing);
							}, 2000); // setTimeout
		
						}); // window.load
					}; // if window.location.hash
		
				} // onInit
			});
		});
		</script>
		
		<script type="text/javascript">
	  $(document).ready(function(){
  $(".header .expand a  ,   .menu li").click(function(){
    $("ul").slideToggle("slow");
  });

});
</script>
<!--<script>
var pos;
pos=document.getElementById('header').scrollHeight;

alert(pos);
function myFunction(pos)
{
document.getElementsById('home').style.marginTop = pos;
alert("MyJS Is working");
}
</script>-->
	  <!--<script type="text/javascript">
	  $(document).ready(function(){
 var pos= $('body').scrollTop();
 if (pos<=600px)
 {
 
 $("#arrow1").attr('href', "http://www.facebook.com");
 
 }
 else
 {
 $("#arrow1").attr('href', "http://www.google.com");
 }
});
</script>-->

       <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
		
		

        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
			</script>
			 <script type="text/javascript">
$(window).load(function() {
     $("#home").css("padding-top","10%");
});


</script>



		
    </body>
</html>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
/*Embedding Fonts */
@font-face
{
font-family: myFirstFont;
src: url('fonts/MinionPro-Regular.otf'),
    
}
@font-face
{
font-family: mySecondFont;
src: url('fonts/GothamHTF-Book.otf'),
     
}
@font-face
{
font-family: myThirdFont;
src: url('fonts/GothamHTF-Medium.otf'),
     
}
@font-face
{
font-family: myFourthFont;
src: url('fonts/Arial.ttf'),
    
}
@font-face
{
font-family: myFifthFont;
src: url('fonts/Arial Italic.ttf'),
     
}
html,
button,
input,
select,
textarea {
    color: #222;
}

body {
	margin:0;
	padding: 0;
    /**font-size: 1em;
    line-height: 1.4; */
	 background-color:orange; 
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
	
    vertical-align: middle;
	
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
   
	margin: 0 0;
    background: pink;
    color: #000;
    padding: 0 0; 
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    /**  font: 16px/26px Helvetica, Helvetica Neue, Arial;  */
}

.wrapper {
   width: 100%;
   margin: 0;
   padding: 0;
  /**  margin: 0 5%; */
  background-color:black;

}

/* ===================
    ALL: BLACK THEME
   =================== */

.header-container {

    border-bottom: 0px solid black;
	/** for fixing it on the top***/

	
}

.footer-container,
.main aside {
    /*border-top: 20px solid #e44d26;*/
}

.header-container,
.footer-container,
.main aside {
    /*background: #f16529; */
	/**height: 18%;
	background: black; **/
}

.title {
    color: white;
	
}

/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0; 
	padding: 0;
	float:center;
	list-style:none;
}


nav a {
    /*display: block;*/ 
	display: block;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    /** font-weight: bold;**/
    color: white;
    background-color: black;
}

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}
.panel ul
{
background-color:black;
}
.panel ul li 
{
background-color:black;
border-bottom: solid 2px white;
}
div.wrapper + div.main { padding-top: 350px; }
/* ==============
    MOBILE: Main
   ============== */

.main {
    /*padding: 0px 0;*/
	float:center;
}

.main article h1 {
    font-size: 2em;
}

/***.main aside {
    color: white;
    padding: 0px 5% 10px;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
} **/

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}



/* ==========================================================================
   DAZZ custom styles
   ========================================================================== */

.same { 
float: left; 
display: inline; 
width: auto; 
height: 20%; 
	padding:0; 
	margin: 0;
 background: black;
position: fixed;

}
 li.divider
{
/*border-top:solid 1px black;*/

border-bottom:solid 1px #3c3c3c;
border-top:solid 1px #000;
height:1px !important;
margin:8px 0 !important;
width:100%;

}












/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 534px) {

/****DAZZ
@media only screen and (min-width: 480px) {
=================
    INTERMEDIATE: Menu
   ==================== */


    nav a {
       float: flat;
        /**width: 7%; **/
		margin: 0 0;
		padding: 0 0; 
        /*margin: 0 1.7%; */
        /*padding: 25px 2%; */
  
		
    }

    nav li:first-child a {
        margin-left: 0;
		     }

    nav li:last-child a {
        margin-right: 0;		
    }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
	background-color:black;
        display: inline;
		
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}

@media only screen and (min-width: 854px) {

/* @media only screen and (min-width: 768px) {====================
    WIDE: CSS3 Effects
   ==================== */

    .header-container,
    .main aside {
        -webkit-box-shadow: 0 5px 10px #aaa;
           -moz-box-shadow: 0 5px 10px #aaa;
                box-shadow: 0 5px 10px #aaa;
    }

/* ============
    WIDE: Menu
   ============ */

    .title {
        float: left;
    }

    nav {
        float: right;
        width: auto;
		/*width: 38%; */
    }

/* ============
    WIDE: Main
   ============ */

    .main article {
        /**float: left; */
        /**width: 57%;  */
		width: auto
    }

    .main aside {
        float: right;
        width: 28%;
    }
}

@media only screen and (min-width: 1266px) {

/* ===============
@media only screen and (min-width: 1140px) {
    Maximal Width
   =============== */

    .wrapper {
        width: 100%; /* 1140px - 10% for margins */
        /**margin: 0 auto; */
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
  /**DAZZ   margin: -1px;
    overflow: hidden;
    padding: 0;  **/
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
		
    }

    img {
        max-width: 100% !important;
	
	
    }

    @page {
       /** margin: 0.5cm; DAZZ **/
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
                      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.plusanchor.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('body').plusAnchor({
				easing: 'easeInOutExpo',
				offsetTop: -20,
				speed: 1000,
				onInit: function( base ) {

					if ( base.initHash != '' && $(base.initHash).length > 0 ) {
						window.location.hash = 'hash_' + base.initHash.substring(1);
						window.scrollTo(0, 0);
		
						$(window).load( function() {
		
							timer = setTimeout(function() {
								$(base.scrollEl).animate({
									scrollTop: $( base.initHash ).offset().top
								}, base.options.speed, base.options.easing);
							}, 2000); // setTimeout
		
						}); // window.load
					}; // if window.location.hash
		
				} // onInit
			});
		});
		</script>
		
		<script type="text/javascript">
	  $(document).ready(function(){
  $(".header .expand a  ,   .menu li").click(function(){
    $("ul").slideToggle("slow");
  });

});
</script>
<!--<script>
var pos;
pos=document.getElementById('header').scrollHeight;

alert(pos);
function myFunction(pos)
{
document.getElementsById('home').style.marginTop = pos;
alert("MyJS Is working");
}
</script>-->
	  <!--<script type="text/javascript">
	  $(document).ready(function(){
 var pos= $('body').scrollTop();
 if (pos<=600px)
 {
 
 $("#arrow1").attr('href', "http://www.facebook.com");
 
 }
 else
 {
 $("#arrow1").attr('href', "http://www.google.com");
 }
});
</script>-->

       <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
		
		

        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
			</script>
			 <script type="text/javascript">
$(window).load(function() {
     $("#home").css("padding-top","10%");
});


</script>

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................