Basic Webpage Template

In this article, you will be learning about Basic Website Template Designing Process with HTML and CSS. You will see the process of how to write the codes of HTML, CSS.

index.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="css/style.css" rel="stylesheet"></head><body><div class="container"> <div class="header"> <div class="logo"> <h1>Company Logo</h1> </div> <div class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Career</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="contents"> <!-- Start Articles --> <div class="articles"> <div class="article"> <h1>Article Title</h1> <p>Article Paragraph</p> </div> <div class="article"> <h1>Article Title</h1> <p>Article Paragraph</p> </div> <div class="article"> <h1>Article Title</h1> <p>Article Paragraph</p> </div> </div> <!-- End Articles --> <!-- Start Articles --> <div class="sidebar"> <div class="widgets"> <div class="widget"> <h2>Widget Title</h2> <p>Widget Paragraph</p> </div> <div class="widget"> <h2>Widget Title</h2> <p>Widget Paragraph</p> </div> </div> </div> </div> <div class="clear"></div> <div class="footer"> <h2>&copy;Copyright By SimpleWebsite</h2> </div></div></body></html>
Code language: HTML, XML (xml)

Now you can write these CSS Parts of Your Design.

style.css

*{ margin: 0px; padding: 0px; } .clear{ clear: both; } body{ background-color: gray; } .container{ width: 998px; margin: auto; background-color: white; } .header{ height: 100px; background-color: aquamarine; } .header .logo{ float: left; width: 50%; } .logo h1{ line-height: 100px; padding-left: 25px; } .header .navbar { float: left; width: 50%; } .navbar ul{ list-style: none; padding: 0px; margin: 0px; } .navbar ul li{ float: left; line-height: 100px; padding: 0px 0px; background-color: aquamarine; } .navbar ul li a{ text-decoration: none; color: black; padding: 25px; } .navbar ul li a:hover{ background-color: blueviolet; color: white; } /* Content */ .contents{ padding: 20px; } .contents .articles{ float: left; width: 75%; } .article{ border: 1px solid black; padding: 5px; margin: 5px; } .contents .sidebar { float: left; width: 25%; } .contents .widgets{ padding: 0px; } .widget{ text-align: center; border: 1px solid black; margin: 5px; padding: 5px; } .footer{ height: 50px; text-align: center; line-height: 50px; background-color: aquamarine; }
Code language: CSS (css)

These are the complete codes of this basic sample website Designs