LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
han solo profile image

Han Solo

SMUGGLER

I like smuggling things for a living and cowboy adventures across the universe. I have my trusty, hairy companion with me at all times, as well as my favorite pistol: the DL-44. I like to call it the "Deadly Laser 44," or, ever since I shot a guy in a bar, the "Down Low 44."

+

Stun Setting

USER CONTROLLED

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

PURCHASE

Chewbacca

SMUGGLER | REBEL ALLIANCE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

FOLLOW
FOLLOWERS
+ 193,294 others
Mock-up courtesy of Creative Grenade. Converted by Piece Digital.
CSS
.col-2 {
  display: inline-block;
  width: 50%;
}

.col-4 {
  display: inline-block;
  width: 25%;
}

/*///////////////////////// responsive styling /////////////////////////*/
.col-3-2-1 {
  display: inline-block;
  width: 33.3333333333%;
}

@media screen and (max-width: 800px) {
  .col-3-2-1 {
    display: inline-block;
    width: 50%;
  }
}
@media screen and (max-width: 540px) {
  .col-3-2-1 {
    display: block;
    width: 100%;
  }
}
*, *:before, *:after {
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
}

/* body */
body {
  margin: 0;
  color: #323232;
  background-color: #f0f0f0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

.parent {
  position: relative;
}

.section-shadow {
  box-shadow: 0 -48px 48px -48px black;
}

.section-purple {
  background-color: #2C1D37;
}

.section-fuschia {
  background-color: #4A273F;
}

.space-exception {
  position: relative;
  margin: 0 0 -80px;
}

.page-wrap {
  max-width: 1600px;
  margin: auto;
}

.shadow-wrap {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  max-width: 1600px;
  box-shadow: 0 0 48px 0 black;
  pointer-events: none;
}

.left-justify {
  text-align: left;
}

.center-justify {
  text-align: center;
}

.right-justify {
  text-align: right;
}

.hero-image {
  background-position: center;
  background-size: cover;
  height: 37vw;
  max-height: 600px;
}

.big-image {
  height: 45vw;
  max-height: 728px;
}

.han-solo-bg {
  background-image: url("https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/banner bg.jpg");
}

.dl-44-bg {
  background-image: url("https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/gun bg.jpg");
}

.profile-info {
  z-index: 1;
  position: relative;
  max-width: 480px;
  margin: 0 auto 32px;
  text-align: center;
}
.profile-info .profile-image {
  position: relative;
  top: -16px;
  display: block;
  width: 128px;
  margin: 0 auto -16px;
  border-radius: 100%;
  background-color: white;
}
.profile-info .profile-image .circular-image-shadow {
  display: block;
  position: absolute;
  bottom: 88%;
  left: 50%;
  width: 208px;
  height: 160px;
  overflow-x: visible;
  overflow-y: hidden;
  -ms-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.profile-info .profile-image .circular-image-shadow:before {
  content: "";
  display: block;
  position: relative;
  top: 84%;
  width: 128px;
  height: 144px;
  margin: auto;
  border-radius: 100%;
  box-shadow: 0 0 32px 0px rgba(0, 0, 0, 0.6);
}
.profile-info .profile-image img {
  position: relative;
  width: 100%;
  border-radius: 100%;
  box-shadow: 0 0 0 8px white;
}
.profile-info .name {
  font-size: 24px;
  margin: 0;
  font-weight: 100;
}
.profile-info .name.varified:after {
  content: "\2714";
  display: inline-block;
  width: 19.2px;
  height: 19.2px;
  padding: 1.6px;
  margin: 0 0 0 16px;
  color: white;
  background-color: #4A273F;
  border-radius: 100%;
  font-size: 11.2px;
  vertical-align: middle;
}
.profile-info .title {
  display: block;
  margin: 4px;
  color: #4A273F;
  font-weight: bold;
}
.profile-info p {
  font-size: 12.8px;
  padding: 0 16px;
}
.profile-info .social-links div {
  padding: 0 8px;
}
.profile-info .social-links div img {
  max-height: 16px;
}

.recommended-people {
  z-index: 1;
  position: relative;
  text-align: center;
}
.recommended-people .person {
  padding: 8px;
  max-width: 224px;
  margin: auto;
}
.recommended-people .person > div {
  box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.3);
}
.recommended-people .person > div .head {
  position: relative;
  height: 96px;
  text-align: right;
  overflow: hidden;
}
.recommended-people .person > div .head img {
  max-height: 100%;
}
.recommended-people .person > div .head h1 {
  z-index: 3;
  position: absolute;
  display: block;
  bottom: -1.6px;
  left: 12.8px;
  font-size: 19.2px;
  color: white;
  vertical-align: baseline;
  text-align: left;
  line-height: 17.6px;
}
.recommended-people .person > div .body {
  text-align: left;
  padding: 16px;
  background-color: white;
}
.recommended-people .person > div .body h4 {
  font-size: 12.8px;
  margin: 0 0 6.4px;
}
.recommended-people .person > div .body p {
  margin: 0;
  font-size: 12.8px;
}
.recommended-people .person > div .body .btn {
  display: inline-block;
  font-size: 9.6px;
  margin: 12.8px 0 0;
  padding: 9.6px 24px;
  border-radius: 4px;
  color: white;
  background: red;
  cursor: pointer;
}
.recommended-people .person:nth-child(1) > div .head {
  background-color: #faa209;
}
.recommended-people .person:nth-child(1) > div .head:after {
  z-index: 2;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 96px 0 0 #faa209;
  opacity: .75;
}
.recommended-people .person:nth-child(1) > div .body h4 {
  color: #faa209;
}
.recommended-people .person:nth-child(1) > div .body .btn {
  color: white;
  background-color: #faa209;
  box-shadow: inset 0 0 0 3.2px #faa209;
}
.recommended-people .person:nth-child(1) > div .body .btn:hover {
  color: #faa209;
  background-color: white;
}
.recommended-people .person:nth-child(2) > div .head {
  background-color: #3bb1b2;
}
.recommended-people .person:nth-child(2) > div .head:after {
  z-index: 2;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 96px 0 0 #3bb1b2;
  opacity: .75;
}
.recommended-people .person:nth-child(2) > div .body h4 {
  color: #3bb1b2;
}
.recommended-people .person:nth-child(2) > div .body .btn {
  color: white;
  background-color: #3bb1b2;
  box-shadow: inset 0 0 0 3.2px #3bb1b2;
}
.recommended-people .person:nth-child(2) > div .body .btn:hover {
  color: #3bb1b2;
  background-color: white;
}
.recommended-people .person:nth-child(3) > div .head {
  background-color: #e6226c;
}
.recommended-people .person:nth-child(3) > div .head:after {
  z-index: 2;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 96px 0 0 #e6226c;
  opacity: .75;
}
.recommended-people .person:nth-child(3) > div .body h4 {
  color: #e6226c;
}
.recommended-people .person:nth-child(3) > div .body .btn {
  color: white;
  background-color: #e6226c;
  box-shadow: inset 0 0 0 3.2px #e6226c;
}
.recommended-people .person:nth-child(3) > div .body .btn:hover {
  color: #e6226c;
  background-color: white;
}

.gun-inspector {
  z-index: 2;
  position: absolute;
  bottom: -64px;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 52%;
}
.gun-inspector > div {
  position: relative;
  width: 100%;
  height: 100%;
}
.gun-inspector > div img {
  width: 100%;
}
.gun-inspector > div .gun-info-node {
  position: absolute;
  top: 31%;
  left: 74%;
  width: 28.8px;
  padding: 1.28px 0;
  text-align: center;
  background-color: white;
  border-radius: 100%;
  box-shadow: inset 0 0 0 4.8px gainsboro;
  font-size: 22.4px;
  cursor: pointer;
}
.gun-inspector > div .gun-info-node + .gun-info {
  height: 0px;
  opacity: 0;
  pointer-events: none;
}
.gun-inspector > div .gun-info-node.open {
  color: #f0f0f0;
  background-color: #4A273F;
}
.gun-inspector > div .gun-info-node.open + .gun-info {
  height: 196.8px;
  opacity: 1;
  pointer-events: all;
}
.gun-inspector > div .gun-info {
  position: absolute;
  top: 27%;
  left: 76.6%;
  -ms-transform: translate(-50%, -100%);
  -moz-transform: translate(-50%, -100%);
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  width: 323.2px;
  max-width: 90vw;
  background-color: black;
}
.gun-inspector > div .gun-info:after {
  content: "";
  position: absolute;
  top: 96%;
  left: 50%;
  -ms-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  border-style: solid;
  border-width: 16px 16px 0 16px;
  border-color: white transparent transparent transparent;
}
.gun-inspector > div .gun-info > div {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 16px 48px 0 black;
  overflow: hidden;
}
.gun-inspector > div .gun-info > div > div {
  display: inline-block;
  background-color: white;
  vertical-align: top;
}
.gun-inspector > div .gun-info > div > div.img {
  width: 131.2px;
  background-color: black;
}
.gun-inspector > div .gun-info > div > div.img img {
  display: block;
  max-height: 100%;
}
.gun-inspector > div .gun-info > div > div.info {
  text-align: left;
  padding: 16px;
  background-color: white;
  width: 192px;
}
.gun-inspector > div .gun-info > div > div.info h1 {
  display: block;
  margin: 0 0 6.4px;
  font-weight: normal;
  font-size: 19.2px;
  color: rgba(0, 0, 0, 0.6);
  text-align: left;
  line-height: 17.6px;
  vertical-align: baseline;
}
.gun-inspector > div .gun-info > div > div.info h6 {
  color: #4A273F;
  font-size: 9.6px;
  margin: 0 0 12.8px;
}
.gun-inspector > div .gun-info > div > div.info p {
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  font-size: 12.8px;
}
.gun-inspector > div .gun-info > div > div.info .btn {
  display: inline-block;
  font-size: 9.6px;
  margin: 12.8px 0 0;
  padding: 9.6px 24px;
  border-radius: 4px;
  color: white;
  background: #4A273F;
  box-shadow: inset 0 0 0 3.2px #4A273F;
  cursor: pointer;
}
.gun-inspector > div .gun-info > div > div.info .btn:hover {
  color: #4A273F;
  background: white;
}

#profile-overlay {
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
}
#profile-overlay .profile-info {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 8px;
  width: 432px;
  height: 0;
  min-height: 224px;
  -ms-transform: scale(0.9) translate(-50%, -50%);
  -moz-transform: scale(0.9) translate(-50%, -50%);
  -webkit-transform: scale(0.9) translate(-50%, -50%);
  transform: scale(0.9) translate(-50%, -50%);
}
#profile-overlay .profile-info > div {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/mountains.jpg");
  background-position: 60% center;
  background-size: 180%;
  box-shadow: inset 152px 0 0 0 rgba(255, 160, 0, 0.8), inset -320px 0 0 rgba(255, 255, 255, 0.8);
}
#profile-overlay .profile-info > div > div {
  display: inline-block;
  vertical-align: top;
}
#profile-overlay .profile-info > div > div.img {
  position: relative;
  width: 152px;
  height: 100%;
  margin: 0 32px 0 0;
}
#profile-overlay .profile-info > div > div.img img {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  max-width: 184px;
}
#profile-overlay .profile-info > div > div.info {
  text-align: left;
  padding: 16px;
  width: 224px;
}
#profile-overlay .profile-info > div > div.info div {
  vertical-align: middle;
}
#profile-overlay .profile-info > div > div.info h1 {
  display: block;
  margin: 0 0 6.4px;
  font-weight: normal;
  font-size: 19.2px;
  color: rgba(0, 0, 0, 0.6);
  text-align: left;
  line-height: 17.6px;
  vertical-align: baseline;
}
#profile-overlay .profile-info > div > div.info h6 {
  color: #4A273F;
  font-size: 9.6px;
  margin: 0 0 12.8px;
}
#profile-overlay .profile-info > div > div.info h6.small {
  font-size: 6.4px;
  margin: 6.4px 0;
}
#profile-overlay .profile-info > div > div.info p {
  color: rgba(0, 0, 0, 0.6);
  padding: 0;
  margin: 0 0 12.8px;
  font-size: 12.8px;
}
#profile-overlay .profile-info > div > div.info .btn {
  display: inline-block;
  font-size: 9.6px;
  padding: 9.6px 24px;
  border-radius: 4px;
  color: white;
  background: #faa209;
  box-shadow: inset 0 0 0 3.2px #faa209;
  cursor: pointer;
}
#profile-overlay .profile-info > div > div.info .btn:hover {
  color: #faa209;
  background: white;
}
#profile-overlay .profile-info > div > div.info .followers {
  font-size: 11.2px;
  vertical-align: middle;
  text-align: right;
}
#profile-overlay .profile-info > div > div.info .followers .img {
  padding: 3.2px;
}
#profile-overlay .profile-info > div > div.info .followers .img img {
  border-radius: 100%;
  box-shadow: inset 0 0 0 3.2px #f0f0f0;
}
#profile-overlay.open {
  opacity: 1;
  pointer-events: all;
}
#profile-overlay.open .profile-info {
  -ms-transform: scale(1) translate(-50%, -50%);
  -moz-transform: scale(1) translate(-50%, -50%);
  -webkit-transform: scale(1) translate(-50%, -50%);
  transform: scale(1) translate(-50%, -50%);
}

