<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!-- Following BEM style code guidelines -->
<!-- SOMEONE ELSE'S LJ CARD -->
<div class="card card--with-pic">
<div class="card__header">
<span class="card__header__title">This is someone else's LJ</span>
</div>
<div class="card__body">
<button class="button button--type-cta">Follow</button>
</div>
<div class="card__info">
<div class="card__info__box">
<span class="card__key">Items</span>
<span class="card__value">398</span>
</div>
<div class="card__info__box">
<span class="card__key">Followers</span>
<span class="card__value">12</span>
</div>
</div>
<div class="card__footer">
<span class="card__key">Curated By</span>
<span class="card__value">Ramona Pierson</span>
</div>
</div>
<!-- MY LJ CARD -->
<div class="card card--with-pic">
<div class="card__header">
<span class="card__header__title">This is my LJ</span>
</div>
<div class="card__body">
<div></div>
</div>
<div class="card__info">
<div class="card__info__box">
<span class="card__key">Items</span>
<span class="card__value">398</span>
</div>
<div class="card__info__box">
<span class="card__key">Followers</span>
<span class="card__value">12</span>
</div>
</div>
<div class="card__footer card__footer--state-hidden">
<span class="card__key">Curated By</span>
<span class="card__value">Ramona Pierson</span>
</div>
</div>
<!-- BUIDL YOUR OWN -->
<div class="card card--with-lightPic card--state-empty">
<div class="card__header">
<div class="card__header__title">Why not build your own?</div>
</div>
<img src="https://www.dropbox.com/s/4cq1ev5pub36auf/Empty%20State.png?dl=1" alt="" />
<div class="card__desc">Use our recommendations to build your own journey for the topic "Blah".</div>
<button class="button button--type-cta">Let's Go</button>
</div>
<!-- Paper Type -->
<div class="paperCard">
<i class="fa fa-3x fa-map-marker map"></i>
<div class="paperCard__header">
</div>
<div class="paperCard__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex neque necessitatibus ipsam, quos, nesciunt culpa molestiae quaerat harum libero pariatur sunt illo tenetur cumque! Pariatur quasi iusto odio veritatis dolor?</div>
<div class="paperCard__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus ratione, repellendus voluptate nam ipsam necessitatibus. Fugit a nemo hic! Dicta nihil ad porro voluptatem, ea rem a enim dolores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus ratione, repellendus voluptate nam ipsam necessitatibus. Fugit a nemo hic! Dicta nihil ad porro voluptatem, ea rem a enim dolores!</div>
<div class="card__footer">
<div class="button button--type-link"><i class="fa fa-plus"></i> Add to journey</div>
</div>
</div>
<!-- Paper Type Read -->
<div class="paperCard paperCard--state-read">
<div class="paperCard__header">
</div>
<div class="paperCard__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex neque necessitatibus ipsam, quos, nesciunt culpa molestiae quaerat harum libero pariatur sunt illo tenetur cumque! Pariatur quasi iusto odio veritatis dolor?</div>
<div class="paperCard__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus ratione, repellendus voluptate nam ipsam necessitatibus. Fugit a nemo hic! Dicta nihil ad porro voluptatem, ea rem a enim dolores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus ratione, repellendus voluptate nam ipsam necessitatibus. Fugit a nemo hic! Dicta nihil ad porro voluptatem, ea rem a enim dolores!</div>
<div class="card__footer">
<div class="button button--type-link"><i class="fa fa-check"></i> Read</div>
</div>
</div>
<div class="paperCard paperCard--state-added">
<div class="paperCard__header">
</div>
<div class="paperCard__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex neque necessitatibus ipsam, quos, nesciunt culpa molestiae quaerat harum libero pariatur sunt illo tenetur cumque! Pariatur quasi iusto odio veritatis dolor?</div>
<div class="paperCard__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus ratione, repellendus voluptate nam ipsam necessitatibus. Fugit a nemo hic! Dicta nihil ad porro voluptatem, ea rem a enim dolores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus ratione, repellendus voluptate nam ipsam necessitatibus. Fugit a nemo hic! Dicta nihil ad porro voluptatem, ea rem a enim dolores!</div>
<div class="card__footer">
<div class="button button--type-link"><i class="fa fa-check"></i> Added</div>
</div>
</div>
<article>
<div class="hcard">
<div class="hcard__pic">
</div>
<div class="hcard__title title--line-single">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti neque amet quasi odit itaque necessitatibus ea perferendis culpa omnis perspiciatis vero, tenetur, laboriosam cupiditate ab quos alias at est fuga?
</div>
<div class="hcard__desc desc--line-double">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum inventore consectetur non facere pariatur, ex error nemo fugit corporis modi dignissimos, facilis omnis accusamus laudantium et dolor quae eveniet? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci iure iste perspiciatis a laudantium in enim sunt ad dignissimos magni. Adipisci modi quos unde repudiandae architecto reiciendis incidunt aspernatur veritatis.
</div>
<div class="hcard__meta">
<div class="hcard__tag">article</div>
<div class="button button--type-link"><i class="fa fa-plus"></i> Add to journey</div>
</div>
</div>
<div class="hcard hcard--drag">
<div class="hcard__pic">
</div>
<div class="hcard__title">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti neque amet quasi odit itaque necessitatibus ea perferendis culpa omnis perspiciatis vero, tenetur, laboriosam cupiditate ab quos alias at est fuga?
</div>
<div class="hcard__desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum inventore consectetur non facere pariatur, ex error nemo fugit corporis modi dignissimos, facilis omnis accusamus laudantium et dolor quae eveniet? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci iure iste perspiciatis a laudantium in enim sunt ad dignissimos magni. Adipisci modi quos unde repudiandae architecto reiciendis incidunt aspernatur veritatis.
</div>
<div class="hcard__meta">
<div class="hcard__tag">article</div>
<div class="button button--type-link"><i class="fa fa-plus"></i> Add to journey</div>
</div>
</div>
<div class="hcard hcard--drag">
<div class="hcard__pic">
</div>
<div class="hcard__title">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti neque amet quasi odit itaque necessitatibus ea perferendis culpa omnis perspiciatis vero, tenetur, laboriosam cupiditate ab quos alias at est fuga?
</div>
<div class="hcard__desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum inventore consectetur non facere pariatur, ex error nemo fugit corporis modi dignissimos, facilis omnis accusamus laudantium et dolor quae eveniet? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci iure iste perspiciatis a laudantium in enim sunt ad dignissimos magni. Adipisci modi quos unde repudiandae architecto reiciendis incidunt aspernatur veritatis.
</div>
<div class="hcard__meta">
<div class="hcard__tag">article</div>
<div class="button button--type-link"><i class="fa fa-plus"></i> Add to journey</div>
</div>
</div>
<div class="hcard hcard--drag">
<div class="hcard__pic">
</div>
<div class="hcard__title">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti neque amet quasi odit itaque necessitatibus ea perferendis culpa omnis perspiciatis vero, tenetur, laboriosam cupiditate ab quos alias at est fuga?
</div>
<div class="hcard__desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum inventore consectetur non facere pariatur, ex error nemo fugit corporis modi dignissimos, facilis omnis accusamus laudantium et dolor quae eveniet? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci iure iste perspiciatis a laudantium in enim sunt ad dignissimos magni. Adipisci modi quos unde repudiandae architecto reiciendis incidunt aspernatur veritatis.
</div>
<div class="hcard__meta">
<div class="hcard__tag">article</div>
<div class="button button--type-link"><i class="fa fa-plus"></i> Add to journey</div>
</div>
</div>
<div class="hcard hcard--drag">
<div class="hcard__pic">
</div>
<div class="hcard__title">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti neque amet quasi odit itaque necessitatibus ea perferendis culpa omnis perspiciatis vero, tenetur, laboriosam cupiditate ab quos alias at est fuga?
</div>
<div class="hcard__desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum inventore consectetur non facere pariatur, ex error nemo fugit corporis modi dignissimos, facilis omnis accusamus laudantium et dolor quae eveniet? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci iure iste perspiciatis a laudantium in enim sunt ad dignissimos magni. Adipisci modi quos unde repudiandae architecto reiciendis incidunt aspernatur veritatis.
</div>
<div class="hcard__meta">
<div class="hcard__tag">article</div>
<div class="button button--type-link"><i class="fa fa-plus"></i> Add to journey</div>
</div>
</div>
</article>
.mini-text, .card .card__key, .paperCard .card__key {
letter-spacing: 2px;
color: #ddd;
font-weight: 300px;
font-size: 0.5rem;
text-transform: uppercase;
margin-top: 5px;
display: block;
}
.big-text, .card .card__header, .paperCard .card__header, .paperCard .paperCard__header, .card .card__value, .paperCard .card__value {
letter-spacing: 2px;
color: white;
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
}
.value-text, .card .card__info .card__info__box .card__value, .paperCard .card__info .card__info__box .card__value {
font-size: 1.0rem;
font-weight: normal;
}
.author-text, .card .card__footer .card__value, .paperCard .card__footer .card__value {
font-weight: normal;
}
.center-me, .card .card__header, .paperCard .card__header, .paperCard .paperCard__header, .card .card__body, .paperCard .card__body, .card .card__info .card__info__box--width-full, .paperCard .card__info .card__info__box--width-full {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.card, .paperCard {
width: 200px;
height: 300px;
position: relative;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 5px;
}
.card *, .paperCard * {
box-sizing: border-box;
}
.card:hover, .paperCard:hover {
cursor: pointer;
}
.card:hover, .paperCard:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card .card__header, .paperCard .card__header, .paperCard .paperCard__header {
height: 25%;
border-radius: 5px 5px 0 0;
position: relative;
}
.card .card__header .card__header__title, .paperCard .card__header .card__header__title, .paperCard .paperCard__header .card__header__title {
padding: 20px;
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
overflow-y: hidden;
}
.card .card__body, .paperCard .card__body {
height: 45%;
}
.card .card__body div, .paperCard .card__body div {
border-radius: 50%;
height: 70px;
width: 70px;
border: 3px solid white;
}
.card .card__info, .paperCard .card__info {
height: 15%;
background: rgba(255, 255, 255, 0.5);
}
.card .card__info .card__info__box, .paperCard .card__info .card__info__box {
width: 50%;
height: 100%;
float: left;
text-align: center;
}
.card .card__info .card__info__box--width-full, .paperCard .card__info .card__info__box--width-full {
width: 100%;
}
.card .card__info .card__info__box--width-full .card__key, .paperCard .card__info .card__info__box--width-full .card__key {
margin-top: 0;
}
.card .card__footer, .paperCard .card__footer {
height: 15%;
width: 100%;
border-radius: 0 0 5px 5px;
position: absolute;
bottom: 0;
padding: 5px;
text-align: right;
opacity: 0.4;
}
.card .card__footer span, .paperCard .card__footer span {
text-align: right !important;
}
.card .card__footer--state-hidden, .paperCard .card__footer--state-hidden {
display: none;
}
.card--with-pic {
background-image: url("https://www.dropbox.com/s/hlyin8dljef95t4/Lighter.png?dl=1"), linear-gradient(0deg, black 0%, transparent 40%, rgba(0, 0, 0, 0.9)), url("http://lorempixel.com/300/200/");
background-position: 95% 25%, center, center;
background-size: auto, cover, cover;
background-repeat: no-repeat, no-repeat, no-repeat;
}
.card--state-empty {
border: 2px dashed #ddd;
box-shadow: none;
color: #888;
}
.card--state-empty .card__header__title {
color: #222;
}
.card--state-empty img {
width: 50%;
}
.card--state-empty .card__desc {
padding: 0 10px;
margin-bottom: 10px;
}
.card--bg-dark, .card--with-pic {
background-color: #333;
}
body {
font-size: 12px;
background: white;
font-family: 'Lato';
margin: 10px;
padding: 10px;
color: #444;
}
body .card, body .paperCard {
float: left;
margin-left: 15px;
margin-bottom: 15px;
}
.button {
padding: 10px 15px;
border-radius: 2px;
text-transform: uppercase;
font-weight: bold;
color: #333;
border: none;
font-size: 0.8rem;
}
.button::active {
outline: none;
}
.button--type-cta {
background-color: #29c896;
color: white;
display: inline-block;
}
.button--type-link {
background-color: transparent;
color: #29c896;
font-size: 0.7rem;
padding: 0;
}
.paperCard {
position: relative;
background-image: linear-gradient(rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 0.5));
background-position: center, center;
background-size: cover, cover;
background-repeat: no-repeat, repeat-x;
background-color: white;
}
.paperCard .paperCard__header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("http://lorempixel.com/400/400");
background-color: #666;
background-position: center;
background-size: cover;
}
.paperCard .paperCard__title {
max-height: 15%;
overflow: hidden;
padding: 0.6rem !important;
position: relative;
}
.paperCard .paperCard__desc {
padding: 0.3rem 0.6rem 0 0.6rem;
line-height: 1rem;
text-align: left;
font-size: 0.8rem;
color: #777;
height: 45%;
overflow: hidden;
}
.paperCard .card__footer {
text-align: center;
opacity: 1;
}
.paperCard--state-read {
opacity: 0.3;
-webkit-filter: grayscale(100%);
}
.paperCard--state-read:hover {
opacity: 1;
-webkit-filter: none;
}
.paperCard--state-added {
opacity: 0.6;
}
.paperCard--state-added:hover {
opacity: 1;
}
.map {
text-shadow: 0px 1px 1px #4d4d4d;
position: absolute;
height: 20px;
left: 42%;
color: #f65950;
top: -25px;
z-index: 1;
}
.hcard {
width: 100%;
position: relative;
border-bottom: 1px solid #e8e8e8;
padding: 10px;
clear: both;
}
.hcard:hover {
background: #f7f7f7;
}
.hcard .hcard__pic {
height: 60px;
width: 60px;
background-image: url(http://lorempixel.com/200/100);
background-position: center center;
background-size: cover;
border-radius: 4px;
left: 10px;
top: 0;
position: absolute;
display: inline-block;
margin-top: 10px;
}
.hcard .hcard__meta {
clear: both;
display: block;
margin: 0 10px 5px 70px;
}
.hcard .hcard__tag {
float: right;
}
.hcard .hcard__title {
display: inline-block;
width: calc(100% - 70px);
float: left;
margin: 0 10px 5px 70px;
}
.hcard .hcard__desc {
display: inline-block;
float: left;
margin: 0 10px 5px 70px;
}
.grab, .hcard--drag:hover {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.simple-title, .paperCard .paperCard__title, .hcard .hcard__title {
color: #555;
font-size: 1rem;
line-height: 1.1rem;
letter-spacing: 0px;
text-transform: none;
font-weight: bold;
text-align: left;
text-overflow: ellipsis;
}
.single-line, .hcard .hcard__title {
clear: both;
overflow: hidden;
white-space: nowrap;
}
.simple-desc, .card--state-empty .card__desc, .hcard .hcard__desc {
color: #bbb;
font-size: 0.8rem;
text-transform: none;
}
.double-line, .hcard .hcard__desc {
line-height: 1.5em;
height: 3em;
overflow: hidden;
}
.simple-tag, .hcard .hcard__tag {
background: #ddd;
text-transform: uppercase;
color: #888;
display: inline;
padding: 3px 5px;
border-radius: 2px;
font-size: 0.5rem;
font-weight: bold;
letter-spacing: 1px;
}
