<section class="section">
<div class="section__inner">
<h2 class="section__heading">汎用人型決戦エンジニア</h2>
<div class="section__column">
<p class="section__description">
absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!
</p>
<div class="section__image">
<img src="https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
.section {
padding-block: 80px;
}
.section__inner {
padding-inline: 24px;
}
@media screen and (min-width: 768px) {
.section__inner {
max-width: 960px;
margin-inline: auto;
}
}
@media screen and (min-width: 768px) {
.section__column {
display: flex;
margin-top: 120px;
}
}
.section__heading {
text-align: center;
font-family: 'Josefin Sans', sans-serif;
font-weight: bold;
font-size: 2.4rem;
line-height: 1;
}
.section__image {
margin-top: 32px;
}
@media screen and (min-width: 768px) {
.section__image {
position: relative;
z-index: -1;
margin-top: -80px;
margin-left: -80px;
width: 50%;
}
}
.section__description {
margin-top: 24px;
font-size: 0.875rem;
line-height: 2;
}
@media screen and (min-width: 768px) {
.section__description {
width: 50%;
margin-top: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.