<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset-UTF-8" />
<!-- Fonts -->
<!-- font-family: 'Lobster Two', cursive;-->
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
<!-- font-family: 'Rambla', sans-serif;-->
<link href="https://fonts.googleapis.com/css?family=Rambla" rel="stylesheet">
<title>Cards</title>
</head>
<body>
<section class="languages ">
<span class="cards-cover">
<article class="grid-x5--cards tc-dark-orange">
<div class="cards ">
<img src="https://s-media-cache-ak0.pinimg.com/236x/74/57/97/745797b560fed8213d9ba4c1af283692.jpg" />
<h2 class="">John Brave</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda molestias, tempora eaque sapiente nemo</p>
<a href="#" class="bg-dark-orange">DARK BELT</a>
</div>
</article>
<article class="grid-x5--cards tc-blue">
<div class="cards ">
<img src="https://s-media-cache-ak0.pinimg.com/564x/35/1b/4f/351b4f15004bc1b4436415b79957d265.jpg" />
<h2 class="">Kapeesh</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda molestias, tempora eaque sapiente nemo! </p>
<a href="#" class="bg-blue">BLUE BELT</a>
</div>
</article>
<article class="grid-x5--cards tc-orange">
<div class="cards ">
<img src="https://s-media-cache-ak0.pinimg.com/564x/ee/15/30/ee15300409100631c157fb8ef01d067b.jpg" />
<h2 class="">Perry Fry</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda molestias, tempora eaque sapiente nemo!</p>
<a href="#" class="bg-orange">ORANGE BELT</a>
</div>
</article>
<article class="grid-x5--cards tc-light-purple">
<div class="cards ">
<img src="https://s-media-cache-ak0.pinimg.com/564x/6f/70/b3/6f70b3f14535d952c7e58be1410e903d.jpg" />
<h2 class="">Philip Happer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda molestias, tempora eaque sapiente nemo!</p>
<a href="#" class="bg-light-purple">PURPLE BELT</a>
</div>
</article>
<article class="grid-x5--cards tc-dark-orange">
<div class="cards tc-dark-orange">
<img src="https://s-media-cache-ak0.pinimg.com/236x/74/57/97/745797b560fed8213d9ba4c1af283692.jpg" />
<h2 class="">John Brave</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda molestias, tempora eaque sapiente nemo</p>
<a href="#" class="bg-dark-orange">DARK BELT</a>
</div>
</article>
</span>
</section>
</body>
</html> /*
* Project Griffin.
* Author: Masagwadi Maluleke
*/
/*
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
*/
/* #GLOBAL*/
/*basic reset*/
* {
box-sizing: border-box;
}
p,
h2,
a {
font-family: 'Rambla', sans-serif;
}
/*text colors*/
.tc-dark-orange {
color: #E44D26;
}
.tc-blue {
color: #0170BA;
}
.tc-orange {
color: #F58232;
}
.tc-light-purple {
color: #6C7EB7;
}
/*background colors*/
.bg-dark-orange {
background-color: #E44D26;
}
.bg-blue {
background-color: #0170BA;
}
.bg-orange {
background-color: #F58232;
}
.bg-light-purple {
background-color: #6C7EB7;
}
/*fonts*/
.lobster {
font-family: 'Lobster Two', cursive;
}
.rambla {
font-family: 'Rambla', sans-serif;
}
/*#GRIDS*/
.grid-x5--cards {
width: 20.5%;
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
}
.grid-x5--cards {
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
}
.cards-cover {
display: block;
width: 80%;
padding-left: 100px;
margin: 0 auto;
min-height: 410px;
position: relative;
}
.cards-cover .grid-x5--cards:nth-child(1) {
position: absolute;
display: block;
margin-top: 30px;
left: 0;
z-index: 1;
transition: all 350ms;
}
.cards-cover .grid-x5--cards:nth-child(2) {
position: absolute;
margin-top: 20px;
left: 20%;
z-index: 2;
transform: scale(1.05);
transition: all 350ms;
}
.cards-cover .grid-x5--cards:nth-child(3) {
position: absolute;
margin-top: 10px;
left: 40%;
z-index: 3;
transform: scale(1.09);
transition: all 350ms;
}
.cards-cover .grid-x5--cards:nth-child(4) {
position: absolute;
margin-top: 20px;
left: 60%;
z-index: 2;
transform: scale(1.05);
transition: all 350ms;
}
.cards-cover .grid-x5--cards:nth-child(5) {
position: absolute;
margin-top: 30px;
left: 80%;
z-index: 1;
transition: all 350ms;
}
.cards {
vertical-align: top;
transition: all 750ms;
border: 1px solid #4a4a4a;
min-height: 300px;
margin-right: 1.5%;
overflow: hidden;
font-size: 14px;
position: absolute;
transition: all 350ms;
background-color: #fff;
border-radius: 10px;
}
.cards p {
padding: 10px;
margin-bottom: 35px;
text-align: center;
color: #000;
}
.cards img {
width: 100%;
object-fit: cover;
transform-origin: center center;
margin: 0 auto;
display: block;
border-bottom: 0px solid currentColor;
transition: all 350ms;
}
.cards h2 {
text-align: center;
font-family: 'Lobster Two', cursive;
transition: all 350ms;
color: currentColor;
}
.cards a {
text-decoration: none;
padding: 5px 10px;
text-align: center;
color: white;
display: block;
width: 100%;
position: absolute;
bottom: 0;
transition: all 350ms;
}
.cards-cover .grid-x5--cards:hover, .cards:hover {
box-shadow: 0 10px 15px 6px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
z-index: 30000;
border-color: currentColor;
}
.cards:hover img {
filter: brightness(110%);
border-bottom: 8px solid currentColor;
width: 102%;
}
.cards:hover h2 {
transform: scale(1.1);
}
.cards:hover a {
box-shadow: -1px 0px 15px 6px rgba(0, 0, 0, 0.3) inset;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.