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

What is Favicon | what is Title | How to give Title and Favicon to Html Website | 2020 Style

Hello Guys...!    Are you started to learn Html newly?    Wanted to start the learning of Html?       Don't worry. CodoBlog Bring HTML series for beginners.                                                                                     Click Here ----------------------------------------------------------------------------------------------------------------------------                             ____________________________________________________
Post a Comment
Read more

|| HTML Heading | what is h1 to h6 tags | Importance of Heading in HTML website ||

  HEADING IN HTML                       Click to Watch the video Headings help in defining the hierarchy and the structure of the web page content. HTML offers six levels of heading tags,  <h1>  through  <h6> ; the higher the heading level number, the greater its importance — therefore  <h1>  tag defines the most important heading, whereas the  <h6>  tag defines the least important heading in the document. HTML  defines six levels of  headings . A  heading  element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the  heading . The  heading  elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. By default, browsers display headings in larger and bolder font than normal text. Also,  <h1>  headings are displayed...
Post a Comment
Read more

Design 3D Block with hover animation

        How To Design The 3D Block With Hover Effect. Here is the code of How to design the 3D block design by using only html and css.                          By using html-css you can make a lots of designs and animations. Few done by me                          and   somewhat expect from you . Try to watch all the videos by codoblog. And stay                                              connected.                 CODE -                         <html>           <head> <style type="text/css"> body{ bac...
Post a Comment
Read more