LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Jesse Couch

Digital Creative

My name is Jesse Couch, and I am an award winning, intensely creative, coffee-fueled front-end web designer and developer. My style and approach are very straight-forward — I obsess about keeping things as simple as humanly possible. That's it. If you like bells and whistles for the sake of bells and whistles, look elsewhere - but if you want to remain laser-focused on the goals for your new website, it's time time to talk.

CSS
* {
  box-sizing: border-box;
  transition: .5s ease-in-out;
}

html, body {
  background-color: #220200;
  height: 100%;
  overflow: hidden;
  font-family: helvetica neue,helvetica,arial,sans-serif;
}
html h1, body h1 {
  font-size: 25px;
  font-weight: 200;
  color: white;
  line-height: 30px;
  margin-bottom: 10px;
}
html h2, body h2 {
  font-size: 15px;
  color: #6b0500;
}

#wrapper {
  opacity: 0;
  display: table;
  height: 100%;
  width: 100%;
}
#wrapper.loaded {
  opacity: 1;
  transition: 2.5s ease-in-out;
}
#wrapper #content {
  display: table-cell;
  vertical-align: middle;
}

#card {
  height: 400px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  perspective: 600px;
}
#card #front, #card #back {
  border-radius: 10px;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#card #front {
  transform: rotateY(0deg);
  overflow: hidden;
  z-index: 1;
}
#card #front #arrow {
  position: absolute;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  z-index: 10;
  bottom: 0;
  right: 50px;
  color: rgba(255, 255, 255, 0.5);
  animation: arrowWiggle 1s ease-in-out infinite;
}
#card #front #top-pic {
  height: 50%;
  width: 100%;
  background-image: url(https://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46);
  background-size: cover;
}
#card #front #avatar {
  width: 114px;
  height: 114px;
  top: 50%;
  left: 50%;
  margin: -77px 0 0 -57px;
  border-radius: 100%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 4px 5px rgba(107, 5, 0, 0.6), 0 0 50px 50px rgba(255, 255, 255, 0.25);
  background-image: url(http://0.gravatar.com/avatar/fa4df8540bab3cb38f7dfa60c6e0522c?size=2000);
  background-size: contain;
  position: absolute;
  z-index: 1;
}
#card #front #info-box {
  height: 50%;
  width: 100%;
  position: absolute;
  display: table;
  left: 0;
  bottom: 0;
  background: rgba(200, 38, 29, 0.7);
  padding: 50px;
}
#card #front #social-bar {
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
}
#card #front #social-bar a {
  display: inline-block;
  color: #951009;
  text-decoration: none;
  padding: 5px;
  line-height: 18px;
  border-radius: 5px;
}
#card #front #social-bar a:hover {
  color: #450300;
  background: rgba(255, 255, 255, 0.3);
  transition: .25s ease-in-out;
}
#card #back {
  transform: rotateY(180deg);
  background-color: rgba(255, 255, 255, 0.6);
  display: table;
  z-index: 2;
  font-size: 13px;
  line-height: 20px;
  padding: 50px;
}
#card #back .back-info {
  text-align: justify;
  text-justify: inter-word;
}
#card #back #social-bar {
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
}
#card #back #social-bar a {
  display: inline-block;
  line-height: 18px;
  color: #951009;
  text-decoration: none;
  padding: 5px;
  border-radius: 5px;
}
#card #back #social-bar a:hover {
  color: #450300;
  background: rgba(223, 74, 66, 0.5);
  transition: .25s ease-in-out;
}
#card .info {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
#card.flip #front {
  transform: rotateY(180deg);
}
#card.flip #back {
  transform: rotateY(360deg);
}

#background {
  position: fixed;
  background-color: black;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#background #background-image {
  height: calc(100% + 60px);
  width: calc(100% + 60px);
  position: absolute;
  top: -30px;
  left: -30px;
  -webkit-filter: blur(10px);
  background-image: url(https://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46);
  background-size: cover;
}

@keyframes arrowWiggle {
  0% {
    right: 50px;
  }
  50% {
    right: 35px;
  }
  100% {
    right: 50px;
  }
}
JS
$(window).load(function(){
  $('#wrapper').addClass('loaded');
})

$('.more-info').click(function(){
  $("#card").toggleClass('flip');
  $('#arrow').remove();
});
$('#background').click(function(){
  $('#card').removeClass('flip');
})

Description

Seen a lot of these, and just wanted to do my take on one. Pssst...click the profile icon. The background image uses a CSS filter, so it's the same image that is behind the avatar. Managed to get rid of the white edges that come with this by offsetting the position and adding to the width.
Term
Mon, 11/27/2017 - 21:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv