Я хотел бы стилизовать эти изображения, поместив их в сетку CSS. В CSS я создал два столбца и две строки для этих четырех изображений, которые будут помещены в сетку, которая, как я полагал, будет работать.
Во-вторых, я хотел, чтобы изображения имели ту же ширину и высоту, что и каждое другие, поэтому я применил width = "800" height = "800" только к каждому изображению на html. Но при этом изображения были разными для каждого окна просмотра, чего я не хотел, и это уменьшило бы отзывчивость, которую я хочу.
.about-images{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="the-life-of-a-chef">
<div class="rest-info">
<div class="restdsc pad-right animate-right">
<div class="LifeOfChefHeadline">
<h2 class="AboutHeadline">
<span class="About">About</span>
</h2>
<h1 class="headline headline-gold">The Life Of A Chef</h1>
</div>
<p>
The life of a chef is about Mauris eu tincidunt ipsum.
Proin eleifend in orci et scelerisque.
Mauris vitae turpis magna. Aenean ligula nunc, pretium eu sem vitae, ornare sodales odio.
Nunc ut erat libero. Donec posuere et dui sed lobortis.
Suspendisse id nibh ut tellus dictum ornare. Donec quis aliquam quam.
Nam et urna id neque molestie iaculis.
</p>
<a href="#" class="button contact-button">Contact</a>
</div>
<div class="about-images animate-right">
<img src="SiuLungBao.webp" width="800 height=800">
<img src="Skewer.webp" width="800" height="800">
<img src="NoodleChef.webp" width="800" height="800">
<img src="SushiMaking.webp" width="800" height="800">
</div>
</div>
</section>
</body>
</html>