<div class="wrapper">
<h2 class="h2">Flexbox</h2>
<ul class="flex cards">
<li><h3 class="cardTitle">Card 1</h3>
<img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 1</span></button>
</li>
<li><h3 class="cardTitle">Card 2</h3>
<img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 2</span></button>
</li>
<li><h3 class="cardTitle">Card 3</h3>
<img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 3</span></button>
</li>
<li><h3 class="cardTitle">Card 4</h3>
<img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 4</span></button>
</li>
<li><h3 class="cardTitle">Card 5</h3>
<img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 5</span></button>
</li>
</ul>
<h2 class="h2">CSS Grid Layout</h2>
<ul class="grid cards">
<li><h3 class="cardTitle">Card 1</h3>
<img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 1</span></button>
</li>
<li><h3 class="cardTitle">Card 2</h3>
<img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 2</span></button>
</li>
<li><h3 class="cardTitle">Card 3</h3>
<img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 3</span></button>
</li>
<li><h3 class="cardTitle">Card 4</h3>
<img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 4</span></button>
</li>
<li><h3 class="cardTitle">Card 5</h3>
<img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p>
<button href="#" class="button grow">Learn More<span class="sr-only">About Car 5</span></button>
</li>
</ul>
</div>
body {
font-family: Arial, Helvetica, sans-serif;
}
.h2 {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 32px;
font-size: 2em;
}
.cardTitle {
font-size: 24px;
font-size: 1.5em;
text-align: center;
}
.wrapper {
margin: 0 auto;
width: 90%;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border: 1px solid #490A3D;
border-radius:5px;
background-color: #2474A6;
color: #fff;
flex: 1 1 200px;
box-shadow: 5px 5px 20px grey;
}
.cards h3 {
background-color: #F2A30F;
margin: 0;
padding: 10px;
}
.cards p {
padding: 10px;
}
.flex {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.flex li {
flex: 1 1 200px;
margin: 10px;
}
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
}
.cardimg {
max-width: 100%;
height: auto !important;
}
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.button {
width: 60%;
background-color: #F2A30F;
color:white;
font-size: 18px;
border: none;
border-radius: 4px;
padding: 8px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
overflow: hidden;
}
/* Sheen Effect: https://cssanimation.rocks/pseudo-elements/ */
.button::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.button:hover::after, .button:focus::after {
animation: sheen 1s forwards;
}
@keyframes sheen {
100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.