BYE THE BLUETOOTH EAREPHONE LINK ππ» buy this earephone Also visit my storeππ» https://amzn.to/3jnXio8 Samsung Galaxy M42 5G (Prism Dot Black, 8GB RAM, 128GB Storage) ππ» https://amzn.to/3ymO5jW Studd Halmets https://amzn.to/3sTTxcY Boya m1 mic = https://amzn.to/38F5qu5 Bluethooth boat 210 https://amzn.to/2ZfvlHp Cap https://amzn.to/3EvQMnA Sport shoe https://amzn.to/3kE3zwk
HERE IS SOCIAL MEDIA ICON HOVER EFFECT
YOU MUST WANT HAVE INTERNET CONNECTION TO RUN THIS CODE
1- COPY THIS HTML CSS CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IconAnimate</title>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com
/font-awesome/4.7.0/css/
font-awesome.min.css">
</head>
<body>
<section class="container">
<ul>
<li><a href="#">
<i class="fa fa-twitter"
aria-hidden="true">
</i></a></li>
<li><a href="#">
<i class="fa fa-whatsapp"
aria-hidden="true">
</i></a></li>
<li><a href="#">
<i class="fa fa-youtube-play"
aria-hidden="true">
</i></a></li>
<li><a href="#">
<i class="fa fa-telegram"
aria-hidden="true">
</i></a></li>
</ul>
</section>
</body>
</html>
<style>
* {
margin: 0;
padding: 0;
}
.container
{
width: 100vw; display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
ul {
/* position: relative;*/
display: flex;
}
ul li {
margin: 0 33px;
position: relative;
list-style: none;
cursor: pointer;
}
ul li a {
text-decoration: none;
}
ul li a .fa {
font-size: 8em;
color: #222;
}
ul li::before {
font-family: fontAwesome;
position: absolute;
top: 0;
left: 0;
height: 0;
font-size: 8em;
overflow: hidden;
transition: 0.7s;
}
ul li:nth-child(1)::before {
content: '\f099';
color: #1da1f2;
border-bottom: 2px solid #1da1f2;
}
ul li:nth-child(2)::before {
content: '\f232';
color: #25d366;
border-bottom: 2px solid #25d366;
}
ul li:nth-child(3)::before {
content: '\f16a';
color: #ff0000;
border-bottom: 2px solid #ff0000;
}
ul li:nth-child(4)::before {
content: '\f2c6';
color: #0088cc;
border-bottom: 2px solid #0088cc;
}
ul li:hover::before {
height: 100%;
}
@media only screen and (max-width:750px)
{
ul li a .fa {
font-size: 6em;
}
ul li::before {
font-size: 6em;
}
}
@media only screen and (max-width:627px)
{
ul li a .fa {
font-size: 5em;
}
ul li::before {
font-size: 5em;
}
}
@media only screen and (max-width:600px) {
ul {
flex-direction: column;
}
ul li {
margin-top: 20px;
}
}
</style>
THANK YOU FOR VISITING HERE KEEP SUPPORT MY WORK❤
Popular posts from this blog
HERE IS GLOWING EFFECT TEXT USING HTML, CSS 1- COPY THIS HTML CSS CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GlowingEffects</title> </head> <body> <h2 contenteditable="true" class="avi">abhi+shek</h2> </body> </html> <style> *{ margin: 0; padding: 0; box-sizing: border-box; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #07252d; } h...
HERE IS FACEBOOK LOGIN TEMPLET COPY THIS HTML CSS CODE--- <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > FACEBOOK LOGIN </ title > </ head > < body > < section class = "sec" > < div class = "head" > < h2 > Facebook </ h2 > </ div > < div class = "login" > ...
E-Commerce Website template Design COPY THE CODE HTML CSS JS CODE-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css"> <title>Shoe Center</title> </head> <body> <div class="container"> <div class="navbar"> <div class="logo"><span class="s">S</span>hoe<span class="c">C</span>enter</div> <div class="bar" id="bar"> <!-- <i class="fa fa-bars"></i>--> ...
Comments
Post a Comment