kontur-web-courses · polinaionina · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026
diff --git a/848B0BFD-C857-4F1E-93BF-3822E0A81A7E@3x.png b/848B0BFD-C857-4F1E-93BF-3822E0A81A7E@3x.png
diff --git a/CA501510-E978-4377-9076-8F392B899C1B@3x.png b/CA501510-E978-4377-9076-8F392B899C1B@3x.png
diff --git a/index.html b/index.html
@@ -1,11 +1,90 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Практика верстки</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <!--Статью верстать тут-->
-</body>
-</html>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <!-- 1. Логотип на белом фоне (ограничен 700px и выровнен по центру) -->
+      <div class="header-container">
+        <img src="logo.png" alt="Логотип" class="logo" />
+      </div>
+
+      <!-- 2. Серая плашка на всю ширину экрана -->
+      <div class="nav-bg">
+        <!-- Ограничитель ширины, чтобы пункты меню стояли ровно над статьей -->
+        <div class="header-container">
+          <nav>
+            <ul>
+              <li><a href="#">Обо мне</a></li>
+              <li><a href="#">Проекты</a></li>
+              <li><a href="#">Портфолио</a></li>
+              <!-- Активная ссылка -->
+              <li><a class="active" href="#">Блог</a></li>
+              <li><a href="#">Контакты</a></li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <article>
+      <h1>Замыкания в JavaScript для начинающих</h1>
+      <p>
+        Замыкания — это одна из фундаментальных концепций JavaScript, вызывающая
+        сложности у многих новичков, знать и понимать которую должен каждый
+        JS-программист. Хорошо разобравшись с замыканиями, вы сможете писать
+        более качественный, эффективный и чистый код. А это, в свою очередь,
+        будет способствовать вашему профессиональному росту.
+      </p>
+      <p>
+        Материал, перевод которого мы публикуем сегодня, посвящён рассказу о
+        внутренних механизмах замыканий и о том, как они работают в
+        JavaScript-программах.
+      </p>
+      <h1>Что такое замыкание?</h1>
+      <p>
+        Замыкание — это функция, у которой есть доступ к области видимости,
+        сформированной внешней по отношению к ней функции даже после того, как
+        эта внешняя функция завершила работу. Это значит, что в замыкании могут
+        храниться переменные, объявленные во внешней функции и переданные ей
+        аргументы. Прежде чем мы перейдём, собственно, к замыканиям, разберёмся
+        с понятием «лексическое окружение».
+      </p>
+      <h1>Что такое лексическое окружение?</h1>
+      <p>
+        Понятие «лексическое окружение» или «статическое окружение» в JavaScript
+        относится к возможности доступа к переменным, функциям и объектам на
+        основе их физического расположения в исходном коде. Рассмотрим пример:
+        <img
+          src="CA501510-E978-4377-9076-8F392B899C1B@3x.png"
+          width="700"
+          height="727"
+        />
+      </p>
+      <p>
+        Здесь у функции <code>inner()</code> есть доступ к переменным,
+        объявленным в её собственной области видимости, в области видимости
+        функции <code>outer()</code> и в глобальной области видимости. Функция
+        <code>outer()</code> имеет доступ к переменным, объявленным в её
+        собственной области видимости и в глобальной области видимости. Цепочка
+        областей видимости вышеприведённого кода будет выглядеть так:
+        <img
+          class="image-last"
+          src="848B0BFD-C857-4F1E-93BF-3822E0A81A7E@3x.png"
+          width="700"
+          height="923"
+        />
+      </p>
+      <p>
+        Обратите внимание на то, что функция <code>inner()</code> окружена
+        лексическим окружением функции <code>outer()</code>, которая, в свою
+        очередь, окружена глобальной областью видимости. Именно поэтому функция
+        <code>inner()</code> может получить доступ к переменным, объявленным в
+        функции <code>outer()</code> и в глобальной области видимости.
+      </p>
+    </article>
+  </body>
+</html>
diff --git a/logo.png b/logo.png
diff --git a/pointer.png b/pointer.png
diff --git a/...7-494E-BE52-747EE607EC62/1774967951275-019d4455-2a8a-70f8-96b9-101d1c91c792.png b/...7-494E-BE52-747EE607EC62/1774967951275-019d4455-2a8a-70f8-96b9-101d1c91c792.png
diff --git a/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/logo.png b/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/logo.png
diff --git a/styles.css b/styles.css
@@ -1,8 +1,161 @@
-/* Тут пиши основные стили */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
+body {
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+header {
+  background-color: transparent;
+}
+
+.header-container {
+  width: 700px;
+  margin: auto;
+}
+
+.logo {
+  width: 97px;
+  height: 64px;
+  display: block;
+  margin: 30px 0;
+}
+
+.nav-bg {
+  background-color: #f5f5f5;
+  width: 100%;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  gap: 30px;
+  padding: 15px 0;
+}
+
+nav ul li a {
+  font-family:
+    "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial,
+    sans-serif;
+  font-size: 24px;
+  color: #333333;
+  line-height: 36px;
+  text-decoration: none;
+}
+
+nav ul li a:hover {
+  text-decoration: underline;
+  cursor:
+    url("pointer.png") 0 0,
+    pointer;
+}
+
+nav ul li a.active {
+  color: #ff0000;
+  text-decoration: none;
+}
+
+.has-pointer {
+  position: relative;
+}
+
+.hovered {
+  text-decoration: underline;
+}
+
+.pointer {
+  position: absolute;
+  top: 22px;
+  left: 64px;
+  width: 21px;
+  height: 22px;
+  z-index: 10;
+  pointer-events: none;
+
+  background: #ffffff;
+  border: 1px solid #000000;
+  box-shadow: 0 1px 2px 0 #000000;
+}
+
+article {
+  width: 700px;
+  margin: auto;
+  padding-top: 40px;
+}
+
+h1 {
+  font-family:
+    "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial,
+    sans-serif;
+  font-size: 42px;
+  line-height: 1.05;
+  margin-bottom: 20px;
+  margin-top: 55px;
+}
+
+p {
+  font-size: 21px;
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+  line-height: 1.5;
+  margin-top: 20px;
+  margin-bottom: 15px;
+}
+
+code {
+  font-family: "Courier New", monospace;
+  background-color: #f0f0f0;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
 
 @media (max-width: 800px) {
-/* Тут пиши стили для мобилки.
-    Стили применятся только когда страничка будет ≤800px шириной
- */
-}
+  .header-container {
+    width: 100%;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  article img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  nav {
+    width: 100%;
+  }
+
+  nav ul {
+    flex-direction: column;
+    padding: 20px;
+  }
+
+  h1 {
+    font-size: 26px;
+    margin: 20px 0px;
+    line-height: 28px;
+  }
+
+  h2 {
+    font-size: 22px;
+    margin: 6px 0px;
+    line-height: 39px;
+  }
+
+  p {
+    font-size: 18px;
+    margin: 6px 0px;
+    line-height: 22px;
+  }
+
+  section,
+  section img {
+    margin: 25px 20px;
+  }
+
+  .image-last {
+    display: none;
+  }
+}