diff --git a/css/barbers-styles.css b/css/barbers-styles.css index 77b292c..3da93cd 100644 --- a/css/barbers-styles.css +++ b/css/barbers-styles.css @@ -1,11 +1,21 @@ .barbers { background-color: #f7f7f7; + height: 890px; /* height din pagina mare container */ + padding: 130px 55px; /* marginile la pagina mare */ +} + +.barbers-head { + margin-top: 20px; + margin-bottom: 44px; } .barbers-social-media-list { display: flex; gap: 10px; fill: var(--black-color); + margin: auto; + width: fit-content; + margin: 30px auto 0px auto; } .barbers-social-media-icon { @@ -23,3 +33,34 @@ .barbers-social-media-icon:active { fill: var(--brand-color); } + +.barbers-list { + display: flex; /* sa puna imaginile una dupa alta */ + gap: 30px; /* distanta intre imagini cele 3 e de 30px */ +} + +.barbers-list-item { +} + +.barbers-list-item-title { + /* se refera la numele fiecaruia john smith michele doe si alan */ + color: var(--black-color); + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.36px; + + margin-top: 30px; +} + +.barbers-list-item-description { + color: var(--brand-color); + text-align: center; + font-size: 14px; + font-weight: 400; + line-height: normal; + letter-spacing: 0.28px; + margin-top: 8px; +} diff --git a/css/hero-styles.css b/css/hero-styles.css index 28fba5c..f2c1a54 100644 --- a/css/hero-styles.css +++ b/css/hero-styles.css @@ -11,10 +11,46 @@ justify-content: space-between; } +.hero-container { + background-color: var(--black-color); + /* background-image: url("../images/hero-slider.jpg"); */ + background-size: cover; + color: var(--white-color); + flex-grow: 1; + + position: relative; +} + +.hero-carousel { + width: 100%; + height: 100%; + position: absolute; + overflow: hidden; +} + +.hero-carousel-item { + /* clasa specifica pt imagine ca sa o punem in pagina -imaginea hero prima */ + /* noi vrem sa ajunga imaginea asta ca fundal */ + width: 100%; + height: 100%; + object-fit: cover; /* ca sa arate bine, joaca-te cu ea sa vezi */ + display: block; /* pt ca exista un ff mic spatiu intre cele 3 imagini sliders */ +} + .hero-social-media { margin-bottom: 40px; } +.hero-content-container { + position: relative; + z-index: 1; + padding: 40px 55px 40px 100px; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + .hero-control-buttons { display: flex; justify-content: flex-end; @@ -43,18 +79,6 @@ margin-bottom: 40px; } -.hero-container { - background-color: var(--black-color); - background-image: url("../images/hero-slider.jpg"); - background-size: cover; - color: var(--white-color); - flex-grow: 1; - padding: 40px 55px 40px 100px; - display: flex; - flex-direction: column; - justify-content: space-between; -} - .hero-navbar { display: flex; align-items: center; diff --git a/css/style.css b/css/style.css index 2b39b79..2bf8170 100644 --- a/css/style.css +++ b/css/style.css @@ -33,6 +33,19 @@ ul { /* Classes */ +.modal { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + + z-index: 10; + position: fixed; +} + +.is-hidden { + visibility: hidden; +} + .container { width: 1280px; margin: auto; @@ -155,26 +168,6 @@ ul { color: var(--white-color); } -.why-us-cards { - --card-width: 170px; - display: flex; - flex-wrap: wrap; - column-gap: 30px; - - max-width: calc(var(--card-width) * 2 + 30px); -} - -.why-us-card { - flex-basis: var(--card-width); - height: 133px; - - background-color: #f7f7f7; -} - -.why-us-card-shifted { - margin-top: 30px; -} - .contact-address { color: #9da4bd; font-size: 18px; diff --git a/css/why-us-styles.css b/css/why-us-styles.css new file mode 100644 index 0000000..ab33ca0 --- /dev/null +++ b/css/why-us-styles.css @@ -0,0 +1,58 @@ +.why-us { + height: 582px; /* dau click pe imaginea mare si imi iau heightul la tot containerul */ + padding: 130px 155px; /*ma uit la elementele din container sa vad care e cel mai sus/dreapta/jos/stanga */ + display: flex; /* ca sa mute why us in dreapta patrate */ + gap: 130px; /* distanta dintre patrate si scrisul din drepata */ +} + +.why-us-cards { + --card-width: 170px; + display: flex; + flex-wrap: wrap; + column-gap: 30px; + + max-width: calc(var(--card-width) * 2 + 30px); +} + +.why-us-card { + flex-basis: var(--card-width); + height: 133px; + + background-color: #f7f7f7; + + padding: 20px 24px; /* in patrat ai 2 containere si dai distantele sus-dreapta-jos la 600 si satisfied customers per day */ + display: flex; /* pt a pune pe centrul patratul impreuna cu justify content + align */ + flex-direction: column; + justify-content: center; + align-items: center; +} + +.why-us-card-shifted { + margin-top: 30px; +} + +.why-us-card-title { + /* whyuscardtitle se refera la numerele din cards 600 20 50 100 */ + color: var(--black-color); + text-align: center; + font-size: 42px; + font-weight: 700; + line-height: normal; + letter-spacing: 2.1px; +} + +.why-us-card-title > sup { + /* clasa pt acel plus colorat prin > sup il facem direct copil si nu facem clasa separata cu alt nume */ + color: var(--brand-color); + /* TODO make it smaller */ +} + +.why-us-card-description { + /* clasa aceasta se refera la descrierea de sub numerele 600 20 50 100 din carduri */ + color: var(--black-color); + text-align: center; + font-size: 11px; + font-style: normal; + font-weight: 600; + line-height: normal; +} diff --git a/images/hero-slider2.jpg b/images/hero-slider2.jpg new file mode 100644 index 0000000..b837487 Binary files /dev/null and b/images/hero-slider2.jpg differ diff --git a/images/hero-slider3.jpg b/images/hero-slider3.jpg new file mode 100644 index 0000000..f82a7a1 Binary files /dev/null and b/images/hero-slider3.jpg differ diff --git a/index.html b/index.html index b18f55f..460015c 100644 --- a/index.html +++ b/index.html @@ -22,413 +22,516 @@ /> - - - + + + + - - + + Barbershop +
- -
- -
- - - - - - - -
- - - - -
-
- -
- -
- -
-
- +38 044 111 11 11 + +
+ +
+
+ +38 044 111 11 11 +
+ +
+
+ +
+
+ + + +

+ A hair salon for men in Kyiv +

+
+

BarberShop

+

+ We are experts in trendy men's haircuts.
+ We work quickly, carefully, and tastefully. +

+
+ +
+
- + +
- - -
-
- - - -

- A hair salon for men in Kyiv -

-
-

BarberShop

-

- We are experts in trendy men's haircuts.
- We work quickly, carefully, and tastefully. -

-
- -
- -
-
- -
- -
- +
+ +
+ +
+ Barber trims beard Barber cuts hair - -
+ +
+
+ + + +

About

+
+

The Best Barbershop in Your City

+

+ If you want to add more confidence to your image, you are + definitely in the right place. +

+

+ We are a team that never rests on its laurels and yearns for + change. And once you fall into the hands of our master, you will + never be the same again. We are a team that is always on the same + wavelength with clients.Therefore, we are always ready to improve + everyone who comes to us! +

+ +
+
+ + +
+
- - - -

About

+ + + +

+ Spend time in the company of the best craftsmen +

+
+

+ Services and Prices +

+ +
+
    +
  • + Men's Haircut + + from 300 UAH +
    • +
  • + Beard Trim + + from 200 UAH +
    • +
  • + Mustache Trim + + from 200 UAH +
    • +
  • + Straight Razor Shave + + from 200 UAH +
    • +
+
    +
  • + Trainee Haircut + + from 50 UAH +
    • +
  • + Buzz Cut + + from 200 UAH +
    • +
  • + Kids Haircut (< 12 y.o.) + + from 300 UAH +
    • +
  • + Gray Coverage + + from 200 UAH +
    • +
-

The Best Barbershop in Your City

-

- If you want to add more confidence to your image, you are definitely - in the right place. -

-

- We are a team that never rests on its laurels and yearns for change. - And once you fall into the hands of our master, you will never be - the same again. We are a team that is always on the same wavelength - with clients.Therefore, we are always ready to improve everyone who - comes to us! -

+ - -
+ - -
- -
- - - -

- Spend time in the company of the best craftsmen -

-
-

Services and Prices

- -
-
    -
  • - Men's Haircut - - from 300 UAH + +
    +
      +
    • +

      600+

      +

      Satisfied Customers per Day

      • -
    • - Beard Trim - - from 200 UAH +
    • +

      50+

      +

      Excellent Service Awards

      • -
    • - Mustache Trim - - from 200 UAH +
    • +

      20+

      +

      The Best Barbers of Kyiv

      • -
    • - Straight Razor Shave - - from 200 UAH +
    • +

      100+

      +

      Gifts for Regular Customers

    -
      -
    • - Trainee Haircut - - from 50 UAH -
      • -
    • - Buzz Cut - - from 200 UAH +
      + +
      +
      + + + +

      Old school

      +
      +

      Why do they come to us?

      +

      + Only good things are said about us. But it is better to see and + feel 1 time than to read 10 times. +

      +
      +
      +
    + + +
    + +
    + + + +

    + for true connoisseurs of the atmosphere +

    +
    +

    Our Barbers

    + -
- - -
+ - -
-
    -
  • -

    600+

    -

    Satisfied Customers per Day

    -
    • -
  • -

    50+

    -

    Excellent Service Awards

    -
    • -
  • -

    20+

    -

    The Best Barbers of Kyiv

    -
    • -
  • -

    100+

    -

    Gifts for Regular Customers

    -
    • -
-
+ +
-
- - - -

Old school

-

Old school

+
+ + + +

+ In Latin, "barba" means "beard" +

-

Why do they come to us?

-

Why do they come to us?

-

- Only good things are said about us. But it is better to see and feel - 1 time than to read 10 times. -

-
-
- - -
- -
- - - -

for true connoisseurs of the atmosphere

-

- for true connoisseurs of the atmosphere -

-
-

Our Barbers

-

-
    -
  • - John Smith -

    John Smith

    -

    Extreme barber

    - -
    • -
  • - Michele Doe -

    Michele Doe

    -

    Extreme barber

    -
    • -
  • - Alan Black -

    Alan Black

    -

    Extreme barber

    - -
    • -
- - -
- - -
- -
- - - -

In Latin, "barba" means "beard"

-

- In Latin, "barba" means "beard" -

-
-
    -
  • Barber cuts hair
    • -
  • Barber shaving
    • -
  • Barber wipes face
    • -
  • Barber cuts hair
    • -
-
+
    +
  • Barber cuts hair
    • +
  • Barber shaving
    • +
  • Barber wipes face
    • +
  • Barber cuts hair
    • +
+
- -
-

Contacts

-
-

Contacts

-
- - - - - Main Street, 7A Kyiv, 08132
- +38 044 111 11 11
- barbershop@email.com
-
-
+ +
+

Contacts

+
+ + + + + + Main Street, 7A Kyiv, 08132 + +
+ +38 044 111 11 11
+ barbershop@email.com +
+
- - - -

Working hours

+
+ + + +

Working hours

+
+

+ Daily from till + +

-

- Daily from till - -

-
-
-
+ +
- - + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..186df16 --- /dev/null +++ b/js/index.js @@ -0,0 +1,40 @@ +let translate = 0; + +const onNext = () => { + const items = document.querySelectorAll("[data-carousel-item]"); + if (translate < items.length - 1) { + translate = translate + 1; + + percentage = -100 * translate; + items.forEach((item) => { + item.style.transform = `translateY(${percentage}%)`; + }); + } +}; + +const onBack = () => { + const items = document.querySelectorAll("[data-carousel-item]"); + if (translate > 0) { + translate = translate - 1; + + percentage = -100 * translate; + items.forEach((item) => { + item.style.transform = `translateY(${percentage}%)`; + }); + } +}; + +(() => { + const refs = { + openModalBtn: document.querySelector("[data-modal-open]"), + closeModalBtn: document.querySelector("[data-modal-close]"), + modal: document.querySelector("[data-modal]"), + }; + + refs.openModalBtn.addEventListener("click", toggleModal); + refs.closeModalBtn.addEventListener("click", toggleModal); + + function toggleModal() { + refs.modal.classList.toggle("is-hidden"); + } +})();