<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/-RARA-/pen/VMWXxZ?depth=everything&order=popularity&page=6&q=card+list&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">
html {
background-color: #fefefe;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.u-float-right {
float: right;
}
.u-flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.u-clearfix:before,
.u-clearfix:after {
content: " ";
display: table;
}
.u-clearfix:after {
clear: both;
}
.u-clearfix {
*zoom: 1;
}
.container {
-webkit-box-shadow: 0 0 50px rgba(0,0,0,.3);
box-shadow: 0 0 50px rgba(0,0,0,.3);
margin: 10px auto;
overflow: hidden;
width: 360px;
}
.header-container {
position: relative;
}
.header-image {
left: 0;
position: absolute;
top: 0;
z-index: -1;
height: auto;
-webkit-animation: zoomEffect 35s infinite;
animation: zoomEffect 35s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@-webkit-keyframes zoomEffect {
0% {
-webkit-transform: scale(1) translateX(0);
transform: scale(1) translateX(0);
}
100% {
-webkit-transform: scale(1.2) translateX(-360px) translateY(-80px);
transform: scale(1.2) translateX(-360px) translateY(-80px);
}
}
@keyframes zoomEffect {
0% {
-webkit-transform: scale(1) translateX(0) translateY(0);
transform: scale(1) translateX(0) translateY(0);
}
100% {
-webkit-transform: scale(1.2) translateX(-360px) translateY(-80px);
transform: scale(1.2) translateX(-360px) translateY(-80px);
}
}
.header {
color: #fff;
padding: 15px;
height: 300px;
}
.header > svg {
cursor: pointer;
}
.main-heading {
color: #fff;
font-size: 26px;
font-weight: 300;
margin-bottom: 12px;
}
.tag {
background-color: rgba(255, 255, 255, .35);
border-radius: 20px;
font-size: 11px;
margin-right: 8px;
padding: 4px 10px;
text-transform: uppercase;
}
.stats {
margin-top: 35px;
}
.stat-module {
display: inline-block;
font-size: 12px;
margin-right: 20px;
text-transform: uppercase;
}
.stat-number {
display: inline-block;
font-weight: 600;
margin-left: 4px;
}
.overlay-header {
background-color: #eee;
height: 100px;
margin: -50px 0 0 -25%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 150%;
z-index: 0;
}
.body {
background-color: #eee;
color: #555;
margin-top: -50px;
padding: 0 15px 15px;
position: relative;
}
.body-image {
border-radius: 100%;
-webkit-box-shadow: 5px 10px 75px rgba(0, 0, 0, .4);
box-shadow: 5px 10px 75px rgba(0, 0, 0, .4);
float: left;
margin: -90px 0 20px;
position: relative;
z-index: 2;
}
.body-action-button {
background-color: #383838;
border-radius: 50%;
-webkit-box-shadow: 1px 2px 12px rgba(0,0,0,.4);
box-shadow: 1px 2px 12px rgba(0,0,0,.4);
cursor: pointer;
height: 40px;
position: absolute;
right: 15px;
top: -97px;
width: 40px;
}
.body-stats {
display: inline-block;
font-size: 12px;
font-weight: 700;
float: left;
margin: -14px 0 0 30px;
position: relative;
text-transform: uppercase;
width: 20%;
}
.body-stats > span {
display: inline-block;
font-weight: 900;
margin-top: 8px;
}
.body-info {
clear: left;
position: relative;
max-height: 100px;
overflow: hidden;
-webkit-transition: all 600ms ease-out;
transition: all 600ms ease-out;
}
.body-more {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),to(rgba(238,238,238,1)));
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#eeeeee',GradientType=0 );
cursor: pointer;
margin: -57px auto 0px;
padding: 20px 0 20px;
position: relative;
text-align: center;
}
.body-more span {
background-color: #fff;
border-radius: 50%;
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.3);
box-shadow: 1px 1px 5px rgba(0,0,0,.3);
display: inline-block;
height: 6px;
margin-right: 2px;
width: 6px;
}
.card {
background: #fff;
border-radius: 2px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
box-shadow: 0 0 5px rgba(0, 0, 0, .15);
margin-top: 15px;
padding: 10px;
}
.card-heading {
font-size: 12px;
text-transform: uppercase;
}
.card-more {
cursor: pointer;
float: right;
}
.card-list {
list-style-type: none;
margin: 10px 0 0;
overflow-x: scroll;
padding: 0;
white-space: nowrap;
}
.card-list::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
border-radius: 2px;
background-color: #F5F5F5;
}
.card-list::-webkit-scrollbar
{
height: 3px;
background-color: #F5F5F5;
}
.card-list::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
background-color: #ddd;
}
.card-list li {
display: inline;
margin-left: 10px;
}
.card-list li:first-child {
margin-left: 0;
}</style></head><body>
<div class="container">
<div class="header-container">
<img src="https://i.pinimg.com/originals/ac/12/ef/ac12efd8cd69eea1869fe705d6fca470.png" alt="" class="header-image" />
<div class="header">
<svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="header-icon">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
<svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg" class="u-float-right header-icon">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<h1 class="main-heading">Saika</h1>
<span class="tag">Designer</span>
<span class="tag">Artist</span>
<div class="stats">
<span class="stat-module">
Projects <span class="stat-number">∞</span>
</span>
<span class="stat-module">
Artworks <span class="stat-number">∞</span>
</span>
<span class="stat-module">
Designs <span class="stat-number">∞</span>
</span>
</div>
</div> <!-- END header -->
</div>
<div class="overlay-header"></div>
<div class="body">
<img src="https://s20.postimg.org/t9cbzptgt/saika.png" alt="Hugh Jackman" class="body-image" />
<div class="body-action-button u-flex-center">
<svg fill="#ffffff" height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
<span class="body-stats">Followers <span>6.5M</span></span>
<span class="body-stats">Following <span>128</span></span>
<div class="u-clearfix"></div>
<div class="body-info">
<p>
Saika is the owner of the Tulip Labyrinth server. She also is a designer, artist, and model. Hope you enjoy the server as it continues to develop.
</p>
<p>
</p>
</div>
<div class="body-more">
<span></span>
<span></span>
<span></span>
</div>
<div class="card u-clearfix">
<span class="card-heading">
