3.16

Author: vudovenko

catalog.html

@@ -8,7 +8,7 @@
 <header class="header-main header-catalog">
   <nav class="header-menu">
     <a href="index.html">
-      <img src="#" alt="Логотип сайта Седона" class="logo">
+      <img src="images/logo.svg" alt="Логотип сайта Седона" class="logo" width="140" height="70">
     </a>
     <ul class="menu-list">
       <li class="menu-item">
@@ -26,11 +26,11 @@
       <li class="navigation-item">
         <a href="#">
           <span class="visually-hidden">Поиск</span>
-          <img src="#" alt="Иконка поиска">
+          <img src="images/search-loupe.svg" alt="Иконка поиска" width="20" height="20">
         </a>
         <a href="#">
           <span class="visually-hidden">Избранное</span>
-          <img src="#" alt="Иконка Избранного">
+          <img src="images/favorits.svg" alt="Иконка Избранного" width="18" height="17">
         </a>
         <button type="button" class="choose-button">
           Хочу сюда!
@@ -46,11 +46,11 @@ <h1 class="catalog-heading">Гостиницы Седоны</h1>
     <ul class="breadcrumbs">
       <li class="breadcrumbs-item">
         <a class="breadcrumbs-link" href="index.html">
-          <img src="#" alt="Иконка на Главную страницу">
+          <img src="images/home-breadcrumbs-icon.svg" alt="Иконка на Главную страницу" width="13" height="15">
         </a>
       </li>
       <li class="breadcrumbs-item">
-        <img src="#" alt="Стрелка направления по страницам">
+        <img src="images/arrow.svg" alt="Стрелка направления по страницам" width="6" height="10">
       </li>
       <li class="breadcrumbs-item">
         <a class="breadcrumbs-link">Гостиницы</a>
@@ -123,27 +123,27 @@ <h3 class="visually-hidden">Выбор способа визульного пр
         <li class="display-methods-item">
           <label class="method-icon">
             <input type="radio" name="display" value="table">
-            <img src="#" alt="Иконка отображения в виде таблицы">
+            <img src="images/table-view-icon.svg" alt="Иконка отображения в виде таблицы" width="16" height="14">
           </label>
         </li>
         <li class="display-methods-item">
           <label class="method-icon">
             <input type="radio" name="display" value="one-per-page">
-            <img src="#" alt="Иконка отображения в виде одного элемента списка на каждой странице">
+            <img src="images/single-view-icon.svg" alt="Иконка отображения в виде одного элемента списка на каждой странице" width="16" height="14">
           </label>
         </li>
         <li class="display-methods-item">
           <label class="method-icon">
             <input type="radio" name="display" value="list">
-            <img src="#" alt="Иконка отображения в виде списка">
+            <img src="images/list-view-icon.svg" alt="Иконка отображения в виде списка" width="16" height="14">
           </label>
         </li>
       </ul>
     </header>
     <h2 class="visually-hidden">Отсортированный список гостиниц</h2>
     <ul class="hotels-cards-list">
       <li class="hotel-card-item">
-        <img src="#" alt="Изображение гостиницы">
+        <img src="images/hotel-1.jpg" alt="Изображение гостиницы" width="300" height="212">
         <h3 class="hotel-name">Amara Resort & Spa</h3>
         <p class="information">Гостиница <span>От 4000 ₽</span></p>
         <div class="cards-buttons">
@@ -154,12 +154,12 @@ <h3 class="hotel-name">Amara Resort & Spa</h3>
         </div>
         <div class="rating-information">
           <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
-          <img src="#" alt="Иконка рейтинга 4 звезды">
+          <img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
           <p class='rating'>РЕЙТИНГ: 8,5</p>
         </div>
       </li>
       <li class="hotel-card-item">
-        <img src="#" alt="Изображение гостиницы">
+        <img src="images/hotel-2.jpg" alt="Изображение гостиницы" width="300" height="212">
         <h3 class="hotel-name">Villas at Poco Diablo</h3>
         <p class="information">Гостиница <span>От 5000 ₽</span></p>
         <div class="cards-buttons">
@@ -170,12 +170,12 @@ <h3 class="hotel-name">Villas at Poco Diablo</h3>
         </div>
         <div class="rating-information">
           <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
-          <img src="#" alt="Иконка рейтинга 4 звезды">
+          <img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
           <p class='rating'>РЕЙТИНГ: 9,2</p>
         </div>
       </li>
       <li class="hotel-card-item">
-        <img src="#" alt="Изображение гостиницы">
+        <img src="images/hotel-3.jpg" alt="Изображение гостиницы"  width="300" height="212">
         <h3 class="hotel-name">Desert Quail Inn</h3>
         <p class="information">Гостиница <span>От 2500 ₽</span></p>
         <div class="cards-buttons">
@@ -186,12 +186,12 @@ <h3 class="hotel-name">Desert Quail Inn</h3>
         </div>
         <div class="rating-information">
           <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
-          <img src="#" alt="Иконка рейтинга 3 звезды">
+          <img src="images/3-stars-icon.svg" alt="Иконка рейтинга 3 звезды" width="66" height="17">
           <p class='rating'>РЕЙТИНГ: 6,9</p>
         </div>
       </li>
       <li class="hotel-card-item">
-        <img src="#" alt="Изображение гостиницы">
+        <img src="images/hotel-4.jpg" alt="Изображение гостиницы"  width="300" height="212">
         <h3 class="hotel-name">GreenTree Inn</h3>
         <p class="information">Гостиница <span>От 1500 ₽</span></p>
         <div class="cards-buttons">
@@ -202,7 +202,7 @@ <h3 class="hotel-name">GreenTree Inn</h3>
         </div>
         <div class="rating-information">
           <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
-          <img src="#" alt="Иконка рейтинга 2 звезды">
+          <img src="images/2-stars-icon.svg" alt="Иконка рейтинга 2 звезды" width="42" height="17">
           <p class='rating'>РЕЙТИНГ: 5,0</p>
         </div>
       </li>
@@ -248,16 +248,19 @@ <h2 class="visually-hidden">Социальные сети</h2>
       <li class="footer-social-item">
         <a class="button" href="https://vk.com/htmlacademy">
           <span class="visually-hidden">Вконтакте</span>
+          <img src="images/vk-icon.svg" alt="Иконка Вконтакте" width="24" height="14">
         </a>
       </li>
       <li class="footer-social-item">
         <a class="button" href="https://t.me/htmlacademy">
           <span class="visually-hidden">Телеграм</span>
+          <img src="images/telegram-icon.svg" alt="Иконка Телеграма" width="18" height="16">
         </a>
       </li>
       <li class="footer-social-item">
         <a class="button" href="https://www.youtube.com/user/htmlacademyru">
           <span class="visually-hidden">Ютуб</span>
+          <img src="images/youtube-icon.svg" alt="Иконка Ютуба" width="22" height="17">
         </a>
       </li>
     </ul>