One page website is a modern website in which there is only one page all the pages like home, about and contact etc are combined and creates a single page so people dont have to visit multiple pages to get your website detail this kind of website design is very popular in business website.
So, in this tutorial we will show you how to create one page website template using HTML, CSS and jQuery.You may also like animated background using CSS3.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Create One Page Website Template It Takes Only Two Steps:-
- Make a HTML file and define markup and scripting
- Make a CSS file and define styling
Step 1. Make a HTML file and define markup and scripting
We make a HTML file and save it with a name website.html
<html> <head> <link rel="stylesheet" type="text/css" href="website_style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function scrollto(div) { $('html,body').animate( { scrollTop: $("#"+div).offset().top },'slow'); } </script> </head> <body> <div id="header"> <li id="site_name">TalkersCode.com</li> <li onclick="scrollto('home');">HOME</li> <li onclick="scrollto('about');">ABOUT</li> <li onclick="scrollto('contact');">CONTACT</li> </div> <div id="home"> <h1>Demo Of One Page Website Template Using HTML, CSS And jQuery<p>TalkersCode.com</p></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. </p> </div> <div id="about"> <p>In this tutorial we will show you how to create One Page Website Template Using HTML, CSS And jQuery.Now you can build simple and beautiful website quickly.</p> <p>TalkersCode.com is a complete destination to learn Web Development with Best, Fast and Easy Methods for those who is a novice and wants to be the Xpert in Web Development.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. </p> </div> <div id="contact"> <h1>If you have any question or query you can contact us at <br>talkerscode@gmail.com <br><br>or you can fill the form below</h1> <input type="text" placeholder="Name"> <textarea placeholder="Message"></textarea> <input type="submit" value="SEND"> </div> </body> </html>
In this step we create four divs header, home, about and contact and add some sample data to every div.
We also create a function called scrollto() which is used to scroll to particular div when user clicks on a
link in header we use jQuery animate() function to give a nice effect while website scroll to particular div.
You may also like move elements on page scroll using jQuery and CSS.
Step 2. Make a CSS file and define styling
We make a CSS file and save it with a name website_style.css
body { margin:0px auto; padding:0px; text-align:center; width:100%; font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; background-color:#A9D0F5; } #header { width:100%; margin:0px auto; padding:0px; text-align:center; height:70px; line-height:70px; } #header li { display:inline-block; margin-right:25px; font-size:17px; color:#084B8A; font-weight:bold; cursor:pointer; } #header #site_name { text-align:left; width:680px; font-size:35px; margin-left:20px; } #home,#about,#contact { margin-top:100px; width:90%; height:400px; margin-left:5%; padding:50px; box-sizing:border-box; background-color:#084B8A; border-radius:10px; color:white; } #home h1 { font-size:40px; } #home p { font-size:20px; } #about p { font-size:20px; } #contact input[type="text"] { width:250px; height:35px; padding-left:10px; float:left; margin-left:80px; border:none; } #contact textarea { float:left; width:250px; height:35px; margin-left:20px; border:none; padding-left:10px; padding-top:10px; } #contact input[type="submit"] { float:left; margin-left:20px; height:35px; width:100px; background:none; color:white; border:1px solid white; }
You can view our responsive web design using css tutorial to make this one page website template responsive.
Thats all, this is how to create one page website template using HTML, CSS and jQuery.
You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery