diff --git a/public/images/icon-star.svg b/public/images/icon-star.svg new file mode 100644 index 0000000..8a7c682 --- /dev/null +++ b/public/images/icon-star.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/india.png b/public/images/india.png new file mode 100644 index 0000000..40a54d6 Binary files /dev/null and b/public/images/india.png differ diff --git a/public/images/italy.png b/public/images/italy.png new file mode 100644 index 0000000..4cae66d Binary files /dev/null and b/public/images/italy.png differ diff --git a/public/images/lake.png b/public/images/lake.png new file mode 100644 index 0000000..1bf546d Binary files /dev/null and b/public/images/lake.png differ diff --git a/public/images/night-mountains.png b/public/images/night-mountains.png new file mode 100644 index 0000000..20fb4e8 Binary files /dev/null and b/public/images/night-mountains.png differ diff --git a/public/images/plane.png b/public/images/plane.png new file mode 100644 index 0000000..18e5be9 Binary files /dev/null and b/public/images/plane.png differ diff --git a/public/images/stretching.png b/public/images/stretching.png new file mode 100644 index 0000000..44da969 Binary files /dev/null and b/public/images/stretching.png differ diff --git a/public/images/woman.png b/public/images/woman.png new file mode 100644 index 0000000..eb446c3 Binary files /dev/null and b/public/images/woman.png differ diff --git a/src/app/app.component.html b/src/app/app.component.html index 7fdb90c..7e29e82 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -51,7 +51,8 @@

Идет загрузка сайта...

{{ counter }}

- + } @@ -127,6 +128,7 @@

Исследуйте все горные массивы +
@@ -137,7 +139,7 @@

Лучшие программы для тебя

то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа.

    - @for(offer of offers; track offer.id){ + @for (offer of offers; track offer.id) {
  • @@ -160,5 +162,57 @@

    {{ offer.title }}

+ +
+
+

по версии отдыхающих

+

Популярные направления

+
    + @for (destination of destinations; track destination.id) { +
  • + +
    +
    +

    {{ destination.title }}

    +

    {{ destination.description }}

    +
    +
    {{ destination.price }} $
    +
    +
    + + {{ destination.rating }} +
    +
    • + } +
+ +
+
+ +
+
+

делимся впечатлениями

+

Блог о путешествиях

+ + +
+
} diff --git a/src/app/app.component.scss b/src/app/app.component.scss index bfa98c2..6c86c41 100644 --- a/src/app/app.component.scss +++ b/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); +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 44ee90f..471092b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,7 +5,8 @@ import { IOffer } from '../interfaces/IOffer'; import { FormsModule } from '@angular/forms'; import { ILocation } from '../interfaces/ILocation'; import { IParticipant } from '../interfaces/IParticipant'; - +import { IDestination } from '../interfaces/IDestination'; +import { IArticle } from '../interfaces/IArticle'; @Component({ selector: 'app-root', imports: [FormsModule], @@ -20,7 +21,7 @@ export class AppComponent { selectedParticipants: string = ''; currentTimeAndDate: string = new Date().toString(); counter: number = 0; - currentWidget: 'counter' | 'timeAndDate' = 'counter'; + currentWidget: 'counter' | 'timeAndDate' = 'counter'; liveText: string = ''; isLoading: boolean = true; @@ -91,6 +92,64 @@ export class AppComponent { }, ]; + destinations: IDestination[] = [ + { + id: 1, + title: 'Озеро возле гор', + description: 'романтическое приключение', + price: 480, + rating: '4.9', + img: 'lake', + }, + { + id: 2, + title: 'Ночь в горах', + description: 'в компании друзей', + price: 500, + rating: '4.5', + img: 'night-mountains', + }, + { + id: 3, + title: 'Йога в горах', + description: 'для тех, кто забоится о себе', + price: 230, + rating: '5.0', + img: 'stretching', + } + ]; + + articles: IArticle[] = [ + { + id: 1, + title: 'Красивая Италия, какая она в реальности?', + decription: 'Для современного мира базовый вектор развития предполагает независимые способы реализации соответствующих условий активизации.', + publication: '01/04/2023', + img: 'italy' + }, + { + id: 2, + title: 'Долой сомнения! Весь мир открыт для вас!', + decription: 'Для современного мира базовый вектор развития предполагает независимые способы реализации соответствующих условий активизации ... независимые способы реализации соответствующих...', + publication: '01/04/2023', + img: 'plane' + }, + { + id: 3, + title: 'Как подготовиться к путешествию в одиночку?', + decription: 'Для современного мира базовый вектор развития предполагает.', + publication: '01/04/2023', + img: 'woman' + }, + { + id: 4, + title: 'Индия ... летим?', + decription: 'Для современного мира базовый.', + publication: '01/04/2023', + img: 'india' + } + ]; + constructor() { this.saveDateToLocalStorage(); this.saveSessions(); @@ -138,8 +197,8 @@ export class AppComponent { finishLoading(): void { setTimeout(() => { - this.isLoading = false; + this.isLoading = false; }, 3000); -} + } } diff --git a/src/assets/_button.scss b/src/assets/_button.scss index a8d6989..51dbc78 100644 --- a/src/assets/_button.scss +++ b/src/assets/_button.scss @@ -1,4 +1,5 @@ .button { + display: block; background-color: var(--green-background); color: var(--secondary-color); appearance: none; @@ -21,4 +22,8 @@ cursor: not-allowed; opacity: 0.6; } + + &--center { + margin: 0 auto; + } } diff --git a/src/assets/styles.scss b/src/assets/styles.scss index 635609b..b94c524 100644 --- a/src/assets/styles.scss +++ b/src/assets/styles.scss @@ -32,3 +32,5 @@ clip: rect(0, 0, 0, 0); border: 0; } + + diff --git a/src/interfaces/IArticle.ts b/src/interfaces/IArticle.ts new file mode 100644 index 0000000..35ffb12 --- /dev/null +++ b/src/interfaces/IArticle.ts @@ -0,0 +1,7 @@ +export interface IArticle { + id: number; + title: string; + decription: string; + publication: string; + img: string; +} diff --git a/src/interfaces/IDestination.ts b/src/interfaces/IDestination.ts new file mode 100644 index 0000000..20449a8 --- /dev/null +++ b/src/interfaces/IDestination.ts @@ -0,0 +1,8 @@ +export interface IDestination { + id: number; + title: string; + description: string; + price: number; + rating: string; + img: string; +}