@media screen and (max-width: 600px) {
  .space-exception {
    position: relative;
    margin: 0 0 -32px;
  }

  .gun-inspector > div .gun-info-node.open + .gun-info {
    height: 296px;
  }
  .gun-inspector > div .gun-info {
    left: 50%;
  }
  .gun-inspector > div .gun-info:after {
    display: none;
  }
  .gun-inspector > div .gun-info > div > div {
    display: block;
  }
  .gun-inspector > div .gun-info > div > div.img {
    width: 100%;
    height: 128px;
    overflow: hidden;
  }
  .gun-inspector > div .gun-info > div > div.img img {
    position: relative;
    top: 50%;
    -ms-transform: translate(0, -22%);
    -moz-transform: translate(0, -22%);
    -webkit-transform: translate(0, -22%);
    transform: translate(0, -22%);
    max-width: 100%;
    max-height: inherit;
  }
  .gun-inspector > div .gun-info > div > div.info {
    width: 100%;
  }
}
JS
HTMLElement.prototype.addClass = function() {
  if(this) {
    //console.log("ADD CLASS");
    var classNameArr = (this.className || "").split(" ");
    //console.log("classNameArr", classNameArr);

    for(var i = 0; i < arguments.length; i++) {
      if(!this.className.match(arguments[i])) {
        classNameArr.push(arguments[i]);
      }
    }

    //console.log("className", this.className);
    this.className = classNameArr.join(" ");
    //console.log("className", this.className);

    classNameArr = null;

    return this;
  }
};

