LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

popular pens ¬

CSS
html {
  margin: 0;
  background: #f9f9f9;
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  font-family: "Fira Sans", sans-serif;
  color: #20455E;
}

button {
  font-family: "Fira Sans", sans-serif;
}

a {
  text-decoration: none;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.ease, .avatar img, .userPens, .penImg img, .singlePen a:hover > .penImg img {
  -webkit-transition: all 680ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 680ms cubic-bezier(0.19, 1, 0.22, 1);
}

.easeFast, .pensCTA, .pensCTA:hover, .userProf:hover > .pensCTA, .userTitle h1 img, .userTitle h1:hover > a img, .singlePen {
  -webkit-transition: all 230ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 230ms cubic-bezier(0.19, 1, 0.22, 1);
}

.bossWrapp {
  height: 364px;
  width: 512px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.userProf {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 0 48px 0;
}

.leftSide {
  display: flex;
  flex-direction: row;
}

.pensCTA {
  opacity: 0;
  display: flex;
  border: 0 solid transparent;
  background: transparent;
  font-size: 14px;
  color: #7A92A5;
  outline: 0;
}
.pensCTA svg {
  margin: 0 6px 0 0;
  stroke: currentColor;
}
.pensCTA:hover {
  color: #3197EF;
  cursor: pointer;
}
.pensCTA:active {
  color: #117edc;
}

.userProf:hover > .pensCTA {
  opacity: 1;
}

.avatar {
  height: 72px;
  width: 72px;
  opacity: 0;
  margin: 0 18px 0 0;
  position: relative;
  border-radius: 30em;
}
.avatar .wrapp {
  overflow: hidden;
  border-radius: 30em;
  z-index: 9991;
  position: relative;
}
.avatar img {
  display: block;
  width: 100%;
}

.avatar span {
  position: absolute;
  top: 6px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  border-radius: 30em;
  width: 72px;
  background-size: cover !important;
  filter: blur(12px);
  opacity: 0.6;
  z-index: 1;
}

.userTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.userTitle h1 {
  font-size: 24px;
  margin: 0 0 15px 0;
  font-weight: 500;
  z-index: 999991;
  opacity: 0;
}
.userTitle h1:hover {
  cursor: pointer;
}
.userTitle h1 a {
  color: #20455E;
  text-decoration: none;
}
.userTitle h1:active {
  color: #7A92A5;
}
.userTitle h1 img {
  margin: 0 0 0 6px;
  opacity: 0;
  height: 14px;
  transform: translateX(2px);
}
.userTitle h5 {
  font-size: 14px;
  font-weight: 300;
  color: #577083;
  opacity: 0;
}

.userTitle h1:hover > a img {
  opacity: 1;
  transform: translateX(0px);
}

.userDesc {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.userDesc .followers {
  padding: 3px 6px;
  margin: 0 9px 0 0;
  border: 1px solid #DFE5EB;
  border-radius: 2px;
  font-size: 12px;
  color: #577083;
  opacity: 0;
  font-weight: 400;
}

.avatar badge {
  position: absolute;
  height: 18px;
  width: 18px;
  background: #FCD000;
  z-index: 99999991;
  border-radius: 30em;
  top: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  right: 0;
  box-shadow: 0 0 0 2px white;
}
.avatar badge:after {
  content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/Star.svg);
  position: absolute;
}

.userPens {
  display: none;
  flex-direction: column;
}

.pensTitle {
  margin: 0 0 24px 0;
  opacity: 0;
}
.pensTitle h3 {
  text-transform: uppercase;
  font-size: 12px;
  color: #7A92A5;
  font-weight: 500;
  letter-spacing: 1.4px;
}

.pensWrapp {
  display: flex;
  flex-direction: row;
}

.singlePen {
  transform: translatey(20px);
  opacity: 0;
  display: flex;
  position: relative;
  flex-direction: column;
  width: 246px;
  height: 204px;
  margin: 0 18px 0 0;
  background: white;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 6px 50px -6px rgba(141, 151, 158, 0.2);
}
.singlePen:nth-child(2n+0) {
  margin: 0 0px 0 0;
}

.penImg {
  width: 100%;
  height: 150px;
  z-index: 9991;
  position: relative;
  overflow: hidden;
}
.penImg h5 {
  position: absolute;
  bottom: 21px;
  left: 18px;
  color: white;
  z-index: 999991;
  font-size: 14px;
}
.penImg img {
  width: 110%;
  display: block;
}
.penImg:after {
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(-180deg, rgba(34, 69, 93, 0) 47%, rgba(0, 0, 0, 0.68) 100%);
}

.penBar {
  height: 54px;
  padding: 0 18px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.penViews {
  display: flex;
  align-items: center;
  color: #7A92A5;
  text-decoration: none;
}
.penViews img {
  margin: 0 6px 0 0;
}

.penLink a {
  display: flex;
  align-items: center;
  color: #3197EF;
  text-decoration: none;
  align-content: center;
}
.penLink a img {
  margin: 0 6px 0 0;
  width: 16px;
}

.singlePen a:hover > .penImg img {
  transform: scale(1.1);
}
JS
// Your Username
var userName = "igorsheg"; 
// -------------

// Global Vars
var userProf = $(".userProf");
var userImg = $(".avatar");
var userDesc = $(".userDesc");
var userTitle = $(".userTitle");
var proBadge = $(".avatar badge");
var pens = $(".pensWrapp");
var pCTA = $(".pensCTA");
var sPen = $('.singlePen');
// -------------

// Global Functions
proBadge.hide(); 
// ------------- 

// Animations

var userProfIn = anime.timeline({
	autoplay: false
});
 
userProfIn 
	.add({
	targets: ".avatar",
	opacity: 1,
	translateY: ["15px", "0"],
	 easing: 'easeOutExpo',
	duration: "480"
})
	.add({ 
	targets: ".userTitle h1", 
	opacity: 1,
	translateY: ["15px", "0"],
easing: 'easeOutExpo',
	offset: "-=400",
	duration: "480"
})
	.add({
	targets: ".userDesc .followers",
	opacity: 1,
	translateY: ["15px", "0"],
easing: 'easeOutExpo',
	offset: "-=400", 
	duration: "480"
})
 
.add({
	targets: ".userDesc h5",
	opacity: 1,
	translateY: ["15px", "0"],
 easing: 'easeOutExpo',
	offset: "-=400",
	duration: "480"
})
;

// -------------

// User Profile API

$.getJSON("https://cpv2api.com/profile/" + userName + " ", function(resp) {
	if (resp.success) {
		
		// Log All The Thing!
		console.log(resp.data);
		
		// Some vars
		
		var codePen = resp.data;
		var shadow = "url(" + codePen.avatar + ")";
		var userLink = "https://codepen.io/" + codePen.username + " ";

		// Title Injection 
		
		userImg.children(".wrapp").children("img").attr("src", codePen.avatar);

		userImg.children("span").css("background", shadow);

		userTitle.children("h1").children("a").attr("href", userLink);

		userTitle.children("h1").children("a").html(codePen.nicename + "");
		
		userDesc.children("h5").text(codePen.bio.substr(0,30)+'...');
		
		userDesc.children(".followers").html(codePen.followers + " Followers");
		// ----------------  

		userProfIn.play();
	}
	
	// Pro User If
	if (codePen.pro === true) {
		proBadge.show();
	}
});


// -------------

$.getJSON("https://cpv2api.com/pens/popular/" + userName + " ", function(resp) {
	


	
	if (resp.success) {
		for (var i = 0; i < 2; i++) {
			
			var codePen = resp.data[i]; 
			var penImg = codePen.images.small; 
			var penTitle = codePen.title;
			var penViews = codePen.views; 
			var penLink = codePen.link;
			
		pens.append("");
			
			 
			
			
			
    console.log(resp.data[i]);
}
	}
	});

// Show Pens Function & Animation

pCTA.click(function(){
	
	if( $(".userPens").css('display') == 'flex') {
		
	$('.pensCTA').html('

Show Pens

'); anime({ targets: '.pensTitle', opacity: 0, duration: 680, easing: 'easeOutExpo' }); anime({ targets: '.singlePen', translateY: "20px", opacity: 0, duration: 680, elasticity: '100', delay: function(el, i, l) { return i * 100; } }); $('.userPens') .delay(800) .queue(function (next) { $(this).css('display', 'none'); next(); }); } else { $('.pensCTA').html('

Hide Pens

'); $('.userPens').css('display' ,"flex"); anime({ targets: '.pensTitle', opacity: 1, duration: 680, easing: 'easeOutExpo' }); var o = 680; anime({ targets: '.singlePen', translateY: ["20px", "0"], opacity: 1, duration: 680, elasticity: '100', delay: function(el, o, l) { return o * 100; } }); } });

Description

A Profile card displaying you CodePen stats & popular pens using JSON
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv