<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/linghzang3/pen/CfLke?limit=all&page=29&q=panel" />
<style class="cp-pen-styles">/* Demo only styles*/
body {
width: 600px;
margin: 50px auto;
padding: 0 0 400px 0;
font-size: 14px;
font-family: Arial, Helvetica;
background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/linedpaper.png);
}
a {
color: #444;
}
.custom-headline {
text-align: center;
padding-bottom: 1000px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAD6CAMAAAA1MfELAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVFNTQxNEZENjY1QjExRTJCNzU4ODZFMTZBMEQ4Q0M2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVFNTQxNEZFNjY1QjExRTJCNzU4ODZFMTZBMEQ4Q0M2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUU1NDE0RkI2NjVCMTFFMkI3NTg4NkUxNkEwRDhDQzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUU1NDE0RkM2NjVCMTFFMkI3NTg4NkUxNkEwRDhDQzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5S9PU9AAAAP1BMVEXs7Oz////+/v7t7e329vbv7+/7+/vw8PD09PTu7u75+fn8/Pzz8/P19fXy8vL4+Pj9/f339/fx8fH6+vr////n0wjDAAAAFXRSTlP//////////////////////////wAr2X3qAAAD1klEQVR42uza2YLbIAwFUMBbvC/J/39rvcRYsgEpA2+Vn2aa9tSAgAsz6pPoUQIJJJBAAgkkkEACCSSQQAIJJJBAAv2XUFtOCaC2UuuTjbGQqdXxTJFQ83VUHgn1J7REQt0J1ZHQcELKxEGLhcpUb9SkgsZEnc0Y/yD0stArDsot1MVBs4WGOGhU/NIOQm8LVXFQa6EiDpoUf7IFIW2hLBKqU0GVfaVI6Id1JAx1qSC71tLLf7jxeSrIbiOqjYPe/LWW2GlTQcZC7zhIZ+zVn4CKVG9UsbcRAhpSQXYfmSMTW58KGtk7JAE1qaDyhPpIaEoFGfbmT0B2jkRDBTdFUFDFTREUNKSCukSQDW1LLJRzcw0FzdxcQ0FNKuidCmq5SYuCJm5AoiCTCtLcpEVCWSqoZiYtEipSQRUzaZFtX1JDbSzUMZNWSmgcRkOvbG8S2lacypBvREU2dUxvv9RzoY7Yt3oyaelmXvtG1cT/SEG632Zj1lioNuHV35O0yu8UqlVFHO3DkM1PtXoR4T4PJa3rYmBRJXEkD0HX4UnNChw3xxDUh+4XVGaUvr4t9E9QmV1QrpW+jgnB13+MxVRfTm02qAEvyIdAl6xFqDcInKVffOgFnG5F1Efr63jnWL5yd0BqFGrYAV0nDkee6p2ftKCj1XslPjtkMn9V9q6kZWAH9fqANmn0V2Xv+qADTrU7+1K7frF4q7J35BpQiSprd+eEWtBz7tEp3JW4jbyFNin3lcATgpW4lvThWAjUd+mEamclDqfz3Y7W78AqoF1Q5qrEwtwgXEx5CJrvHa0/N8hc92Cta6TvtyWgo+FOu/7J29m4Dl1FoY7ugQMhd+MGCJkCOAt0rr0fNQ6M3ACuosA6gToahwjUuMI8rutbPGCwox8QaJxdfqrrJWdfR99izda457J7QXAJUq+bg/IRKstzD7d0nt2nfAgCjftWE/zn12fT3cGJDTeuLtG9r7qtiToU/XDjshJe1/kq0QeBxq1hBY8UXhODYRQvKGs9ZawOcqRa3Djn07gcFwSuel1P53SeOfveuPuz74aswI62gudT6h8gPXud3uO4jhAa7XOMkfeeRda/Ozlnht0N+ZBunFCuf4J2qXM4hd/xHLPw7EUj9uN5zVngL/0n6FEDvlIMnyA1ypZH4Ak5/qMo3p6CJURCuJvaoBM4HGuUmva58cdTNuqmwvwdQtVUEg4F6W+gzimH+LHYOekWHQeddUl2EAvSYzXpWOiQNMOhL6KYDn1bkwz68BzOb/uwHPmNKIEEEkgggQQSSCCBBBJIIIEEEui/hv4JMAAD0sT0LCUdAgAAAABJRU5ErkJggg==) repeat-y center bottom;
}
/* CSS 3D list styles */
.folding {
list-style-type: none;
margin: 0;
padding: 0;
}
.csstransforms3d .folding {
-webkit-perspective: 700px;
-moz-perspective: 700px;
-ms-perspective: 700px;
perspective: 700px;
}
.folding li {
height: 50px;
color: #fff;
padding-left: 30px;
border-left: 30px solid rgba(0,0,0,.1);
}
.csstransforms3d .folding li {
-webkit-transition: ease .15s all;
-moz-transition: ease .15s all;
-o-transition: ease .15s all;
-ms-transition: ease .15s all;
transition: ease .15s all;
}
.csstransforms3d .folding li:nth-child(even) {
margin-top: -1px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
-ms-transform: rotateX(10deg);
transform: rotateX(10deg);
}
.csstransforms3d .folding li:nth-child(odd) {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotateX(-10deg);
-moz-transform: rotateX(-10deg);
-o-transform: rotateX(-10deg);
-ms-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
.folding .fb {
background-color: #3959a6;
}
.folding .tw {
background-color: #2fc6ff;
}
.folding .gp {
background-color:#d84d30;
}
.folding .rss {
background-color: #ff7e09;
}
.rss-link {
color: #fff;
font: .9em Arial, Helvetica;
}
.folding .content {
position: relative;
overflow: hidden;
display: block;
height: 20px;
padding: 15px 0;
}
.csstransforms3d .folded li:nth-child(even) {
margin-top: -75px;
-webkit-transform: rotateX(75deg);
-moz-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
-ms-transform: rotateX(75deg);
transform: rotateX(75deg);
background-image: -webkit-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5));
background-image: -moz-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5));
background-image: -o-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5));
background-image: -ms-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5));
background-image: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5));
}
.csstransforms3d .folded li:nth-child(odd) {
-webkit-transform: rotateX(-75deg);
-moz-transform: rotateX(-75deg);
-o-transform: rotateX(-75deg);
-ms-transform: rotateX(-75deg);
transform: rotateX(-75deg);
}
.csstransforms3d .folded .content {
display: none;
}
/* Folding list heading */
.connect {
padding: 12px 0 12px 30px;
margin: 0 0 1px 0;
color: #fff;
border-left: 30px solid rgba(0,0,0,.2);
cursor: pointer;
font: bold .9em 'Lucida sans unicode',Arial, Helvetica;
background-color: #555;
}
.csstransforms3d .connect {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: -24px center;
}
/* Font awesome styles */
[class*="fontawesome-"]::before {
font-family: 'FontAwesome', sans-serif;
position: absolute;
font-size: 55px;
right: 30px;
bottom: -15px;
color: #fff;
}
[class*="fontawesome-"]:hover::before {
bottom: -10px;
} </style></head><body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://weloveiconfonts.com/api/?family=fontawesome">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=292896510767559" id="facebook-jssdk"></script>
<script src="//platform.twitter.com/widgets.js" id="twitter-wjs"></script>
</head>
<body>
<h2 class="connect">Connect with me</h2>
<ul class="folding folded">
<li class="fb">
<div class="content">
[Facebook snippet]
<a href="" class="fontawesome-facebook"></a>
</div>
</li>
<li class="tw">
<div class="content">
[Twitter snippet]
<a href="" class="fontawesome-twitter"></a>
</div>
</li>
<li class="gp">
<div class="content">
[Google+ snippet]
<a href="" class="fontawesome-google-plus"></a>
</div>
</li>
<li class="rss">
<div class="content">
[Simple RSS link]
<a href="" class="fontawesome-rss"></a>
</div>
</li>
</ul>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >(function(){
if ($('html').hasClass('csstransforms3d')) {
var foldingList = $('.folding'),
foldingListHeight = $('.folding').height();
topElemOffset = foldingList.offset().top,
// Function responsible for unfolding the list
unfold = function(){
setTimeout(function(){
if (foldingList.hasClass('folded')){
foldingList.removeClass('folded');
return;
}
}, 500);
}
// Fold/Unfold the list
$('.connect').on("click",function(){
foldingList.toggleClass('folded');
})
// If needed, unfold the list right away
if (topElemOffset <= $(window).height() - foldingListHeight)
unfold();
// Check whether to unfold the list when scrolling/resizing
$(window).on("scroll resize", function(){
var th = $(this);
if (th.scrollTop() + th.height() - foldingListHeight >= topElemOffset)
unfold();
})
}
})()
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
};
// Google+ button
add('https://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=292896510767559', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));
//# sourceURL=pen.js
</script>
</body></html>
