<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Header и Footer</title>
</head>
<body>
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<div id="menu"> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
</header>
<footer>
<p>Все права защищены</p>
</footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Header и Footer</title>
</head>
<body>
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<footer>
<p>Все права защищены</p>
</footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
</head>
<body>
<header>
<img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<h1>Цифра — практические курсы по программированию</h1>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
</main>
<footer>
<p>Все права защищены</p>
</footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
</head>
<body>
<header>
<img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<h1>Цифра — практические курсы по программированию</h1>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
<section>
<h2>Преимущества</h2>
<ul>
<li>Много теории</li>
<li>Много практики</li>
<li>Сильные наставники</li>
</ul>
</section>
</main>
<footer>
<p>Все права защищены</p>
</footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
</head>
<body>
<header>
<img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<h1>Цифра — практические курсы по программированию</h1>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
<section> <!-- Добавили раздел, подходящий по смыслу -->
<h2>Преимущества</h2> <!-- Добавили заголовок раздела -->
<ul>
<li>Много теории</li>
<li>Много практики</li>
<li>Сильные наставники</li>
</ul>
</section>
<section> <!-- Добавили раздел, подходящий по смыслу -->
<h2>Новости</h2> <!-- Добавили заголовок раздела -->
<article> <!-- Добавили независимый раздел новостей -->
<h3>Новость 1</h3> <!-- Обязательный заголовок! -->
<p>Текст новости 1</p>
<a href="#">Подробнее</a>
</article>
<article> <!-- Добавили независимый раздел новостей -->
<h3>Новость 2</h3> <!-- Обязательный заголовок! -->
<p>Текст новости 2</p>
<a href="#">Подробнее</a>
</article>
<article> <!-- Добавили независимый раздел новостей -->
<h3>Новость 3</h3> <!-- Обязательный заголовок! -->
<p>Текст новости 3</p>
<a href="#">Подробнее</a>
</article>
</section>
</main>
<footer>
<p>Все права защищены</p>
</footer>
</body>
</html>
<main>Основная часть</main>
<aside>Вспомогательная часть</aside>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
</head>
<body>
<header>
<img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<aside> <!-- Боковая панель (сайдбар) -->
<nav> <!-- Дополнительное меню страницы -->
<ul>
<li><a href="/service-1/">Услуга 1</a></li>
<li><a href="/service-2/">Услуга 2</a></li>
<li><a href="/service-3/">Услуга 3</a></li>
</ul>
</nav>
</aside>
<main>
<h1>Цифра — практические курсы по программированию</h1>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
<section> <!-- Добавили раздел, подходящий по смыслу -->
<h2>Преимущества</h2> <!-- Добавили заголовок раздела -->
<ul>
<li>Много теории</li>
<li>Много практики</li>
<li>Сильные наставники</li>
</ul>
</section>
<section> <!-- Добавили раздел, подходящий по смыслу -->
<h2>Новости</h2> <!-- Добавили заголовок раздела -->
<article> <!-- Добавили независимый раздел новостей -->
<h3>Новость 1</h3> <!-- Обязательный заголовок! -->
<p>Текст новости 1</p>
<a href="#">Подробнее</a>
</article>
<article> <!-- Добавили независимый раздел новостей -->
<h3>Новость 2</h3> <!-- Обязательный заголовок! -->
<p>Текст новости 2</p>
<a href="#">Подробнее</a>
</article>
<article> <!-- Добавили независимый раздел новостей -->
<h3>Новость 3</h3> <!-- Обязательный заголовок! -->
<p>Текст новости 3</p>
<a href="#">Подробнее</a>
</article>
</section>
</main>
<footer>
<p>Все права защищены</p>
</footer>
</body>
</html>
<div class="shopping-cart">
<h2>Корзина</h2>
<ul>
<li>
<p><a href=""><strong>Кроссовки Convers</strong></a>: 5000р.</p>
<img src="https://cdn.pixabay.com/photo/2013/07/12/18/20/shoes-153310_960_720.png" alt="Кроссовки Convers">
</li>
<li>
...
</li>
</ul>
<p>Итого: 10 500р.</p>
</div>
<!--START OF HEADER-->
<div>
<h1>Основной заголовок</h1>
<h2>Очень краткое введение на странице</h2>
<hr>
<h3>Ссылки на социальные сети</h3>
<hr>
</div>
<!--END OF HEADER-->
<!--START OF CONTENT-->
<div>
<p>
Первый блок текста
</p>
<p>
Второй блок текста
</p>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</div>
<!--END OF CONTENT-->
<!--START OF FOOTER-->
<div>
<hr>
<p>
Авторские права и контактная информация
</p>
</div>
<!--END OF FOOTER-->
.body
{
font-family: "Arial",sans-serif;
font-size: 14px;
line-height: 20px;
margin: 0;
position: relative;
border-radius: 4px;
padding: 30px 30px;
width: 500px;
}
.header
{
position: relative;
padding: 16px 15px 10px;
border-radius: 4px;
background-color: #DFEEF3;
border: 2px solid #66A5AD;
width: 446px;
margin-bottom: 10px;
}
.main
{
position: relative;
padding: 16px 15px 10px;
border-radius: 4px;
background-color: #DFEEF3;
border: 2px solid #66A5AD;
width: 446px;
display: grid;
grid-template-areas: "nav nav sidebar" "columns columns sidebar";
margin-bottom: 10px;
}
.nav
{
position: relative;
padding: 16px 15px 10px;
border-radius: 4px;
background-color: #C9EED4;
border: 2px solid #77CD86;
grid-area: nav;
margin-right: 10px;
margin-bottom: 10px;
}
.section
{
position: relative;
padding: 16px 15px 10px;
border-radius: 4px;
background-color: #C9EED4;
border: 2px solid #77CD86;
grid-area: columns;
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 0;
}
.aside
{
position: relative;
padding: 16px 15px 10px;
border-radius: 4px;
background-color: #C9EED4;
border: 2px solid #77CD86;
grid-area: sidebar;
}
.footer{
position: relative;
padding: 16px 15px 10px;
border-radius: 4px;
background-color: #DFEEF3;
border: 2px solid #66A5AD;
width: 446px;
}
p
{
position: relative;
padding: 16px 15px 10px;
border-radius: 4px;
background-color: #FFF4EA;
border: 2px solid #A67646;
margin-bottom: 15px;
margin-right: 10px;
}