fix: fix bugs after checking pixel perfect

KseniaTry · Mar 19, 2024 · 67f750a · 67f750a
1 parent 88ea88a
commit 67f750a
Show file tree

Hide file tree

Showing 30 changed files with 102 additions and 26 deletions.
diff --git a/catalog.html b/catalog.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Гостиницы Седоны</title>
     <link rel="stylesheet" href="styles/styles.css">
+    <link rel="icon" href="favicon.ico">
   </head>
 
   <body>
@@ -237,11 +238,11 @@ <h3 class="hotel-card-title">Amara Resort & Spa</h3>
             </a>
             <p class="hotel-price-name">Гостиница</p>
             <p class="hotel-price-value">От 4000 ₽</p>
-            <a class="button detail-button" href="#">Подробнее</a>
-            <button class="button favorite-button" type="button">В избранное</button>
+            <a class="card-button detail-button" href="#">Подробнее</a>
+            <button class="card-button favorite-button" type="button">В избранное</button>
             <span class="visually-hidden">Четыре звезды</span>
             <span class="hotel-card-star hotel-card-star-four"></span>
-            <p class="button rate-button" href="#">Рейтинг: 8,5</p>
+            <p class="card-button rate-button">Рейтинг: 8,5</p>
           </article>
 
           <article class="hotel-card">
@@ -254,11 +255,11 @@ <h3 class="hotel-card-title">Villas at Poco Diablo</h3>
             </a>
             <p class="hotel-price-name">Гостиница</p>
             <p class="hotel-price-value">От 5000 ₽</p>
-            <a class="button detail-button" href="#">Подробнее</a>
-            <button class="button favorite-button-active" type="button">В избранном</button>
+            <a class="card-button detail-button" href="#">Подробнее</a>
+            <button class="card-button favorite-button-active" type="button">В избранном</button>
             <span class="visually-hidden">Четыре звезды</span>
             <span class="hotel-card-star hotel-card-star-four"></span>
-            <p class="button rate-button" href="#">Рейтинг: 9,2</p>
+            <p class="card-button rate-button">Рейтинг: 9,2</p>
           </article>
 
           <article class="hotel-card">
@@ -271,11 +272,11 @@ <h3 class="hotel-card-title">Desert Quail Inn</h3>
             </a>
             <p class="hotel-price-name">Гостиница</p>
             <p class="hotel-price-value">От 2500 ₽</p>
-            <a class="button detail-button" href="#">Подробнее</a>
-            <button class="button favorite-button" type="button">В избранное</button>
+            <a class="card-button detail-button" href="#">Подробнее</a>
+            <button class="card-button favorite-button" type="button">В избранное</button>
             <span class="visually-hidden">Три звезды</span>
             <span class="hotel-card-star hotel-card-star-three"></span>
-            <p class="button rate-button" href="#">Рейтинг: 6,9</p>
+            <p class="card-button rate-button">Рейтинг: 6,9</p>
           </article>
 
           <article class="hotel-card">
@@ -288,11 +289,11 @@ <h3 class="hotel-card-title">GreenTree Inn</h3>
             </a>
             <p class="hotel-price-name">Гостиница</p>
             <p class="hotel-price-value">От 1500 ₽</p>
-            <a class="button detail-button" href="#">Подробнее</a>
-            <button class="button favorite-button" type="button">В избранное</button>
+            <a class="card-button detail-button" href="#">Подробнее</a>
+            <button class="card-button favorite-button" type="button">В избранное</button>
             <span class="visually-hidden">Две звезды</span>
             <span class="hotel-card-star hotel-card-star-two"></span>
-            <p class="button rate-button" href="#">Рейтинг: 5,0</p>
+            <p class="card-button rate-button">Рейтинг: 5,0</p>
           </article>
         </div>
         <!-- Пагинация -->

