footer

Author: zhuk1707

blocks/index.css

@@ -72,5 +72,23 @@
   }
 }
 
+.footer {
+  margin-top: 40px;
+  padding: 30px 0;
+  text-align: center;
+
+  &__link {
+    color: inherit;
+    font-size: inherit;
+    text-decoration: underline;
+    font-family: 'Roboto Mono', monospace;
+
+    transition: .3s ease;
+    &:hover {
+      text-decoration: none
+    }
+  }
+}
+
 
 

blocks/index.css.map

@@ -36,27 +36,31 @@ <h1 class="main__title">Small JavaScript Projects</h1>
                     </div>
 
                     <div class="cards-block__item">
-                        <a href="pages/counter.html" class="cards-block__image">
+                        <a href="pages/sidebar.html" class="cards-block__image">
                             <img src="images/main-page/03.png" alt="Reviews">
                         </a>
                         <a href="pages/counter.html"
                            class="cards-block__title">Sidebar</a>
-                        <p class="cards-block__subtitle">...</p>
+                        <p class="cards-block__subtitle">Side menu. User can
+                            open and close it at any time.
+                        </p>
                     </div>
 
                     <div class="cards-block__item">
                         <a href="pages/counter.html" class="cards-block__image">
                             <img src="images/main-page/04.png" alt="Reviews">
                         </a>
-                        <a href="pages/counter.html" class="cards-block__title">Reviews</a>
+                        <a href="pages/counter.html"
+                           class="cards-block__title">Modal</a>
                         <p class="cards-block__subtitle">...</p>
                     </div>
 
                     <div class="cards-block__item">
                         <a href="pages/counter.html" class="cards-block__image">
                             <img src="images/main-page/05.png" alt="Reviews">
                         </a>
-                        <a href="pages/counter.html" class="cards-block__title">Reviews</a>
+                        <a href="pages/counter.html"
+                           class="cards-block__title">Video</a>
                         <p class="cards-block__subtitle">...</p>
                     </div>
 
@@ -72,15 +76,17 @@ <h1 class="main__title">Small JavaScript Projects</h1>
                         <a href="pages/counter.html" class="cards-block__image">
                             <img src="images/main-page/07.png" alt="Reviews">
                         </a>
-                        <a href="pages/counter.html" class="cards-block__title">Reviews</a>
+                        <a href="pages/counter.html"
+                           class="cards-block__title">Countdown</a>
                         <p class="cards-block__subtitle">...</p>
                     </div>
 
                     <div class="cards-block__item">
                         <a href="pages/counter.html" class="cards-block__image">
                             <img src="images/main-page/08.png" alt="Reviews">
                         </a>
-                        <a href="pages/counter.html" class="cards-block__title">Reviews</a>
+                        <a href="pages/counter.html"
+                           class="cards-block__title">Lorem Generator</a>
                         <p class="cards-block__subtitle">...</p>
                     </div>
 
@@ -89,6 +95,12 @@ <h1 class="main__title">Small JavaScript Projects</h1>
             </div>
         </div>
     </main>
+
+    <footer class="footer">
+        <div class="container">
+            <a class="footer__link" href="https://github.com/zhuk1707/Small_JavaScript_Projects">GitHub</a>
+        </div>
+    </footer>
 </div>
 
 <script src="scripts/counter.js"></script>