<div class="wrapper-box">
<a class="box-img" href="#"><img src="http://placehold.jp/160x120.png" alt="" width="160" height="120"></a>
<div class="box-info">
<a class="box-title" href="#">Title Text</a>
<div class="box-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="box-linkbox">
<a class="box-button box-color1" href="#">buttom</a>
</div>
</div>
</div>
<div class="wrapper-box">
<a class="box-img" href="#"><img src="http://placehold.jp/160x120.png" alt=""></a>
<div class="box-info">
<a class="box-title" href="#">Title Text</a>
<div class="box-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="box-linkbox">
<a class="box-button box-color1" href="#">buttom1</a>
<a class="box-button box-color2" href="#">buttom2</a>
</div>
</div>
</div>
.wrapper-box {
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 1.5em;
padding: 8px;
overflow: hidden;
}
.box-img {
float: left;
padding-right: 10px;
width: 40%;
max-width: 160px;
}
.box-img img {
width: 100%;
height: auto;
}
.box-title {
display: block;
font-size: 120%;
overflow: hidden;
}
.box-desc {
clear: both;
font-size: 90%;
overflow: hidden;
}
.box-linkbox {
display: flex;
border-spacing: 8px 0;
justify-content: center;
padding: 8px 0 0;
width: 100%;
}
.box-button {
text-align: center;
border-radius: 4px;
padding: 8px 0;
color: #fff;
margin: 0 10px 0 0;
text-decoration: none;
width: 100%;
max-width: 320px;
}
.box-button:last-child {
margin: 0;
}
.box-button:hover {
opacity: 0.5;
}
.box-color1{
background: #f90;
}
.box-color2 {
background: #f00;
}
@media (min-width: 415px) {
.box-desc {
clear: none;
}
}
@media (min-width: 569px) {
.box-info {
overflow: hidden;
}
.box-linkbox {
justify-content: flex-start;
max-width: 480px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.