Я считаю, что это то, что вы хотели:
Предварительный просмотр
По сути, вы можете поместить заголовок (изображение + текст) во флексбокс CSS, а все остальное - в другой флексбокс. Я отредактировал файл CSS, чтобы отразить эти изменения. Надеюсь это поможет! Дайте мне знать, если у вас есть другие вопросы.
Вот ссылка на jsfillde: https://jsfiddle.net/rzLbkw9m/
Вот HTML-файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="holiday.css" rel="stylesheet" type="text/CSS">
<title>Task 4</title>
</head>
<body>
<div class="header-container">
<div class="header-image">
<img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
</div>
<div class="header-text">
<h1>Holiday Time</h1>
<h3>Get away from it all</h3>
</div>
</div>
<div class="row">
<div class="list-column">
<ul class="list">
<li><a href="">Destinations</a></li>
<li><a href="">Deals</a></li>
<li><a href="">Flights</a></li>
<li><a href="">Cruise</a></li>
<li><a href="">Extras</a></li>
<li><a href="">Money</a></li>
</ul>
</div>
<div class="main-column">
<div class="paragraph">
<p>
<img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices libero eu eros viverra, eget tristique ipsum commodo. Phasellus tempus a erat quis hendrerit. Quisque ipsum felis, vestibulum sed finibus vel, molestie id ante. Morbi metus leo, dictum nec pellentesque nec, condimentum quis magna. Praesent est turpis, pharetra non fermentum sed, elementum ac ante. Integer sodales metus id rutrum hendrerit. Phasellus vel dapibus massa, ut aliquet arcu. Ut consectetur feugiat neque, sed sagittis dui rutrum eget. Maecenas commodo mattis enim quis lacinia. Duis in ipsum vitae mi laoreet dignissim. Nullam consequat velit at magna commodo, in fringilla enim rutrum. Cras at augue sed nisl ultricies lobortis. Praesent rhoncus lectus facilisis, rhoncus purus et, luctus eros. Nunc eros nisi, finibus sit amet urna quis, posuere ultrices mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis lorem vel neque bibendum iaculis vel id tellus. Nulla auctor elit vitae sollicitudin ultrices. Fusce molestie dictum neque, et dictum magna iaculis eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed volutpat, augue eget tincidunt feugiat, felis mi vulputate sem, eu mattis nisi quam sit amet est. Cras eu sem nec metus iaculis tempus sit amet non sapien. Aenean id odio semper purus dignissim elementum. Vestibulum faucibus mi ac odio hendrerit venenatis. Cras rhoncus diam magna, at placerat quam rutrum ut.
</p>
</div>
<div class="paragraph">
<p>
<img src="https://i.pinimg.com/474x/c6/60/24/c66024ea79527d9bbafe79ed171558b9--luxury-travel-luxury-hotels.jpg" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Quisque fringilla sodales lorem eget rhoncus. Curabitur pulvinar blandit justo nec volutpat. Mauris bibendum lobortis quam et aliquam. Nulla dictum varius est, sed fringilla ante volutpat ac. Sed tempus dolor diam, ac porta ligula sagittis ac. Morbi vitae nisi porttitor, sollicitudin urna non, tempus justo. Donec vel vulputate est. Donec aliquet vitae velit eu interdum. Quisque et facilisis diam. Duis rutrum faucibus purus at tempus. Mauris auctor tincidunt mauris, quis porttitor magna aliquam molestie. Aliquam efficitur, ex sed finibus porta, tellus diam dictum arcu, ac egestas quam enim tristique velit. Integer volutpat tortor et tortor consequat tincidunt. Donec imperdiet libero vitae sapien commodo, eget pretium libero eleifend. Sed mi felis, porttitor vel blandit laoreet, pretium a felis. Duis in erat interdum, rutrum lectus viverra, pellentesque elit. Sed imperdiet massa ullamcorper mauris tempus, at euismod nibh convallis. In sapien lorem, lacinia eget viverra sit amet, suscipit in diam. Phasellus at sapien eu orci pellentesque eleifend suscipit eu diam. Vivamus quis nibh id sem placerat rutrum. Nunc pellentesque aliquet congue.
Nam at eros elementum, venenatis nibh vel, volutpat mi. Donec varius sapien ipsum, sed sagittis ligula iaculis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pharetra ante eget purus rhoncus, ac pharetra eros fermentum. Etiam porta nec leo pretium gravida. Integer a nulla quam. In ullamcorper, nibh id efficitur porttitor, lacus mi semper nisi, id pulvinar ex leo at mi. Vestibulum placerat lacus vitae velit laoreet, in efficitur risus convallis. Nunc at sagittis dolor, eu gravida nunc. In hac habitasse platea dictumst. Mauris vitae lobortis ipsum, quis rhoncus mauris. Ut eget nibh sed dolor sollicitudin dictum efficitur ac ligula. Nullam ut nulla sit amet leo varius tincidunt.
</p>
</div>
</div>
</div>
<div class="footer"> Contact: 0191 227 1111</div>
</body>
</html>
Вот файл CSS:
/* header */
.header-container {
display: flex;
align-items: center;
border: 1px solid lightblue;
}
.header-text {
margin-left: 25px;
}
.header-text h1 {
color: purple;
font-size: 48px;
}
.header-text h3 {
margin-left: 20px;
}
/* navbar */
.list-column {
flex: 30%;
align-self: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:first-of-type {
padding-top: 2px;
}
/* main content */
.row {
margin-top: 10px;
display: flex;
align-items: flex-start;
}
.paragraph {
margin-bottom: 25px;
}
.intext-img {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin: 0px;
}
/* footer */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.8rem;
text-align: left;
background-color: #64A3D6;
}