kontur-web-courses · LEvGaP · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
diff --git a/index.html b/index.html
@@ -1,11 +1,94 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Практика верстки</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <!--Статью верстать тут-->
+        <header>
+            <div class="logo">
+                <img class = "desktop" id ="logo_desk"
+                     src="responsive-design\2744EFD6-B878-4DCB-B0D5-526F1B233733\[email protected]"
+                     alt="logo"
+                     width="97px" height="64px">
+                <img class = "mobile" id ="logo_mobile"
+                     src="responsive-design\2744EFD6-B878-4DCB-B0D5-526F1B233733\[email protected]"
+                     alt="logo"
+                     width="101px" height="64px">
+            </div>
+            <nav>
+                <ul>
+                    <li><a>Обо мне</a></li>
+                    <li><a>Проекты</a></li>
+                    <li><a>Портфолио</a></li>
+                    <li><a>Блог</a></li>
+                    <li><a>Контакты</a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <div class="block" id="b1">
+            <h1>Замыкания в JavaScript для начинающих</h1>
+            <p class="paragraph">Замыкания — это одна из фундаментальных концепций JavaScript, вызывающая сложности у многих новичков,
+                знать и понимать которую должен каждый JS-программист. Хорошо разобравшись с замыканиями, вы сможете писать более
+                качественный, эффективный и чистый код. А это, в свою очередь, будет способствовать вашему профессиональному росту.
+                Материал, перевод которого мы публикуем сегодня, посвящён рассказу о внутренних механизмах замыканий и о том, как они
+                работают в JavaScript-программах.
+            </p>
+        </div>
+        <div class="block" id='b2'>
+            <h2>Что такое замыкание?</h2>
+            <p class="paragraph">
+                Замыкание — это функция, у которой есть доступ к области видимости, сформированной внешней по отношению к ней функции даже
+                после того, как эта внешняя функция завершила работу. Это значит, что в замыкании могут храниться переменные,
+                объявленные во внешней функции и переданные ей аргументы. Прежде чем мы перейдём, собственно, к замыканиям,
+                разберёмся с понятием «лексическое окружение».
+            </p>
+        </div>
+
+        <div class="block" id="b3">
+            <h2>Что такое лексическое окружение?</h2>
+            <p class="paragraph">
+            Понятие «лексическое окружение» или «статическое окружение» в JavaScript относится к возможности доступа к переменным,
+            функциям и объектам на основе их физического расположения в исходном коде. Рассмотрим пример:
+        </p>
+        </div>
+        <div class="block" id="b4">
+            <img class="desktop"
+                 src="article-design\2744EFD6-B878-4DCB-B0D5-526F1B233733\[email protected]" alt="code">
+            <img class="mobile"
+                 src="article-design\2744EFD6-B878-4DCB-B0D5-526F1B233733\[email protected]" alt="code">
+        </div>
+        <div class="block" id="b5">
+            <p class="paragraph">
+                Здесь у функции <span>inner()</span> есть доступ к переменным, объявленным в её собственной области видимости,
+                в области видимости функции <span>outer()</span> и в глобальной области видимости.
+                Функция <span>outer()</span> имеет доступ к переменным, объявленным в её собственной области видимости
+                и в глобальной области видимости.
+                Цепочка областей видимости вышеприведённого кода будет выглядеть так:
+            </p>
+        </div>
+        <div class="block" id="b6">
+            <img class="desktop"
+                 src="article-design\2744EFD6-B878-4DCB-B0D5-526F1B233733\[email protected]" alt="code">
+            <img class="mobile"
+                 src="article-design\2744EFD6-B878-4DCB-B0D5-526F1B233733\[email protected]" alt="code">
+        </div>
+        <div class="block" id="b7">
+            <p class="paragraph">
+                Обратите внимание на то, что функция <span>inner()</span> окружена лексическим окружением функции
+                <span>outer()</span>, которая, в свою очередь, окружена глобальной областью видимости.
+                Именно поэтому функция <span>inner()</span> может получить
+                доступ к переменным, объявленным в функции <span>outer()</span> и в глобальной области видимости.
+            </p>
+        </div>
+    </body>
 <head>
     <meta charset="UTF-8">
     <title>Практика верстки</title>
     <link rel="stylesheet" href="styles.css">
 </head>
-<body>
-    <!--Статью верстать тут-->
-</body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,8 +1,136 @@
 /* Тут пиши основные стили */
 
+* {
+    margin: 10px auto;
+}
+
+.mobile {
+    display: none;
+}
+
+.desktop {
+    display: unset;
+}
+
+nav {
+    border-top: 1px #b6b6b6 solid;
+    border-bottom: 1px #b6b6b6 solid;
+    background-color: #faf9f8;
+    height: auto;
+    padding: 28px;
+}
+
+/*a {
+    text-decoration: none;
+}*/
+
+
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:visited {
+    color: red;
+}
+
+.logo {
+    position: relative;
+    left: 38px;
+    margin: 0;
+}
+
+nav li {
+    position: relative;
+    right: 38px;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+    font-size:24px;
+    color:#333333;
+    text-align:left;
+    line-height:36px;
+    display: inline;
+    margin: auto 15px;
+}
+
+nav ul {
+    list-style-type: none;
+}
+
+h1 {
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+    font-size:42px;
+    color:rgba(0,0,0,0.84);
+    text-align:left;
+    line-height:44px;
+}
+
+h2 {
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+    font-size:34px;
+    color:rgba(0,0,0,0.84);
+    text-align:left;
+    line-height:39px;
+}
+
+.paragraph {
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+    font-size:21px;
+    color:rgba(0,0,0,0.84);
+    text-align:left;
+    line-height:33px;
+}
+.block {
+    margin: 55px auto;
+    width: 700px;
+}
+
+.block span {
+    background: #f2f2f2;
+    font-family: "Courier New", monospace;
+}
+
+.block img {
+    width: 700px;
+    margin: 43px auto 37px;
+}
 
 @media (max-width: 800px) {
-/* Тут пиши стили для мобилки.
-    Стили применятся только когда страничка будет ≤800px шириной
- */
+    .mobile {
+        display: unset;
+    }
+
+    .block img {
+        width: 520px;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .block {
+        margin: 25px auto;
+        width: 520px;
+    }
+
+    nav li {
+        display: block;
+        font-size:20px;
+        line-height:25px;
+        margin: 9px auto;
+    }
+
+    h1 {
+        font-size:26px;
+        line-height:28px;
+    }
+
+    h2 {
+        font-family:LucidaGrande-Bold;
+        font-size:22px;
+    }
+
+    .paragraph {
+        font-size:18px;
+        line-height:22px;
+    }
 }