My Profile Viewer
#CODE :
<!-- Created By Aziz Sobirov -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Img hover</title>
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing:border-box ;
}
body{
display:flex;
min-height:100vh;
align-items:center;
justify-content:center;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
#Box{
height:150px;
width:300px;
padding:10px;
border:4px solid #ff0055;
border-radius:10px;
box-shadow:0 0 5px 5px #ff0055,
0 0 10px 5px #ff0055,
0 0 15px 5px #ff0055;
transition-duration:1s;
background:#fff;
}
#Box:hover {
height:400px;
}
#Box:hover #text{
opacity:1;
transition-duration:2s;
top:40px;
}
#Box:hover #imgBox{
top:20px;
width:200px;
height:200px;
transition-duration:2s;
border-radius:50%;
}
#imgBox {
position:relative ;
top:-100px;
left:0;
height:150px ;
width:200px;
border:2px solid skyblue;
border-radius:0%;
box-shadow:0 0 5px 5px grey;
z-index:2;
}
#text{
position:relative ;
top:-200px;
text-align:center ;
opacity:0;
z-index:1;
}
span{
font-weight:bold;
border:4px solid green;
}
a{
text-decoration:none;
color:black;
}
/*Follow*/
#follow{
position:absolute ;
top:0;
right:0;
display:flex;
min-height:600px;
align-items:center;
justify-content:center;
z-index:2;
}
#follow #touch{
position:absolute ;
top:0;
right:0;
height:80px;
width:80px;
font-size:30px;
background-color:#00adff;
box-shadow:0 0 5px 5px white;
border-radius:0px 0px 0px 100px;
color:#000;
display:flex;
align-items:center;
justify-content:center;
transition-duration:1s;
}
#follow #touch:hover{
border-radius:0px;
}
</style>
</head>
<body>
<div id="Box">
<center> <img src="profile.jpeg" id="imgBox"></center>
<div id="text">
<h2>CodoBlog</h2>
<p>
Thank you for watching this tutorial. <br>
If you like <strong>codoblog</strong>, then please Subscribe and share. <strong>#LoVe CodoBlog</strong><br/><br>
<a href="https://codemaifil.blogspot.com" >
<span>Follow Me</span>
</a>
</p>
</div>
<!--Follow Bar-->
<div id="follow" >
<div id="touch">
<i class="fa fa-user" id="barr"></i>
</div>
</div>
<script>
$(function() {
$("#touch").click(function() {
});
});
</script>
</div>
</body>
</html>
#OUTPUT:
...
So, this is the output.
Comments
Post a Comment