<div class="container">
<div class="container__inner">
<article class="article">
<a href="#" class="article__link">
<h3 class="article__heading">汎用人型決戦エンジニア</h3>
<div class="article__thumbnail">
<img src="https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</div>
<span class="article__category">緊急</span>
<p class="article__description">
alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!alignをセンターに入れてスイッチ!
</p>
</a>
</article>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
a {
color: #000;
text-decoration: none;
}
.container {
padding-block: 80px;
}
.container__inner {
max-width: 320px;
margin-inline: auto;
padding-inline: 24px;
}
.article__link {
display: grid;
}
.article__heading {
margin-top: 32px;
text-align: center;
font-family: 'Josefin Sans', sans-serif;
font-weight: bold;
font-size: 1.5rem;
}
.article__description {
margin-top: 16px;
font-size: 0.875rem;
line-height: 2;
}
.article__thumbnail {
grid-column: 1 / 2;
grid-row: 1 / 2;
order: -1;
}
.article__category {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
align-self: start;
padding: 8px;
background-color: #46e678;
color: #fff;
font-size: 0.875rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.