diff --git a/package.json b/package.json index 815dff28a..d53214150 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "w3c-html-validator": "1.7.0" }, "dependencies": { - "swiper": "11.1.1" + "swiper": "^11.1.1" }, "engines": { "node": "^18.18 || ^20.9" diff --git a/source/fonts/montserrat/montserrat-300.woff2 b/source/fonts/montserrat/montserrat-300.woff2 new file mode 100644 index 000000000..97b0f2c77 Binary files /dev/null and b/source/fonts/montserrat/montserrat-300.woff2 differ diff --git a/source/fonts/montserrat/montserrat-400.woff2 b/source/fonts/montserrat/montserrat-400.woff2 new file mode 100644 index 000000000..8e4646683 Binary files /dev/null and b/source/fonts/montserrat/montserrat-400.woff2 differ diff --git a/source/fonts/montserrat/montserrat-500.woff2 b/source/fonts/montserrat/montserrat-500.woff2 new file mode 100644 index 000000000..fc09b9654 Binary files /dev/null and b/source/fonts/montserrat/montserrat-500.woff2 differ diff --git a/source/fonts/montserrat/montserrat-600.woff2 b/source/fonts/montserrat/montserrat-600.woff2 new file mode 100644 index 000000000..9048f09e2 Binary files /dev/null and b/source/fonts/montserrat/montserrat-600.woff2 differ diff --git a/source/fonts/montserrat/montserrat-700.woff2 b/source/fonts/montserrat/montserrat-700.woff2 new file mode 100644 index 000000000..af8f601b3 Binary files /dev/null and b/source/fonts/montserrat/montserrat-700.woff2 differ diff --git a/source/fonts/montserrat/montserrat-800.woff2 b/source/fonts/montserrat/montserrat-800.woff2 new file mode 100644 index 000000000..246cf5b0a Binary files /dev/null and b/source/fonts/montserrat/montserrat-800.woff2 differ diff --git a/source/img/about-desktop@1x.jpg b/source/img/about-desktop@1x.jpg new file mode 100644 index 000000000..ad033fa0d Binary files /dev/null and b/source/img/about-desktop@1x.jpg differ diff --git a/source/img/about-desktop@1x.webp b/source/img/about-desktop@1x.webp new file mode 100644 index 000000000..4ebdce0bc Binary files /dev/null and b/source/img/about-desktop@1x.webp differ diff --git a/source/img/about-desktop@2x.jpg b/source/img/about-desktop@2x.jpg new file mode 100644 index 000000000..964480ad8 Binary files /dev/null and b/source/img/about-desktop@2x.jpg differ diff --git a/source/img/about-desktop@2x.webp b/source/img/about-desktop@2x.webp new file mode 100644 index 000000000..62d50246f Binary files /dev/null and b/source/img/about-desktop@2x.webp differ diff --git a/source/img/about-mobile@1x.jpg b/source/img/about-mobile@1x.jpg new file mode 100644 index 000000000..9c270c964 Binary files /dev/null and b/source/img/about-mobile@1x.jpg differ diff --git a/source/img/about-mobile@1x.webp b/source/img/about-mobile@1x.webp new file mode 100644 index 000000000..4643827ad Binary files /dev/null and b/source/img/about-mobile@1x.webp differ diff --git a/source/img/about-mobile@2x.jpg b/source/img/about-mobile@2x.jpg new file mode 100644 index 000000000..decf92119 Binary files /dev/null and b/source/img/about-mobile@2x.jpg differ diff --git a/source/img/about-mobile@2x.webp b/source/img/about-mobile@2x.webp new file mode 100644 index 000000000..75a76bed3 Binary files /dev/null and b/source/img/about-mobile@2x.webp differ diff --git a/source/img/about-tablet@1x.jpg b/source/img/about-tablet@1x.jpg new file mode 100644 index 000000000..50319a46d Binary files /dev/null and b/source/img/about-tablet@1x.jpg differ diff --git a/source/img/about-tablet@1x.webp b/source/img/about-tablet@1x.webp new file mode 100644 index 000000000..3843979a1 Binary files /dev/null and b/source/img/about-tablet@1x.webp differ diff --git a/source/img/about-tablet@2x.jpg b/source/img/about-tablet@2x.jpg new file mode 100644 index 000000000..5cf7adb2e Binary files /dev/null and b/source/img/about-tablet@2x.jpg differ diff --git a/source/img/about-tablet@2x.webp b/source/img/about-tablet@2x.webp new file mode 100644 index 000000000..b5a39dded Binary files /dev/null and b/source/img/about-tablet@2x.webp differ diff --git a/source/img/bg-mountain-mobile@1x.png b/source/img/bg-mountain-mobile@1x.png new file mode 100644 index 000000000..a7bcb1f38 Binary files /dev/null and b/source/img/bg-mountain-mobile@1x.png differ diff --git a/source/img/bg-mountain-mobile@1x.webp b/source/img/bg-mountain-mobile@1x.webp new file mode 100644 index 000000000..95eca3f77 Binary files /dev/null and b/source/img/bg-mountain-mobile@1x.webp differ diff --git a/source/img/bg-mountain-mobile@2x.png b/source/img/bg-mountain-mobile@2x.png new file mode 100644 index 000000000..a4b03d6a2 Binary files /dev/null and b/source/img/bg-mountain-mobile@2x.png differ diff --git a/source/img/bg-mountain-mobile@2x.webp b/source/img/bg-mountain-mobile@2x.webp new file mode 100644 index 000000000..df4606d6c Binary files /dev/null and b/source/img/bg-mountain-mobile@2x.webp differ diff --git a/source/img/bg-mountain-tablet@1x.png b/source/img/bg-mountain-tablet@1x.png new file mode 100644 index 000000000..c84716002 Binary files /dev/null and b/source/img/bg-mountain-tablet@1x.png differ diff --git a/source/img/bg-mountain-tablet@1x.webp b/source/img/bg-mountain-tablet@1x.webp new file mode 100644 index 000000000..8d45c59b5 Binary files /dev/null and b/source/img/bg-mountain-tablet@1x.webp differ diff --git a/source/img/bg-mountain-tablet@2x.png b/source/img/bg-mountain-tablet@2x.png new file mode 100644 index 000000000..317e482fc Binary files /dev/null and b/source/img/bg-mountain-tablet@2x.png differ diff --git a/source/img/bg-mountain-tablet@2x.webp b/source/img/bg-mountain-tablet@2x.webp new file mode 100644 index 000000000..60beff01e Binary files /dev/null and b/source/img/bg-mountain-tablet@2x.webp differ diff --git a/source/img/hero-1-desktop@1x.jpg b/source/img/hero-1-desktop@1x.jpg new file mode 100644 index 000000000..a602f71ec Binary files /dev/null and b/source/img/hero-1-desktop@1x.jpg differ diff --git a/source/img/hero-1-desktop@1x.webp b/source/img/hero-1-desktop@1x.webp new file mode 100644 index 000000000..48cc4d765 Binary files /dev/null and b/source/img/hero-1-desktop@1x.webp differ diff --git a/source/img/hero-1-desktop@2x.jpg b/source/img/hero-1-desktop@2x.jpg new file mode 100644 index 000000000..9ab7b1505 Binary files /dev/null and b/source/img/hero-1-desktop@2x.jpg differ diff --git a/source/img/hero-1-desktop@2x.webp b/source/img/hero-1-desktop@2x.webp new file mode 100644 index 000000000..ed6b5273c Binary files /dev/null and b/source/img/hero-1-desktop@2x.webp differ diff --git a/source/img/hero-1-mobile@1x.jpg b/source/img/hero-1-mobile@1x.jpg new file mode 100644 index 000000000..f90a48c9e Binary files /dev/null and b/source/img/hero-1-mobile@1x.jpg differ diff --git a/source/img/hero-1-mobile@1x.webp b/source/img/hero-1-mobile@1x.webp new file mode 100644 index 000000000..5b0fe3f3c Binary files /dev/null and b/source/img/hero-1-mobile@1x.webp differ diff --git a/source/img/hero-1-mobile@2x.jpg b/source/img/hero-1-mobile@2x.jpg new file mode 100644 index 000000000..4db403b60 Binary files /dev/null and b/source/img/hero-1-mobile@2x.jpg differ diff --git a/source/img/hero-1-mobile@2x.webp b/source/img/hero-1-mobile@2x.webp new file mode 100644 index 000000000..939864338 Binary files /dev/null and b/source/img/hero-1-mobile@2x.webp differ diff --git a/source/img/hero-1-tablet@1x.jpg b/source/img/hero-1-tablet@1x.jpg new file mode 100644 index 000000000..d84381c78 Binary files /dev/null and b/source/img/hero-1-tablet@1x.jpg differ diff --git a/source/img/hero-1-tablet@1x.webp b/source/img/hero-1-tablet@1x.webp new file mode 100644 index 000000000..da962144f Binary files /dev/null and b/source/img/hero-1-tablet@1x.webp differ diff --git a/source/img/hero-1-tablet@2x.jpg b/source/img/hero-1-tablet@2x.jpg new file mode 100644 index 000000000..070e831c3 Binary files /dev/null and b/source/img/hero-1-tablet@2x.jpg differ diff --git a/source/img/hero-1-tablet@2x.webp b/source/img/hero-1-tablet@2x.webp new file mode 100644 index 000000000..fdd835c8f Binary files /dev/null and b/source/img/hero-1-tablet@2x.webp differ diff --git a/source/img/hero-2-desktop@1x.jpg b/source/img/hero-2-desktop@1x.jpg new file mode 100644 index 000000000..76eb7a117 Binary files /dev/null and b/source/img/hero-2-desktop@1x.jpg differ diff --git a/source/img/hero-2-desktop@1x.webp b/source/img/hero-2-desktop@1x.webp new file mode 100644 index 000000000..38ccd2243 Binary files /dev/null and b/source/img/hero-2-desktop@1x.webp differ diff --git a/source/img/hero-2-desktop@2x.jpg b/source/img/hero-2-desktop@2x.jpg new file mode 100644 index 000000000..f4b9b273b Binary files /dev/null and b/source/img/hero-2-desktop@2x.jpg differ diff --git a/source/img/hero-2-desktop@2x.webp b/source/img/hero-2-desktop@2x.webp new file mode 100644 index 000000000..be839d20b Binary files /dev/null and b/source/img/hero-2-desktop@2x.webp differ diff --git a/source/img/hero-2-mobile@1x.jpg b/source/img/hero-2-mobile@1x.jpg new file mode 100644 index 000000000..d11585e62 Binary files /dev/null and b/source/img/hero-2-mobile@1x.jpg differ diff --git a/source/img/hero-2-mobile@1x.webp b/source/img/hero-2-mobile@1x.webp new file mode 100644 index 000000000..1db886425 Binary files /dev/null and b/source/img/hero-2-mobile@1x.webp differ diff --git a/source/img/hero-2-mobile@2x.jpg b/source/img/hero-2-mobile@2x.jpg new file mode 100644 index 000000000..71b72faaf Binary files /dev/null and b/source/img/hero-2-mobile@2x.jpg differ diff --git a/source/img/hero-2-mobile@2x.webp b/source/img/hero-2-mobile@2x.webp new file mode 100644 index 000000000..f1d347af8 Binary files /dev/null and b/source/img/hero-2-mobile@2x.webp differ diff --git a/source/img/hero-2-tablet@1x.jpg b/source/img/hero-2-tablet@1x.jpg new file mode 100644 index 000000000..48c0e88d4 Binary files /dev/null and b/source/img/hero-2-tablet@1x.jpg differ diff --git a/source/img/hero-2-tablet@1x.webp b/source/img/hero-2-tablet@1x.webp new file mode 100644 index 000000000..409529515 Binary files /dev/null and b/source/img/hero-2-tablet@1x.webp differ diff --git a/source/img/hero-2-tablet@2x.jpg b/source/img/hero-2-tablet@2x.jpg new file mode 100644 index 000000000..b2ca48dcd Binary files /dev/null and b/source/img/hero-2-tablet@2x.jpg differ diff --git a/source/img/hero-2-tablet@2x.webp b/source/img/hero-2-tablet@2x.webp new file mode 100644 index 000000000..a6d149a06 Binary files /dev/null and b/source/img/hero-2-tablet@2x.webp differ diff --git a/source/img/hero-3-desktop@1x.jpg b/source/img/hero-3-desktop@1x.jpg new file mode 100644 index 000000000..f2fc8b96f Binary files /dev/null and b/source/img/hero-3-desktop@1x.jpg differ diff --git a/source/img/hero-3-desktop@1x.webp b/source/img/hero-3-desktop@1x.webp new file mode 100644 index 000000000..ddceba4af Binary files /dev/null and b/source/img/hero-3-desktop@1x.webp differ diff --git a/source/img/hero-3-desktop@2x.jpg b/source/img/hero-3-desktop@2x.jpg new file mode 100644 index 000000000..79f7c1211 Binary files /dev/null and b/source/img/hero-3-desktop@2x.jpg differ diff --git a/source/img/hero-3-desktop@2x.webp b/source/img/hero-3-desktop@2x.webp new file mode 100644 index 000000000..0b093f41b Binary files /dev/null and b/source/img/hero-3-desktop@2x.webp differ diff --git a/source/img/hero-3-mobile@1x.jpg b/source/img/hero-3-mobile@1x.jpg new file mode 100644 index 000000000..16c1ebb37 Binary files /dev/null and b/source/img/hero-3-mobile@1x.jpg differ diff --git a/source/img/hero-3-mobile@1x.webp b/source/img/hero-3-mobile@1x.webp new file mode 100644 index 000000000..17d4d4614 Binary files /dev/null and b/source/img/hero-3-mobile@1x.webp differ diff --git a/source/img/hero-3-mobile@2x.jpg b/source/img/hero-3-mobile@2x.jpg new file mode 100644 index 000000000..7a17012a7 Binary files /dev/null and b/source/img/hero-3-mobile@2x.jpg differ diff --git a/source/img/hero-3-mobile@2x.webp b/source/img/hero-3-mobile@2x.webp new file mode 100644 index 000000000..fc2370e91 Binary files /dev/null and b/source/img/hero-3-mobile@2x.webp differ diff --git a/source/img/hero-3-tablet@1x.jpg b/source/img/hero-3-tablet@1x.jpg new file mode 100644 index 000000000..d43f7d150 Binary files /dev/null and b/source/img/hero-3-tablet@1x.jpg differ diff --git a/source/img/hero-3-tablet@1x.webp b/source/img/hero-3-tablet@1x.webp new file mode 100644 index 000000000..976d4e6f6 Binary files /dev/null and b/source/img/hero-3-tablet@1x.webp differ diff --git a/source/img/hero-3-tablet@2x.jpg b/source/img/hero-3-tablet@2x.jpg new file mode 100644 index 000000000..dbc8641b9 Binary files /dev/null and b/source/img/hero-3-tablet@2x.jpg differ diff --git a/source/img/hero-3-tablet@2x.webp b/source/img/hero-3-tablet@2x.webp new file mode 100644 index 000000000..fb3a8da8a Binary files /dev/null and b/source/img/hero-3-tablet@2x.webp differ diff --git a/source/img/sprite/active-star.svg b/source/img/sprite/active-star.svg new file mode 100644 index 000000000..11fa1a87e --- /dev/null +++ b/source/img/sprite/active-star.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-left-nav.svg b/source/img/sprite/arrow-left-nav.svg new file mode 100644 index 000000000..d34cc1f30 --- /dev/null +++ b/source/img/sprite/arrow-left-nav.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/arrow-right.svg b/source/img/sprite/arrow-right.svg new file mode 100644 index 000000000..0b513d6d2 --- /dev/null +++ b/source/img/sprite/arrow-right.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/cross.svg b/source/img/sprite/cross.svg new file mode 100644 index 000000000..212aef56b --- /dev/null +++ b/source/img/sprite/cross.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/header-logo.svg b/source/img/sprite/header-logo.svg new file mode 100644 index 000000000..39ca8319e --- /dev/null +++ b/source/img/sprite/header-logo.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/inactive-star.svg b/source/img/sprite/inactive-star.svg new file mode 100644 index 000000000..fcfb61251 --- /dev/null +++ b/source/img/sprite/inactive-star.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/level.svg b/source/img/sprite/level.svg new file mode 100644 index 000000000..320a76361 --- /dev/null +++ b/source/img/sprite/level.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/logo.svg b/source/img/sprite/logo.svg deleted file mode 100644 index aee2e13c0..000000000 --- a/source/img/sprite/logo.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/source/img/sprite/menu.svg b/source/img/sprite/menu.svg new file mode 100644 index 000000000..845b51a15 --- /dev/null +++ b/source/img/sprite/menu.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/moon.svg b/source/img/sprite/moon.svg new file mode 100644 index 000000000..0f8601db2 --- /dev/null +++ b/source/img/sprite/moon.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/point.svg b/source/img/sprite/point.svg new file mode 100644 index 000000000..07a0c3db1 --- /dev/null +++ b/source/img/sprite/point.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/sun.svg b/source/img/sprite/sun.svg new file mode 100644 index 000000000..8ad03ad1e --- /dev/null +++ b/source/img/sprite/sun.svg @@ -0,0 +1 @@ + diff --git a/source/img/sprite/user.svg b/source/img/sprite/user.svg deleted file mode 100644 index 6873ae6e1..000000000 --- a/source/img/sprite/user.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/source/img/tours-1-desktop@1x.jpg b/source/img/tours-1-desktop@1x.jpg new file mode 100644 index 000000000..66caf8760 Binary files /dev/null and b/source/img/tours-1-desktop@1x.jpg differ diff --git a/source/img/tours-1-desktop@1x.webp b/source/img/tours-1-desktop@1x.webp new file mode 100644 index 000000000..a47a75c2a Binary files /dev/null and b/source/img/tours-1-desktop@1x.webp differ diff --git a/source/img/tours-1-desktop@2x.jpg b/source/img/tours-1-desktop@2x.jpg new file mode 100644 index 000000000..cb0a54a97 Binary files /dev/null and b/source/img/tours-1-desktop@2x.jpg differ diff --git a/source/img/tours-1-desktop@2x.webp b/source/img/tours-1-desktop@2x.webp new file mode 100644 index 000000000..2f7f618b0 Binary files /dev/null and b/source/img/tours-1-desktop@2x.webp differ diff --git a/source/img/tours-2-desktop@1x.jpg b/source/img/tours-2-desktop@1x.jpg new file mode 100644 index 000000000..0a6e1e423 Binary files /dev/null and b/source/img/tours-2-desktop@1x.jpg differ diff --git a/source/img/tours-2-desktop@1x.webp b/source/img/tours-2-desktop@1x.webp new file mode 100644 index 000000000..4bc3cc53a Binary files /dev/null and b/source/img/tours-2-desktop@1x.webp differ diff --git a/source/img/tours-2-desktop@2x.jpg b/source/img/tours-2-desktop@2x.jpg new file mode 100644 index 000000000..106dc4018 Binary files /dev/null and b/source/img/tours-2-desktop@2x.jpg differ diff --git a/source/img/tours-2-desktop@2x.webp b/source/img/tours-2-desktop@2x.webp new file mode 100644 index 000000000..b3febdd47 Binary files /dev/null and b/source/img/tours-2-desktop@2x.webp differ diff --git a/source/img/tours-3-desktop@1x.jpg b/source/img/tours-3-desktop@1x.jpg new file mode 100644 index 000000000..3ad5f3603 Binary files /dev/null and b/source/img/tours-3-desktop@1x.jpg differ diff --git a/source/img/tours-3-desktop@1x.webp b/source/img/tours-3-desktop@1x.webp new file mode 100644 index 000000000..33d296867 Binary files /dev/null and b/source/img/tours-3-desktop@1x.webp differ diff --git a/source/img/tours-3-desktop@2x.jpg b/source/img/tours-3-desktop@2x.jpg new file mode 100644 index 000000000..3f74fe7e6 Binary files /dev/null and b/source/img/tours-3-desktop@2x.jpg differ diff --git a/source/img/tours-3-desktop@2x.webp b/source/img/tours-3-desktop@2x.webp new file mode 100644 index 000000000..dae761805 Binary files /dev/null and b/source/img/tours-3-desktop@2x.webp differ diff --git a/source/img/tours-4-desktop@1x.jpg b/source/img/tours-4-desktop@1x.jpg new file mode 100644 index 000000000..87666f526 Binary files /dev/null and b/source/img/tours-4-desktop@1x.jpg differ diff --git a/source/img/tours-4-desktop@1x.webp b/source/img/tours-4-desktop@1x.webp new file mode 100644 index 000000000..feb4a8346 Binary files /dev/null and b/source/img/tours-4-desktop@1x.webp differ diff --git a/source/img/tours-4-desktop@2x.jpg b/source/img/tours-4-desktop@2x.jpg new file mode 100644 index 000000000..390098a6b Binary files /dev/null and b/source/img/tours-4-desktop@2x.jpg differ diff --git a/source/img/tours-4-desktop@2x.webp b/source/img/tours-4-desktop@2x.webp new file mode 100644 index 000000000..f13bcdccb Binary files /dev/null and b/source/img/tours-4-desktop@2x.webp differ diff --git a/source/index.html b/source/index.html index 0ce0e1c9c..bbccbdc9e 100644 --- a/source/index.html +++ b/source/index.html @@ -1,20 +1,351 @@ - - - - Lifetour - - - - - + + + + Lifetour + + + + +
+
+ +
+
+
+
    +
  • + + + + + + + + Горы кавказа + +
    +

    Захватывающие вершины Кавказа

    +

    В сопровождении опытных гидов + вы пройдёте через потрясающие + ландшафты и совершите восход + на вершину горы Чегет.

    + Смотреть тур +
      +
    • + 6 дней/5 ночей +
      • +
    • + Высокая сложность +
      • +
    +
    +
    • +
  • + + + + + + + + Горы Камчатки + +
    +

    Невероятная природа Камчатки

    +

    Незабываемое приключение, во время которого вы отправитесь в путешествие по одному из самых + нетронутых уголков дикой природы в мире.

    + Смотреть тур +
      +
    • + 9 дней/10 ночей +
      • +
    • + Средняя сложность +
      • +
    +
    +
    • +
  • + + + + + + + + Горы Алтайского Края + +
    +

    Магические пейзажи Алтайского Края

    +

    Алтайский трекинг-тур – это захватывающее приключение с посещением магических и захватывающих + дух ландшафтов Алтайских гор.

    + Смотреть тур +
      +
    • + 6 дней/5 ночей +
      • +
    • + Высокая сложность +
      • +
    +
    +
    • +
+ +
+
+
+
+
+
+

Ближайшие туры

+
+ + +
+
+
+
    +
  • + + + + Горы Алтайского Края + +
    +
    +

    Кавказ

    +
    +

    4 дня

    +

    3 ночи

    +
    +
    +

    Путешествие + вокруг Эльбруса

    +
    +
    Сложность:
    +
    + + + + + +
    +
    Даты набора:
    +
    12.06–19.06
    +
    Группа:
    +
    до 15 чел.
    +
    +
    +
    • +
  • + + + + Горы Алтайского Края + +
    +
    +

    Алтай

    +
    +

    14 дней

    +

    13 ночей

    +
    +
    +

    Путь к подножию + Белухи

    +
    +
    Сложность:
    +
    + + + + + +
    +
    Даты набора:
    +
    14.06–23.06
    +
    Группа:
    +
    до 25 чел.
    +
    +
    +
    • +
  • + + + + Горы Алтайского Края + +
    +
    +

    Адыгея

    +
    +

    7 дней

    +

    6 ночей

    +
    +
    +

    Через Фишт
    к Чёрному морю и обратно

    +
    +
    Сложность:
    +
    + + + + + +
    +
    Даты набора:
    +
    15.07–19.07
    +
    Группа:
    +
    до 22 чел.
    +
    +
    +
    • +
  • + + + + Горы Алтайского Края + +
    +
    +

    Урал

    +
    +

    9 дней

    +

    10 ночей

    +
    +
    +

    Восхождение + Манарага

    +
    +
    Сложность:
    +
    + + + + + +
    +
    Даты набора:
    +
    12.07–19.07
    +
    Группа:
    +
    до 7 чел.
    +
    +
    +
    • +
+
+ Показать все туры +
+
+
+ + + + + + + + Горы Камчатки + +
+

О нас

+
    +
  • +

    История компании

    +

    В далёком 2000 году мы начали заниматься туризмом — походы, поездки, + восхождения, нам это настолько понравилось, что мы этим стали жить. Спустя 5 лет, в 2005 году мы основали + компанию, чтобы показывать людям удивительные места нашей страны. +

    +
    • +
  • +

    Наша цель

    +

    + Подарить вам незабываемые впечатления от похода в горы. Мы берём на себя все организационные вопросы. + При организации мы обязательно учтём все ваши пожелания. Вам останется только наслаждаться незабываемым + приключением в приятной компании. +

    +
    • +
+
+
+
+ + +
header
hero
tours
@@ -25,7 +356,8 @@
gallery
form
footer
- - + --> + + diff --git a/source/js/main.js b/source/js/main.js index 70fde252c..87d814b93 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,4 +1,6 @@ -// https://swiperjs.com/get-started#installation -// import Swiper from "swiper"; -// import {Navigation, Pagination} from "swiper/modules"; -// import 'swiper/css'; +import { initSlider } from './swiper-init.js'; +initSlider(); + +import './open-burger.js'; +import './title-shadow.js'; + diff --git a/source/js/open-burger.js b/source/js/open-burger.js new file mode 100644 index 000000000..bb8e259b7 --- /dev/null +++ b/source/js/open-burger.js @@ -0,0 +1,23 @@ +const menuButton = document.querySelector('.header__menu-button'); +const menuList = document.querySelector('.header__list'); +const body = document.querySelector('.page-body'); + +menuButton.addEventListener('click', () => { + const isOpen = menuButton.classList.contains('header__menu-button--open'); + + // Переключаем классы кнопки + menuButton.classList.toggle('header__menu-button--open', !isOpen); + menuButton.classList.toggle('header__menu-button--close', isOpen); + + // Переключаем класс у списка + menuList.classList.toggle('header__list--open', isOpen); +}); + +menuButton.addEventListener('click', () => { + // Проверяем, есть ли у кнопки нужный класс + if (menuButton.classList.contains('header__menu-button--close')) { + body.classList.add('page-body--menu-open'); + } else { + body.classList.remove('page-body--menu-open'); + } +}); diff --git a/source/js/swiper-init.js b/source/js/swiper-init.js new file mode 100644 index 000000000..c4749e0e7 --- /dev/null +++ b/source/js/swiper-init.js @@ -0,0 +1,70 @@ +import Swiper from 'swiper/bundle'; +import 'swiper/css'; +import 'swiper/css/pagination'; + +function toggleNavButtons(swiper) { + const prevButton = document.querySelector('.slider-navigation--prev'); + const nextButton = document.querySelector('.slider-navigation--next'); + + if (!prevButton || !nextButton) { + return; + } + + const totalSlides = swiper.slides.length; + const slidesPerView = swiper.params.slidesPerView; + const currentIndex = swiper.activeIndex; + + prevButton.disabled = swiper.isBeginning; + nextButton.disabled = currentIndex >= totalSlides - slidesPerView; +} + +export const initSlider = () => { + document.addEventListener('DOMContentLoaded', () => { + // Инициализация слайдера для hero__swiper + new Swiper('.hero__swiper', { + loop: true, + slidesPerView: 1, + pagination: { + el: '.hero__swiper-pagination', + bulletClass: 'hero__pagination-control', + bulletActiveClass: 'hero__pagination-control-active', + type: 'bullets', + clickable: true, + }, + breakpoints: { + 1440: { + allowTouchMove: false, + } + } + }); + + // Инициализация слайдера для tours__swiper + new Swiper('.tours__swiper', { + loop: false, + slidesPerView: 1, + slidesPerGroup: 1, + navigation: { + nextEl: '.slider-navigation--next', + prevEl: '.slider-navigation--prev', + }, + breakpoints: { + 768: { + slidesPerView: 2, + spaceBetween: 18, + }, + 1440: { + slidesPerView: 3, + spaceBetween: 30, + } + }, + on: { + init: function () { + toggleNavButtons(this); + }, + slideChange: function () { + toggleNavButtons(this); + }, + } + }); + }); +}; diff --git a/source/js/title-shadow.js b/source/js/title-shadow.js new file mode 100644 index 000000000..0cf91a3f4 --- /dev/null +++ b/source/js/title-shadow.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', () => { + const titles = document.querySelectorAll('.main-title'); + + titles.forEach((title) => { + if (!title.querySelector('.main-title__shadow-title')) { + const shadowText = document.createElement('span'); + shadowText.classList.add('main-title__shadow-title'); + shadowText.textContent = title.textContent; + + title.appendChild(shadowText); + } + }); +}); diff --git a/source/sass/blocks/about.scss b/source/sass/blocks/about.scss new file mode 100644 index 000000000..737b98e54 --- /dev/null +++ b/source/sass/blocks/about.scss @@ -0,0 +1,145 @@ +.about { + width: 320px; + margin: 0 auto; + padding: 20px 0; + + @media (min-width: $tablet-width) { + width: 768px; + padding: 40px 0; + display: flex; + align-items: center; + } + + @media (min-width: $desktop-width) { + width: 1440px; + padding: 100px 0; + align-items: start; + } +} + +.about__text-container { + width: 320px; + padding: 0 15px; + box-sizing: border-box; + + @media (min-width: $tablet-width) { + width: 310px; + padding: 0; + padding-right: 40px; + } + + @media (min-width: $desktop-width) { + width: 780px; + padding: 0; + padding-right: 120px; + } +} + +.about__image { + display: block; + + @media (min-width: $tablet-width) { + padding-bottom: 40px; + } + + @media (min-width: $desktop-width) { + padding-bottom: 0; + } +} + +.about__title { + margin-top: 16px; + margin-bottom: 42px; + + @media (min-width: $tablet-width) { + margin-top: 20px; + margin-bottom: 47px; + } + + @media (min-width: $desktop-width) { + margin: 0; + margin-bottom: 57px; + padding-top: 45px; + padding-bottom: 2px; + } +} + +.about__title .main-title__shadow-title { + top: -13px; + + @media (min-width: $tablet-width) { + top: -15px; + } + + @media (min-width: $desktop-width) { + top: 4px; + } +} + +.about__list { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 25px; + list-style-type: none; + + @media (min-width: $tablet-width) { + gap: 29px; + } +} + +.about__item { + @media (min-width: $desktop-width) { + width: 585px; + } +} + +.about__item-title { + margin: 0; + margin-bottom: 15px; + padding: 0; + font-size: 16px; + font-weight: 700; + line-height: 16px; + + @media (min-width: $tablet-width) { + margin-bottom: 12px; + font-size: 18px; + line-height: 18px; + } + + @media (min-width: $desktop-width) { + margin-bottom: 16px; + font-size: 21px; + line-height: 21px; + } +} + +.about__list-text { + width: 270px; + margin: 0; + padding: 0; + font-size: 14px; + font-weight: 400; + line-height: 20px; + + @media (min-width: $tablet-width) { + font-size: 16px; + line-height: 24px; + } + + @media (min-width: $desktop-width) { + width: 585px; + font-size: 14px; + line-height: 22px; + } +} + +.about__list-text span { + display: block; + + @media (min-width: $tablet-width) { + display: none; + } +} diff --git a/source/sass/blocks/header.scss b/source/sass/blocks/header.scss new file mode 100644 index 000000000..d5a528688 --- /dev/null +++ b/source/sass/blocks/header.scss @@ -0,0 +1,298 @@ +.header { + background-color: $main-background-color; + z-index: 2; +} + +.header__navigation { + position: relative; + width: 320px; + margin: 0 auto; + padding: 15px; + box-sizing: border-box; + display: grid; + grid-template-columns: auto 142px; + grid-auto-rows: auto; + row-gap: 14px; + + @media (min-width: $tablet-width) { + width: 768px; + padding: 20px 45px; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + @media (min-width: $desktop-width) { + width: 1440px; + padding: 32px 120px; + justify-content: space-between; + } +} + +.header__menu-button { + padding: 0; + position: relative; + width: 26px; + height: 26px; + grid-column: 1 / 2; + grid-row: 1 / 2; + border: none; + background-color: $colorless; + cursor: pointer; + + &::after { + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 26px; + height: 26px; + transform: translate(-50%, -50%); + content: ""; + mask-position: center; + mask-repeat: no-repeat; + background-color: $base-white-color; + } + + @media (min-width: $tablet-width) { + margin-right: 242px; + } + + @media (min-width: $desktop-width) { + display: none; + } + + &:hover { + opacity: 0.5; + } + + &:focus-visible { + outline: 1px solid $base-white-color; + opacity: 1; + } + + &:active { + opacity: 0.3; + } +} + +.header__menu-button--open { + &::after { + mask-image: url("/__spritemap#sprite-menu-view"); + } +} + +.header__menu-button--close { + &::after { + mask-image: url("/__spritemap#sprite-cross-view"); + } +} + +.header__link-img { + display: flex; + align-items: center; + justify-content: center; + + @media (min-width: $desktop-width) { + padding-top: 10px; + padding-bottom: 10px; + } + + &:hover { + opacity: 0.5; + } + + &:focus-visible { + outline: 1px solid $base-white-color; + opacity: 1; + cursor: pointer; + } + + &:active { + opacity: 0.3; + } +} + +.header__logo { + grid-column: 2 / 3; + grid-row: 1 / 2; + + @media (min-width: $desktop-width) { + display: block; + width: 205px; + } +} + +.header__list { + display: none; + position: absolute; + left: 0; + top: 100%; + width: 100%; + margin: 0; + padding: 30px 15px 50px; + box-sizing: border-box; + flex-direction: column; + flex-wrap: wrap; + list-style-type: none; + gap: 22px; + z-index: 2; + + &::after { + content: ""; + display: block; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100vw; + min-width: 320px; + height: 100%; + background-color: $main-background-color; + } + + &--open { + display: flex; + } + + @media (min-width: $tablet-width) { + padding: 45px 50px 70px; + gap: 26px; + } + + @media (min-width: $desktop-width) { + position: relative; + width: 838px; + padding: 0; + display: flex; + flex-direction: row; + justify-content: center; + font-size: 16px; + font-weight: 400; + line-height: 16px; + + &::after { + display: none; + } + } +} + +.header__item { + z-index: 1; +} + +.header__item-link { + position: relative; + font-weight: 700; + line-height: 14px; + letter-spacing: 0.56px; + color: $base-white-color; + text-transform: uppercase; + text-decoration: none; + + @media (min-width: $tablet-width) { + font-size: 16px; + line-height: 16px; + } + + @media (min-width: $desktop-width) { + font-weight: 400; + text-transform: none; + } + + &::after { + display: none; + content: ""; + position: absolute; + top: 0; + left: -5px; + right: -5px; + bottom: -3px; + } + + &:hover { + &::after { + display: block; + border-bottom: 1px solid $base-white-color; + } + } + + &:focus-visible { + outline: none; + + &::after { + display: block; + left: -5px; + right: -5px; + top: -3px; + bottom: -3px; + border: 1px solid $base-white-color; + } + } + + &:active { + color: $active-color; + + &::after { + display: none; + } + } + + &--disabled { + color: $disabled-color; + pointer-events: none; + cursor: default; + + &:focus-visible { + display: none; + } + } +} + +.header__number { + grid-column: 2 / 3; + grid-row: 2 / 3; + justify-self: end; + font-weight: 600; + line-height: 14px; + color: $base-white-color; + text-decoration: none; + + @media (min-width: $tablet-width) { + margin-left: auto; + font-size: 16px; + line-height: 16px; + } + + @media (min-width: $desktop-width) { + margin-left: 0; + font-size: 18px; + line-height: 18px; + } + + &:hover { + opacity: 0.5; + } + + &:focus-visible { + outline: none; + color: $focus-color; + opacity: 1; + } + + &:active { + color: $active-color; + opacity: 1; + } + + &--disabled { + color: $disabled-color; + opacity: 1; + pointer-events: none; + cursor: default; + + &:focus-visible { + display: none; + } + } +} diff --git a/source/sass/blocks/hero.scss b/source/sass/blocks/hero.scss new file mode 100644 index 000000000..d8c9e9590 --- /dev/null +++ b/source/sass/blocks/hero.scss @@ -0,0 +1,297 @@ +.hero { + width: 320px; + margin: 0 auto; + + @media (min-width: $tablet-width) { + width: 768px; + } + + @media (min-width: $desktop-width) { + width: 1440px; + } +} + +.hero__swiper { + position: relative; +} + +.hero__swiper-wrapper { + margin: 0; + padding: 0; + list-style-type: none; +} + +.hero__swiper-slide.swiper-slide { + width: 100%; + display: grid; + grid-template-columns: 1fr; + position: relative; + overflow: hidden; +} + +.hero__swiper-slide picture { + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +.hero__swiper-slide picture img { + display: block; + width: 100%; + height: 100%; + min-height: 568px; + object-fit: cover; + object-position: center; + background-color: $base-text-color; +} + +.hero__slide-text-container { + width: 100%; + grid-column: 1 / 2; + grid-row: 1 / 2; + padding-top: 79px; + padding-bottom: 96px; + padding-right: 15px; + padding-left: 15px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + word-wrap: break-word; + overflow-wrap: break-word; + z-index: 2; + + @media (min-width: $tablet-width) { + padding-top: 40px; + padding-bottom: 100px; + padding-right: 45px; + padding-left: 45px; + top: 343px; + } + + @media (min-width: $desktop-width) { + padding-top: 200px; + padding-bottom: 80px; + padding-left: 120px; + padding-right: 120px; + box-sizing: border-box; + align-items: start; + justify-content: start; + } +} + +.hero__slide-text-container--custom { + @media (min-width: $tablet-width) { + top: 140px; + } + + @media (min-width: $desktop-width) { + top: 200px; + } +} + +.hero__slide-text-container h2 { + margin: 0; + margin-bottom: 15px; + padding: 0; + font-size: 26px; + font-weight: 800; + line-height: 26px; + text-align: center; + color: $base-white-color; + + @media (min-width: $tablet-width) { + margin-bottom: 13px; + font-size: 56px; + line-height: 56px; + } + + @media (min-width: $desktop-width) { + width: 940px; + margin-bottom: 23px; + font-size: 77px; + line-height: 77px; + text-align: left; + } +} + +.hero__slide-text-container p { + width: 276px; + margin: 0; + margin-bottom: 60px; + padding: 0; + font-size: 15px; + font-weight: 400; + line-height: 20px; + text-align: center; + color: $base-white-color; + + @media (min-width: $tablet-width) { + width: 474px; + margin-bottom: 35px; + font-size: 17px; + line-height: 24px; + } + + @media (min-width: $desktop-width) { + width: 464px; + margin-bottom: 37px; + font-size: 17px; + line-height: 24px; + text-align: left; + } +} + +.hero__button { + display: block; + width: 180px; + padding: 20px; + box-sizing: border-box; + font-size: 16px; + font-weight: 500; + line-height: 16px; + color: $base-white-color; + background-color: $main-background-color; + text-align: center; + text-decoration: none; + + @media (min-width: $desktop-width) { + margin-bottom: 134px; + } + + &:hover { + background-color: $base-white-color; + color: $active-color; + outline: 1px solid $active-color; + } + + &:focus-visible { + background-color: $base-white-color; + color: $active-color; + outline: none; + } + + &:active { + background-color: $active-color; + color: $base-white-color; + } + + &--disabled { + color: $base-white-color; + background-color: $disabled-color; + opacity: 1; + pointer-events: none; + cursor: default; + + &:focus-visible { + display: none; + } + } +} + +.hero__info-list { + display: none; + + @media (min-width: $desktop-width) { + margin: 0; + padding: 0; + display: flex; + gap: 10px; + list-style-type: none; + } +} + +.hero__info-text { + position: relative; + display: block; + margin: 0; + padding: 13px 20px; + padding-left: 40px; + font-size: 12px; + line-height: 16px; + outline: 1px solid $base-white-color; + color: $base-white-color; + + &::after { + display: block; + position: absolute; + top: 50%; + left: 20px; + width: 12px; + height: 12px; + transform: translateY(-50%); + content: ""; + mask-position: center; + mask-repeat: no-repeat; + background-color: $base-white-color; + } +} + +.hero__info-text--moon { + &::after { + mask-image: url("/__spritemap#sprite-moon-view"); + } +} + +.hero__info-text--level { + &::after { + mask-image: url("/__spritemap#sprite-level-view"); + } +} + +.hero .hero__swiper .hero__swiper-pagination { + position: absolute; + bottom: 40px; + z-index: 10; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + + @media (min-width: $desktop-width) { + width: 100px; + bottom: 91px; + right: 120px; + left: auto; + } +} + +.hero__pagination-control { + width: 16px; + height: 16px; + box-sizing: border-box; + background-color: $colorless; + border: 1px solid $base-white-color; + border-radius: 50%; + opacity: 1; + cursor: pointer; + + @media (min-width: $tablet-width) { + width: 20px; + height: 20px; + } + + &:hover { + background-color: $hover-light-grey; + } + + &:focus-visible { + background-color: $colorless; + outline: 1px solid rgba(255, 255, 255, 0.5); + outline-offset: 1px; + } + + &:active { + background-color: rgba(255, 255, 255, 0.5); + } +} + +.hero__pagination-control-active { + background-color: $base-white-color; + + &:hover, + &:active, + &:focus-visible { + background-color: $base-white-color; + } +} diff --git a/source/sass/blocks/main-title.scss b/source/sass/blocks/main-title.scss new file mode 100644 index 000000000..aacbc584b --- /dev/null +++ b/source/sass/blocks/main-title.scss @@ -0,0 +1,42 @@ +.main-title { + margin: 0; + padding: 0; + position: relative; + font-size: 22px; + font-weight: 800; + line-height: 22px; + + @media (min-width: $tablet-width) { + font-size: 25px; + line-height: 25px; + } + + @media (min-width: $desktop-width) { + font-size: 35px; + line-height: 35px; + } +} + +.main-title__shadow-title { + position: absolute; + top: -15px; + left: 0; + width: 100%; + font-size: 26px; + font-weight: 800; + line-height: 26px; + color: $base-text-color; + opacity: 0.03; + text-align: left; + z-index: -1; + + @media (min-width: $tablet-width) { + font-size: 40px; + line-height: 40px; + } + + @media (min-width: $desktop-width) { + font-size: 55px; + line-height: 55px; + } +} diff --git a/source/sass/blocks/page-body.scss b/source/sass/blocks/page-body.scss new file mode 100644 index 000000000..0dc9aed41 --- /dev/null +++ b/source/sass/blocks/page-body.scss @@ -0,0 +1,16 @@ +.page-body--menu-open { + position: relative; + + &::after { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + background-color: rgba(45, 56, 63, 0.6); + opacity: 0.5; + z-index: 1; + } +} diff --git a/source/sass/blocks/slider-navigation.scss b/source/sass/blocks/slider-navigation.scss new file mode 100644 index 000000000..b36f0faf4 --- /dev/null +++ b/source/sass/blocks/slider-navigation.scss @@ -0,0 +1,75 @@ + +.slider-navigation { + position: relative; + width: 37px; + height: 35px; + border: none; + background-color: $main-background-color; + cursor: pointer; + + &::after { + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + content: ""; + width: 13px; + height: 10px; + mask-position: center; + mask-repeat: no-repeat; + background-color: $base-white-color; + } + + &:hover { + background-color: $colorless; + outline: 1px solid $active-color; + outline-offset: -1px; + + &::after { + background-color: $active-color; + } + } + + &:focus-visible { + background-color: $colorless; + outline: none; + + &::after { + background-color: $active-color; + } + } + + &:active { + background-color: $active-color; + outline: none; + + &::after { + background-color: $base-white-color; + } + } + + &:disabled { + background-color: $disabled-color; + pointer-events: none; + cursor: default; + outline: none; + + &::after { + background-color: $base-white-color; + } + } +} + +.slider-navigation--prev { + &::after { + mask-image: url("/__spritemap#sprite-arrow-left-nav-view"); + } +} + +.slider-navigation--next { + &::after { + mask-image: url("/__spritemap#sprite-arrow-left-nav-view"); + transform: translate(-50%, -50%) rotate(180deg); + } +} diff --git a/source/sass/blocks/tours.scss b/source/sass/blocks/tours.scss new file mode 100644 index 000000000..590624266 --- /dev/null +++ b/source/sass/blocks/tours.scss @@ -0,0 +1,428 @@ +.tours { + position: relative; + width: 100%; + overflow: hidden; + + &::after { + display: block; + position: absolute; + width: 1176px; + height: 789px; + content: ""; + left: calc(50% + 18px); + top: 8px; + /* stylelint-disable-next-line @stylistic/declaration-colon-newline-after */ + background-image: image-set( + url("../../img/bg-mountain-mobile@1x.png") type("image/png") 1x, + url("../../img/bg-mountain-mobile@2x.png") type("image/png") 2x, + url("../../img/bg-mountain-mobile@1x.webp") type("image/webp") 1x, + url("../../img/bg-mountain-mobile@2x.webp") type("image/webp") 2x, + ); + background-size: 1176px 789px; + z-index: -1; + } + + @media (min-width: $tablet-width) { + &::after { + width: 2047px; + height: 1630px; + left: calc(50% - 41px); + top: -92px; + /* stylelint-disable-next-line @stylistic/declaration-colon-newline-after */ + background-image: image-set( + url("../../img/bg-mountain-tablet@1x.png") type("image/png") 1x, + url("../../img/bg-mountain-tablet@2x.png") type("image/png") 2x, + url("../../img/bg-mountain-tablet@1x.webp") type("image/webp") 1x, + url("../../img/bg-mountain-tablet@2x.webp") type("image/webp") 2x, + ); + background-size: 2047px 1630px; + } + } + + @media (min-width: $desktop-width) { + &::after { + left: calc(50% + 115px); + top: -130px; + } + } +} + +.tours__container { + width: 320px; + margin: 0 auto; + padding: 20px 15px; + box-sizing: border-box; + + @media (min-width: $tablet-width) { + width: 768px; + padding: 40px 45px; + } + + @media (min-width: $desktop-width) { + width: 1440px; + padding: 100px 120px; + } +} + +.tours__title-container { + margin-top: 18px; + margin-bottom: 40px; + + @media (min-width: $tablet-width) { + margin-top: 20px; + margin-bottom: 25px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + @media (min-width: $desktop-width) { + margin-top: 23px; + margin-bottom: 50px; + } +} + +.tours__title { + @media (min-width: $tablet-width) { + width: 400px; + } + + @media (min-width: $desktop-width) { + width: 542px; + } +} + +.tours__swiper-wrapper { + width: 100%; + margin: 0; + margin-bottom: 25px; + padding: 0; + display: flex; + list-style: none; + + @media (min-width: $desktop-width) { + margin-bottom: 53px; + } +} + +.tours__slide picture { + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +.tours__slide.swiper-slide { + width: 100%; + display: grid; + grid-template-columns: 1fr; + position: relative; + overflow: hidden; + + @media (min-width: $tablet-width) { + width: 330px; + } +} + +.tours__img { + display: block; + width: 100%; + height: 100%; + min-height: 416px; + object-fit: cover; + object-position: center; + background-color: $base-text-color; +} + +.tours__content { + padding: 30px 20px; + box-sizing: border-box; + grid-column: 1 / 2; + grid-row: 1 / 2; + position: relative; + display: flex; + flex-direction: column; + align-self: end; + z-index: 2; +} + +.tours__place-container { + margin-bottom: 15px; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + row-gap: 12px; +} + +.tours__location { + position: relative; + margin: 0; + padding: 8px 12px; + padding-left: 34px; + font-size: 12px; + font-weight: 500; + line-height: 12px; + color: $base-white-color; + background-color: $main-background-color; + + &::after { + display: block; + position: absolute; + top: 50%; + left: 12px; + transform: translateY(-50%); + content: ""; + width: 16px; + height: 16px; + mask-position: center; + mask-repeat: no-repeat; + background-color: $base-white-color; + mask-image: url("/__spritemap#sprite-point-view"); + } +} + +.tours__time-container { + display: flex; + gap: 14px; +} + +.tours__time { + position: relative; + margin: 0; + padding-left: 32px; + font-size: 12px; + font-weight: 500; + line-height: 12px; + color: $base-white-color; + + &::after { + display: block; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + content: ""; + width: 20px; + height: 20px; + mask-position: center; + mask-repeat: no-repeat; + background-color: $base-white-color; + } +} + +.tours__time--day { + &::after { + mask-image: url("/__spritemap#sprite-sun-view"); + } +} + +.tours__time--night { + &::after { + width: 18px; + height: 18px; + mask-image: url("/__spritemap#sprite-moon-view"); + } +} + +.tours__card-title { + position: relative; + margin: 0; + margin-bottom: 31px; + padding: 0; + font-size: 24px; + font-weight: 700; + line-height: 28px; + color: $base-white-color; + + @media (min-width: $tablet-width) { + width: 233px; + } + + &::after { + display: block; + position: absolute; + bottom: -16px; + left: 0; + transform: translateY(-50%); + content: ""; + width: 80px; + height: 1px; + background-color: $base-white-color; + opacity: 0.2; + } +} + +.tours__info { + margin: 0; + padding: 0; + display: grid; + grid-template-columns: auto auto auto; + row-gap: 4px; + color: $base-white-color; + justify-content: space-between; + align-items: end; +} + +.tours__info dt { + margin: 0; + padding: 0; + font-size: 12px; + font-weight: 300; + line-height: 12px; + color: $base-white-color; +} + +.tours__info dd { + margin: 0; + padding: 0; + font-size: 13px; + font-weight: 700; + line-height: 13px; + color: $base-white-color; +} + +.tours__complexity-title { + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +.tours__complexity { + grid-column: 1 / 2; + grid-row: 2 / 3; + display: flex; + flex-wrap: wrap; + gap: 1px; +} + +.tours__star { + display: inline-block; + width: 16px; + height: 16px; + mask-position: center; + mask-repeat: no-repeat; + background-color: $base-white-color; +} + +.tours__star--active { + mask-image: url("/__spritemap#sprite-active-star-view"); +} + +.tours__star--inactive { + mask-image: url("/__spritemap#sprite-inactive-star-view"); +} + +.tours__date-title { + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +.tours__date { + grid-column: 2 / 3; + grid-row: 2 / 3; +} + +.tours__group-title { + grid-column: 3 / 4; + grid-row: 1 / 2; +} + +.tours__group { + grid-column: 3 / 4; + grid-row: 2 / 3; +} + +.tours__navigation-container { + display: none; + + @media (min-width: $tablet-width) { + display: flex; + gap: 4px; + } + + @media (min-width: $desktop-width) { + margin-top: -3px; + display: flex; + gap: 4px; + } +} + +.tours__button-show { + position: relative; + display: block; + width: 212px; + box-sizing: border-box; + margin: 0 auto; + padding: 10px; + padding-right: 28px; + font-size: 14px; + font-weight: 700; + line-height: 14px; + letter-spacing: 0.56px; + text-transform: uppercase; + text-decoration: none; + color: $focus-color; + text-align: center; + + @media (min-width: $tablet-width) { + width: 236px; + font-size: 16px; + line-height: 16px; + letter-spacing: 0.64px; + } + + &::after { + display: block; + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + content: ""; + width: 9px; + height: 14px; + mask-image: url("/__spritemap#sprite-arrow-right-view"); + mask-position: center; + mask-repeat: no-repeat; + background-color: $focus-color; + } + + &:hover { + color: $main-background-color; + opacity: 0.1; + + &::after { + background-color: $main-background-color; + } + } + + &:focus-visible { + color: $main-background-color; + opacity: 1; + outline: none; + + &::after { + background-color: $main-background-color; + } + } + + &:active { + color: $active-color; + opacity: 1; + + &::after { + background-color: $active-color; + } + } + + &--disabled { + color: $disabled-color; + pointer-events: none; + cursor: default; + + &:focus-visible { + display: none; + } + } + + &--disabled::after { + background-color: $disabled-color; + } +} diff --git a/source/sass/common/fonts.scss b/source/sass/common/fonts.scss new file mode 100644 index 000000000..980bc5b89 --- /dev/null +++ b/source/sass/common/fonts.scss @@ -0,0 +1,6 @@ +@include font-face("Montserrat", 300, normal, url("../../fonts/montserrat/montserrat-300.woff2") format("woff2")); +@include font-face("Montserrat", 400, normal, url("../../fonts/montserrat/montserrat-400.woff2") format("woff2")); +@include font-face("Montserrat", 500, normal, url("../../fonts/montserrat/montserrat-500.woff2") format("woff2")); +@include font-face("Montserrat", 600, normal, url("../../fonts/montserrat/montserrat-600.woff2") format("woff2")); +@include font-face("Montserrat", 700, normal, url("../../fonts/montserrat/montserrat-700.woff2") format("woff2")); +@include font-face("Montserrat", 800, normal, url("../../fonts/montserrat/montserrat-800.woff2") format("woff2")); diff --git a/source/sass/common/global.scss b/source/sass/common/global.scss new file mode 100644 index 000000000..f6c1933d9 --- /dev/null +++ b/source/sass/common/global.scss @@ -0,0 +1,24 @@ +html { + height: 100%; + margin: 0; + padding: 0; +} + +body { + min-width: 320px; + height: 100%; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + font-family: "Montserrat", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + color: $base-text-color; +} + +main { + flex-grow: 1; +} + diff --git a/source/sass/common/variables.scss b/source/sass/common/variables.scss new file mode 100644 index 000000000..7ac828dce --- /dev/null +++ b/source/sass/common/variables.scss @@ -0,0 +1,24 @@ +@mixin font-face($font-family, $font-weight, $font-style, $font-src) { + @font-face { + font-family: $font-family; + font-weight: $font-weight; + font-style: $font-style; + font-display: swap; + src: $font-src; + } +} + +/* size */ +$tablet-width: 768px; +$desktop-width: 1440px; + +/* color */ + +$base-text-color: #2d383f; +$main-background-color: #0266c1; +$active-color: #1c3374; +$focus-color: #2d383f; +$disabled-color: #999999; +$hover-light-grey: #d9d9d9; +$base-white-color: #ffffff; +$colorless: rgba(0, 0, 0, 0); diff --git a/source/sass/common/visually-hidden.scss b/source/sass/common/visually-hidden.scss new file mode 100644 index 000000000..70a0f84e7 --- /dev/null +++ b/source/sass/common/visually-hidden.scss @@ -0,0 +1,12 @@ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} diff --git a/source/sass/style.scss b/source/sass/style.scss index 96467369f..2296e69f7 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -1,4 +1,16 @@ -// Vendor -// --------------------------------- - +/* GLOBAL */ @import "vendor/normalize"; +@import "./common/visually-hidden"; +@import "./common/variables"; +@import "./common/global"; +@import "./common/fonts"; + +/* BLOCKS */ + +@import "./blocks/page-body"; +@import "./blocks/main-title"; +@import "./blocks/slider-navigation"; +@import "./blocks/header"; +@import "./blocks/hero"; +@import "./blocks/tours"; +@import "./blocks/about";