✖

All TalkersCode Topics

Follow TalkersCode On Social Media

One Page Website Template Using HTML, CSS And jQuery

Last Updated : Apr 15, 2022

IN - HTML CSS jQuery

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.

One Page Website Template Using HTML, CSS And jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create One Page Website Template It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. 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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials