Build a Instagram Animated Material User Profile Card Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Instagram Animated Material User Profile Card Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a instagram animated material user profile card using html5 css3 and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<div class="content-wrapper">
      <div class="dots-wrapper">
        <div class="dots"></div>
      </div>
      <div class="img"><img src="https://i.imgur.com/7Nwk67T.jpg"/></div>
      <div class="wave -one"></div>
      <div class="wave -two"></div>
      <div class="wave -three"></div>
      <div class="user">
        <div class="profile--info"><span class="username">Gobie Nan </span><span>@gobienan</span><br/><span class="userquote">Developer & freelance web designer.</span></div>
        <div class="user-social-wrapper">
          <div class="user-info user-posts"><span>28</span><span>shots</span></div>
          <div class="user-info user-followers"><span>164</span><span>followers</span></div>
          <div class="user-info user-following"><span>81</span><span>following</span></div>
        </div><a href="#">Follow</a>
        <div class="nav-bar"><i class="fa fa-th active" aria-hidden="true"></i>
<i class="fa fa-list-ul" aria-hidden="true"></i>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bookmark" aria-hidden="true"></i>
        </div>
        <div class="shots">
          <div class="shot"><img src="https://i.imgur.com/p96Dx5N.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/DqQYs9C.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/0slF26H.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/tfwlQuG.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/mx505rF.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/ahqJFvv.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/9IxlD6e.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/0b9Jkaj.png"/></div>
          <div class="shot"><img src="https://i.imgur.com/AoMm0Ov.png"/></div>
        </div>
      </div>
      <div class="menu-bar-wrapper">
        <div class="menu-bar active"><i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-search" aria-hidden="true"></i>
<i class="fa fa-plus" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-user active" aria-hidden="true"></i>
        </div>
      </div>
    </div>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 

 

Now make a style.css file and copy paste the below code

 

style.css

 

@import url('https://fonts.googleapis.com/css?family=Montserrat');
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 body, html {
     width: 100%;
     height: 100%;
     font-family: "Montserrat";
     color: #303633;
     background-color: #c8d9e7;
     overflow: hidden;
     font-size: 1em;
     font-style: normal;
     -webkit-appearance: none;
     outline: none;
     text-rendering: geometricPrecision;
     perspective: 1000px;
}
 a {
     position: relative;
     display: inline-block;
     padding: 12px 35px;
     margin: 0 0 20px;
     background-color: #e1306c;
     color: white;
     border-radius: 5px;
     transition: all 0.3s;
     letter-spacing: 2px;
     font-size: 0.85em;
     font-weight: 700;
     text-decoration: none;
     text-transform: uppercase;
     box-shadow: 0 2px 30px rgba(225, 48, 108, .4);
}
 a:hover {
     background-color: #e75d8c;
}
 .content-wrapper {
     width: 300px;
     max-height: 530px;
     border-radius: 5px;
     box-shadow: 0 2px 30px rgba(0, 0, 0, .2);
     background: #fbfcee;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     overflow-y: scroll;
     overflow-x: hidden;
     text-align: center;
}
 .content-wrapper::-webkit-scrollbar {
     display: none;
}
 .content-wrapper .img {
     width: 302px;
     height: 350px;
     position: relative;
     overflow: hidden;
}
 .content-wrapper .img::after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(88, 81, 219, .25), transparent);
}
 .content-wrapper img {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     object-fit: contain;
}
 .menu-bar-wrapper {
     position: absolute;
     bottom: 0;
     width: 100%;
     overflow: hidden;
}
 .menu-bar, .nav-bar {
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 100%;
     background-color: #5851db;
     transform: translateY(110%);
     transition: all 0.455s;
}
 .menu-bar.active, .nav-bar.active {
     transform: translateY(0%);
}
 .menu-bar i, .nav-bar i {
     color: rgba(250, 250, 254, .5);
     padding: 14px;
     transition: all 0.255s;
     cursor: pointer;
}
 .menu-bar i.active, .nav-bar i.active {
     color: white;
}
 .menu-bar i:hover, .nav-bar i:hover {
     color: white;
}
 .nav-bar {
     background-color: #343436;
     transform: translateY(0%);
}
 .nav-bar i {
     color: rgba(255, 255, 255, .35);
     padding: 14px;
     transition: all 0.255s;
     cursor: pointer;
}
 .nav-bar i.active {
     color: white;
}
 .nav-bar i:hover {
     color: #5851db;
}
 .dots-wrapper {
     cursor: pointer;
     padding: 5px;
     height: 20px;
     position: absolute;
     right: 15px;
     top: 15px;
     z-index: 2;
}
 .dots {
     background-color: #5851db;
     width: 4px;
     height: 4px;
     border-radius: 100%;
     position: absolute;
     top: 0;
}
 .dots::after, .dots::before {
     content: "";
     margin-top: 6px;
     display: block;
     width: 4px;
     border-radius: 100%;
     height: 4px;
     background-color: #5851db;
}
 .dots::after {
     margin-top: 2px;
}
 .wave {
     opacity: 0.4;
     position: absolute;
     left: 50%;
     background: #bc2a8d;
     width: 500px;
     height: 500px;
     margin-left: -250px;
     margin-top: -50px;
     transform-origin: 50% 48%;
     border-radius: 43%;
     animation: drift 5000ms infinite linear;
}
 .wave.-three {
     animation: drift 7000ms infinite linear;
     background: white;
     opacity: 1;
}
 .wave.-two {
     animation: drift 9000ms infinite linear;
     opacity: 0.4;
     background: #ffdc80;
}
 .profile--info {
     text-align: left;
}
 .profile--info span {
     font-family: "Open Sans", "Adobe Blank";
     z-index: 1;
     left: 15px;
     top: 15px;
     font-size: 0.575em;
     color: rgba(84, 95, 89, .75);
     display: block;
}
 .profile--info span.username {
     font-weight: 700;
     font-style: normal;
     font-size: 1.25em;
     color: black;
}
 .profile--info span.userquote {
     margin-top: -15px;
     font-size: 0.85em;
     color: rgba(84, 95, 89, .75);
}
 .user {
     background-color: white;
     width: 100%;
     margin-top: 0;
     max-height: 600px;
     position: relative;
     padding: 0 30px;
     box-sizing: border-box;
}
 .user-social-wrapper {
     display: flex;
     justify-content: space-around;
     position: relative;
     margin: 20px 0;
     padding: 17px 0;
}
 .user-social-wrapper::after, .user-social-wrapper::before {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     width: 100%;
     height: 1px;
     background-color: rgba(241, 193, 226, .5);
}
 .user-social-wrapper::before {
     top: initial;
     bottom: 0;
}
 .user-social-wrapper .user-info {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     font-weight: 200;
     flex: 1 1;
}
 .user-social-wrapper .user-info span:first-child {
     font-size: 1.25em;
}
 .user-social-wrapper .user-info span:last-child {
     font-size: 0.75em;
     color: rgba(84, 95, 89, .75);
}
 .shots {
     width: calc(100% + 60px);
     margin-left: -30px;
     position: relative;
     display: flex;
     flex-wrap: wrap;
}
 .shots .shot {
     overflow: hidden;
     position: relative;
     width: 100px;
     height: 100px;
}
 .shots .shot::after {
     content: "";
     display: block;
     opacity: 0;
     transition: all 0.255s;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, .5);
}
 .shots .shot:hover::after {
     opacity: 1;
}
 .shots .shot:hover img {
     transform: translate(-50%, -50%) scale(1.25);
}
 .shots .shot img {
     transition: all 0.255s;
     width: 102px;
}
 @keyframes drift {
     from {
         transform: rotate(0deg);
    }
     from {
         transform: rotate(360deg);
    }
}

 

See also  Javascript Project to Validate Data inside Input Text Fields Using Regular Expression Full Project For Beginners

 

Now make a script.js file and copy paste the below code

 

script.js

 

var scrollTop = 0;

$(".content-wrapper").scroll(function () {
    if ($(this).scrollTop() > 300) {
        $(".menu-bar-wrapper").css('bottom', -$(this).scrollTop());
        return false;
    }
    $(".menu-bar-wrapper").css('bottom', -$(this).scrollTop());
    var st = jQuery(this).scrollTop();

    if (st > 20) {
        if (st < scrollTop) {
            jQuery(".menu-bar").addClass("active");
        } else {
            jQuery(".menu-bar").removeClass("active");
        }
        scrollTop = st;
    }

});

 

See also  Node.js Tutorial to Convert PDF Documents to JSON File Using pdf2json Library in Javascript Full Project For Beginners

 

If you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply