X

How to create a HTML5 and CSS3 onepage website, with demo

Onepage website is modern trend among internet and you can view many beautiful onepage driven websites there. One of the main advantage of these kind of website is it can give easy and enjoyable experience for users. It is suitable for those who have little bit of text on each topic. it will also give proper idea about the company on single look.

Here is a complete tutorial on creating a onepage website, and can make modification according to your needs. You can view the working demo of this tutorial and download source code in zip format at the bottom of this post.

Html

 
<!doctype html>
<html lang="en-US" class="no-js">
<head>
	<meta charset="UTF-8">
	<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
	<title>Max Onepage - Free Multipurpose Responsive HTML5 CSS3 Website Template - Demo | Vishmax.com</title>
 
	<meta name="description" content="Max One Page - Free Responsive HTML5 CSS3 Website Template Demo">
 
</head>
 
<body class="home">
 
	<input type="radio" id="menu1" checked name="menu">
	<input type="radio" id="menu2" name="menu">
	<input type="radio" id="menu3" name="menu">
	<input type="radio" id="menu4" name="menu">
 
	<div id="navi">
		<ul>
			<li><label for="menu1"><i class="fa fa-home"></i></label> <span>Home</span> </li>
			<li><label for="menu2"><i class="fa fa-user"></i></label> <span>About Us</span> </li>
			<li><label for="menu3"><i class="fa fa-dropbox"></i></label> <span>Services</span> </li>
			<li><label for="menu4"><i class="fa fa-phone"></i></label> <span>Contact Us</span> </li>
		</ul>
	</div>
 
	<div class="menu menu1">
		<a href="http://www.vishmax.com/"><img src="http://vishmax.com/demos/images/logo-company.png" alt="" itemprop="image"></a>
		<h2 class="caption-home">Welcome To Our Company</h2>
		<div class="description">You can add a short note about your Company here.</div>
		<div class="button mobile-hiden">Download Now</div>
	</div>
 
	<div class="menu menu2">
		<h2 class="caption-child">About Us</h2>
		<div class="width-50">
		<p>
Python is a very simple language, and has a very straightforward syntax. It encourages programmers to program without boilerplate (prepared) code. The simplest directive in Python is the "print" directive - it simply prints out a line (and also includes a newline, unlike in C).
<br>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2, because it is more widely used and supported. However, Python 3 is more semantically correct, and supports newer features.
</p>
<p class="mobile-hiden">
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. However, Python 3 is more semantically correct, and supports newer features. This tutorial uses Python 2, because it is more widely used and supported. However, Python 3 is more semantically correct, and supports newer features.
<br><br>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different.
</p>
		</div>
 
 
		<div class="width-40 mobile-hiden">
		<h3>Our History</h3>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,
<br><br>
 
		<h3>Our Vision</h3>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,
<br><br>
 
		<h3>Our Partners</h3>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,
<br><br>
 
		</div>
	</div>
 
	<div class="menu menu3">
		<h2 class="caption-child">Our Services</h2>
 
		<div class="width-40">
		<ul>
			<li>
<h3>Our Services 1</h3>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,
			</li>
			<li>
<h3>Our Services 2</h3>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,
			</li>
			<li>
<h3>Our Services 3</h3>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,
			</li>
			<li class="mobile-hiden">
<h3>Our Services 4</h3>
There are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,
			</li>
		</ul>
		</div>
 
		<div class="width-40 mobile-hiden"><img src="http://vishmax.com/demos/images/dummy-mob.png" alt="" itemprop="image"></div>
 
 
	</div>
 
	<div class="menu menu4">
		<h2 class="caption-child">Contact Us</h2>
<form id="form" action="" method="post">
    <p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx</p>
    <div>
        <label for='name'>Name <span class='required'>(required)</span></label>
        <input type='text' name='name' placeholder='your name here' required />
    </div>
 
    <div>
        <label for='tel'>Tel</label>
        <input type='tel' name='tel' placeholder='your telephone here' />
    </div>
 
    <div>
        <label for='email'>Email <span class='required'>(required)</span></label>
        <input type='email' name='email' placeholder='you@yourdomain.com' required />
    </div>
 
    <div>
        <label for='url'>Website</label>
        <input type='url' name='website' placeholder='http://' />
    </div>
 
    <div>
        <label for='message'>Message <span class='required'>(required)</span></label>
        <textarea name='message' required></textarea>
    </div>
 
    <div>
        <button type='submit'>Send Message</button>
    </div>
</form>
 
 
	</div>
 
</body>
</html>

