cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="bossWrapp">

 <!-- User Profile Row -->
 <div class="userProf">
<div class="leftSide">
  <div class="avatar">
   <span></span>
   <badge alt="Pro User"></badge>
   <div class="wrapp">
    <img src="" alt="">
   </div>
  </div>
  <div class="userTitle">
   <h1><a target="_blank"></a>
</h1>
   <div class="userDesc">
    <div class="followers"></div>
    <h5></h5>
   </div>

  </div>
	</div>
<button class="pensCTA"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <g fill="none" fill-rule="evenodd"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" transform="translate(1 1)">
    <rect width="14" height="14" rx="2"/>
    <path d="M7 3.88888889L7 10.1111111M3.88888889 7L10.1111111 7"/>
  </g>
</svg>
	<p>Show Pens</p></button>
 </div> <!-- User Profile Row - End -->

	<!-- User Popular Pens -->
	<div class="userPens">
		<div class="pensTitle">
				<h3>popular pens ¬</h3>
		</div>
		<div class="pensWrapp">
		</div>
		
	
	</div><!-- User Popular Pens - End -->

</div>
            
          
!
            
              
// Vars ----------------
$bg: #f9f9f9
$white: white
$black: black
$bd: #DFE5EB
$text: #20455E
$textL: #577083
$textLL: #7A92A5
$gold: #FCD000
$link: #3197EF
// ---------------------

html 	
	margin: 0
	background: $bg

body 
	display: flex
	height: 100vh
	width: 100vw
	justify-content: center
	align-items: center
	font-family: 'Fira Sans', sans-serif
	color: $text

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 
	-webkit-transition: all 680ms cubic-bezier(0.19, 1, 0.22, 1)
	transition: all 680ms cubic-bezier(0.19, 1, 0.22, 1)
.easeFast
	-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: $textLL
	@extend .easeFast
	outline: 0
	svg
		margin: 0 6px 0 0
		stroke: currentColor
	&:hover 
		color: $link
		cursor: pointer
		@extend .easeFast
	&:active
		color: darken($link,10%)

.userProf:hover > .pensCTA
	opacity: 1
	@extend .easeFast

.avatar
	height: 72px
	width: 72px
	opacity: 0
	margin: 0 18px 0 0
	position: relative
	border-radius: 30em
	.wrapp
		overflow: hidden
		border-radius: 30em
		z-index: 9991
		position: relative
	img
		display: block
		width: 100%
		@extend .ease
	
	
.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
	h1
		font-size: 24px
		margin: 0 0 15px 0
		font-weight: 500
		z-index: 999991
		opacity: 0
		&:hover
			cursor: pointer
		
		a
			color: $text  
			text-decoration: none
		&:active
			color: $textLL
		img
			margin: 0 0 0 6px
			opacity: 0 
			height: 14px
			transform: translateX(2px)
			@extend .easeFast
	
	h5 
		font-size: 14px
		font-weight: 300
		color: $textL
		opacity: 0 
	
.userTitle h1:hover > a img
	opacity: 1
	@extend .easeFast 
	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 $bd
	border-radius: 2px
	font-size: 12px
	color: $textL 
	opacity: 0
	font-weight: 400
	
.avatar badge
	position: absolute
	height: 18px
	width: 18px
	background: $gold
	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

	&:after
		content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/Star.svg)
		position: absolute


.userPens
	display: none
	flex-direction: column
	@extend .ease

	
.pensTitle
	margin: 0 0 24px 0
	opacity: 0
	h3
		text-transform: uppercase
		font-size: 12px
		color: $textLL 
		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.20)
	@extend .easeFast
	

	&:nth-child(2n+0)
		margin: 0 0px 0 0
		
	
.penImg
	width: 100%
	height: 150px
	z-index: 9991
	position: relative
	overflow: hidden
	h5 
		position: absolute
		bottom: 21px
		left: 18px
		color: $white
		z-index: 999991
		font-size: 14px
	img
		width: 110%
		display: block
		@extend .ease
	&:after 
		content: ''
		top: 0
		width: 100%
		height: 100%
		position: absolute
		background-image: linear-gradient(-180deg, rgba(34,69,93,0.00) 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: $textLL
	text-decoration: none

	img
		margin: 0 6px 0 0
	
.penLink a
	display: flex
	align-items: center 
	color: $link
	text-decoration: none
	align-content: center
	img
		margin: 0 6px 0 0
		width: 16px
	
.singlePen a:hover > .penImg  img
	transform: scale(1.1)
	@extend .ease
            
          
!
            
              // 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 + "<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/external-link.svg'>");
		
		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("<div class='singlePen'><a target='_blank' href='"+ penLink +"'> <div class='penImg'><h5>" + penTitle +"</h5><img src=' " + penImg + "'></div><div class='penBar'><div class='penViews'><img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/270939/eye.svg'>" + penViews + " </div>  </div></a> </div>");
			
			 
			
			
			
    console.log(resp.data[i]);
}
	}
	});

// Show Pens Function & Animation

pCTA.click(function(){
	
	if( $(".userPens").css('display') == 'flex') {
		
	$('.pensCTA').html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" transform="translate(1 1)"><rect width="14" height="14" rx="2"/><path d="M7 3.88888889L7 10.1111111M3.88888889 7L10.1111111 7"/></g></svg><p>Show Pens</p>');
		
		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('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" transform="translate(1 1)"><rect width="14" height="14" rx="2"/><path d="M3.88888889,7 L10.1111111,7"/></g></svg><p>Hide Pens</p>');
	
	$('.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;
  }
});
	
	}

	
	
});
					
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console