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 ... Read More

The zig zag layout would have an image, then text. Next, text, and then image, and it goes on. The responsive zig zag would arrange the text and image according depending on the device, desktop, tablet or mobile. The column will appear on top each other on a smaller device like a mobile. Let us see how to create a responsive zig zag layout with HTML and CSS. Set a container for text We have set a container for text and the class name is given width66. One of them is shown below. The text will take 66% of the ... Read More

To create a mixed column layout grid with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    .col {       color: white;       float: left;       width: 25%;       padding: 10px;    }    .colContainer:after {       content: "";       display: table;       clear: both;    }    @media screen and (max-width: 900px) {       .col {          width: 50%;       }    }    @media screen and (max-width: 600px) {       .col {          width: 100%;       }    } Mixed col Layout Example Resize the screen to see the below divs resize themselves First col Second col Third col Fourth col OutputThe above code will produce the following output −On resizing the screen the 4 column layout will turn 2 column and so on −

To create a list grid view, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    /* Create two equal columns that floats next to each other */    .column {       float: left;       width: 50%;       padding: 10px;       color: white;    }    /* Clear floats after the columns */    .row:after {       content: "";       display: table; ... Read More

An expanding grid is a grid that expands when a box is clicked. It hides by default but gets expanded to 100% when the box is clicked once. We will create three equal columns that floats right next to each other. On clicking any of the grid column, the grid will expand. Also, the expanded area will have a closeable button to close and return to the initial stage. Create a container for the three columns Begin with a parent div with three columns. On clicking any of the boxes, the onclick attribute will open the individual tabs − ... Read More

To create a 4-column layout grid with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    .first, .second, .third, .fourth {       float: left;       width: 25%;       color: white;       padding: 10px;       height: 500px;       text-align: center;    }    .first {       background-color: tomato;    }    .second {       background-color: teal;    }    .third {       background-color: rgb(166, 71, 255);    }    .fourth {       background-color: rgb(255, 71, 194);    }    .container:after {       clear: both;    } Four Column grid example Some text on the first div Some text on the second div Some text on the third div Some text on the fourth div OutputThe above code will produce the following output −

To create a 3-column layout grid with CSS, the code is as follows −Example Live Demo    body {       padding: 1%;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    .left, .right, .center {       float: left;       width: 33%;       color: white;       padding: 10px;       height: 500px;       text-align: center;    }    .left {       background-color: tomato;    }    .right {       background-color: teal;    }    .center {       background-color: rgb(166, 71, 255);    }    .container:after {       clear: both;    } Three Column grid example Some text on the left Some text in center Some text on the right OutputThe above code will produce the following output −

To create a 2-column layout grid on a web page, we will create and position two divs, one on the left and the next on the right. Create the First div To begin with, we will create a div, beginning with the left div − Some random text on the left Create the Second div Create the 2nd div i.e., the right div − Some random text on the right Position the divs on the Left and Right The two divs are positioned on the left and right using the left and right property − .left { left: 0; ... Read More

To style a header with CSS, we can use various CSS properties to make it look attractive. In this article, we will learn and understand to style the header using diferent CSS properties. Style header with CSS We have used two h1 headings inside div element to add padding and background-color to header with div class name as header and test. In first heading with id head1, we have used "font-style: oblique;" and "text-align: center;"properties to add style and align it to center. In second heading with ... Read More

The about page of a website has the team details including the name, designation, contact details, contact button, etc. First, a container is set for the about page. Withing that, set the child containers for the column, card, person profile, etc. The profile includes the name, designation and a button to contact. Let us see how to create an about us page for website with HTML and CSS. Create a div container The container is set for the team details of the about page. The team card in the container includes other child containerd − ... Read More