Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
A responsive inline form is a form in which all the elements are inline, aligned on the left, with the specific labels. To display the responsiveness i.e., when the web browser is resized, we have set the inline form to stack all the input fields on top of each other. This concept works on smaller screens. Let us see how to create a responsiveness inline form with CSS. Create a form To create a form, use the element. We have set two input fields and a button in our form − Email: ... Read More
To create a responsive image, first set an image using the element. Use the width and max-width properties to set the same image to a responsive image. Set an image To set an image on a web page, use the element. The link of the image is included using the src attribute of the element − Above, we have also used the alt attribute for the alternate text. Set the responsiveness The width is set to 100% to convert an image to responsive. Also, you need to set the max-width property − img ... Read More
The image grid on a web page displays images in a grid. In an outer grid, we can create inner grids. Also, the responsiveness needs to be set for the image grid for different devices. On a web browser, check the responsiveness by resizing the web browser. Let us see how to create a responsive image grid with HTML and CSS. Set the outer and inner grid A div for the outer grid is set. Within that, the inner grids are set. We have set three inner grids inside our outer grid − ... Read More
On a web page, first the header is visible, then the content, and at the end the footer. A header includes the logo of the website and the menu. It can also include a search box on the right. The menus are created using the element. The selected link is always highlighted. On hovering any link, the color of that specific link change. Let us see how to create a responsive header with CSS on a web page. Set the nav for logo and menus The element is used to place the logo and menus. Both these are ... Read More
A responsive knockout text transforms when the web browser size is changed. A knockout text looks like it's been cut out of a surface to reveal the background. First, we will place a background image on the web page using the background-image property. The text will be placed using the position property. To transform, the translate() will be used. Set the background image To create a knockout text, first set the background image on which the text will appear. The background image will be included using the background-image property with the url() − background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); The container for ... 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
A checkout on a web page can be seen on an E-Commerce website. It is a webpage where all the details about the product you are buying is visible. It includes the product details, total amount to be paid, the card details to be entered, the billing address. Also includes a button to proceed the buying process. Let us see how to create a responsive checkout form. Set a flex To arrange the fields, use the display property and set it to flex − .Fields { display: flex; flex-wrap: wrap; ... Read More
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
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
Under the Team page, or authors page, you must have seen the profile card of employees or authors. Such profile cards include the profile image, name, and profile. A button can also be created to allow users to contact. In most cases, such buttons are optional. Let us see how to create a profile card with CSS. Set a div for the profile card A parent div is set for the card. First, set the profile image, then the name, designation and location. At the end, set a button using the element − ... Read More