Avatars
Learn how to create an avatar image with CSS.
![Avatar](https://www.w3schools.com/howto/img_avatar2.png)
![Avatar](https://fimapay.com/en-uk/images/w3/avatar2.png)
![Avatar](https://darresne.com/img/female-avatar.png)
![Avatar](https://storage.jewheart.com/content/users/avatars/3746/avatar_3746_500.jpg?155862223)
How To Create Avatar Images ?
Step 1) Add HTML:
Step 2) Add Css:
Alert
Learn how to create alert messages with CSS.
Alert messages can be used to notify the user about something special: danger, success, information or warning.
Step 1) Add HTML:
Step 2) Add Css:
Images
Responsive images will automatically adjust to fit the size of the screen.To make the images responsive add the class "responsive-img" and set the max-width to 100% and height to auto it will also keep the aspect ratio same.
How To Create Responsive Images
Step 1) Add HTML:
Step 2) Add CSS:
If you want the image to scale both up and down on responsiveness, set the CSS max-width property to 100% and height to auto:
Round Images:
Round images are very simple to make just put the "border-radius : 50% ". You need to adjust the width and height according to your case.
![](https://fimapay.com/en-uk/images/w3/avatar2.png)
How to Create a Round Image :
Step 1) Add HTML :
Step 2) Add Css :
Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Icon Badges:
BADGES
Lists
Lists are a flexible and powerful component for displaying a series of content
Unordereed List
- Item
- Item
- Item
- Item
- Item
Ordered List
- Item1
- Item2
- Item3
- Item4
- Item5
Unordered HTML List
An unordered list starts with <ul> tag.Each list item starts with a <li> tag.
The list items will be marked with bullets (small black circles) by default.
Example:
Ordered HTML List
An ordered list starts with <ol> tag.Each list item starts with a <li> tag.
The list items will be marked with numbers by default.
Example:
Active Item
Add .active-list to .stacked-list to indicate the current active selection.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Stacked List
- I love pizza 😋
- I love pasta 🤩
- I love burger 🥰
- I love biriyani 😙
- I hate karela 😣
Model
Cards
Normal Cards:
![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/11809564/2020/4/22/29495991-7c73-4957-a9ee-f67b53edbe781587536288866SuperSkinnyHighJeans1.jpg)
GERUA
Women Green Printed Kurta
RS.1048RS.2999 (65% OFF)
![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/2948543/2018/3/30/11522394099790-HIGHLANDER-Men-Black-Slim-Fit-Mid-Rise-Clean-Look-Stretchable-Jeans-5171522394099590-1.jpg)
GERUA
Women Green Printed Kurta
RS.1048RS.2999 (65% OFF)
![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/10356511/2019/8/8/a28f9ccb-c0d7-4e66-87f0-e639f157ff2d1565263388836-Libas-Women-Kurta-Sets-571565263387250-1.jpg)
GERUA
Women Green Printed Kurta
RS.1048RS.2999 (65% OFF)
![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/13699868/2021/2/24/d7d03398-e12d-4079-963c-9fe29cb74d8c1614146496033KurtaSetsManyavarMenKurtaSetsManyavarMenKurtasManyavarMenKur1.jpg)
GERUA
Women Green Printed Kurta
RS.1048RS.2999 (65% OFF)
![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/productimage/2019/12/12/1aab2a18-6774-4f83-b292-fe301755a3351576102551329-1.jpg)
GERUA
Women Green Printed Kurta
RS.1048RS.2999 (65% OFF)
![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/productimage/2021/2/27/19f39954-0de5-4424-909c-22b968f221e21614405885492-1.jpg)
GERUA
Women Green Printed Kurta
RS.1048RS.2999 (65% OFF)
TRENDING![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/productimage/2020/11/19/6e27a5c1-45e0-4122-9d9c-f495b3b0da7d1605778626367-1.jpg)
GERUA
Women Green Printed Kurta
RS.1048RS.2999 (65% OFF)
![](https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/productimage/2019/8/28/da484ee6-f14a-405f-87de-1e9b689a2b881566934137212-1.jpg)
GERUA
Women Green Printed Kurta