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

On a contact us page, you must have seen input fields to add your name, email-id, phone number, message, etc. A button is also placed for the user to submit the contact form. With that, some websites also add an image that aligns properly when the web browser is resized i.e., the responsiveness. Let us see how to create a responsive contact section for web pages on a website with CSS. Set the contact image Begin with the heading and set an image representing a contact us page − Position the image ... Read More

To center your website horizontally with CSS, set a div where all the content of the website will be set. Align it in a way to center it horizontally. For that, we will use the margin and max-width property. Set the Website’s Main div Set a div and within that some elements to make it somewhat look like a sample website − Center website horizontally example Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad nemo, nisi fugiat dolores quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero, ... Read More

To create a responsive website with Bootstrap 4, the code is as follows −Example Live Demo Bootstrap 4 Website Example    body{       height: 100vh;    } Website ⇅ Logo Link Link Link Headline 1 Published in January Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis hic quas praesentium quod totam atque dignissimos nobis numquam consequuntur? Headline 2 Published in march Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus incidunt voluptatum labore dolorem voluptate iure dicta, dolorum quis maiores. Copyright © Website OutputThe above code will produce the following output −On resizing the screen −

A responsive website works on every device whether it’s a desktop, tablet or a mobile. To set the responsiveness, we use Media Queries. Create the header container Create a div for the headerL Website ↶ Style the header Align the header text in the center using the text-align property − .header { padding: 80px; text-align: center; background: #7b1abc; color: white; } Create the navigation menu The is used to create the navigation menu − ... Read More

To create animations using JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       padding:10px;       font-size: 18px;       background-color: blue;       color:white;       border:none;       margin-bottom:10px;    }    .Animation {       width: 60px;       height: 60px;       position: absolute;       background-color: rgb(134, 25, 207);    } Animation using JS example Start Animation    function startAnimation() {       var elem = document.querySelector(".Animation");       var pos = 0;       var id = setInterval(frame, 10);       function frame() {          if (pos == 450) {             clearInterval(id);          } else {             pos++;             elem.style.borderRadius = pos/14 + 'px';             elem.style.left = pos + 'px';          }       }    } OutputThe above code will produce the following output −On clicking the “Start Animation” button −

Media Queries are used on a web page to set the responsiveness. It allows a user to set different styles based on different screen sizes. These screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints. Different screen sizes The common device breakpoints are the different devices with its screen size i.e. Phones − Screens less than 768px wide Tablets − Screens equal to or greater than 768px wide Small laptops − Screens equal to or greater than 992px wide Laptops and Desktops ... Read More