kontur-web-courses · vbolgarskay · Apr 1, 2025 · Apr 1, 2025
diff --git a/index.html b/index.html
@@ -1,11 +1,94 @@
 <!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 class="page-header">
+        <div class="logo-block">
+            <img src="responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/FF01C60E-3379-4ED9-B65C-DE7F425CF688@1x.png" alt="HTML5 & CSS3">
+        </div>
+        <hr class="header-line">
+        <nav class="main-nav">
+            <ul>
+                <li><a href="#">Обо мне</a></li>
+                <li class="hover">
+                    <a href="#">
+                        Проекты
+                    </a>
+                </li>
+                <li><a href="#">Портфолио</a></li>
+                <li class="active"><a href="#">
+                    <span style="color: #800000;">Блог</span>
+                </a></li>
+                <li><a href="#">Контакты</a></li>
+            </ul>
+        </nav>
+        <hr class="header-line">
+    </header>
+    <article class="article-container">
+          <h1>Замыкания в JavaScript для начинающих</h1>
+        <p>
+          Замыкания — это одна из фундаментальных концепций JavaScript,
+          вызывающая сложности у многих новичков, знать и понимать которую
+          должен каждый JS-программист. Хорошо разобравшись с замыканиями, вы
+          сможете писать более качественный, эффективный и чистый код. А это, в
+          свою очередь, будет способствовать вашему профессиональному росту.
+        <br/>
+        <br/>
+          Материал, перевод которого мы публикуем сегодня, посвящён рассказу о
+          внутренних механизмах замыканий и о том, как они работают в
+          JavaScript-программах.
+        </p>
+        <h2>Что такое замыкание?</h2>
+        <p>
+          Замыкание — это функция, у которой есть доступ к области видимости,
+          сформированной внешней по отношению к ней функции даже после того, как
+          эта внешняя функция завершила работу. Это значит, что в замыкании
+          могут храниться переменные, объявленные во внешней функции и
+          переданные ей аргументы. Прежде чем мы перейдём, собственно, к
+          замыканиям, разберёмся с понятием «лексическое окружение».
+        </p>
+        <h2>Что такое лексическое окружение?</h2>
+        <p>
+          Понятие «лексическое окружение» или «статическое окружение» в
+          JavaScript относится к возможности доступа к переменным, функциям и
+          объектам на основе их физического расположения в исходном коде. <br />
+          Рассмотрим пример:
+        </p>
+        <img
+          src="article-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/CA501510-E978-4377-9076-8F392B899C1B@2x.png"
+          alt="Пример замыкания 1"
+          class="article-image"
+        />
+        <p>
+          Здесь у функции <code>inner()</code> есть доступ к переменным,
+          объявленным в её собственной области видимости, в области видимости
+          функции <code>outer()</code> и в глобальной области видимости. Функция
+          <code>outer()</code>
+          имеет доступ к переменным, объявленным в её собственной области
+          видимости и в глобальной области видимости.
+        </p>
+
+        <p>
+          Цепочка областей видимости вышеприведённого кода будет выглядеть так:
+        </p>
+        <img
+          src="article-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/848B0BFD-C857-4F1E-93BF-3822E0A81A7E@2x.png"
+          alt="Пример замыкания 2"
+          class="article-image"
+        />
+        <p>
+          Обратите внимание на то, что функция <code>inner()</code> окружена
+          лексическим окружением функции <code>outer()</code>, которая, в свою
+          очередь, окружена глобальной областью видимости. Именно поэтому
+          функция <code>inner()</code> может получить доступ к переменным,
+          объявленным в функции <code>outer()</code> и в глобальной области
+          видимости.
+        </p>
+      </section>
+    </article>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -1,8 +1,133 @@
-/* Тут пиши основные стили */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva,
+    Arial, sans-serif;
+}
+p,
+article,
+section {
+  font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
+}
+code,
+pre {
+  font-family: 'Courier New', monospace;
+  background-color: #f0f0f0;
+}
 
+h1 {
+  font-size: 42px;
+  line-height: 44px;
+  margin-bottom: 10px;
+}
+h2 {
+  font-size: 34px;
+  margin-bottom: 10px;
+  line-height:39px;
+}
+
+p {
+  font-size: 21px;
+  line-height: 33px;
+  margin: 0;
+  margin-bottom: 55px;
+}
+
+body {
+  background-color: #fff;
+}
+
+li{
+    list-style-type: none;
+}
+
+a:hover{
+    text-decoration: underline;
+}
+
+.article-container {
+  width: 700px;
+  margin: 0 auto;
+}
+.article-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 20px 0;
+}
+pre {
+  background-color: #f4f4f4;
+  padding: 10px;
+  overflow-x: auto;
+}
+
+.page-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f8f8f8;
+  padding: 20px 0;
+}
+
+.logo-block img {
+  max-width: 200px;
+  height: auto;
+}
+
+.header-line {
+  width: 90%;
+  border: 1px solid #ddd;
+}
+
+.main-nav ul {
+  list-style: none;
+  display: flex;
+  padding: 0;
+  margin: 10px 0;
+}
+
+.main-nav ul li {
+  margin: 0 15px;
+}
+
+.main-nav ul li a {
+  text-decoration: none;
+  color: #333;
+  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva,
+    Arial, sans-serif;
+}
+
+.main-nav ul li a:hover {
+  color: #007bff;
+}
+
+.main-nav ul li.active a {
+  font-weight: bold;
+  color: #800000;
+}
 
 @media (max-width: 800px) {
-/* Тут пиши стили для мобилки.
-    Стили применятся только когда страничка будет ≤800px шириной
- */
-}
+  .page-header {
+    padding: 10px 0;
+  }
+
+  .main-nav ul {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .main-nav ul li {
+    margin: 10px 0;
+  }
+
+  .logo-block img {
+    max-width: 150px;
+  }
+
+  .article-container {
+    width: 90%;
+  }
+}