Creating Social Media Icons in HTML CSS with amazing hover Animations.
Code Output:
Icons with Hover effects Glimpses:-
Responsive & Animated Navigation Bar:-
__________________________________________________________
index.html
_________________________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Crypto-Currency</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1170px)" href="css/phone.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rowdies&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<img class="bitcoin" src="abstract-blockchain-background_23-2147850235-removebg-preview.png">
<nav class="shubham_sagar" id="navbar">
<ul>
<img class="logo" src="download.png">
<li class="shu" id="shu1">Home</li>
<li class="shu">Services</li>
<li class="shu">Products</li>
<li class="shu">Contact Us</li>
<li class="sign">Sign Up</li>
</ul>
</nav>
<div class="Main_header">
<h2>Our Basic Thesis For Bitcoin<br> is That it Is Better Than Gold</h2><br>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
literature, discovered the undoubtable source.</p><br>
<div class="photo">
</div>
</div>
<div class="social-menu">
<ul>
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/shubham.__.sagar"><i class="fa fa-instagram"></i></a></li>
<li><a href=""><i class="fa fa-youtube"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</body></html>
_______________________________________________________________
Style.css
_____________________________________________________
body {
height: 2000px;
background: #42455a;
}
.bitcoin {
filter: opacity(100);
float: right;
margin-top: 50px;
margin-right: 99px;
transition: .6s;
transform: translate(50px);
}
.bitcoin:hover {
transform: scale(1.2);
cursor: not-allowed;
}
.logo {
width: 60px;
height: 50px;
float: left;
}
ul {
display: inline-flex;
}
.shu {
font-family: 'Fredoka One', cursive;
list-style: none;
padding: 15px;
cursor: pointer;
/* color: rgba(37, 100, 202, 0.55);*/
transition: .6s;
color: #b18d8d;
animation-name: shubham;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.shu:hover {
color: white;
border-bottom: solid red 2px;
transform: scale(1.2);
}
.sign {
list-style: none;
cursor: pointer;
top: 19px;
right: 80px;
position: absolute;
color: white;
padding: 13px;
border: solid 3px;
border-radius: 10px;
border-image: linear-gradient(80deg, pink, blue);
border-image-slice: 1;
}
h2 {
color: white;
font-family: 'Rowdies', cursive;
word-spacing: 10px;
font-size: 40px;
margin: 100px;
}
p {
font-size: 15px;
font-family: 'Rowdies', cursive;
color: burlywood;
margin: -100px;
margin-left: 99px;
}
.phoro {
margin-top: 100px;
margin-left: 100px;
width: 90px;
height: 50px;
float: inherit;
}
nav {
position: sticky;
background-color: rgba(0, 0, 0, .2);
background-size: 150px;
position: sticky;
top: 0px;
}
#shu1 {
padding-right: 20px;
}
.social-menu ul {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%);
padding: 0;
margin: 0;
display: flex;
}
.social-menu ul li {
list-style: none;
margin: 0 10px;
}
.social-menu ul li .fa {
color: #000000;
font-size: 25px;
line-height: 50px;
transition: .5s;
}
.social-menu ul li .fa:hover {
color: #ffffff;
}
.social-menu ul li a {
position: relative;
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
text-align: center;
transition: 0.5s;
transform: translate(0, 0px);
box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}
.social-menu ul li a:hover {
transform: rotate(0deg) skew(0deg) translate(0, -10px);
}
.social-menu ul li:nth-child(1) a:hover {
background-color: #3b5999;
}
.social-menu ul li:nth-child(2) a:hover {
background-color: #55acee;
}
.social-menu ul li:nth-child(3) a:hover {
background-color: #e4405f;
}
.social-menu ul li:nth-child(4) a:hover {
background-color: #cd201f;
}
.social-menu ul li:nth-child(5) a:hover {
background-color: #0077B5;
}
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
nav {
background-color: rgba(0, 0, 0, 0.47);
color: rgba(17, 93, 196, 0.62);
}
________________________________________
Article By:
Shubham Sagar
Code Star
https://www.youtube.com/c/coveringtheworld
India
Wow well how can i functionality to these Icons??
ReplyDeletePlz tell me fast