<a href="#" class="card__link">
<div class="card">
<figure class="card__image-wrapper">
<img src="https://db3pap003files.storage.live.com/y4mZ8ygDqUCSomMQTdGQiPIwPv0mmNJn5dCHBfwZOlAlegMa8MJ0wtxdAmGa7LUj6oFMYlcMyt6nPXpTwp_ln89assTtB7grYyA3vGi-lqjo1m9zZPn2Rv_w-tuJCon5wQv9CuY86L3KR9Scv1niFxm61lgDHkQ-Fkw9DI2dOWNr4RU-muWWHmvnRCccAFmK3i7?width=256&height=170&cropmode=none" class="card__image">
</figure>
<div class="card__meta">
<div class="area">
<span class="area__title">エリア:</span>
<span class="area__info">中東</span>
</div>
<div class="feature">
<span class="feature__title">特長:</span>
<span class="feature__info">酸味</span>
</div>
</div>
<div class="card__body">
<h3 class="card__title">エチオピア</h3>
</div>
</div>
</a>
.card {
box-shadow: 0 3px 6px rgba(0,0,0,.16);
margin-right: 10px;
display: block;
width: 200px;
& > * {
margin-bottom: 10px;
}
}
.card__link {
text-decoration: none;
color: #000;
}
.card__image-wrapper {
position: relative;
padding-top: 56.25%;
overflow: hidden;
margin: 0 0 10px;
}
.card__image {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.card__meta {
& > * {
margin-bottom: 5px;
}
& > *:last-child {
margin-bottom: 0;
}
}
.area {
padding: 5px 10px;
font-size: .875em;
}
.area__title {
display: inline-block;
width: 40%;
}
.area__info {
padding: 2px 10px;
background-color: #6088C6;
border: 1px solid #6088C6;
border-radius: 30px;
color: #fff;
transition: .35s;
&:hover,
&:focus {
background-color: #fff;
color: #6088C6;
}
}
.feature {
@extend .area;
}
.feature__title {
@extend .area__title;
}
.feature__info {
@extend .area__info;
background-color: #37AB9D;
border: 1px solid #37AB9D;
&:hover,
&:focus {
background-color: #fff;
color: #37AB9D;
}
}
.card__body {
padding: 0px 15px 10px;
text-align: center;
& > *:last-child {
margin-bottom: 0;
}
}
.card__title {
margin-top: 0;
font-weight: bold;
color: #777;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.