Learn HTML5

Pepsi Card Animation using HTML CSS 🤯😎 Animated Hover Product Card ☠️😳 💬 Comment “Pepsi” for source code [for my followers] !! FOLLOW US TO LEARN CODING !! Follow for more @coding.stella 💙 Tags Your Friends 😉 Don’t forget Like ♥️ and share 💬 Save for future references 📖 If you found this content useful, please tap the ♥️ icon and give me a follow. I would greatly appreciate it. Also, if you have any feedback, questions or concerns, let me know in the comments section 💬. Thanks ☺️ ******************************************* Hastags🏷️ : #pepsi #animation #card #glowing #html #css #html5 #css3 #csstricks #cssanimation #learnhtml #learncss #csstips #csstipoftheday #webdeveloper #ui #ux #uidesign #uxdesign #webdesign #webdevelopment #frontenddeveloper #frontendwebdeveloper #javascript #angularjs #reactjs #javascriptanimation #tailwindcss #bootstrap Pepsi Animation, Cococola Product, Pepsi Product card

Types of HTML Tags

Different Headings

Example on Div Tag

Simple Radio Buttons

Choose your Sex/Gender :



Male

Female

Other

Celebrating my 8th year on Facebook. Thank you for your continuing support. I could never have made it without you. 🙏🤗🎉

Positioning Elements:

The key point for position values
(static, relative, absolute, fixed, sticky) is the reference which the element uses to move toward or away (top/bottom/left/right) from it.

1- Static ---> keep the element in normal flow of html file (default)

2- relative---> there reference point is it's origin place in the html file

3- absolute--->the reference point is the closest parent element with (relative/fixed/absolute) postion , parent elements with static position cant be it's reference point... if there's no such element it's reference will be the html element.

4- fixed---> the reference point here is the view port (certain coordinate on your window) and since your screen don't move when you scroll so the element too will not move (fixed).

5- sticky---> it's a mix of relative and fixed position where your reference point is certain point on your window (view port) also you can move away from it but only in one direction.

Note: reference point is the point which the element use to move relatively to it.

city {
background-color: blue;
color: white;
margin:20px;
padding: 10px;
}
p{
margin:20px;
}




Using the class Attribute
Use CSS to style elements with the class name "city":

Delhi
Delhi is the capital of India.

Kathmandu
Kathmandu is the capital of Nepal.

Ottawa
Ottawa is the capital of Canada.

https://www.facebook.com/groups/3130475883922809/?ref=share