Надо немного отрефакторить код, что бы он был семантически верным.
Замени нужные теги на семантические.
Для заголовком используй теги h1
, h2
и h3
в порядке уменьшения размеров блока.
У элементом при замене тегов должен сохранится класс.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!DOCTYPE html>
<html>
<head>
<title>NEWS</title>
<style>
body {
padding: 0 60px;
}
.logo {
max-width: 60px;
}
</style>
</head>
<body>
<img class="logo" src="logo.png" alt="logo">
<div class="news-container">
<p class="container-header">Top stories</p>
<div class="news-block">
<p class="block-header">Politics</p>
<div class="story">
<p class="story-header">Politics story 1</p>
<p class="story-content">Lorem ipsum</p>
</div>
<div class="story">
<p class="story-header">Politics story 2</p>
<p class="story-content">Lorem ipsum</p>
</div>
</div>
<div class="news-block">
<p class="block-header">Sport</p>
<div class="story">
<p class="story-header">Sport story 1</p>
<p class="story-content">Lorem ipsum</p>
</div>
<div class="story">
<p class="story-header">Sport story 2</p>
<p class="story-content">Lorem ipsum</p>
</div>
</div>
</div>
</body>
</html>