Simple Static Layout Page Using HTML and CSS

In this post, You are going to see the making of a very simple static layout web page using pure CSS and HTML.

This tutorial will help beginners to learn CSS Layout. You can modify the CSS elements to notice the working functionality of each element.

3D Photo/Image Gallery (on space) Using HTML5 CSS JS

In this layout, I am providing a header, nav bar and body section in one HTML file. Try to add a footer by your own to practice your skill.

You can also use the CSS style of <header> from this tutorial as your footer or you may change as per your choice

Just open any text editor and copy the whole code and paste it in your text editor then save it as “filename.html” and run the file with your browser.

How To Draw A Circle In CSS?  CSS Code To Draw A Circle


Below is given the complete HTML and CSS code in one HTML file for the basic web page design:

<!DOCTYPE html>
<style type="text/css">
  .wrapper {
  width: 960px;
  margin: 0 auto;

header {
    width: 960px;

nav, section {
  float: left;

nav {
  width: 200px;
  margin-right: 10px;

section {
  width: 750px;
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

body {
  background: #2980b9;
  color: #FFF;
  font-family: Helvetica;
  text-align: center;
  margin: 0;

section {
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;

header {
  padding: 20px 0;

nav, section {
  padding: 200px 0;

  <title>CSS and HTML Page Layout</title>

  <div class="wrapper">
  <h1>Static Layout Example</h1>


Change text color on mouse hover &#8211; CSS code


The page will look like this


Pure CSS HTML webpage layout


Responsive Image Hover Effect With Pure CSS Code


Leave a Reply

Your email address will not be published. Required fields are marked *