7.24

Author: vudovenko

catalog.html

@@ -158,7 +158,7 @@ <h3 class="hotel-name">Amara Resort & Spa</h3>
           <a href="#" class="more-details-button button">
             Подробнее
           </a>
-          <button class="add-button added button">В избранное</button>
+          <button class="add-button button">В избранное</button>
         </div>
         <div class="rating-information">
           <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
@@ -190,7 +190,7 @@ <h3 class="hotel-name">Desert Quail Inn</h3>
           <a href="#" class="more-details-button button">
             Подробнее
           </a>
-          <button class="add-button added button">В избранное</button>
+          <button class="add-button button">В избранное</button>
         </div>
         <div class="rating-information">
           <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
@@ -206,7 +206,7 @@ <h3 class="hotel-name">GreenTree Inn</h3>
           <a href="#" class="more-details-button button">
             Подробнее
           </a>
-          <button class="add-button added button">В избранное</button>
+          <button class="add-button button">В избранное</button>
         </div>
         <div class="rating-information">
           <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
@@ -240,8 +240,8 @@ <h3 class="visually-hidden">Информайия о рейтинге гости
   <section class="subscribtion-section catalog-subscribtion-section">
     <header class="section-header subscription-header catalog-subscribtion-header">
       <div class="section-header-wrapper subscribtion-section-header-wrapper">
-        <h2 class="subscription-heading subscription-heading-bright">Подпишитесь на рассылку</h2>
-        <p class="reasons-text reasons-text-bright">Только полезная информация и никакого спама,
+        <h2 class="subscription-heading">Подпишитесь на рассылку</h2>
+        <p class="reasons-text">Только полезная информация и никакого спама,
           честное бойскаутское!</p>
       </div>
     </header>

styles/style.css

@@ -271,10 +271,6 @@ a {
   color: #333333;
 }
 
-.advantages-header-bright, .description-bright, .subscription-heading-bright, .reasons-text-bright {
-  color: #FFFFFF;
-}
-
 .reasons-text {
   margin: 0;
   line-height: 26px;
@@ -301,6 +297,7 @@ a {
 }
 
 .index-subscribtion-section {
+  background-color: #44759e;
   background: url("../images/email-blur-background.jpg") no-repeat;
 }
 
@@ -317,6 +314,10 @@ a {
   margin: 0;
 }
 
+.advantages-header-bright, .description-bright, .subscription-heading-bright, .reasons-text-bright {
+  color: #FFFFFF;
+}
+
 .reasons-text-bright {
   margin-top: 20px;
 }
@@ -354,14 +355,20 @@ a {
   display: flex;
   align-items: center;
   width: 1060px;
+  margin-top: 40px;
+  margin-bottom: 30px;
 }
 
 .footer-sotial-list {
   margin-right: 41px;
   width: 142px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+}
+
+.footer-social-item a {
+  display: block;
+  padding: 13px 13px;
 }
 
 .htmlacademy {
@@ -426,6 +433,7 @@ a {
 }
 
 .hotels-filter-section {
+  background-color: #44759e;
   background: url('../images/filter-background.jpg') no-repeat;
   display: flex;
   justify-content: center;
@@ -574,8 +582,9 @@ a {
 }
 
 .hotels-cards-list {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(3, 340px);
+  gap: 20px;
   width: 1060px;
   margin-top: 40px;
   margin-right: 70px;
@@ -584,33 +593,58 @@ a {
 }
 
 .hotel-card-item {
+  box-sizing: border-box;
   border: solid 1px #E6E6E6;
-  width: 337px;
-  margin-right: 20px;
-  margin-bottom: 20px;
+  width: 340px;
+  display: grid;
+  grid-template-rows: 212px repeat(4, auto);
+  gap: 16px;
+  padding: 20px;
 }
 
 .hotel-name {
   text-transform: none;
+  margin: 0;
 }
 
-.hotel-card-item:nth-child(3n) {
-  margin-right: 0;
+.information {
+  margin: 0;
 }
 
-.hotel-card-item:last-child {
-  margin-bottom: 0;
+.information span {
+  padding-left: 138px;
 }
 
-.hotel-card-item:first-child, .hotel-card-item:last-child {
-  margin-left: 0;
+.cards-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 140px);
+  gap: 20px;
+  min-height: 36px;
+}
+
+.cards-buttons .more-details-button {
+  padding-top: 8px;
+}
+
+.rating-information {
+  display: grid;
+  grid-template-columns: repeat(2, 140px);
+  gap: 20px;
+  min-height: 36px;
+}
+
+.rating-information img {
+  padding-top: 10px;
 }
 
 .rating{
   font-size: 16px;
   line-height: 20px;
   color: #333333;
   background-color: #F2F2F2;
+  margin: 0;
+  text-align: center;
+  padding-top: 8px;
 }
 
 .pagination {