<div class="row">
<div class="col-md-4">
<a href="#" class="access-card-bg"
style="background-image: url('https://userclub.opendatasoft.com/assets/theme_image/access-cards.jpg')">
<div class="access-card">
<div class="access-card-content">
<h3 class="access-card-pretitle">Éphémère</h3>
<h2 class="access-card-title">Opération jardins éphémères</h2>
<h4 class="access-card-subtitle">
Liste et carte des jardins éphémères 2021
</h4>
<div class="access-card-description">
<h4>Catégories</h4>
<p>Politique publique : Biodiversité</p>
<p>Type : Catalogue</p>
<p>Support : Portail opendata</p>
<p>Développement : Direction du Numérique - Orléans Métropole</p>
</div>
</div>
<div class="access-card-button">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
:root {
--secondary-color: #142e7b;
}
.access-card-bg {
background-repeat: no-repeat;
background-size: cover;
border-radius: 6px;
box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.13);
transition: all 0.3s;
color: var(--text);
display: flex;
height: 100%;
justify-content: center;
margin-bottom: 20px;
}
.access-card-bg:hover {
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
text-decoration: none;
}
.access-card {
border-radius: 10px;
background-color: #fff;
margin: 200px 26px 26px;
padding: 26px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.access-card-pretitle {
text-transform: uppercase;
color: var(--secondary-color);
opacity: 0.7;
font-weight: 400;
margin: 0px;
font-size: 12px;
}
.access-card-title {
font-weight: 400;
margin: 10px 0px;
font-size: 22px;
}
.access-card-subtitle {
font-size: 16px;
font-weight: 400;
margin: 0px 0px 10px 0px;
}
.access-card-description {
background-color: var(--boxes-background);
padding: 10px;
}
.access-card-description h4 {
font-weight: 700;
margin: 5px 0px 0px 0px;
}
.access-card-description p {
margin: 5px 0px;
}
.access-card-button {
color: var(--secondary-color);
font-size: 16px;
font-weight: 700;
display: flex;
justify-content: right;
align-items: center;
width: 100%;
padding: 26px 0px 0px 26px;
}
.access-card-button i {
padding-left: 5px;
transition: all 0.3s;
}
.access-card:hover .access-card-button i {
transform: translateX(5px);
}