Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The avatar image on a website is a profile image visible under the author’s profile. Also visible under the team’s page where details of all the team members are visible on a company’s website. Let us see how to create an avatar image with HTML and CSS. Set the avatar images The images are placed just like any other image using the element − A class is set for both the images so that we can style it and form like an avatar. Style like an avatar image Use the border-radius property and set it ... Read More
To render a huge number of images in a website, it is advisable to use webp format as it provides better compression. We use the element to provide a fallback for unsupported browsers − To set the images, the srcset attribute of the element is used. The tag allows a user to specify multiple media resources for elements, like , , etc. Using the tag, set alternative image files to allow the web browser to ... Read More
A lot of websites these days have an animate search box on the home page itself. On placing the mouse cursor within the search box, the search box width increases to make it easier for users to search. Let us see how to create such animated search form with HTML and CSS. Create the search form Use the element and place the input type text in it. Do not forget to mention an apt placeholder for the users to understand the purpose of the textbox − Search: Style ... 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
The alert message can be seen on web pages. As an example, we can consider a message while deleted an account on a social media website. Even coupons are provided in the form of alert message on some websites. Other examples can be “Your order is confirmed” or even ““Your password is about to expire. Please update it now.” Let us see how to create alert messages with HTML and CSS. Create a container for the alerts A div is set for the alter message. Within that the alert message is set with the close button symbol − ... Read More
To create a table on a web page, we use the element. It allows us to set the table row using the element. Within that, the elements are used to place the data. A table can also be striped. Such striped tables have a different look for every alternative row. To set a property for evert alternative row, we will use the nth-child(even) property. Let us see how to create a zebra striped table with HTML and CSS. Create a table The element is used to create a table. We have set three columns for our ... Read More
Vertical menus on a web page are mainly placed on the left or the right. These left or right menus are vertically aligned to make it easier for users to navigate or click them. To create a vertical menu, set a container and within that set the menu links. The display property is to be set as block to let the menu appear vertically. Let us see how to create a vertical menu with HTML and CSS. Set a container for the menu A div is set for the menu. The menu links are added using the element with ... Read More
On a web page, you can create a triangle easily. Use the clip-path property or even the child selector concept can be used. The clip-path allows a user to clip an element to a shape. This shape is to be set polygon to create a triangle. Syntax The syntax of CSS clip-path property is as follows − Selector { clip-path: /*value*/ } Create a Triangle using the clip-path The following example illustrate CSS clip-path property. Here, we have set the clip-path shape to polygon to create a triangle. This is done using the polygon() method ... Read More
On a web page, if you want to represent a folder-view, like in case of web hosting filed, then create a tree view. The root or the home are always clickable in a tree view. We set it clickable using the cursor property with the value pointer. The arrow key is rotated 90 degrees when it is clicked. This is achieved using the rotate() method with the transform property. Set the tree view root The root for the tree view is set using the . Within that, is set − ... Read More
Image gallery on a web page can be displayed in various forms. One of them is a tabbed image gallery. On clicking the image thumbnail from the image gallery, the image expands. Let us see how to create a tabbed image gallery with HTML and CSS. Set the images for the thumbnail For our example, we have considered 3 images and added to the web page using the element − Image Thumbnail When the mouse cursor is placed on the image, the image thumbnail will appear as clickable because we have set the cursor ... Read More