Daily UI Challenge #006 :: User Profile

In this example below you will see how to do a Daily UI Challenge #006 :: User Profile with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bermudaquest, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bermudaquest ©
  • HTML
  • CSS
  • JavaScript
    <div class="modal">
  <div class="modal-container">

    <div class="user-profile">
      
      <div class="profile">
        <img src="https://lh4.googleusercontent.com/-pBYLQxAAGwA/AAAAAAAAAAI/AAAAAAAAARs/pPwoEFg6FcY/photo.jpg" alt="Melanie E Magdalena photo" />
        <p class="name">Melanie E Magdalena</p>
        <p class="bio-1">User Experience Designer</p>
        <p class="bio-2">Strategy > Design > QA > Repeat</p>
      </div>

      <div class="social">
        <a href="https://melaniemagdalena.com"><i class="fa fa-briefcase" aria-hidden="true"></i></a>
        <a href="https://twitter.com/eli_archgirl"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        <a href="https://linkedin.com/in/mmagdalena"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        <a href="https://medium.com/creative-design-by-m2"><i class="fa fa-medium" aria-hidden="true"></i></a>
        <a href="https://instagram.com/eli_archgirl"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        <a href="https://codepen.io/bermudaquest/"><i class="fa fa-codepen" aria-hidden="true"></i></a>
        <a href="https://github.com/archgirl"><i class="fa fa-github" aria-hidden="true"></i></a>
      </div>

      <p class="bio-contact">
        <a class="bio-contact" href="mailto:info@melaniemagdalena.com">info@melaniemagdalena.com</a>
      </p>

    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/bermudaquest/daily-ui-challenge-006-user-profile-vJyMXg */
    @import url('https://fonts.googleapis.com/css?family=Lato');

body {
  min-height: 100vh;
  background-color: #512DA8;
  font-family: 'Lato', sans-serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* Profile */

.profile {
  background: #eeeeee;
  margin: 0;
  padding: 20px 25px;
}

img {
  display: block;
  margin: auto;
  height: 128px;
  width: auto;
  border-radius: 50%;
  border: 1px solid #512DA8;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.name {
  font-size: 1.6em;
  line-height: 0.5;
  font-weight: 600;
  color: #212121;
}

/* Bio */

.bio-1 {
  font-size: 1em;
  font-weight: 500;
  color: #757575;
}

.bio-2 {
  font-size: 0.8em;
  color: #757575;
}

.bio-contact {
  font-size: 0.9em;
  padding-top: 0.6em;
}

a.bio-contact {
  color: #757575;
  text-decoration: none;
}

/* Social */

.social {
  background: #FF4081;
  padding: 0.2em 0;
}

.social i {
  font-size: 1.5em;
  margin: auto;
  padding: 2% 2%;
}

a {
  color: #eeeeee;
}

a:hover {
  color: #212121;
  transition: background-color 0.5s ease-out;
}

/* Buttons */

.button {
  width: 100%;
  padding: 0.8em 1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  color: #ffffff;
  background-color: #E64A19;
  border-radius: 0.1em;
  border: 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  outline: 0;
}

.button:hover {
  background-color: #FF5722;
  transition: background-color 0.5s ease-out;
}


/* Modal */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  z-index: 100;
}

.modal-container {
  display: flex;
  background-color: #eeeeee;
  max-width: 700px;
  min-height: 400px;
  box-shadow: 0.5em 0.5em 1.2em rgba(0, 0, 0, 0.2);
}


/*Downloaded from https://www.codeseek.co/bermudaquest/daily-ui-challenge-006-user-profile-vJyMXg */
    

Comments