Сохранение 2

VitalyChy · Dec 1, 2023 · 510b1c7 · 510b1c7
1 parent b029f04
commit 510b1c7
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -128,14 +128,14 @@ <h3 class="card__title">
           <h2 class="about__title">Об аукционе</h2>
         </div>
         <div class="about__text">
-          <p>
+          <p style="line-height: 23px">
             Здесь вы не встретите очередное пафосное собрание невероятно
             дорогого антиквариата. Наши лоты вообще не должны были попасть ни на
             один аукцион. Потому что кому нужен дневник девочки-подростка или
             картина, которую может нарисовать даже ребёнок? Кому нужны все эти
             странные вещи, созданные любителями?
           </p>
-          <p>
+          <p style="line-height: 23px">
             Слишком сложные или, наоборот, слишком простые. Опережающие своё
             время. В пух и прах растерзанные критиками. Непринятые и непонятые.
             Когда-то они казались просто неудачными. Но, несмотря на критику,
@@ -146,6 +146,51 @@ <h2 class="about__title">Об аукционе</h2>
         </div>
       </section>
     </main>
-    <footer></footer>
+    <footer class="footer">
+      <address class="footer__address address">
+        <a href="tel:+70000000">+9 999 555 5555</a>
+        <a href="mailto:[email protected]">[email protected]</a>
+        <p>наб. Принсенграхт 263-265, Амстердам</p>
+      </address>
+      <nav class="footer__menu">
+        <ul class="footer__menu-list">
+          <li class="footer__menu-list-item">
+            <a class="footer__menu-link footer__menu-link_active">главная</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">
+        <li class="footer__social-list-item">
+          <a class="footer__social-link" target="_blank" href="#0"></a>
+          <img
+            class="footer__social-icon"
+            src="./images/yt.svg"
+            alt="Иконка ссылка на Yootube"
+          />
+        </li>
+        <li class="footer__social-list-item">
+          <a class="footer__social-link" target="_blank" href="#0"></a>
+          <img
+            class="footer__social-icon"
+            src="./images/vk.svg"
+            alt="Иконка ссылка на ВКонтакте"
+          />
+        </li>
+        <li class="footer__social-list-item">
+          <a class="footer__social-link" target="_blank" href="#0"></a>
+          <img
+            class="footer__social-icon"
+            src="./images/pinterest.svg"
+            alt="Иконка ссылка на Pinterest"
+          />
+        </li>
+      </ul>
+    </footer>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
@@ -2,6 +2,7 @@
 /* 2. Блок Cover */
 /* 3. Блок Lots */
 /* 4. Блок About */
+/* 5. Блок Footer */
 
 /* 1. Блок Header */
 /* Блок Menu__Header */
@@ -16,7 +17,7 @@
 .header__menu {
   justify-self: start;
   align-self: center;
-  margin: 2px;
+  margin: 0;
   text-underline-offset: 6px;    
 }
 
@@ -45,8 +46,8 @@
 .header__logo-image {
   width: 148px;
   height: 105px;
-  background-size:contain;
   background-position: center;
+  background-size:contain;    
 }
 
 /* Блок Address__Header */
@@ -56,12 +57,15 @@
   flex-direction: column;
   align-self: end;
   width: 240px;
+  margin-bottom: 2px;
+  margin-left: 2px;
   color: #000;
   font-family: 'Raleway';
   font-weight: 400;
   font-size: 18px;
   font-style: normal;  
   line-height: 24.3px; /* 135% */
+  text-underline-offset: 4.5px;
 }
 
 .header__address {
@@ -203,6 +207,7 @@
   width: 430px;
   height: 450px;
   padding: 50px 40px;
+  text-underline-offset: 3.5px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -270,6 +275,7 @@
   font-size: 20px;
   font-style: normal;
   line-height: normal;
+  text-underline-offset: 4.4px; 
 }
 
 /* 4. Блок About */
@@ -278,7 +284,7 @@
   display: grid;
   grid-template-columns:repeat(3,1fr);
   grid-template-rows: repeat(2,1fr);
-  gap: 25px;
+  column-gap: 25px;
   padding: 91px 50px 90px 50px;  
 }
 
@@ -290,17 +296,17 @@
   grid-row-start: 1;
   grid-row-end: 2;
   justify-content: center;
-  align-content: center;
+  align-items: center;
   width: 240px;
   height: 240px;
-  margin: 0 95px;
+  margin-left: 95px;
   border-radius: 50%;
-  background-color:#000;
+  background-color:#000;  
 }
 
 .about__logo-image {
   width: 148px;
-  height: 114px;
+  height: 114px;  
 }
 
 .about__title {
@@ -309,7 +315,7 @@
   grid-row: 1/2;
   align-self: center;
   padding-top: 100px;
-  padding-bottom: 100px; 
+  padding-bottom: 100px;   
   color: #000;
   font-family: 'Raleway';
   font-weight: 700;
@@ -325,11 +331,60 @@
   grid-column: 2/4;
   grid-row: 2/4;
   align-items: flex-start;
-  gap: 25px;
+  gap: 28.5px;
   color: #000;
   font-family: 'Raleway';
   font-weight: 400;
   font-size: 20px;
   font-style: normal;
+  line-height: normal;    
+}
+
+/* 5. Блок Footer */
+/* Блок Footer__Address */
+
+.footer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 83px 50px 90px 50px;
+}
+
+.footer__address {
+  display: flex;
+  flex-direction: column;
+  color: #000;
+  font-family: 'Raleway';
+  font-weight: 400;
+  font-size: 18px;
+  font-style: normal;  
+  line-height: 24.3px; /* 135% */
+  text-underline-offset: 4.5px;
+}
+
+.footer__menu {
+  display: flex;
+  justify-content: center;    
+  text-underline-offset: 3px;     
+}
+
+.footer__menu-list {
+  text-align: center;
+  list-style-type: none;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
   line-height: normal;
 }
+
+.footer__social-list {
+  display: flex;
+  justify-self: end;
+  gap: 48px;
+  list-style-type: none; /* Убрал маркер*/
+}
+
+.footer__social-icon {   
+  height: 48px;
+  flex-shrink: 0;
+}
+