LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Sam Yerkes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa aperiam eius optio doloribus eveniet omnis obcaecati labore suscipit quos voluptate.

CSS
@import url(http://weloveiconfonts.com/api/?family=typicons);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background: #dddddd;
  font-family: georgia, serif;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 300px;
  background: white;
  -moz-box-shadow: 0px 0px 50px #444444;
  -webkit-box-shadow: 0px 0px 50px #444444;
  box-shadow: 0px 0px 50px #444444;
}

.cover {
  position: relative;
  height: 200px;
  background: url("http://farm9.staticflickr.com/8370/8553416434_8cfb7e205f.jpg");
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  color: white;
}
.cover h1 {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: rgba(68, 68, 68, 0.5);
  font-family: helvetica, sans-serif;
  line-height: 5.5;
  text-align: center;
  text-transform: uppercase;
}
.cover:hover {
  cursor: pointer;
}
.cover:hover h1 {
  display: block;
}

.m {
  position: absolute;
  top: 200px;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100px;
  width: 100px;
  border: 5px white solid;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyZWRjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVhYzhmYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #52edc7), color-stop(100%, #5ac8fb));
  background-image: -moz-linear-gradient(#52edc7, #5ac8fb);
  background-image: -webkit-linear-gradient(#52edc7, #5ac8fb);
  background-image: linear-gradient(#52edc7, #5ac8fb);
  color: white;
  text-align: center;
  font-size: 4rem;
  line-height: 1.5;
}
.m .typicons-user:before {
  font-family: "Typicons";
}

p {
  margin: 45px 25px 25px;
  padding-top: 25px;
  font-size: 1rem;
}

Description

A little modal that display's a username and short bio along with a cover photo.
Term
Mon, 11/27/2017 - 21:24

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv