Skip to content

Instantly share code, notes, and snippets.

@lefuturiste

lefuturiste/cards-ui.html

Created March 19, 2017 19:26
Show Gist options
  • Save lefuturiste/242fa51639e9e7bea0c912dc076d1a44 to your computer and use it in GitHub Desktop.
Save lefuturiste/242fa51639e9e7bea0c912dc076d1a44 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cards-ui.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
box-sizing: border-box;
}
body {
font-family: Open Sans;
font-size: 16px;
line-height: 1.4;
background-color: #d8e0e5;
}
.container {
width: 80%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
display: flex;
flex-wrap: wrap;
}
.card {
position: relative;
overflow: hidden;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
margin-right: 30px;
margin-bottom: 30px;
}
.card a {
color: inherit;
text-decoration: none;
}
.card:hover {
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
}
.card__status {
position: absolute;
top: 20px;
right: 20px;
width: 55px;
height: 55px;
padding-top: 10px;
color: #fff;
line-height: 1;
font-size: 15px;
font-weight: bold;
text-align: center;
background-color: #ef5A31;
border-radius: 50%;
text-transform: uppercase;
display: block;
}
.card__status__day {
display: block;
font-size: 14px;
}
.card__status__month {
display: block;
font-size: 14px;
text-transform: uppercase;
}
.card__thumb {
height: 235px;
overflow: hidden;
background-color: #000;
transition: height 0.3s;
}
.card__thumb img {
display: block;
opacity: 1;
transition: opacity 0.3s, transform 0.3;
transform: scale(1);
}
.card:hover .card__thumb {
height: 90px;
}
.card__body {
position: relative;
padding: 20px;
height: 185px;
transition: height 0.3s;
}
.card:hover .card__body {
height: 330px;
}
.card__title {
margin: 0;
padding: 0 0 10px 0;
font-size: 22px;
color: #000;
font-weight: bold;
transition: all 0.3s;
}
.card:hover .card__title {
animation: titleBlur 0.3s;
}
.card__subtitle {
margin: 0;
padding: 0 0 10px 0;
font-size: 19px;
color: #ef5A31;
}
.card:hover .card__subtitle {
animation: subtitleBlur 0.3s;
}
.card__description {
position: absolute;
left: 20px;
right: 20px;
margin: 0;
padding: 0;
color: #666C74;
font-size: 14px;
line-height: 27px;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transition-delay: 0s;
transform: translateY(25px);
}
.card:hover .card__description {
opacity: 1;
transition-delay: 0.1s;
transform: translateY(0);
}
@keyframes titleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
}
100% {
opacity: 1;
text-shadow: 0px 5px 5px transparent;
}
}
@keyframes subtitleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(239, 90, 49, 0.6);
}
100% {
opacity: 1;
text-shadow: 0px 5px 5px rgba(239, 90, 49, 0);
}
}
</style>
</head>
<body>
<div class="container">
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<span class="card__status">en ligne</span>
<div class="card__body">
<div class="card__title"><a href="#">Lorem ipsum dolor sit amet.</a></div>
<div class="card__subtitle"><a href="#">Nulla facilisis sem velit, id.</a></div>
<p class="card__description">
Curabitur blandit sollicitudin volutpat. Suspendisse potenti. Ut tristique sed lorem sit amet fringilla. Curabitur et molestie lorem. Vivamus venenatis nisi vel rutrum convallis.
</p>
</div>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<span class="card__status">hors ligne</span>
<div class="card__body">
<div class="card__title"><a href="#">Lorem ipsum dolor sit amet.</a></div>
<div class="card__subtitle"><a href="#">Nulla facilisis sem velit, id.</a></div>
<p class="card__description">
Curabitur blandit sollicitudin volutpat. Suspendisse potenti. Ut tristique sed lorem sit amet fringilla. Curabitur et molestie lorem. Vivamus venenatis nisi vel rutrum convallis. Donec ullamcorper odio eu est auctor, quis bibendum felis facilisis. Phasellus tincidunt ipsum erat. Curabitur in dui vel tellus ultrices interdum quis vitae mauris.
</p>
</div>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<span class="card__status">hors ligne</span>
<div class="card__body">
<div class="card__title"><a href="#">Lorem ipsum dolor sit amet.</a></div>
<div class="card__subtitle"><a href="#">Nulla facilisis sem velit, id.</a></div>
<p class="card__description">
Curabitur blandit sollicitudin volutpat. Suspendisse potenti. Ut tristique sed lorem sit amet fringilla. Curabitur et molestie lorem. Vivamus venenatis nisi vel rutrum convallis. Donec ullamcorper odio eu est auctor, quis bibendum felis facilisis. Phasellus tincidunt ipsum erat. Curabitur in dui vel tellus ultrices interdum quis vitae mauris.
</p>
</div>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<span class="card__status">hors ligne</span>
<div class="card__body">
<div class="card__title"><a href="#">Lorem ipsum dolor sit amet.</a></div>
<div class="card__subtitle"><a href="#">Nulla facilisis sem velit, id.</a></div>
<p class="card__description">
Curabitur blandit sollicitudin volutpat. Suspendisse potenti. Ut tristique sed lorem sit amet fringilla. Curabitur et molestie lorem. Vivamus venenatis nisi vel rutrum convallis. Donec ullamcorper odio eu est auctor, quis bibendum felis facilisis. Phasellus tincidunt ipsum erat. Curabitur in dui vel tellus ultrices interdum quis vitae mauris.
</p>
</div>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<span class="card__status">hors ligne</span>
<div class="card__body">
<div class="card__title"><a href="#">Lorem ipsum dolor sit amet.</a></div>
<div class="card__subtitle"><a href="#">Nulla facilisis sem velit, id.</a></div>
<p class="card__description">
Curabitur blandit sollicitudin volutpat. Suspendisse potenti. Ut tristique sed lorem sit amet fringilla. Curabitur et molestie lorem. Vivamus venenatis nisi vel rutrum convallis. Donec ullamcorper odio eu est auctor, quis bibendum felis facilisis. Phasellus tincidunt ipsum erat. Curabitur in dui vel tellus ultrices interdum quis vitae mauris.
</p>
</div>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<span class="card__status">hors ligne</span>
<div class="card__body">
<div class="card__title"><a href="#">Lorem ipsum dolor sit amet.</a></div>
<div class="card__subtitle"><a href="#">Nulla facilisis sem velit, id.</a></div>
<p class="card__description">
Curabitur blandit sollicitudin volutpat. Suspendisse potenti. Ut tristique sed lorem sit amet fringilla. Curabitur et molestie lorem. Vivamus venenatis nisi vel rutrum convallis. Donec ullamcorper odio eu est auctor, quis bibendum felis facilisis. Phasellus tincidunt ipsum erat. Curabitur in dui vel tellus ultrices interdum quis vitae mauris.
</p>
</div>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<span class="card__status">hors ligne</span>
<div class="card__body">
<div class="card__title"><a href="#">Lorem ipsum dolor sit amet.</a></div>
<div class="card__subtitle"><a href="#">Nulla facilisis sem velit, id.</a></div>
<p class="card__description">
Curabitur blandit sollicitudin volutpat. Suspendisse potenti. Ut tristique sed lorem sit amet fringilla. Curabitur et molestie lorem. Vivamus venenatis nisi vel rutrum convallis. Donec ullamcorper odio eu est auctor, quis bibendum felis facilisis. Phasellus tincidunt ipsum erat. Curabitur in dui vel tellus ultrices interdum quis vitae mauris.
</p>
</div>
</article>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment