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

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

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

On any thoughts and quotes website, you must have seen the quote slideshow that includes the quote, the celeb name who gave the same quote and the slider. This slider allows moving to the left or right slideshow by clicking separate buttons like arrow keys. Let us see how to create a quotes slideshow with CSS and JavaScript. Set the parent div The div includes the container for the slideshow, the quotes, and the previous and next buttons as well. The quotes are set using the elements. The celeb name who gave the same quote is set as a ... Read More

On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on a website hosting website. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS. Let us see how. Create the chat button First, create a button using the element − Chat Position the chat button To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right − .openChatBtn { background-color: ... Read More

To create a chat message with CSS, the code is as follows −Example Live Demo    body {       margin: 0 auto;       max-width: 800px;       padding: 0 20px;       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    .message {       font-size: 18px;       font-weight:500;       border: 2px solid #dedede;       background-color: #55e4a8;       color:rgb(0, 0, 0);       border-radius: 12px;       padding: 10px;       margin: 10px 0;    }    .darker ... Read More

We will create a coming soon page with a timer. The timer is set using the setInterval() function. The time is fetched using the getTime() function. Set the div We have set the image as a div class. Rest, the coming soon text and the timer is placed within it − COMING SOON Place the Image The image is now placed using the background-image property. The position is set using the background-position property” .bgimg { background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); height: ... Read More

A divider on a web page is separate styled for dividing sections. These sections appear horizontally on a web page. A dotted, dashed, double, etc. dividers can be easily created. It works like borders and the color of such dividers can easily change. To create a divider, use the element and style it with border properties on a web page. Let us see how to create dividers with CSS. Create a dashed divider Create an element for the divider − Style the to create a dashed divider − .dashed { ... Read More

To create a vertical line with CSS, is a simple process that can be done using various approaches. In this article, we will learn and understand three different approaches for creating a vertical line with CSS We are using border and some block elements in this article, our task is to create a vertical line with CSS. Approaches to Create a Vertical Line Here is a list of approaches to create a vertical line with CSS which we will be discussing in this article with stepwise explaination and complete example codes. Creating Vertical Line using ... Read More