diff --git a/favicon.ico/android-icon-144x144.png b/favicon.ico/android-icon-144x144.png
diff --git a/favicon.ico/android-icon-192x192.png b/favicon.ico/android-icon-192x192.png
diff --git a/favicon.ico/android-icon-36x36.png b/favicon.ico/android-icon-36x36.png
diff --git a/favicon.ico/android-icon-48x48.png b/favicon.ico/android-icon-48x48.png
diff --git a/favicon.ico/android-icon-72x72.png b/favicon.ico/android-icon-72x72.png
diff --git a/favicon.ico/android-icon-96x96.png b/favicon.ico/android-icon-96x96.png
diff --git a/favicon.ico/apple-icon-114x114.png b/favicon.ico/apple-icon-114x114.png
diff --git a/favicon.ico/apple-icon-120x120.png b/favicon.ico/apple-icon-120x120.png
diff --git a/favicon.ico/apple-icon-144x144.png b/favicon.ico/apple-icon-144x144.png
diff --git a/favicon.ico/apple-icon-152x152.png b/favicon.ico/apple-icon-152x152.png
diff --git a/favicon.ico/apple-icon-180x180.png b/favicon.ico/apple-icon-180x180.png
diff --git a/favicon.ico/apple-icon-57x57.png b/favicon.ico/apple-icon-57x57.png
diff --git a/favicon.ico/apple-icon-60x60.png b/favicon.ico/apple-icon-60x60.png
diff --git a/favicon.ico/apple-icon-72x72.png b/favicon.ico/apple-icon-72x72.png
diff --git a/favicon.ico/apple-icon-76x76.png b/favicon.ico/apple-icon-76x76.png
diff --git a/favicon.ico/apple-icon-precomposed.png b/favicon.ico/apple-icon-precomposed.png
diff --git a/favicon.ico/apple-icon.png b/favicon.ico/apple-icon.png
diff --git a/favicon.ico/browserconfig.xml b/favicon.ico/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/favicon.ico/favicon-16x16.png b/favicon.ico/favicon-16x16.png
diff --git a/favicon.ico/favicon-32x32.png b/favicon.ico/favicon-32x32.png
diff --git a/favicon.ico/favicon-96x96.png b/favicon.ico/favicon-96x96.png
diff --git a/favicon.ico/favicon.ico b/favicon.ico/favicon.ico
diff --git a/favicon.ico/manifest.json b/favicon.ico/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
diff --git a/favicon.ico/ms-icon-144x144.png b/favicon.ico/ms-icon-144x144.png
diff --git a/favicon.ico/ms-icon-150x150.png b/favicon.ico/ms-icon-150x150.png
diff --git a/favicon.ico/ms-icon-310x310.png b/favicon.ico/ms-icon-310x310.png
diff --git a/favicon.ico/ms-icon-70x70.png b/favicon.ico/ms-icon-70x70.png
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Седона</title>
     <link rel="stylesheet" href="styles/styles.css">
+    <link rel="icon" href="favicon.ico">
   </head>
 
   <body>
@@ -170,7 +171,7 @@ <h2 class="subscription-title">Подпишитесь на рассылку</h2>
           <a class="button-social" href="https://www.youtube.com/user/htmlacademyru">
             <span class="visually-hidden">YouTube</span>
             <svg class="icon-social" aria-hidden="true" focusable="false" width="23" height="18" viewBox="0 0 23 18"
-              fill="#83B3D3" role="img" aria-label="Иконка YouTube" xmlns="http://www.w3.org/2000/svg" aria-label="Иконка Ютуб">
+              fill="#83B3D3" role="img" aria-label="Иконка YouTube" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M18.9402 0.356445H3.50738C1.64668 0.356445 0.333252 1.9502 0.333252 3.75645V13.8502C0.333252 15.7627 1.64668 17.3564 3.50738 17.3564H19.1591C20.8009 17.3564 22.3333 15.7627 22.3333 13.9564V3.75645C22.1143 1.9502 20.8009 0.356445 18.9402 0.356445ZM7.99494 12.8939V4.81894L15.3283 8.85645L7.99494 12.8939Z" />
             </svg>
@@ -213,14 +214,13 @@ <h2 class="subscription-title">Подпишитесь на рассылку</h2>
       <div class="modal modal-auth">
         <button class="modal-close-button" type="button">
           <span class="visually-hidden">Закрыть</span>
-          <!-- <span class="modal-close-icon-container"> -->
           <svg class="modal-close-icon" width="14" height="14" viewBox="0 0 14 14" fill="black" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M14 1.29231L12.7077 0L7 5.70769L1.29231 0L0 1.29231L5.70769 7L0 12.7077L1.29231 14L7 8.29231L12.7077 14L14 12.7077L8.29231 7L14 1.29231Z" />
           </svg>
