A blog layout consists of a header. That header consists of a logo, then the menu, and after that the blog heading, content, etc. With that, the link for some other blogs can also be seen. In the bottom, you have a footer. The footer should have a copyright text. Let us see how to create a blog layout.

Create the header

The header of a blog consists of a logo on the left and then the website name ?

   
Logo ?
   

Website Name

Position the header

Here, we will position the logo and website name ?

.header {
   padding: 40px;	
   background: #7b1abc;
   color: white;
}
.header h1 {
   font-size: 40px;
}
.header h2 {
   text-align: center;
   font-size: 30px;
}

Create the navigation menu

Use the

Position the navigation menu

The overflow and height for the property is to be set to auto. Also, the width is 100% for the navigation menu ?

nav {
   width: 100%;
   background-color: rgb(39, 39, 39);
   overflow: auto;
   height: auto;
}

Create the blog header and body

First, the blog header is set and then comes the body of the blog. The body comes under the

element ?

   

      
Blog Heading
   
   

      

         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.
      
   

Position the blog header and body

The div for the blog header and body is positioned on the left using the float property with the value left ?

.blog {
   margin-top: 20px;
   width: 75%;
   margin-left: auto;
   margin-right: auto;
   height: 400px;
}
.post {
   margin-top: 20px;
   float: left;
}
.blogHeader {
   font-size: 36px;
   margin-bottom: 20px;
}

Define the footer

The footer for the blog layout i.e., the HTML web page is set using the

Position the footer

The position property is used with the value fixed to fix the footer. To position the footer in the bottom, the bottom property is used ?

footer {
   color: white;
   position: fixed;
   width: 100%;
   bottom: 0;
   margin-left: auto;
   margin-right: auto;
   font-size: 30px;
   height: 100px;
   padding: 20px;
   background-color: rgb(9, 141, 101);
   text-align: center;
}

Example

To create a blog layout with CSS, the code is as follows ?

   
   


   

      
Logo ?
      
Website Name
   
   
   

      

         

            
Blog Heading
         
         

            

               Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.
            
         
      
   
   

      
Footer ?