John Doe
Aug. 24, 2015
Learn
Code
HTML
CSS
Learning to Code
Opening a door to the future
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.
Read More
Jane Doe
July. 15, 2015
Learn
Code
JavaScript
Mastering the Language
Java is not the same as JavaScript
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.
Read More
Responsive Blog Cards
 by Chyno Deluxe

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:400,700);.blog-card{transition:height .3s ease;-webkit-transition:height .3s ease;background:#fff;border-radius:3px;box-shadow:0 3px 7px -3px rgba(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}.blog-card:hover .details{left:0}.blog-card:hover.alt .details{right:0}.blog-card.alt .details{right:-100%;left:inherit}.blog-card .photo{height:200px;position:relative}.blog-card .photo.photo1{background:url(http://i62.tinypic.com/34oq4o0.jpg) center no-repeat;background-size:cover}.blog-card .photo.photo2{background:url(http://i60.tinypic.com/xeiv79.jpg) center no-repeat;background-size:cover}.blog-card .details{transition:all .3s ease;-webkit-transition:all .3s ease;background:rgba(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:absolute;top:0;left:-100%}.blog-card .details>li{padding:3px 0}.blog-card .details li:before,.blog-card .details .tags ul:before{font-family:FontAwesome;margin-right:10px;vertical-align:middle}.blog-card .details .author:before{content:"\f007"}.blog-card .details .date:before{content:"\f133"}.blog-card .details .tags ul{list-style:none;margin:0;padding:0}.blog-card .details .tags ul:before{content:"\f02b"}.blog-card .details .tags li{display:inline-block;margin-right:3px}.blog-card .details a{color:inherit;border-bottom:1px dotted}.blog-card .details a:hover{color:#75D13B}.blog-card .description{padding:10px;box-sizing:border-box;position:relative}.blog-card .description h1{font-family:Roboto;line-height:1em;margin:0 0 10px 0}.blog-card .description h2{color:#9b9b9b;font-family:"Open Sans";line-height:1.2em;text-transform:uppercase;font-size:1em;font-weight:400;margin:1.2% 0}.blog-card .description p{position:relative;margin:0;padding-top:20px}.blog-card .description p:after{content:"";background:#75D13B;height:6px;width:40px;position:absolute;top:6px;left:0}.blog-card .description a{color:#75D13B;margin-bottom:10px;float:right}.blog-card .description a:after{transition:all .3s ease;-webkit-transition:all .3s ease;content:"\f061";font-family:FontAwesome;margin-left:-10px;opacity:0;vertical-align:middle}.blog-card .description a:hover:after{margin-left:5px;opacity:1}@media screen and (min-width:600px){.blog-card{height:200px;max-width:600px}.blog-card:hover .photo{-webkit-transform:rotate(5deg) scale(1.3);-ms-transform:rotate(5deg) scale(1.3);transform:rotate(5deg) scale(1.3)}.blog-card:hover.alt .photo{-webkit-transform:rotate(-5deg) scale(1.3);-ms-transform:rotate(-5deg) scale(1.3);transform:rotate(-5deg) scale(1.3)}.blog-card.alt .details{padding-left:30px}.blog-card.alt .description{float:right}.blog-card.alt .description:before{-webkit-transform:skewX(5deg);-ms-transform:skewX(5deg);transform:skewX(5deg);right:-15px;left:inherit}.blog-card.alt .photo{float:right}.blog-card .photo{transition:all .5s ease;-webkit-transition:all .5s ease;float:left;height:100%;width:40%}.blog-card .details{width:40%}.blog-card .description{float:left;width:60%;z-index:0}.blog-card .description:before{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);content:"";background:#fff;width:100%;z-index:-1;position:absolute;left:-15px;top:0;bottom:0}}