<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Event Card - Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 1600 / 16 = 100em
/* mobile 90% event */
.grid-container {
max-width: 100em;
margin: 2rem auto;
padding: 2%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 90%;
float: none;
margin: 5% auto;
}
@supports (display: grid) {
.grid-container {
display: grid;
grid-gap: 3%;
grid-template-columns: repeat(1, auto);
grid-template-rows: auto;
}
.grid-item {
grid-column: span 1;
grid-row: auto;
}
}
/* 440/16 = 27.5 */
@media screen and (min-width: 27.5rem) {
.grid-item {
width: 70%;
}
}
/* 540/16 = 33.75 */
@media screen and (min-width: 33.75rem) {
.grid-item {
width: 60%;
}
}
/* 620/16 = 37.5 */
@media screen and (min-width: 38.75rem) {
.grid-container {
padding: 4%;
}
.grid-item {
width: 42%;
float: left;
margin: 1.5% 2%;
}
@supports (display: grid) {
.grid-container {
grid-template-columns: repeat(2, auto);
grid-gap: 6%;
}
.grid-item {
width: 100%;
margin: 0 auto 8%;
}
}
}
/* 915/16 = 57.18 */
@media screen and (min-width: 57.18rem) {
.grid-item {
width: 29%;
margin: 1.5% 2%;
}
@supports (display: grid) {
.grid-container {
grid-template-columns: repeat(3, auto);
grid-gap: 4%;
}
.grid-item {
width: 100%;
margin: 0 auto 6%;
}
}
}
/* 1320/16 = 82.5 */
@media screen and (min-width: 82.5rem) {
.grid-item {
width: 21%;
}
@supports (display: grid) {
.grid-container {
grid-template-columns: repeat(4, auto);
grid-gap: 3%;
}
.grid-item {
width: 100%;
margin: 0 auto 7%;
}
}
}
/* Animate cards to fade in with different delay times */
.grid-item {
animation: scaleIn 600ms cubic-bezier(0.71, 0.55, 0.62, 1.57) 100ms both;
}
/* CARD STYLING */
/*-------------------
Flip
-------------------*/
.card-container {
transition: width 200ms linear 0s;
perspective: 1000px;
}
.card-container .flip-animation {
transform: rotateY(0deg);
}
.card-container.addFlip .flip-animation,
.card-container.addFlip .flip-animation ~ .backCard {
transform: rotateY(180deg);
}
.flip-animation {
position: relative;
transform-style: preserve-3d;
transition: transform 550ms linear 0s;
}
.wrapper .card-container {
height: 50em;
}
.wrapper.frontback-cards .card-container {
height: 29em;
}
.wrapper.frontback-cards .item-card {
z-index: 2;
transform: rotateY(0deg);
}
.wrapper.frontback-cards .item-card-details {
z-index: 1;
transform: rotateY(180deg);
}
.wrapper.frontback-cards .item-card,
.wrapper.frontback-cards .item-card-details {
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.wrapper .item-card-details {
margin-top: -2em;
}
.wrapper.frontback-cards .item-card-details {
margin-top: 0;
}
.backCard-flip .bio-band {
transform-origin: 10% 100%;
animation: scaleIn
1000ms
cubic-bezier(0.71, 0.55, 0.62, 1.57)
0.3s both;
}
.backCard-flip .bio-title {
transform-origin: 10% 100%;
animation: scaleIn
1000ms
cubic-bezier(0.71, 0.55, 0.62, 1.57)
0.7s both;
}
/*-------------------
LAYOUT
-------------------*/
.card-container {
width: 100%;
height: 28em;
margin: 0em auto;
font-family: "Roboto", sans-serif;
font-size: 1em;
}
/*--flexbox--*/
.item-card,
.item-card-details {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.item-summary {
width: 100%;
background-color: #eaedef;
padding: 1.5rem;
box-sizing: border-box;
margin-top: -0.2em;
}
.bio-block,
.scroll-block,
.more-info {
background-color: #eaedef;
width: 100%;
box-sizing: border-box;
}
.bio-block {
border-radius: 0.45em 0.45em 0 0;
padding: 1em 1.5em 0.2em;
}
/*-------------------
IMAGE
-------------------*/
.image-wrapper {
float: left;
height: 13em;
order: -1;
position: relative;
}
@supports (display: grid) {
.image-wrapper {
grid-column: span 2;
grid-row: 1;
}
}
.image-wrapper::after {
content: "";
position: absolute;
display: block;
margin: auto;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
to top,
rgba(64, 101, 173, 0.7) 0%,
rgba(0, 0, 0, 0) 100%
);
}
.featured-image {
width: 100%;
border-radius: 0.45em 0.45em 0 0;
object-fit: cover;
height: 100%;
}
/*-------------------
TEXT
-------------------*/
.title {
font-size: 1.5em;
transform-origin: 10% 100%;
font-weight: 900;
color: #313b40;
animation: scaleInUp
800ms
cubic-bezier(0.71, 0.55, 0.62, 1.57)
1s both;
}
.venue,
.street-address,
.locality {
margin: 0.3em 0;
color: #313b40;
opacity: 0.85;
transform-origin: 10% 100%;
animation: scaleInUp
800ms
cubic-bezier(0.71, 0.55, 0.62, 1.57)
1s both;
}
.item-time-date {
float: left;
order: -1;
}
@supports (display:grid){
.item-time-date {
grid-column: span 2;
grid-row: 2;
}
}
.item-time-date {
z-index: 100;
width: 75%;
height: 2.5em;
font-size: 0.9em;
color: #313b40;
background-color: #fff;
margin: -1.5em 0 -1.5em 1em;
font-weight: 900;
border-radius: 0.3em;
text-align: center;
animation: scaleIn
0.8s
cubic-bezier(0.71, 0.55, 0.62, 1.57)
0.8s both;
}
.date, .time {
position: relative;
top: 0.7em;
padding: 0.6rem;
}
.time {
border-left: 1px solid #444;
}
.address {
font-style: normal;
}
.venue {
font-weight: 900;
}
.bio-band {
color: #888;
opacity: 0.6;
font-size: 1.1em;
margin-bottom: 0;
}
.bio-title {
font-size: 1.5em;
color: #313b40;
margin: 0.6em 0 0.4em;
}
.bio-text {
line-height: 180%;
height: 0%;
color: #313b40;
opacity: 0.85;
font-size: 1em;
padding: 0 1em 0 1.5em;
margin: 0 0 -0.35em;
}
.scroll-block {
height: 10em;
overflow: scroll;
border-bottom: 2px solid #ccc;
}
.more-info {
padding: 0.5em 1em;
}
.more-info p:nth-child(1) {
margin-bottom: 2em;
}
/*-------------------
BUTTONS & LINKS
-------------------*/
.item-buttons {
display: flex;
width: 100%;
}
@supports (display: grid){
.item-buttons {
grid-column: span 2;
grid-row: 4;
}
}
.info,
.btn-tickets,
.button-detals {
text-decoration: none;
text-align: center;
cursor: pointer;
}
.info:focus,
.btn-tickets:focus,
.btn-details:focus {
outline: 2px solid #000;
}
.btn-details,
.btn-tickets {
display: block;
color: #fff;
float: left;
width: 50%;
font-size: 1rem;
box-sizing: border-box;
border: none;
padding: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0;
transition: color 200ms ease-in 0s;
}
/*
JS & NO JS for Buttons
s*/
.wrapper .front-buttons,
.wrapper .back-arrow {
display: none;
}
.wrapper.frontback-cards .front-buttons,
.wrapper.frontback-cards .back-arrow {
display: block;
}
.wrapper .on-back {
width: 100%;
border-radius: 0 0 0.45em 0.45em;
}
.wrapper.frontback-cards .on-back {
width: 50%;
border-radius: 0 0 0.45em 0;
}
.blue {
background-color: #4972c1;
background: linear-gradient(90deg, #72a1ff, #4972c1, #34579e, #4972c1, #72a1ff);
background-size: 400% 400%;
background-position: 0% 50%;
border-radius: 0 0 0.45em 0;
}
.blue:hover {
animation: gradientMove 6s ease infinite;
}
.grey {
background-color: #545b6d;
border-radius: 0 0 0 0.45em;
transition: background-color 200ms ease-in 0s;
}
.grey:hover {
background-color: #3b404c;
}
.back-arrow {
background: #545b6d url(https://bit.ly/2Fj85IN) center center no-repeat;
background-size: 20%;
}
/*-------------------
BACK LINKS
-------------------*/
.info {
color: #313b40;
font-weight: 800;
position: relative;
}
.info::after {
content: "";
display: block;
position: absolute;
margin: 0;
left: 0;
bottom: -25%;
height: 0.2em;
width: 100%;
background-color: #4972c1;
background: linear-gradient(90deg, #72a1ff, #4972c1, #34579e, #4972c1, #72a1ff);
background-size: 400% 400%;
background-position: 0% 50%;
transition: all 0.2s ease-in 0s;
}
.info:hover::after {
height: 0.5em;
animation: gradientMove 6s ease both;
}
/*-------------------
GRID
-------------------*/
@supports (display: grid) {
.item-card,
.item-card-details {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto;
}
.item-summary {
grid-column: span 2;
grid-row: 3;
}
.bio-block,
.scroll-block,
.more-info {
grid-column: span 2;
grid-row: auto;
}
.bio-details,
.bio-tickets {
grid-column: span 1;
grid-row: auto;
}
}
/*-------------------
KEYFRAMES
-------------------*/
@keyframes scaleInLight {
0% {
opacity: 0;
transform: scale(0.9, 0.9);
}
100% {
opacity: 0.8;
transform: scale(1, 1);
}
}
@keyframes positionBack {
0% {
opacity: 0;
transform: rotateY(0deg);
}
50% {
opacity: 0.1;
transform: rotateY(90deg);
}
100% {
opacity: 1;
transform: rotateY(180deg);
}
}
@keyframes bounceLeft {
0% {
transform: translatex(0%);
}
50% {
transform: translatex(-30%);
}
100% {
transform: translatex(0%);
}
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
@keyframes scaleInUp {
0% {
opacity: 0;
transform: scale(1, 1) translatey(90%);
}
100% {
opacity: 1;
transform: scale(1, 1) translatey(0%);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<main class="grid-container">
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">The Paper Kites</h2>
<p class="venue">Bottom of the Hill</p>
<address class="address">
<p class="street-address">1233 Seventeenth St.</p>
<p class="locality">San Francisco, CA 94107</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2PH10HN" alt="The Paper Kites performing, overlooking a crowd" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">July 16, 2018</time>
<time class="time" datetime="19:00">7:00 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue"> Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed
laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse
potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo,
pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut
erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus.
Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p>
<a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details</a>
</p>
<p>
<a class="info" aria-label="Visit the venue's website" href="#">Venue Details</a>
</p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#"></button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">ODESZA</h2>
<p class="venue">PNC Pavilion</p>
<address class="address">
<p class="street-address">6295 Kellogg Ave</p>
<p class="locality">Cincinnati, OH 45230</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2wg2H9U" alt="Odesza performing onstage" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">Sept 01, 2018</time>
<time class="time" datetime="19:00">8:20 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue" href="#">Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo, pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus. Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p>
<a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details</a>
</p>
<p>
<a class="info" aria-label="Visit the venue's website" href="#">Venue Details</a>
</p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#"></button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">Pogo</h2>
<p class="venue">Knitting Factory</p>
<address class="address">
<p class="street-address">211 N Virginia St</p>
<p class="locality"> Reno, NV 89501</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2JO4KnG" alt="ODESZA performing onstage" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">Aug 08, 2018</time>
<time class="time" datetime="19:00">9:00 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue" href="#">Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo, pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus. Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p><a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details
</a></p>
<p><a class="info" aria-label="Visit the venue's website" href="#">Venue Details
</a></p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#">
</button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">Run River North</h2>
<p class="venue">The Fillmore</p>
<address class="address">
<p class="street-address">1805 Geary Blvd</p>
<p class="locality">San Francisco, CA 94115</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2KyLuf0" alt="ODESZA performing onstage" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">Dec 11, 2018</time>
<time class="time" datetime="19:00">6:00 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue" href="#">Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo, pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus. Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p><a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details
</a></p>
<p><a class="info" aria-label="Visit the venue's website" href="#">Venue Details
</a></p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#">
</button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">Pogo</h2>
<p class="venue">Knitting Factory</p>
<address class="address">
<p class="street-address">211 N Virginia St</p>
<p class="locality"> Reno, NV 89501</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2JO4KnG" alt="ODESZA performing onstage" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">Aug 08, 2018</time>
<time class="time" datetime="19:00">9:00 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue" href="#">Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo, pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus. Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p><a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details
</a></p>
<p><a class="info" aria-label="Visit the venue's website" href="#">Venue Details
</a></p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#">
</button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">Run River North</h2>
<p class="venue">The Fillmore</p>
<address class="address">
<p class="street-address">1805 Geary Blvd</p>
<p class="locality">San Francisco, CA 94115</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2KyLuf0" alt="ODESZA performing onstage" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">Dec 11, 2018</time>
<time class="time" datetime="19:00">6:00 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue" href="#">Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo, pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus. Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p><a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details
</a></p>
<p><a class="info" aria-label="Visit the venue's website" href="#">Venue Details
</a></p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#">
</button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">The Paper Kites</h2>
<p class="venue">Bottom of the Hill</p>
<address class="address">
<p class="street-address">1233 Seventeenth St.</p>
<p class="locality">San Francisco, CA 94107</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2PH10HN" alt="The Paper Kites performing, overlooking a crowd" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">July 16, 2018</time>
<time class="time" datetime="19:00">7:00 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue"> Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed
laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse
potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo,
pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut
erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus.
Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p>
<a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details</a>
</p>
<p>
<a class="info" aria-label="Visit the venue's website" href="#">Venue Details</a>
</p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#"></button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="wrapper">
<div class="card-container">
<div class="flip-animation">
<section class="item-card">
<div class="item-summary">
<h2 class="title">ODESZA</h2>
<p class="venue">PNC Pavilion</p>
<address class="address">
<p class="street-address">6295 Kellogg Ave</p>
<p class="locality">Cincinnati, OH 45230</p>
</address>
</div>
<div class="image-wrapper">
<img class="featured-image" src="https://bit.ly/2wg2H9U" alt="Odesza performing onstage" />
</div>
<div class="item-time-date">
<time class="date" datetime="2018-10-16">Sept 01, 2018</time>
<time class="time" datetime="19:00">8:20 PM</time>
</div>
<div class="item-buttons front-buttons">
<button class="btn-details grey" aria-label="Learn more about the band and venue" href="#">Details</button>
<a class="btn-tickets blue" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
<section class="item-card-details">
<div class="bio-block">
<h2 class="bio-band">The Paper Kites</h2>
<h3 class="bio-title">Bio</h3>
</div>
<div class="scroll-block">
<p class="bio-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis ex non risus vulputate semper. Sed laoreet, nibh quis tincidunt blandit, urna lorem lobortis odio, quis luctus mauris orci ut nunc. Suspendisse potenti. Nullam rhoncus mi quis mauris blandit malesuada. Vivamus eget lacus sem. Integer metus leo, pellentesque in feugiat vel, ornare ac ante. Sed sit amet tincidunt lacus, at condimentum elit. Vivamus ut erat eu sem luctus bibendum in in purus. Etiam ornare lectus sed erat ornare, quis placerat libero dapibus. Nullam nec quam eget arcu elementum vestibulum.
</p>
</div>
<div class="more-info">
<p>
<a class="info" aria-label="Visit The Paper Kites website" href="#">The Paper Kites Details</a>
</p>
<p>
<a class="info" aria-label="Visit the venue's website" href="#">Venue Details</a>
</p>
</div>
<div class="item-buttons back">
<button class="btn-details grey back-arrow" aria-label="Learn more about the band and venue" href="#"></button>
<a class="btn-tickets blue on-back" aria-label="Purchase tickets for this event" href="#">Tickets</a>
</div>
</section>
</div>
</div>
</div>
</div>
</main>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script id="rendered-js">
// classes to place front and back cards in proper places
placeCards = () => {
let wrappers = document.querySelectorAll(".wrapper");
[...wrappers].forEach(wrapper => {
wrapper.classList.add("frontback-cards");
});
};
// toggle class for flip animation
flipCard = () => {
let cardContainers = document.querySelectorAll(".card-container");
[...cardContainers].forEach(card => {
let cardBtns = card.querySelectorAll(".btn-details");
cardBtns.forEach(btn => {
btn.addEventListener(
"click",
function () {
card.classList.toggle("addFlip");
},
false);
});
});
};
(() => {
placeCards();
flipCard();
})();
//# sourceURL=pen.js
</script>
</body>
</html>
