Skip to main content

my profile code by html || shutter animation with hover effect of html-css

                       

                      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. 
















Labels:

Comments

Post a Comment

The Most Populer

Html for beginners || What is Html || Where to start | Watch the codoblog video of html

 Hey all ..!     Start your carrier with by learning new skill which name is HTML , If you are interested in the web designing then you must started watch the video of codoblog.    If you are very unknown about HTML language then start from the scratch with codoblog's efforts. Watch series of codoblog and feel free to comment your doubt.                                                        Click to Launch for new beginning ....
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more

Instagram Login clone by HTML | Html Code for insta 2021

  MAKE THE INSTAGRAM LOGIN PAGE BY HTML                                                            Instagram login clone HTML FILE -      <!DOCTYPE html> <html> <head>   <script src="insta_clone.js">   </script>   <link rel="stylesheet" href="insta_clone.css">   <script src="https://kit.fontawesome.com/7067f9ae94.js" crossorigin="anonymous"></script>   <meta charset="UTF-8">   <title>title</title> </head> <body onload="myFunction()" style="margin:0;">   <div id="loader"><i class="fab fa-instagram"></i></div>   <div style="display:none;" id="myDiv" class="animate-bottom">     <div class="container">         <div class="head">   ...
Post a Comment
Read more