Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--Importan source from https://bootsnipp.com/snippets/011z4-->
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console