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

create a NOTE app by HTML-JS | Design for note app | App challenge

 CREATING A STICKY NOTE APP WITH HTML AND JS WITH EXPLAIN IN HINDI Hello There..! Here is the sticky note app code of html . 👇👇👇👇👇👇 <!DOCTYPE html> <html>     <head>         <title>Clock + to-do app</title>         <script src="https://code.jquery.com/jquery-3.1.1.js"></script>         <script type="text/javascript">           function app(){ var today = new Date(); var date = today.getDate(); var montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var month = montharr[today.getMonth()]; var year = today.getFullYear(); $("#date").text(date + " " + month + "," + " " + year); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var ampm = ""; if(h...
Post a Comment
Read more

How to Generate Barcode || code for Barcode

|| Random Barcode Generator || Barcode on the basis length of text || #CODE :                 Barcode.html ==>        <html>        <head>            <title>Barcode Generator</title>            <link rel="stylesheet" href="Barcode.css">     </head>     <body>         <div>Barcode Generator</div>         <input type="text" placeholder="Type..."/>         <button onclick="generate()">Generate Barcode</button>           <svg id="barcode"></svg>           <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>           <script>     ...
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