simple card display
A Pen by Tyrell Rummage on CodePen.
simple card display
A Pen by Tyrell Rummage on CodePen.
<link href="https://fonts.googleapis.com/css?family=Roboto:300:400:700" rel="stylesheet"> | |
<div class="cards clearfix"> | |
<div class="card-col-1"></div> | |
<div class="card-col-2"></div> | |
<div class="card-col-3"></div> | |
</div> |
function random(min, max){ | |
return Math.floor(Math.random()*(max-min+1)+min); | |
} | |
function getTitle(){ | |
var a = ['Lorem', 'Ipsum', 'Dolor', 'Sit', 'Amet', 'Dolorium']; | |
var b = random(2, 6); | |
var c = ''; | |
for(var i = 0; i < b; i++){ | |
c += a[i] + ' '; | |
} | |
return c; | |
} | |
function getBody(){ | |
var a = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis, ligula eget molestie suscipit, ipsum libero convallis elit, a cursus enim metus nec enim.'; | |
var b = random(80, 160); | |
var c = a.substr(0, b); | |
var d = c.substr(0, Math.min(c.length, c.lastIndexOf(" "))); | |
return d; | |
} | |
for(var i = 0; i < 10; i++){ | |
for(var j = 1; j < 4; j++){ | |
var randomImageHeight = random(240, 340); | |
var relation = 280/randomImageHeight; | |
var padding = 100/relation; | |
$('.card-col-'+j).append(` | |
<div class="card"> | |
<div class="top" style="padding-bottom: ${padding}%"> | |
<img src="https://www.unsplash.it/280/${randomImageHeight}/?random&sig=${Math.random()}"> | |
</div> | |
<div class="bottom"> | |
<h2>${getTitle()}</h2> | |
<p>${getBody()}</p> | |
</div> | |
</div>`); | |
} | |
} |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
*{ | |
padding: 0; | |
margin: 0; | |
font-family: 'Roboto'; | |
box-sizing: border-box; | |
} | |
body{ | |
background: #f1f1f1; | |
} | |
.cards{ | |
width: 90%; | |
max-width: 960px; | |
margin: 60px auto; | |
padding: 1rem; | |
} | |
.card{ | |
width: 100%; | |
box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); | |
border-radius: 0 0 4px 4px; | |
float: left; | |
margin-bottom: 12px; | |
} | |
.clearfix:after, | |
.clearfix:before{ | |
content: ''; | |
display: table; | |
clear: both; | |
} | |
.top{ | |
position: relative; | |
background: url(http://bdb.bertsozale.eus/images/grid-loading.gif) #d2d2d2; | |
background-position: center center; | |
background-repeat: no-repeat; | |
height: 0; | |
border-radius: 4px 4px 0 0; | |
} | |
.top img{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
border-radius: 4px 4px 0 0; | |
display: block; | |
} | |
.bottom{ | |
padding: 1rem; | |
background: #fff; | |
border-radius: 0 0 4px 4px | |
} | |
.card-col-1, | |
.card-col-2, | |
.card-col-3{ | |
width: calc(33.3333333% - 12px); | |
margin: 0 6px; | |
float: left; | |
} | |
.card h2{ | |
font-weight: 300; | |
margin-bottom: 1rem; | |
} | |
.card p{ | |
color: #888; | |
font-weight: 300; | |
line-height: 1.4; | |
} |