CSS

 
		* {
			margin : 0;
			padding : 0;
		}
		body {
			font-family:"Open Sans"; 
			font-size: 0.9em;
			line-height: 1.8;
			overflow : hidden;
		}
		#navi {
			width : 40px;
			top : 38%;
			position : fixed;
			left : 0;
			z-index : 9999;
		}
		#navi li {
			height : 20px;
			width : 20px;
			margin : 10px;
			list-style : none;
			position : relative;
			color : #fff;
			border-radius : 50%;
			box-shadow : 0 0 5px #000 inset;
			transition : all 250ms ease;
		}
		#navi li span {
			margin-left : 40px;
			position : relative;
			top : -22px;
			height : 24px;
			width : 90px;
			text-align : center;
			line-height : 24px;
			display : block;
			opacity : 0;
			background : #fff;
			color:#000;
			border-radius : 2px;
			transition : all 250ms ease;
		}
		#navi li span:after {
			content : '';
			position : absolute;
			height : 10px;
			width : 10px;
			left : -4px;
			top : 7px;
			transform : rotate(45deg);
			background : #fff;
		}
		#navi li:hover span {
			margin-left : 30px;
			opacity : 1;
		}
		#navi li label {
			display : block;
			cursor : pointer;
			height : 20px;
			width : 20px;
		}
		#navi li label i.fa {
			height : 20px;
			width : 20px;
			text-align : center;
			line-height : 20px;
			font-size : 16px;
		}
		.menu {
			height : 100%;
			width : 100%;
			position : absolute;
			box-sizing : border-box;
			transition : all 1000ms ease;
			padding : 30px 50px;
		}
		.menu1 {
			background:#252e1b;
			background-size : 100% 100%;
			top : 0%;
		}
		.menu2 {
			background:#417e5c;
			top : 100%;
		}
		.menu3 {
			background:#11bac0;
			top : 200%;
		}
		.menu4 {
			background:#496066;
			top : 300%;
		}
		input[type="radio"] {
			display : none;
		}
		#navi li:hover, #menu1:checked ~ #navi li:nth-child(1), #menu2:checked ~ #navi li:nth-child(2), #menu3:checked ~ #navi li:nth-child(3), #menu4:checked ~ #navi li:nth-child(4) {
			box-shadow : 0 0 15px #000 inset;
		}
		#menu1:checked ~ .menu1 {
			top : 0%;
		}
		#menu1:checked ~ .menu2 {
			top : 100%;
		}
		#menu1:checked ~ .menu3 {
			top : 200%;
		}
		#menu1:checked ~ .menu4 {
			top : 300%;
		}
		#menu2:checked ~ .menu1 {
			top : -100%;
		}
		#menu2:checked ~ .menu2 {
			top : 0%;
		}
		#menu2:checked ~ .menu3 {
			top : 100%;
		}
		#menu2:checked ~ .menu4 {
			top : 200%;
		}
		#menu3:checked ~ .menu1 {
			top : -200%;
		}
		#menu3:checked ~ .menu2 {
			top : -100%;
		}
		#menu3:checked ~ .menu3 {
			top : 0%;
		}
		#menu3:checked ~ .menu4 {
			top : 100%;
		}
		#menu4:checked ~ .menu1 {
			top : -300%;
		}
		#menu4:checked ~ .menu2 {
			top : -200%;
		}
		#menu4:checked ~ .menu3 {
			top : -100%;
		}
		#menu4:checked ~ .menu4 {
			top : 0%;
		}
		.caption-home {
			width: auto;
			margin:5% 0 0 0;
			text-align : center;
			line-height:1.1;
			position : relative;
			color : #FFF;
			font-size:500%;
		}
		.caption-child {
			width: auto;
			margin:3% 0 2px 0;
			text-align : center;
			line-height : 40px;
			position : relative;
			color : #FFF;
			font-size:300%;
			font-weight:300;
		}
		.description{
			width: auto;
			text-align : center;
			line-height:2.5;
			position : relative;
			color : #ffF;
			font-size:22px;
			font-weight:300;
		}
		.width-50{
			float:left;
			width:50%;
			height:auto;
			color:#fff;
			margin:3% 0 0 2%;
		}
		.width-40{
			float:right;
			width:40%;
			height:auto;
			color:#fff;
			margin:3% 2% 0 0;
		}
		.width-50 ul, .width-40 ul{
			float:left;
			width:100%;
			height:auto;
		}
		.width-50 ul li, .width-40 ul li{
			float:left;
			width:100%;
			margin:5px 0;
			padding:10px 0;
			border-bottom:1px solid #eee;
		}
		.width-50 img, .width-40 img{
			float:left;
			width:90%;
			height:auto;
			margin:15% 0 0 0;
		}
		.button {
			width:200px;
			margin: 3% 0 0 40%;
			color: #ffffff;
			font-size: 20px;
			padding: 10px 20px 10px 20px;
			text-decoration: none;
			text-align:center;
			background: #fad900;
			background-image: -webkit-linear-gradient(top, #fad900, #fab508);
			background-image: -moz-linear-gradient(top, #fad900, #fab508);
			background-image: -ms-linear-gradient(top, #fad900, #fab508);
			background-image: -o-linear-gradient(top, #fad900, #fab508);
			background-image: linear-gradient(to bottom, #fad900, #fab508);
			-webkit-border-radius: 28;
			-moz-border-radius: 28;
			border-radius: 28px;
		}
		.button:hover {
			background: #fcfc3c;
			background-image: -webkit-linear-gradient(top, #fcfc3c, #d9cb34);
			background-image: -moz-linear-gradient(top, #fcfc3c, #d9cb34);
			background-image: -ms-linear-gradient(top, #fcfc3c, #d9cb34);
			background-image: -o-linear-gradient(top, #fcfc3c, #d9cb34);
			background-image: linear-gradient(to bottom, #fcfc3c, #d9cb34);
			text-decoration: none;
		}
		#form {
			min-width:300px;
			max-width:600px;
			margin:auto;
			padding:20px;
		}
		#form h2 {
			color:#27748A;
			font-size:35px;
			margin:0;
		}
		#form p {
			font-size:15px;
			color:#eee;
		}
		#form div {
			margin-top:10px;
		}
		#form input, textarea, button {
			width:100%;
			border:1px solid #eee;
			padding:8px 5px;
		}
		#form label {
			font-weight:bold;
			font-size:12px;
			color:#fff;
		}
		#form button{
			background-color: #fad900;
			color: #000;
			cursor:pointer;
		}
		#form button:hover {
			background-color: #fcfc3c;
		}
		.required{
			color: #FF6600;
		}
 
		@media (max-width:720px) {
			.menu {
				padding : 10px 35px;
			}
			.width-50, .width-40{
				width:92%;
				margin: 15% 0 0 6%;
			}
			.width-50 img, .width-40 img{
				width:100%;
				margin:0 0 0 0;
			}
			.mobile-hiden{
				display:none;
			}
 
		}

Demo Download