kontur-web-courses · Firchalka · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
diff --git a/index.html b/index.html
@@ -6,6 +6,59 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Статью верстать тут-->
+<!--Статью верстать тут-->
+<nav>
+    <img src="responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/[email protected]">
+    <menu>
+        <ul>
+            <li><a>Обо мне</a></li>
+            <li><a>Проекты</a></li>
+            <li><a>Портфолио</a></li>
+            <li class="red"><a>Блог</a></li>
+            <li><a>Контакты</a></li>
+        </ul>
+    </menu>
+</nav>
+<main>
+    <h1>Замыкания в JavaScript для начинающих</h1>
+    <p>Замыкания — это одна из фундаментальных концепций JavaScript,
+        вызывающая сложности у многих новичков, знать и понимать которую
+        должен каждый JS-программист. Хорошо разобравшись с замыканиями,
+        вы сможете писать более качественный, эффективный и чистый код.
+        А это, в свою очередь, будет способствовать вашему профессиональному
+        росту.
+        <br><br>
+        Материал, перевод которого мы публикуем сегодня, посвящён рассказу о
+        внутренних механизмах замыканий и о том,
+        как они работают в JavaScript-программах.</p>
+    <h2>Что такое замыкание?</h2>
+    <p>Замыкание — это функция, у которой есть доступ к области видимости,
+        сформированной внешней по отношению к ней функции даже после того,
+        как эта внешняя функция завершила работу. Это значит, что в
+        замыкании могут храниться переменные, объявленные во внешней
+        функции и переданные ей аргументы. Прежде чем мы перейдём, собственно,
+        к замыканиям, разберёмся с понятием «лексическое окружение».</p>
+    <h2 class=one-more-h2>Что такое лексическое окружение?</h2>
+    <p>Понятие «лексическое окружение» или «статическое окружение» в JavaScript
+        относится к возможности доступа к переменным, функциям и объектам на
+        основе их физического расположения в исходном коде. Рассмотрим пример:</p>
+    <img src="./responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/[email protected]"/>
+    <p>Здесь у функции <span class="code">inner()</span> есть доступ
+        к переменным, объявленным в её собственной области видимости, в
+        области видимости функции <span class="code">outer()</span> и
+        в глобальной области видимости. Функция <span class="code">outer()</span>
+        имеет доступ к переменным, объявленным в её собственной области видимости
+        и в глобальной области видимости.
+        <br><br>
+        Цепочка областей видимости вышеприведённого кода будет выглядеть так:</p>
+    <img class="one-more-img"
+         src="./responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/[email protected]"/>
+    <p class="last-p">Обратите внимание на то, что функция <span class="code">inner()</span>
+        окружена лексическим окружением функции <span class="code">outer()</span>,
+        которая, в свою очередь, окружена глобальной областью видимости. Именно поэтому
+        функция <span class="code">inner()</span> может получить доступ к
+        переменным, объявленным в функции <span class="code">outer()</span>
+        и в глобальной области видимости.</p>
+</main>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,8 +1,128 @@
 /* Тут пиши основные стили */
-
+nav img{
+    width: 97px;
+    margin: 10px auto 10px 38px;
+}
+menu{
+    padding: 0;
+    margin: 0;
+    background-color: #faf9f8;
+    border-bottom: 1px #000000 solid;
+    border-top: 1px #000000 solid;
+}
+menu ul{
+    padding: 0px;
+    margin-left: 8px;
+    list-style: none;
+}
+menu li{
+    cursor: url("responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/[email protected]"), auto;
+    font-family:LucidaGrande;
+    font-size:24px;
+    color:#333333;
+    text-align:left;
+    line-height:36px;
+    margin-left: 30px;
+    display: inline;
+}
+menu li:hover{
+    text-decoration:underline;
+}
+.red{
+    color:#d0021b;
+}
+main{
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+    margin: 0 auto;
+    width: 700px;
+}
+h1{
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+    font-size:42px;
+    margin-bottom: 10px;
+    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;
+    margin-bottom: 11px;
+    margin-top: 55px;
+    font-size:34px;
+    color:rgba(0,0,0,0.84);
+    text-align:left;
+    line-height:39px;
+}
+.one-more-h2{
+    margin-top: 56px;
+}
+p{
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size:21px;
+    color:rgba(0,0,0,0.84);
+    text-align:left;
+    line-height:33px;
+    display: inline-block;
+    white-space: normal;
+}
+.last-p{
+    margin-bottom: 94px;
+}
+img{
+    max-width: 100%;
+    margin-top: 43px;
+    margin-bottom: 38px;
+}
+.one-more-img{
+    margin-top: 44px;
+    margin-bottom: 37px;
+}
+.code{
+    font-family: "Courier New", monospace;
+    background-color: #eceef3;
+}
 
 @media (max-width: 800px) {
-/* Тут пиши стили для мобилки.
-    Стили применятся только когда страничка будет ≤800px шириной
- */
+    menu li{ 
+        line-height:25px; 
+        font-size:20px; 
+        margin-left: 20px; 
+        margin-top: 10px; 
+        display: list-item; 
+    } 
+    menu ul{ 
+        margin: 0 auto 10px 0; 
+    } 
+    nav img{ 
+        height: 64px; 
+        width: 101px; 
+        margin: 10px auto 10px 20px; 
+    } 
+    main h1{ 
+        font-size: 26px; 
+        line-height:28px; 
+        margin-bottom: 20px; 
+    } 
+    main h2{ 
+        margin-top: 25px !important; 
+        margin-bottom: 6px; 
+        font-size: 22px; 
+        line-height:39px; 
+    } 
+    main p{ 
+        font-size: 18px; 
+        line-height:22px; 
+    } 
+    main{ 
+        width: 520px; 
+    } 
+    img{ 
+        margin-top:25px !important; 
+        margin-bottom: 25px !important; 
+    } 
+    .code{ 
+        font-size: 18px; 
+    }
+
 }