- 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 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
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
On an E-commerce website, you must have seen product cards for specific products. It includes the product name, image, price, any discount, etc. On a web page, we can easily create a product card with CSS. With that, the Buy Now or Add to Cart button is also placed on this card so it’s easier for users to directly buy. Set the div for the card Under the div for the product card, set the product image and the product name as a heading. Rest, place the product details and price in the . Also, the buy button is set ... Read More
A preloader as the name suggests loads when the web page is loaded. Consider it as a loading page or a loading screen before the content on the web page is visible. With CSS, we can easily create a preloader and can also style it using the border properties. The animation for the loader is set with keyframes. Style the loader To style the loader, the border properties are used. The height and width are also set − .loader { border: 16px double #ffee00; border-radius: 50%; border-top: 16px solid #7434db; ... 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
The Pill navigation menu is used for navigation and enhances user experience. The navigation items are set within it. The element is used to create a menu and works the same for pill navigation menu as well. Let us see how to create a pill navigation menu on a web page. Create a pill navigation menu First, we will create a menu using the element. The links are set using the element − Home Login Register Contact Us More Info ... Read More
On a registration page, you must have seen an input filed to set the password. On entering the password, the validation system suggests you how to construct a password. For example, a password should have at least a number, character, it should be minimum 8 characters. In this tutorial, we will see how to set the same password validation form on a web page. On typing to set the password the validation system will suggest the correct suggestions. Let us see how. Create a form The element is used to create a form on a web page. Two ... Read More
By specifying different speeds for background and foreground content, we can create a parallax scrolling effect using CSS. On scrolling up and down, you can easily notice the difference, Mostly, you can find such effect on the home page of a website. Set the image First, place and image using the background-image property. With the url, the link of the background image is sourced − background-image: url("https://www.tutorialspoint.com/static/images/home/coding-groundhero.svg"); Set the height You need to set a minimum height using the min-height property − min-height: 500px; Create the parallax scrolling effect The parallax scrolling effect can be set ... Read More