A very minimal responsive blog card design.
A Pen by Chyno Deluxe on CodePen.
A very minimal responsive blog card design.
A Pen by Chyno Deluxe on CodePen.
<!--PEN CODE--> | |
<div class="blog-card"> | |
<div class="photo photo1"></div> | |
<ul class="details"> | |
<li class="author"><a href="#">John Doe</a></li> | |
<li class="date">Aug. 24, 2015</li> | |
<li class="tags"> | |
<ul> | |
<li><a href="#">Learn</a></li> | |
<li><a href="#">Code</a></li> | |
<li><a href="#">HTML</a></li> | |
<li><a href="#">CSS</a></li> | |
</ul> | |
</li> | |
</ul> | |
<div class="description"> | |
<h1>Learning to Code</h1> | |
<h2>Opening a door to the future</h2> | |
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p> | |
<a href="#">Read More</a> | |
</div> | |
</div> | |
<div class="blog-card alt"> | |
<div class="photo photo2"></div> | |
<ul class="details"> | |
<li class="author"><a href="#">Jane Doe</a></li> | |
<li class="date">July. 15, 2015</li> | |
<li class="tags"> | |
<ul> | |
<li><a href="#">Learn</a></li> | |
<li><a href="#">Code</a></li> | |
<li><a href="#">JavaScript</a></li> | |
</ul> | |
</li> | |
</ul> | |
<div class="description"> | |
<h1>Mastering the Language</h1> | |
<h2>Java is not the same as JavaScript</h2> | |
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p> | |
<a href="#">Read More</a> | |
</div> | |
</div> | |
<!--END PEN CODE--> |
/*PEN STYLES*/ | |
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:400,700); | |
$green: #75D13B; | |
$grey: #e9e9e9; | |
@mixin transition($dur, $prop: all) { | |
transition: $prop $dur ease; | |
-webkit-transition: $prop $dur ease; | |
} | |
@mixin bgImg($url) { | |
background: url($url) center no-repeat; | |
background-size: cover; | |
} | |
body {background: #f1f1f1; margin: 2rem} | |
.blog-card { | |
@include transition(0.3s, height); | |
background: #fff; | |
border-radius: 3px; | |
box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3); | |
margin: 0 auto 1.6%; | |
overflow: hidden; | |
position: relative; | |
font-size: 14px; | |
line-height: 1.45em; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
&:hover { | |
.details { | |
left: 0; | |
} | |
&.alt { | |
.details { | |
right: 0; | |
} | |
} | |
} | |
&.alt { | |
.details { | |
right: -100%; | |
left: inherit; | |
} | |
} | |
.photo { | |
height: 200px; | |
position: relative; | |
&.photo1 { | |
@include bgImg("http://i62.tinypic.com/34oq4o0.jpg"); | |
} | |
&.photo2 { | |
@include bgImg("http://i60.tinypic.com/xeiv79.jpg"); | |
} | |
} | |
.details { | |
@include transition(0.3s); | |
background: rgba(0, 0, 0, 0.6); | |
box-sizing: border-box; | |
color: #fff; | |
font-family: "Open Sans"; | |
list-style: none; | |
margin: 0; | |
padding: 10px 15px; | |
height: 200px; | |
/*POSITION*/ | |
position: absolute; | |
top: 0; | |
left: -100%; | |
> li { | |
padding: 3px 0; | |
} | |
li:before, .tags ul:before { | |
font-family: FontAwesome; | |
margin-right: 10px; | |
vertical-align: middle; | |
} | |
.author:before { | |
content: "\f007"; | |
} | |
.date:before { | |
content: "\f133"; | |
} | |
.tags { | |
ul { | |
&:before { | |
content: "\f02b"; | |
} | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
li { | |
display: inline-block; | |
margin-right: 3px; | |
} | |
} | |
a { | |
color: inherit; | |
border-bottom: 1px dotted; | |
&:hover { | |
color: $green; | |
} | |
} | |
} | |
.description { | |
padding: 10px; | |
box-sizing: border-box; | |
position: relative; | |
h1 { | |
font-family: "Roboto"; | |
line-height: 1em; | |
margin: 0 0 10px 0; | |
} | |
h2 { | |
color: $grey / 1.5; | |
font-family: "Open Sans"; | |
line-height: 1.2em; | |
text-transform: uppercase; | |
font-size: 1em; | |
font-weight: 400; | |
margin: 1.2% 0; | |
} | |
p { | |
position: relative; | |
margin: 0; | |
padding-top: 20px; | |
&:after { | |
content: ""; | |
background: $green; | |
height: 6px; | |
width: 40px; | |
/*POSITION*/ | |
position: absolute; | |
top: 6px; | |
left: 0; | |
} | |
} | |
a { | |
color: $green; | |
margin-bottom: 10px; | |
float: right; | |
&:after { | |
@include transition(0.3s); | |
content: "\f061"; | |
font-family: FontAwesome; | |
margin-left: -10px; | |
opacity: 0; | |
vertical-align: middle; | |
} | |
&:hover:after { | |
margin-left: 5px; | |
opacity: 1; | |
} | |
} | |
} | |
} | |
@media screen and (min-width: 600px) { | |
.blog-card { | |
height: 200px; | |
max-width: 600px; | |
&:hover { | |
.photo { | |
transform: rotate(5deg) scale(1.3); | |
} | |
&.alt .photo { | |
transform: rotate(-5deg) scale(1.3); | |
} | |
} | |
&.alt { | |
.details { | |
padding-left: 30px; | |
} | |
.description { | |
float: right; | |
&:before { | |
transform: skewX(5deg); | |
right: -15px; | |
left: inherit; | |
} | |
} | |
.photo { | |
float: right; | |
} | |
} | |
.photo { | |
@include transition(0.5s); | |
float: left; | |
height: 100%; | |
width: 40%; | |
} | |
.details { | |
width: 40%; | |
} | |
.description { | |
float: left; | |
width: 60%; | |
z-index: 0; | |
&:before { | |
transform: skewX(-5deg); | |
content: ""; | |
background: #fff; | |
width: 100%; | |
z-index: -1; | |
/*POSITION*/ | |
position: absolute; | |
left: -15px; | |
top: 0; | |
bottom: 0; | |
} | |
} | |
} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> | |
<link href="https://codepen.io/ChynoDeluxe/pen/eJPeEL" rel="stylesheet" /> |