Profile-popup experiment

In this example below you will see how to do a Profile-popup experiment with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -Infamous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -Infamous ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Profile-popup experiment</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid main-wrap" id="app">

  <div class="line" v-bind:class="{ 'line-after' : isActive }"></div>

  <div class="profile-modal-before" v-bind:class="{ 'profile-modal-after' : isActive }" v-on:click="isActive = !isActive">
    <div class="profile-picture-before" v-bind:class="{ 'profile-picture-after' : isActive }"></div>
    <div class="profile-content">
      <div>
        <h2>{{ name }}</h2>
        <h3>{{ details }}</h3>
        <p>{{ about }}</p>
        <a href="www.google.com" target="blank">
          <div class="follow-button">
            <p>Follow</p>
          </div>
        </a>
      </div>
    </div>
  </div>

  <div class="line" v-bind:class="{ 'line-after' : isActive }"></div>

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Infamous/profile-popup-experiment-Ewvpjb */
.main-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #868686;
}

.line {
  width: 30%;
  height: 2px;
  background-color: black;
  transition: width 0.2s ease;
}

.line-after {
  width: 10%;
  transition: width 0.2s ease;
}

.profile-modal-before {
  height: 200px;
  width: 200px;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
  transition: all 0.2s ease;
  overflow: hidden;
}

.profile-modal-after {
  height: 90%;
  width: 40%;
  background-color: #FFFFFF;
  border-radius: 15px;
  border: none;
  transition: all 0.2s ease;
}

.profile-picture-before {
  width: 100%;
  height: 100%;
  background-image: url(https://images.unsplash.com/photo-1503074789491-baec123afdf8?dpr=1&auto=compress,format&fit=crop&w=1424&h=&q=80&cs=tinysrgb&crop=);
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
}

.profile-picture-after {
  width: 100%;
  height: 50%;
  background-size: 100% auto;
  transition: all 0.2s ease;
}

.profile-content {
  height: 50%;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-content h2 {
  color: #868686;
  font-family: sans-serif;
  margin-top: 10px;
}

.profile-content h3 {
  color: #1581BA;
  margin-top: 10px;
}

.profile-content p {
  color: #868686;
  margin-top: 10px;
}

.follow-button {
  margin-top: 30px;
  width: 100%;
  height: 50px;
  background-color: #1581BA;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.follow-button p {
  color: #FFFFFF;
  font-size: 18px;
}

@media screen and (max-width: 720px) {
  .line {
    width: 20%
  }
  
  .line-after {
    width: 0%;
  }
  
  .profile-modal-after {
    height: 98%;
    width: 98%
  }
  
  .profile-picture-after {
    background-size: auto 100%;
    background-position: top center;
  }
  
  .profile-content {
    width: 100%;
  }
  
  .profile-content h2 {
    margin-top: 0px;
    font-size: 21px;
  }
  
  .profile-content h3 {
    margin-top: 0px;
    font-size: 16px;
  }
  
  .profile-content p {
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/*Downloaded from https://www.codeseek.co/-Infamous/profile-popup-experiment-Ewvpjb */
new Vue({
  el: "#app",
  data: {
    isActive: false,
    name: "Isabella Defono",
    details: "Junior UI Designer",
    about:
      "I am a young UI designer with a passion for creating great user experiences through an eye for perfection and a little bit of creative freedom."
  }
});

//  Portrait image by Catarina Carvalho
//  unsplash profile page: https://unsplash.com/@catvcarvalho
//  source: https://unsplash.com/photos/ZbExW-2rMGo
//  thanks for the awesome free photography =)

Comments