Add Footer section

nick33r · Oct 23, 2024 · 489e16f · 489e16f
1 parent 8f4af3e
commit 489e16f
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -68,7 +68,7 @@ <h2 class="cover__description-text">
 
       <section class="lots">
         <h2 class="lots__heading heading">Лоты</h2>
-        <ul class="lots__card-list">
+        <ul class="lots__card-list list">
 
           <li class="lots__card-list-item">
             <a class="card-link" href="#0">
@@ -123,6 +123,45 @@ <h2 class="about__title heading">Об аукционе</h2>
       </section>
     </main>
 
-    <footer class="footer"></footer>
+    <footer class="footer">
+      <address class="address footer__address">
+        <a class="phone-number header__link" href="tel:+99995555555">+9 999 555 5555</a><br />
+        <a class="mailto header__link" href="mailto:[email protected]">[email protected]</a><br />
+        наб. Принсенграхт 263-<br />
+        265, Амстердам
+      </address>
+
+      <nav class="footer__menu">
+        <ul class="footer__menu-list list">
+          <li class="footer__menu-list-item">
+            <a class="footer__menu-link footer__menu-link_active" href="#0">главная</a>
+          </li>
+          <li class="footer__menu-list-item">
+            <a class="footer__menu-link" href="#0">посмотреть лоты</a>
+          </li>
+          <li class="footer__menu-list-item">
+            <a class="footer__menu-link" href="#0">об аукционе</a>
+          </li>
+        </ul>
+      </nav>
+
+      <ul class="footer__social-list list">
+        <li class="footer__social-list-item">
+          <a class="footer__social-link" href="#0">
+            <div class="footer__social-icon yt-icon"></div>
+          </a>
+        </li>
+        <li class="footer__social-list-item">
+          <a class="footer__social-link" href="#0">
+            <div class="footer__social-icon vk-icon"></div>
+          </a>
+        </li>
+        <li class="footer__social-list-item">
+          <a class="footer__social-link" href="#0">
+            <div class="footer__social-icon pinterest-icon"></div>
+          </a>
+        </li>
+      </ul>
+    </footer>
   </body>
 </html>
diff --git a/styles/global.css b/styles/global.css
@@ -26,11 +26,6 @@ blockquote {
   padding: 0;
 }
 
-div {
-  margin: 0;
-  padding: 0;
-}
-
 a {
   color: inherit;
   text-decoration: none;

diff --git a/styles/style.css b/styles/style.css
@@ -1,3 +1,35 @@
+/* Общие правила страницы */
+
+.list {
+  list-style: none;
+}
+
+.address {
+  font-style: normal;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  z-index: 1;
+}
+
+.heading {
+  text-transform: uppercase;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 47px;
+}
+
+.text {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 24px; 
+}
+
 /* Верстка хедера */
 
 .header {
@@ -34,12 +66,10 @@
 
 .header__link {
   text-decoration: underline;
-  text-underline-offset: 5px;
-  /* border-bottom: 1px solid; */
+  text-underline-offset: 4px;
 }
 
 .header__link_active {
-  /* border: none; */
   list-style: none;
   text-decoration: none;
 }
@@ -52,10 +82,9 @@
   width: 135px;
 }
 
-.address {
+.header__address {
   grid-column: 6 / -1;
   justify-self: start;
-  font-style: normal;
 }
 
 /* Секция с основным контентом */
@@ -73,15 +102,6 @@
   color: #fff;
 }
 
-.overlay {
-  background-color: rgba(0, 0, 0, 0.6);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  inset: 0;
-  z-index: 1;
-}
-
 .above-the-overlay {
 
 /* Селектор для поднятия элементов над оверлеем.
@@ -134,6 +154,7 @@
   font-size: 22px;
   text-align: end;
   word-spacing: 0.8em;
+  /* letter-spacing: 0.09em; */
 }
 
 .bet-button {
@@ -160,13 +181,6 @@
   margin-bottom: 27px;
 }
 
-.heading {
-  text-transform: uppercase;
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 47px;
-}
-
 .lots__card-list {
   list-style: none;
   display: flex;
@@ -228,12 +242,6 @@
   color: #fff;
 }
 
-.text {
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 24px; 
-}
-
 .lots__look-more-link {
   font-size: 20px;
   font-weight: 400;
@@ -251,14 +259,10 @@
   place-items: start;
   gap: 72px;
   padding: 35px 24px 35px 71px;
-  min-height: 775px;
+  min-height: 761px;
   background-color: #fff;
 }
 
-.about__column {
-
-}
-
 .about__logo {
   background-color: #000;
   border-radius: 50%;
@@ -298,3 +302,52 @@
 
 /* Футер */
 
+.footer {
+  min-height: 200px;
+  padding: 14px 50px 88px;
+  font-size: 18px;
+  background-color: #fff;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.footer__address {
+  line-height: 24.3px;
+}
+
+.footer__menu {
+  text-align: center;
+}
+
+.footer__menu-link {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  line-height: 21px;
+}
+
+.footer__menu-link_active {
+  text-decoration: none;
+}
+
+.footer__social-list {
+  display: flex;
+  gap: 48px;
+  justify-content: end;
+}
+
+.footer__social-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.yt-icon {
+  background-image: url(../images/yt.svg);
+}
+
+.vk-icon {
+  background-image: url(../images/vk.svg);
+}
+
+.pinterest-icon {
+  background-image: url(../images/pinterest.svg);
+}