- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 form on a web page can be used to get the user details for registration such as name, username, email-id, password, security question, etc. With that, a form can be created to get only the user details such as name, email-id, phone number, message, etc. as a contact us form. The responsiveness allows changing the layout of the form on different devices. It can be checked on a web browser by changing the tab size. Let us see how to create a responsive form with CSS on a web page. Set the form fields for registration First, the user ... 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
A registration form on a web page can include your name, email-id, and the password you want to set. The placeholder is also set for each input field using the placeholder attribute. We can easily create this with CSS. All these fields in a from goes inside the element with a button to submit the form. Also, a sign in button is also provided for the users who already registered before. Such users can directly click the sign in button. Let us see how to create a register form on a web page. Create a form To create a ... Read More