HTMLElement.prototype.removeClass = function() {
  if(this) {
    //console.log("REMOVE CLASS");
    var classNameArr = this.className.split(" ") || [];
    //console.log("classNameArr", classNameArr);

    if( classNameArr.indexOf(arguments[0]) >= 0 ) {
      classNameArr.splice( classNameArr.indexOf(arguments[0]), 1 );
    }

    //console.log("className", this.className);  
    this.className = classNameArr.join(" ");
    //console.log("className", this.className);

    classNameArr = null;

    return this;
  }
};

HTMLElement.prototype.toggleClass = function() {
  if(this) {
    if(this.className.match(arguments[0])) {
      this.removeClass(arguments[0]);
    } else {
      this.addClass(arguments[0]);
    }
    return this;
  }
};

HTMLElement.prototype.hasClass = function(className) {
  if(this) {
    var thisClassName = this.className.split(" ");
    //console.log("HAS CLASS");

    if(typeof className === "object") {
      var classNameArr = className;
    } else {
      var classNameArr = [className];
    }
    var result = false;

    for(var i = 0; i < classNameArr.length; i++) {
      for(var j = 0; j < thisClassName.length; j++) {
        //console.log("classnames", classNameArr[i], thisClassName[j])
        if(classNameArr[i] === thisClassName[j]) {
          result = true;
          i = classNameArr.length;
        }
      }
      if(result) i = thisClassName.length;
    }

    //console.log("result", result);

    return result;
  }
};

HTMLElement.prototype.css = function(property, value) {
  if(this) {
    //console.log("APPLY CSS");

    if(typeof property === "string") {
      this.style[property] = value;
    } else {
      for(var prop in property) {
        console.log(this)
        this.style[prop] = property[prop];
      }
    }

    console.log("style", this.style);

    return this;
  }
};

document.addEventListener("click", function(e) {
  e.preventDefault();
	if(e.target.hasClass("gun-info-node")) {
    e.target.toggleClass("open");
  } else
  if(e.target.hasClass("profile")) {
    document.querySelector("#profile-overlay").addClass("open");
    
	} else
	if(e.target.attributes["id"] && e.target.attributes["id"].value === "profile-overlay") {
		e.target.removeClass("open");
	}
});
Host Instantly Drag and Drop Website Builder

 

Description

Thanks to @CreativeGrenade (Twitter) for posting this PSD mockup. This was fun to make :)
Term
Tue, 11/28/2017 - 03:56

Related Codes

Pen ID
Pen ID
Pen ID