-          <!-- </span> -->
         </button>
         <section class="modal-content">
+          <h2 class="visually-hidden">Модальное окно для поиска гостиницы в Седоне</h2>
           <form class="modal-form" action="https://echo.htmlacademy.ru/" method="get">
             <fieldset class="modal-form-fieldset">
 

diff --git a/styles/styles.css b/styles/styles.css
@@ -72,6 +72,15 @@ body {
   width: 140px;
 }
 
+.header-logo-link:hover .header-logo-link-img,
+.header-logo-link:focus .header-logo-link-img {
+  opacity: 0.6;
+}
+
+.header-logo-link:active .header-logo-link-img {
+  opacity: 0.3;
+}
+
 .navigation {
   display: flex;
   width: 730px;
@@ -112,6 +121,15 @@ body {
   background-color: #756257;
 }
 
+.navigation-list-item-link:hover,
+.navigation-list-item-link:focus {
+  color: #756157;
+}
+
+.navigation-list-item-link:active {
+  color: rgba(117, 97, 87, 0.3);
+}
+
 .navigation-user {
   display: flex;
   flex-wrap: wrap;
@@ -156,6 +174,15 @@ body {
   background-color: #7db54f;
 }
 
+.navigation-user-item-link:hover .navigation-user-item-link-icon,
+.navigation-user-item-link:focus .navigation-user-item-link-icon {
+  fill: #756157;
+}
+
+.navigation-user-item-link:active .navigation-user-item-link-icon {
+  fill: rgba(117, 97, 87, 0.3);
+}
+
 .header-button {
   width: 160px;
   padding: 8px 0;
@@ -1102,7 +1129,7 @@ body {
 }
 
 /* Кнопки */
-.button {
+.card-button {
   padding: 8px 15px;
   margin: 0;
 
@@ -1118,10 +1145,6 @@ body {
   cursor: pointer;
 }
 
-.button:disabled {
-  background-color: #e5e5e5;
-}
-
 .detail-button {
   display: block;
   grid-area: detail;
@@ -1170,6 +1193,10 @@ body {
   color: rgba(255, 255, 255, 0.3);
 }
 
+.card-button:disabled {
+  background-color: #e5e5e5;
+}
+
 .rate-button {
   grid-area: rate;
 
@@ -1331,7 +1358,8 @@ body {
 }
 
 .modal-container-close {
-  display: none;
+  /* display: none; */
+  /* Для того, чтобы высветилось модальное окно, нужно удалить код выше */
 }
 
 .modal {
@@ -1341,6 +1369,7 @@ body {
   width: 717px;
   background-color: #ffffff;
   box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 30px;
 }
 
 /* Кнопка закрытия модального окна */
@@ -1379,6 +1408,8 @@ body {
 
 /* Форма поиска гостиницы */
 .modal-form-fieldset {
+  margin: 0;
+  padding: 0;
   border: none;
 }
 
@@ -1443,7 +1474,7 @@ body {
 }
 
 .error-text {
-  color: #ff0000;
+  color: #ff5757;
 }
 
 .check-in-date-input,
@@ -1528,7 +1559,7 @@ body {
   font-family: inherit;
   color: #ffffff;
   background-color: #83b3d3;
-  border-radius: 4px;
+  border-radius: 10px;
   font-size: 20px;
   font-weight: 700;
   line-height: 24px;
@@ -1557,7 +1588,7 @@ body {
 .tooltip-text {
   position: absolute;
   width: 256px;
-  padding: 15px 18px 18px 22px;
+  padding: 18px 18px 20px 22px;
 
   font-size: 16px;
   line-height: 20px;
@@ -1566,15 +1597,16 @@ body {
   color: #ffffff;
   background-color: #333333;
   box-shadow: 0 15px 30px 0;
-  transform: translateX(-106px) translateY(15px);
+  transform: translateX(-115px) translateY(15px);
   z-index: 1;
   display: none;
 }
 
 .tooltip-text-arrow {
   position: absolute;
-  top: -9px;
+  top: -8px;
   right: 50%;
+  transform: translateX(8px);
 }
 
 .modal-form-label-icon {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>