CSS Horizontal Flexbox Cards

Flexbox Event Cards

The CSS

/* HORIZONTAL CARDS */ .photo-container { font-size: 1.5em; background-color: #546270; color: white; padding: 20px; text-align: center; grid-area: photo; display: flex; justify-content: center; align-items: center; border-radius: 5px 0 0 5px;} .card-container { margin: 10px 0 ; display: grid; grid-template-areas: 'photo info'; grid-template-columns: 150px 1fr; width: 100%; background-color: #ffffff; box-shadow: 0 3px 6px #ededed, 0 3px 6px #ededed; line-height: 1.75em; border-radius: 5px;} .card-container:hover {box-shadow: 0 3px 6px #e0e0e0, 0 3px 6px #e0e0e0; transition:all .6s ease;} .info-container { padding: 20px; grid-area: info; } .event-name { font-weight: bold; padding-bottom: 5px; } .event-location { font-weight: 300; } .day { font-weight: 300; } .month { font-weight: 600; } @media( max-width: 600px ) { .card-container { width: 100%; } }

HTML Code

<div class="card-container"><div class="photo-container"> <div class="date"> <div class="day">12</div> <div class="month">FEB</div></div></div> <div class="info-container"><div class="event-name">Lorem Ipsum</div> <div class="event-location"><a href="#">Lorem Ipsum is simply dummy text <i class="fas fa-long-arrow-alt-right"></i></a></div></div></div> <div class="card-container"><div class="photo-container"> <div class="date"> <div class="day">17</div> <div class="month">APR</div></div></div> <div class="info-container"><div class="event-name">Lorem Ipsum</div> <div class="event-location"><a href="#">Lorem Ipsum is simply dummy text <i class="fas fa-long-arrow-alt-right"></i></a></div></div></div> <div class="card-container"><div class="photo-container"> <div class="date"> <div class="day">3</div> <div class="month">MAY</div></div></div> <div class="info-container"><div class="event-name">Lorem Ipsum</div> <div class="event-location"><a href="#">Lorem Ipsum is simply dummy text <i class="fas fa-long-arrow-alt-right"></i></a></div></div></div>

The Demo

12

FEB

Lorem Ipsum

Lorem Ipsum is simply dummy text

17

APR

Lorem Ipsum

Lorem Ipsum is simply dummy text

3

MAY

Lorem Ipsum

Lorem Ipsum is simply dummy text

Inspo: Eric Mahoney