[Homework №17]:angular services

src/app/app.component.html

@@ -51,7 +51,8 @@ <h1 class="preloader__title"> Идет загрузка сайта...</h1>
             <p class="number">{{ counter }}</p>
             <button (click)="reduceCounter()" class="button" [disabled]="counter === 0" id="reduce-button">-</button>
           </div>
-          <button class="button" (click)="switchWidget('timeAndDate')" id="count-toggle-button">Показать дату и время</button>
+          <button class="button" (click)="switchWidget('timeAndDate')" id="count-toggle-button">Показать дату и
+            время</button>
         </div>
         }
       </div>
@@ -127,6 +128,7 @@ <h3 class="main-subtile">Исследуйте все горные массивы
       </div>
     </div>
   </section>
+
   <section class="advantages">
     <div class="container">
       <div class="advantages__wrapper">
@@ -137,7 +139,7 @@ <h3 class="main-subtile">Лучшие программы для тебя</h3>
             то&nbsp;есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из&nbsp;колледжа.</p>
           <ul class="list-none advantages__list">
 
-            @for(offer of offers; track offer.id){
+            @for (offer of offers; track offer.id) {
             <li class="advantages__item">
               <img [src]="'/images/' + offer.img + '.svg'" class="advantanges__icon" width="50" height="50"
                 [alt]="offer.title">
@@ -160,5 +162,57 @@ <h3 class="advantages__title">{{ offer.title }}</h3>
       </div>
     </div>
   </section>
+
+  <section class="popular-tours">
+    <div class="container">
+      <h2 class="main-titLe">по версии отдыхающих</h2>
+      <h3 class="main-subtile">Популярные направления</h3>
+      <ul class="list-none popular-tours__list">
+        @for (destination of destinations; track destination.id) {
+        <li class="popular-tours__item">
+          <img [src]="'/images/' + destination.img + '.png'" [alt]="destination.title" width="380" height="500">
+          <div class="popular-tours__wrapper">
+            <div>
+              <h3 class="tour-title">{{ destination.title }}</h3>
+              <p class="tour-description">{{ destination.description }}</p>
+            </div>
+            <div class="tour-price">{{ destination.price }} &dollar;</div>
+          </div>
+          <div class="rating-wrapper">
+            <span class="tour-rating-icon"></span>
+            <span class="tour-rating">{{ destination.rating }}</span>
+          </div>
+        </li>
+        }
+      </ul>
+      <button class="button button--center" type="submit" id="rating-button">Рейтинг направлений</button>
+    </div>
+  </section>
+
+  <section class="travel-blog">
+    <div class="container">
+      <h2 class="main-titLe">делимся впечатлениями</h2>
+      <h3 class="main-subtile ">Блог о путешествиях</h3>
+      <ul class="list-none travel-blog__list">
+        @for (article of articles; track article.id) {
+        <li class="travel-blog__item">
+          <img class="travel-blog__img" [src]="'/images/' + article.img + '.png'" [alt]="article.title" width="230"
+            height="280">
+          <div class="travel-blog__wrapper">
+            <div>
+              <a href="#" class="travel-blog__link" id="link-article">{{ article.title }}</a>
+              <p class="travel-blog__description">{{ article.decription}}</p>
+            </div>
+            <div class="travel-blog__container">
+              <div class="date-publication">{{ article.publication }}</div>
+              <a href="#" class="link-to-article" id="link-read">читать статью</a>
+            </div>
+          </div>
+        </li>
+        }
+      </ul>
+      <button class="button button--center" type="submit" id="show-articles-button">Другие материалы</button>
+    </div>
+  </section>
 </main>
 }

src/app/app.component.scss

@@ -1,3 +1,7 @@
+@mixin block-padding {
+  padding: 80px 0 100px 0;
+}
+
 .preloader {
   position: fixed;
   left: 0;
@@ -231,7 +235,7 @@
 
 
 .history {
-  padding: 80px 0 100px 0;
+  @include block-padding;
 
   &__wrapper {
     display: flex;
@@ -252,7 +256,6 @@
   &__about-hike {
     padding: 64px 0 64px 0;
   }
-
 }
 
 .main-titLe {
@@ -279,11 +282,11 @@
 
 .advantages {
   background-color: var(--grey-background);
-  padding: 80px 0 100px 0;
+  @include block-padding;
 
   &__wrapper {
     display: flex;
-    gap: 90px
+    gap: 90px;
   }
 
   &__images-container {
@@ -383,3 +386,179 @@
   background-size: 16px 16px;
   padding-right: 35px;
 }
+
+.popular-tours {
+  @include block-padding;
+  text-align: center;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-bottom: 50px;
+  }
+
+  &__item {
+    width: 380px;
+    position: relative;
+  }
+
+  &__wrapper {
+    position: absolute;
+    bottom: 4px;
+    z-index: 6;
+    width: 380px;
+    box-sizing: border-box;
+    background-color: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(6px);
+    display: flex;
+    padding: 23px 32px;
+    justify-content: space-between;
+    border-radius: 0 0 32px 32px;
+  }
+}
+
+.tour-title {
+  color: var(--secondary-color);
+  margin: 0 0 9px 0;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 120%;
+  text-align: left;
+}
+
+.tour-description {
+  color: var(--secondary-color);
+  margin: 0;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  text-align: left;
+}
+
+.tour-price {
+  color: var(--secondary-color);
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  background-color: #ffffff4d;
+  border-radius: 4px;
+  width: 54px;
+  padding: 7px 18px;
+}
+
+.rating-wrapper {
+  position: absolute;
+  top: 33px;
+  right: 0;
+  z-index: 6;
+  background-color: #fdfdfd66;
+  backdrop-filter: blur(4px);
+  opacity: 1;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  padding: 10px 4px 10px 43px;
+  color: #1a3e3e;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+
+.tour-rating {
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-image: url('/images/icon-star.svg');
+    background-repeat: no-repeat;
+    background-size: 17px 16px;
+    width: 24px;
+    height: 24px;
+    top: 0;
+    right: 27px;
+  }
+}
+
+.travel-blog {
+  @include block-padding;
+  background-color: var(--grey-background);
+  text-align: center;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-bottom: 50px;
+  }
+
+  &__item {
+    width: 580px;
+    background-color: #FDFDFD;
+    display: flex;
+    padding: 16px 16px;
+    box-sizing: border-box;
+    gap: 24px;
+    border-radius: 10px;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__container {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+
+  &__link {
+    color: var(--primary-color);
+    display: inline-block;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 32px;
+    text-align: left;
+    margin-bottom: 20px;
+    cursor: pointer;
+    position: relative;
+    transition: 0.2s;
+    text-decoration: none;
+
+    &:hover {
+      color: #1A3E3E;
+      text-decoration: underline;
+    }
+  }
+
+  &__description {
+    margin: 0;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+  }
+}
+
+.date-publication {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+  color: #F2BE22;
+}
+
+.link-to-article {
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--green-background);
+}