diff --git a/.linthtmlrc.json b/.linthtmlrc.json index 774726ebe..477c99b1b 100644 --- a/.linthtmlrc.json +++ b/.linthtmlrc.json @@ -38,7 +38,7 @@ ], "tag-name-lowercase": true, "tag-name-match": true, - "tag-self-close": "never", + "tag-self-close": false, "tag-close": true, "text-ignore-regex": "&", "title-no-dup": true, diff --git a/README.md b/README.md index c91f95ce0..15e92e3ce 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ Use `Sharp Sans No2 Medium` and `Avenir`, which you can find in fonts directory. 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Eco_cosmetics/). + [DEMO LINK](https://ehordyenko1.github.io/Eco_cosmetics/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package.json b/package.json index 377f9546c..791f17b70 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/bemlint": "^0.1.1", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "*", - "@mate-academy/scripts": "^1.2.12", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/stylelint-config": "^0.0.11", "@parcel/transformer-sass": "2.10.2", "backstopjs": "^6.2.2", diff --git a/src/images/Group 4.png b/src/images/Group 4.png new file mode 100644 index 000000000..a31d33afd Binary files /dev/null and b/src/images/Group 4.png differ diff --git a/src/images/Group 8.1.png b/src/images/Group 8.1.png new file mode 100644 index 000000000..110796244 Binary files /dev/null and b/src/images/Group 8.1.png differ diff --git a/src/images/Group.png b/src/images/Group.png new file mode 100644 index 000000000..517283a8c Binary files /dev/null and b/src/images/Group.png differ diff --git a/src/images/OIL.png b/src/images/OIL.png new file mode 100644 index 000000000..b2257c2ff Binary files /dev/null and b/src/images/OIL.png differ diff --git a/src/images/UBTAN.png b/src/images/UBTAN.png new file mode 100644 index 000000000..63a51fbc2 Binary files /dev/null and b/src/images/UBTAN.png differ diff --git a/src/images/bird.png b/src/images/bird.png new file mode 100644 index 000000000..f5e339382 Binary files /dev/null and b/src/images/bird.png differ diff --git a/src/images/close.png b/src/images/close.png new file mode 100644 index 000000000..d65f1957b Binary files /dev/null and b/src/images/close.png differ diff --git a/src/images/facebook.png b/src/images/facebook.png new file mode 100644 index 000000000..0bade2ec9 Binary files /dev/null and b/src/images/facebook.png differ diff --git a/src/images/flowers.png b/src/images/flowers.png new file mode 100644 index 000000000..2841dee9e Binary files /dev/null and b/src/images/flowers.png differ diff --git a/src/images/instagram.png b/src/images/instagram.png new file mode 100644 index 000000000..fe91e30f4 Binary files /dev/null and b/src/images/instagram.png differ diff --git a/src/images/jar with direkt tablet.png b/src/images/jar with direkt tablet.png new file mode 100644 index 000000000..df1cb6110 Binary files /dev/null and b/src/images/jar with direkt tablet.png differ diff --git a/src/images/jars with direkt phone.png b/src/images/jars with direkt phone.png new file mode 100644 index 000000000..5dd28b701 Binary files /dev/null and b/src/images/jars with direkt phone.png differ diff --git a/src/images/jurs with direkt dektop.png b/src/images/jurs with direkt dektop.png new file mode 100644 index 000000000..37c8c807c Binary files /dev/null and b/src/images/jurs with direkt dektop.png differ diff --git a/src/images/la_shopping-bag.png b/src/images/la_shopping-bag.png new file mode 100644 index 000000000..0c0ac5b3b Binary files /dev/null and b/src/images/la_shopping-bag.png differ diff --git a/src/images/leaves desk.png b/src/images/leaves desk.png new file mode 100644 index 000000000..dfd786efb Binary files /dev/null and b/src/images/leaves desk.png differ diff --git a/src/images/leaves phone.png b/src/images/leaves phone.png new file mode 100644 index 000000000..216efd5e0 Binary files /dev/null and b/src/images/leaves phone.png differ diff --git a/src/images/mashine desk.png b/src/images/mashine desk.png new file mode 100644 index 000000000..28424fce9 Binary files /dev/null and b/src/images/mashine desk.png differ diff --git a/src/images/mashine phone.png b/src/images/mashine phone.png new file mode 100644 index 000000000..cf85793c4 Binary files /dev/null and b/src/images/mashine phone.png differ diff --git a/src/images/trash desk.png b/src/images/trash desk.png new file mode 100644 index 000000000..f3a6380d1 Binary files /dev/null and b/src/images/trash desk.png differ diff --git a/src/images/trash phone.png b/src/images/trash phone.png new file mode 100644 index 000000000..b80aa4f62 Binary files /dev/null and b/src/images/trash phone.png differ diff --git a/src/images/viol.png b/src/images/viol.png new file mode 100644 index 000000000..74fd63e02 Binary files /dev/null and b/src/images/viol.png differ diff --git "a/src/images/\320\241\320\275\320\270\320\274\320\276\320\272 \321\215\320\272\321\200\320\260\320\275\320\260 2019-09-06 \320\262 18.49bird22.png" "b/src/images/\320\241\320\275\320\270\320\274\320\276\320\272 \321\215\320\272\321\200\320\260\320\275\320\260 2019-09-06 \320\262 18.49bird22.png" new file mode 100644 index 000000000..2734233b4 Binary files /dev/null and "b/src/images/\320\241\320\275\320\270\320\274\320\276\320\272 \321\215\320\272\321\200\320\260\320\275\320\260 2019-09-06 \320\262 18.49bird22.png" differ diff --git "a/src/images/\320\261\320\260\320\275\320\276\321\207\320\272\320\270.png" "b/src/images/\320\261\320\260\320\275\320\276\321\207\320\272\320\270.png" new file mode 100644 index 000000000..f36eae205 Binary files /dev/null and "b/src/images/\320\261\320\260\320\275\320\276\321\207\320\272\320\270.png" differ diff --git a/src/index.html b/src/index.html index 5d357bd69..53f66fc75 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,403 @@ - + - Title - + Eco + + + + + - -

Hello Mate Academy

- + + + +
+
+
+
+

Biologists say that birds are indicators of the environmental situation, and over the past half century, the population of seabirds has declined by 70%. Birds die due to environmental problems and human intervention in the natural environment.

+
+ +
+

if you choose the gifts of nature and care about it’s - scroll down

+
+
+
+ +
+
+
+

witch of mountain winds

+
+
+ +
+

about our brand

+

Our brand cosmetics are made from natural ingredients and we are promoting them to the masses. Shampoo, hair conditioner, soap - in recycled paper. Creams, oils, washing products in glass containers with recycled paper labels. No synthetics and microplastics in cosmetics. And the packaging from it can be returned for recycling or reused.

+

We are all neighbors of one big House. And we must protect what we have. Destroying everything around for the sake of consumerism and imaginary convenience, we destroy what does not belong to us. Be aware of your choice!

+ Learn more +
+ +
+
+
+
+
+
+ +
+
+
+

shop

+
+
+
+

Shop

+ +
+
+ oil +

Hydrophilic oil

+

160 UAH

+
+ +
+ ubitan +

ubtan

+

160 UAH

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

about the creators

+
+
+
+

about the creators

+

My name is Victoria, I’m a master at candle making and natural cosmetics. In the past, a cynologist, was engaged in herbs, made layouts on the Tarot.

+

I am also a volunteer to save wild birds in distress, a consultant to the Phoenix Wildlife Rehabilitation Center, a member of the Society for the Conservation of Birds of Ukraine with the support of Birdlife International.

+

My husband and I live in the Carpathian region in the city of Chernivtsi. I dream of my center for the rehabilitation of wild birds, as it is very difficult to rescue birds in a rented communal apartment.

+
+ LEARN MORE +
+
+ +
+
+
+ bird +
+
+
+ +
+
+
+

Ingredients

+
+
+
+

Ayurvedic Tooth Powder

+
+
+
+
    +
  • Kaolin
    • +
  • Sivak
    • +
  • Calcium
    • +
  • Licorice root
    • +
  • Turmeric
    • +
+
+
+
+
+
+ LEARN MORE +
+
+
+ +
+
+
+ mashine +

No synthetics and microplastics

+
+ +
+ trash +

product packaging can be recycled or reused

+
+ +
+ leaves +

only natural ingredients

+
+
+
+ +
+
+
+

help

+
+
+
+ +

Contact us

+

We will help you choose a product that suits you and answer your other questions

+ +
+ + + + + + + + +
+
+ +
+ bird +
+
+
+
+ + diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 1366a06aa..2b4c1c60a 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,17 @@ @import "utils/vars"; @import "utils/mixins"; @import "utils/extends"; +@import "./header"; +@import "./main"; +@import "./nav-header"; +@import "./menu"; +@import "./icon"; +@import "./shop"; +@import "./title"; +@import "./brand"; +@import "./page"; +@import "./creators"; +@import "./powder"; +@import "./benefits"; +@import "./contact"; +@import "./footer"; diff --git a/src/styles/benefits.scss b/src/styles/benefits.scss new file mode 100644 index 000000000..ebe3fef21 --- /dev/null +++ b/src/styles/benefits.scss @@ -0,0 +1,57 @@ +.benefits { + @include paddinginline; + + margin-bottom: 100px; + + @include ontablet { + margin-bottom: 130px; + } + + @include onmain { + margin-bottom: 200px; + } + + &__wrapper { + @include pagegrid; + } + + &__item { + grid-column: 1 / -1; + row-gap: 20px; + display: flex; + flex-direction: column; + align-items: center; + + @include ontablet { + grid-column: span 2; + } + + @include onmain { + grid-column: span 4; + row-gap: 40px; + } + } + + &__text { + font-size: 14px; + font-weight: 400; + line-height: 18.2px; + letter-spacing: 0.05em; + text-align: center; + margin: 0; + margin-bottom: 50px; + + @include ontablet { + margin-bottom: 0; + } + + @include onmain { + margin-bottom: 0; + } + } + + &__photo { + width: 80px; + height: 70px; + } +} diff --git a/src/styles/brand.scss b/src/styles/brand.scss new file mode 100644 index 000000000..908804d9b --- /dev/null +++ b/src/styles/brand.scss @@ -0,0 +1,196 @@ +.brand { + @include paddinginline; + + margin-bottom: 100px; + + @include ontablet { + margin-bottom: 130px; + } + + @include onmain{ + margin-bottom: 200px; + } + + &__wrapper { + display: flex; + justify-content: center; + } + + &__side-wrapper { + display: none; + + @include onmain { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + + &-text { + margin: 0 82px 0 0; + writing-mode: vertical-lr; + rotate: 180deg; + color: $background-line; + text-align: center; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + } + + &-line { + margin: 0 82px 0 0; + display: block; + width: 1px; + height: 100px; + background-color: $background-line; + } + } + } + + &__title { + @include ontablet { + margin-right: 30px; + } + + @include onmain { + margin-right: 120px; + } + + + &-about { + color: #344F10; + + @include ontablet { + margin: 0 0 10px; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 1.2px; + text-transform: uppercase; + } + + @include onmain { + margin: 0 0 40px; + color: $main-accent; + font-size: 36px; + font-style: normal; + font-weight: 600; + line-height: 110%; + letter-spacing: 1.8px; + text-transform: uppercase; + } + } + + &-text { + margin: 0; + font-size: 14px; + + @include ontablet { + max-width: 342px; + max-height: 216px; + color: $title-color; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + } + + @include onmain { + max-width: 380px; + max-height: 192px; + color: $title-color; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + } + } + + &-text1 { + margin-bottom: 30px; + } + + &-text2 { + display: none; + margin-bottom: 40px; + + @include onmain { + display: block; + } + } + + &-button { + position: relative; + color: $main-accent; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + text-decoration: none; + + &::after { + content: ""; + position: absolute; + top: calc(100% + 10px); + left: 0; + width: 100%; + height: 1px; + background-color: $main-accent; + transform: scale(0); + transform-origin: left; + transition: all .5s; + } + + &:hover { + &::after { + transform: scale(1); + } + } + } + } + + &__images { + display: flex; + align-items: flex-end; + + @include onmain { + gap: 20px; + } + + &-first { + display: none; + + background-image: url("../images/viol.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + flex-shrink: 0; + + @include ontablet { + display: flex; + width: 342px; + height: 321px; + } + + @include onmain { + display: flex; + width: 380px; + height: 529px; + } + } + + &-second { + @include onmain { + background-image: url("../images/flowers.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 180px; + height: 430px; + flex-shrink: 0; + } + } + + } +} diff --git a/src/styles/contact.scss b/src/styles/contact.scss new file mode 100644 index 000000000..1265a0e85 --- /dev/null +++ b/src/styles/contact.scss @@ -0,0 +1,192 @@ +.contact { + @include paddinginline; + + display: flex; + justify-content: center; + + &__wrapper { + display: flex; + } + + &__form-wrapper { + display: flex; + flex-direction: column; + } + + &__title { + font-size: 24px; + font-weight: 600; + line-height: 36px; + letter-spacing: 0.05em; + text-align: left; + color: $main-accent; + margin: 0 0 10px; + } + + &__form { + width: 250px; + font-family: inherit; + background-color: inherit; + border: none; + outline: none; + margin-bottom: 25px; + padding: 0 0 5px; + text-transform: capitalize; + color: #828282; + + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus { + -webkit-text-fill-color: #31b0dd; + -webkit-box-shadow: 40rem #ffff inset; + } + + + box-shadow: inset 0 0 0 0 #e4dfd3; + + @include ontablet { + height: 15px; + width: 400px; + } + + @include onmain { + height: 52px; + width: 500px; + } + } + + &__form-tel { + width: 280px; + margin-bottom: 45px; + border-bottom: 1px solid #bdbdbd; + + @include ontablet { + margin-bottom: 45px; + width: 342px; + } + + @include onmain { + width: 380px; + } + } + + &__form-message { + width: 280px; + margin-bottom: 30px; + border-bottom: 1px solid #bdbdbd; + + @include ontablet { + width: 342px; + } + + @include onmain { + width: 380px; + } + } + + &__form-name { + width: 280px; + border-bottom: 1px solid #bdbdbd; + + @include ontablet { + width: 342px; + } + + @include onmain { + width: 380px; + } + } + + &__form-email { + width: 280px; + border-bottom: 1px solid #bdbdbd; + + @include ontablet { + width: 342px; + } + + @include onmain { + width: 380px; + } + } + + &__text { + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: $title-color; + margin: 0 0 30px; + max-width: 380px; + max-height: 48px; + } + + &__button { + color: $button-text-color; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: 2.4px; + text-transform: uppercase; + text-decoration: none; + width: 280px; + height: 60px; + border: none; + flex-shrink: 0; + cursor: pointer; + background: $title-color; + + &:hover { + background: $background-color; + color: $title-color; + border: 1px solid $title-color; + } + } + + &__photo-size { + display: none; + + @include ontablet { + display: block; + width: 342px; + height: 407px; + } + + @include onmain { + width: 580px; + height: 539px; + } + } + + &__side-wrapper { + display: none; + + @include onmain { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin: 0 82px 0 0; + + &-text { + color:$background-line; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + writing-mode: vertical-lr; + rotate: 180deg; + margin: 0; + } + + &-line { + display: block; + width: 1px; + height: 100px; + background-color: $background-line; + } + } + } +} diff --git a/src/styles/creators.scss b/src/styles/creators.scss new file mode 100644 index 000000000..896835710 --- /dev/null +++ b/src/styles/creators.scss @@ -0,0 +1,227 @@ +.creators { + @include paddinginline; + + display: flex; + justify-content: center; + + &__wrapper { + display: flex; + } + + &__title-wrap { + @include ontablet { + margin-right: 30px; + } + + @include onmain { + margin-right: 120px; + } + } + + &__title { + text-align: center; + margin: 0 0 10px; + color: $main-accent; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 1.2px; + text-transform: uppercase; + + @include ontablet { + text-align: start; + } + } + + &__text1 { + margin: 0 0 20px; + + @include ontablet { + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + + max-width: 342px; + max-height: 96px; + + margin: 0 0 15px; + } + + @include onmain { + margin: 0 0 30px; + max-width: 380px; + max-height: 96px; + } + } + + &__text2 { + margin: 0 0 30px; + + @include ontablet { + margin: 0 0 20px; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + max-height: 144px; + max-width: 342px; + } + + @include onmain { + margin: 0 0 30px; + max-width: 380px; + max-height: 120px; + } + } + + &__text3 { + display: none; + margin-bottom: 20px; + + @include ontablet { + max-width: 342px; + max-height: 96px; + } + + @include onmain { + display: block; + max-width: 380px; + max-height: 120px; + } + } + + &__text { + text-align: center; + color: $title-color; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; + + @include ontablet { + text-align: left; + } + } + + &__more-wrap { + display: flex; + justify-content: center; + margin-bottom: 25px; + + @include ontablet { + margin-bottom: 30px; + justify-content: start; + } + } + + &__more { + display: inline; + position: relative; + color: $main-accent; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + text-decoration: none; + + &::after { + content: ""; + position: absolute; + top: calc(100% + 10px); + left: 0; + width: 100%; + height: 1px; + background-color: $main-accent; + transform: scale(0); + transform-origin: left; + transition: all .5s; + } + + &:hover { + &::after { + transform: scale(1); + } + } + } + + &__button-wrap { + display: flex; + justify-content: center; + + @include ontablet { + justify-content: start; + } + } + + &__button { + color: $button-text-color; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: 2.4px; + text-transform: uppercase; + text-decoration: none; + width: 280px; + height: 60px; + border: none; + flex-shrink: 0; + cursor: pointer; + background: $title-color; + + &:hover { + background: $background-color; + color: $title-color; + border: 1px solid $title-color; + } + } + + &__photo { + display: none; + + @include ontablet { + display: block; + + max-width: 342px; + max-height: 440px; + } + + @include onmain { + max-width: 580px; + max-height: 649px; + } + } + + &__side-wrapper { + display: none; + + @include onmain { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin: 0 82px 0 0; + + &-text { + color:$background-line; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + writing-mode: vertical-lr; + rotate: 180deg; + margin: 0; + } + + &-line { + display: block; + width: 1px; + height: 100px; + background-color: $background-line; + } + } + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..29a812fdb --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,148 @@ +.footer { + @include paddinginline; + + margin-top: 100px; + background-color:#8C9772; + + @include ontablet { + margin-top: 130px; + } + + &__wrapper { + display: grid; + + grid-template-areas: + "links links" + "img img" + "about-us about-us" + "copy copy"; + + @include ontablet { + grid-template-areas: + "links about-us" + "img about-us" + "copy copy"; + column-gap: 300px; + } + + @include onmain { + grid-template-areas: + "links about-us" + "copy img"; + column-gap: 300px; + } + } + + &__copy { + display: flex; + justify-content: center; + margin: 40px; + grid-area: copy; + font-size: 14px; + font-weight: 600; + line-height: 18.2px; + color: #E4DFD3; + + @include ontablet { + justify-content: left; + margin: 0 0 30px; + align-items: center; + } + + @include onmain { + font-size: 16px; + font-weight: 400; + line-height: 24px; + margin: 15px 0 30px; + align-items: center; + } + } + + &__links { + text-align: left; + grid-area: links; + } + + &__contact-link { + margin: 0; + font-size: 18px; + font-weight: 500; + line-height: 27px; + text-align: left; + color: #E4DFD3; + text-decoration: none; + + &:hover { + color: rgb(36, 81, 66); + } + } + + &__links--wrapper { + margin: 0; + display: flex; + flex-direction: column; + gap: 11px; + padding: 30px 0 20px; + + @include ontablet { + margin: 0; + flex-direction: column; + gap: 15px; + } + + @include onmain { + flex-direction: row; + margin: 0; + gap: 40px; + } + } + + &__about-us { + display: flex; + flex-direction: column; + grid-area: about-us; + gap: 10px; + margin-top: 30px; + + &-link { + margin: 0; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + color: #E4DFD3; + text-decoration: none; + + &:hover:not(:last-child) { + color: rgb(36, 81, 66); + } + } + + @include onmain { + gap: 20px; + } + } + + &__img { + display: flex; + grid-area: img; + padding-bottom: 40px; + gap: 20px; + + @include onmain { + margin: 30px 66px 0 0; + gap: 14px; + } + } + + &__icon-size { + width: 20px; + height: 20px; + + &:hover { + animation-duration: 1s; + transform: scale(1.2); + transition: transform 0.3s; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..e484ce1c2 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,111 @@ +.header { + &__bottom { + @include pagegrid; + + @include ontablet { + @include paddinginline; + } + } + + &__title-wrapper { + display: flex; + flex-direction: column; + align-items: center; + grid-column: 1 / -1; + + @include ontablet { + grid-column: 1 / -1; + } + + @include onmain { + grid-column: 2 / 7; + order: -1; + align-items: flex-start; + } + } + + &__img { + grid-column: 1 / -1; + + @include ontablet { + grid-column: 1 / -1; + } + + @include onmain { + grid-column: 7 / 12; + } + } + + &__image { + width: 100%; + height: 100%; + } + + &__main-title { + margin: 25px 0 10px; + color: title-color; + text-align: center; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 130%; + + @include ontablet { + margin: 50px 0 10px; + font-size: 36px; + line-height: 150%; + text-transform: capitalize; + } + + @include onmain { + margin: 0 0 30px; + font-size: 60px; + line-height: 130%; + text-transform: capitalize; + text-align: left; + } + + } + + &__description-text { + margin: 0 0 30px; + color: $title-color; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + + @include ontablet { + margin: 0 0 50px; + } + + @include onmain { + margin: 0 0 50px; + } + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + + width: 280px; + height: 60px; + background-color: $title-color; + color: $button-text-color; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: 2.4px; + text-transform: uppercase; + text-decoration: none; + + &:hover { + background: $button-text-hover; + color: $title-color; + border: 1px solid #333; + } + } +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 000000000..3c3b35a2e --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,4 @@ +.icon { + width: 15px; + height: 15px; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 917427a88..9e49b81a4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,5 @@ -@import "utils"; -@import "typography"; - -body { - background: $c-gray; +.page__body { + background: $background-color; + font-family: Poppins, sans-serif; + margin: 0; } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 000000000..8aecb68e5 --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,62 @@ +.menu { + @include paddinginline; + @include paddingblock; + + overflow: auto; + box-sizing: border-box; + position: fixed; + top: 0; + right: 0; + left: 0; + height: 100vh; + background: $title-color; + opacity: 0; + pointer-events: none; + z-index: 1; + + transition: transform 0.3s, opacity 0.3s; + transform: translateX(100%); + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + + &__bottom { + display: flex; + flex-direction: column; + margin-top: 45px; + align-items: center; + gap: 30px; + + @include ontablet { + gap: 50px; + } + } + + &__link { + position: relative; + color: $button-text-hover; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 130%; + text-decoration: none; + width: 100%; + text-align: center; + padding-bottom: 10px; + + &::after { + content: ""; + width: 100%; + position: absolute; + bottom: 0; + left: 0; + height: 1px; + background-color: $link-color; + } + } +} + + diff --git a/src/styles/nav-header.scss b/src/styles/nav-header.scss new file mode 100644 index 000000000..7aaba3fd2 --- /dev/null +++ b/src/styles/nav-header.scss @@ -0,0 +1,135 @@ +.nav__phone { + display: flex; + justify-content: space-between; + align-items: center; + + &-items { + text-decoration: none; + } + + &-links { + &-group4 { + width: 20px; + height: 14px; + } + + &-group8 { + width: 24px; + height: 24px; + } + + &-shopping-bag { + width: 20px; + height: 24px; + } + } +} + +.nav__phone li { + list-style: none; +} + +.nav ul { + margin: 0; + padding: 0; +} + +.nav__desktop { + display: none; + + @include onmain { + & { + @include pagegrid; + } + } + + &-top { + grid-column: 1 / 4; + display: flex; + align-items: center; + gap: 12px; + } + + &-image { + width: 50px; + height: 50px; + } + + &-title { + margin: 0; + padding: 0; + color: $main-accent; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 130%; + letter-spacing: 0.7px; + text-transform: uppercase; + white-space: nowrap; + text-decoration: none; + } + + &-item { + list-style: none; + } + + &-link{ + position: relative; + color: $main-accent; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 150%; + text-transform: capitalize; + text-decoration: none; + + &::before { + content: ""; + width: 100%; + background: $main-accent; + height: 1px; + position: absolute; + bottom: 0; + transform: scale(0); + opacity: 0; + transform-origin: left; + } + + &:hover::before { + opacity: 1; + transform: scale(1); + transition: transform 0.75s; + } + + } + + &-container { + display: flex; + gap: 40px; + grid-column: 7 / 10; + } + + &-shop { + grid-column: 13; + + &-image { + width: 32px; + height: 32px; + } + } +} + +.nav { + @include paddingblock; + @include paddinginline; + + align-items: center; + + + + @include onmain { + &__phone { + display: none; + } + } +} diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 000000000..7de795cac --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,8 @@ +.page { + margin: 0; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/powder.scss b/src/styles/powder.scss new file mode 100644 index 000000000..a4ee4b55d --- /dev/null +++ b/src/styles/powder.scss @@ -0,0 +1,197 @@ +.powder { + @include paddinginline; + + margin-top: 100px; + margin-bottom: 100px; + + @include ontablet { + margin-top: 130px; + margin-bottom: 120px; + } + + @include onmain { + margin-top: 200px; + margin-bottom: 200px; + } + + &__wrapper { + @include pagegrid; + } + + &__box-wrap { + display: flex; + justify-content: center; + grid-column: 1 / -1; + + @include ontablet { + grid-column: 2 / -1; + } + + @include onmain { + grid-column: 6 / -1; + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 20px; + + @include ontablet { + grid-column: 1 / 3; + margin-bottom: 0; + } + + @include onmain { + grid-column: 2 / 6; + margin-bottom: 0; + } + + &-text { + font-size: 24px; + font-weight: 600; + line-height: 36px; + letter-spacing: 0.05em; + text-align: left; + color: $main-accent; + word-break: normal; + margin: 0; + } + } + + &__list { + margin-top: 20px; + + &-names { + list-style: none; + } + + & li:nth-child(2), + & li:nth-child(4) { + margin-top: 52px; + } + + & li:nth-child(3), + & li:nth-child(5) { + margin-top: 49px; + } + } + + &__photo { + background-image: url("../images/jars\ with\ direkt\ phone.png"); + width: 182px; + height: 397px; + background-position: left; + background-size: cover; + background-repeat: no-repeat; + margin: 0 0 0 20px; + + + @include ontablet { + background-image: url("../images/jar\ with\ direkt\ tablet.png"); + width: 398px; + height: 397px; + background-position: left; + background-size: cover; + background-repeat: no-repeat; + margin: 0 0 0 20px; + grid-column: 2 / -1; + } + + @include onmain { + background-image: url("../images/jurs\ with\ direkt\ dektop.png"); + width: 480px; + height: 397px; + background-position: left; + background-size: cover; + background-repeat: no-repeat; + margin: 0 0 0 20px; + + } + } + + &__more-wrap { + grid-column: 1 / -1; + + @include ontablet { + grid-column: 1 / 1; + } + + @include onmain { + grid-column: 2 / 3; + } + + margin-top: 30px; + + @include ontablet { + margin-top: 0; + } + } + + &__more { + color: $main-accent; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + text-decoration: none; + white-space: nowrap; + margin-top: 30px; + + @include ontablet { + margin-top: 0; + } + + @include onmain { + margin-top: 0; + } + + &::after { + content: ""; + position: absolute; + top: calc(100% + 10px); + left: 0; + width: 100%; + height: 1px; + background-color: $main-accent; + transform: scale(0); + transform-origin: left; + transition: all .5s; + } + + &:hover { + &::after { + transform: scale(1); + } + } + } + + &__side-wrapper { + display: none; + + @include onmain { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin: 0 82px 0 0; + + &-text { + color:$background-line; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + writing-mode: vertical-lr; + rotate: 180deg; + margin: 0; + } + + &-line { + display: block; + width: 1px; + height: 100px; + background-color: $background-line; + } + } + } +} diff --git a/src/styles/shop.scss b/src/styles/shop.scss new file mode 100644 index 000000000..d9eba53f6 --- /dev/null +++ b/src/styles/shop.scss @@ -0,0 +1,272 @@ +.shop { + @include ontablet { + @include paddinginline; + } + + margin-bottom: 100px; + + margin-top: 100px; + + @include ontablet { + margin-bottom: 130px; + margin-top: 130px; + } + + @include onmain { + margin-bottom: 200px; + margin-top: 200px; + } + + &__wrapper { + display: flex; + justify-content: center; + } + + &__side-wrapper { + display: none; + + @include onmain { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin: 0 82px 0 0; + + &-text { + color:$background-line; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + writing-mode: vertical-lr; + rotate: 180deg; + margin: 0; + } + + &-line { + display: block; + width: 1px; + height: 100px; + background-color: $background-line; + } + } + } + + &__title { + text-align: center; + color: $main-accent; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 1.2px; + text-transform: uppercase; + + @include ontablet { + text-align: left; + } + + @include onmain { + color: $main-accent; + font-size: 36px; + font-style: normal; + font-weight: 600; + line-height: 110%; + letter-spacing: 1.8px; + text-transform: uppercase; + margin: 0; + } + } + + &__side { + position: relative; + transform: rotate(-90deg); + color: $background-line; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 130%; + + &::after { + content: ""; + position: absolute; + transform: rotate(-90deg); + right: 0; + height: 100px; + width: 1px; + background-color: $background-line; + } + } + + &__nav { + display: flex; + justify-content: center; + margin-top: 30px; + padding: 0; + gap: 34px; + + @include ontablet { + justify-content: left; + gap: 51px; + } + + } + + &__nav-item { + position: relative; + list-style: none; + } + + &__nav-link { + text-decoration: none; + color: $link-color; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 0.9px; + text-transform: uppercase; + + &::after { + content: ""; + position: absolute; + width: 100%; + height: 2px; + top: calc(100% + 10px); + left: 0; + background: $title-color; + transform: scale(0); + transform-origin: left; + transition: all .5s; + } + + &:hover { + color: $title-color; + position: relative; + + &::after { + transform: scale(1); + } + } + } + + &__ubitan-img { + display: none; + + @include ontablet { + display: block; + } + } + + &__img-size { + width: 100%; + height: 100%; + flex-shrink: 0; + padding-inline: 0; + + @include ontablet { + width: 342px; + height: 300px; + } + + @include onmain { + width: 530px; + height: 500px; + } + } + + &__photos { + @include ontablet { + margin-top: 37px; + display: flex; + gap: 30px; + } + + @include onmain { + margin-top: 50px; + gap: 20px; + } + + &-wrapper { + display: flex; + flex-direction: column; + align-items: center; + } + + &-title { + margin: 20px 0 10px; + color: $title-color; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 0.9px; + text-transform: uppercase; + + @include onmain { + margin: 20px 0 13px; + } + } + + &-title-ubtan { + display: none; + + @include ontablet { + display: block; + } + } + + &-price-ubtan { + display: none; + + @include ontablet { + display: block; + } + } + + &-price { + margin: 0; + color: $title-color; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 150%; + letter-spacing: 0.9px; + text-transform: uppercase; + } + } + + &__bottom { + display: flex; + margin-top: 30px; + justify-content: center; + + @include onmain { + margin-top: 40px; + } + } + + &__button { + color: $button-text-color; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: 2.4px; + text-transform: uppercase; + text-decoration: none; + width: 280px; + height: 60px; + border: none; + flex-shrink: 0; + cursor: pointer; + background: $title-color; + + &:hover { + background: $background-color; + color: $title-color; + border: 1px solid $title-color; + } + } +} diff --git a/src/styles/title.scss b/src/styles/title.scss new file mode 100644 index 000000000..909e213de --- /dev/null +++ b/src/styles/title.scss @@ -0,0 +1,87 @@ +.title { + @include paddinginline; + + box-sizing: border-box; + position: relative; + padding-block: 100px; + + &__wrapper { + @include pagegrid; + + @include onmain { + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 42vw; + border: 1px solid $background-line; + } + + &::after { + content: ""; + position: absolute; + right: 0; + bottom: 0; + width: 49vw; + border: 1px solid $background-line; + } + } + } + + @include onmain { + margin-top:250px; + margin-bottom: 250px; + } + + &__choice { + display: none; + align-items: center; + + @include onmain { + display: block; + grid-column: 2 / 6; + } + } + + &__slogan { + align-items: center; + grid-column: 1 / -1; + + @include ontablet { + grid-column: 3 / 5; + } + + @include onmain { + grid-column: 7 / 12; + } + } + + &__text-choice { + text-align: left; + color: $title-color; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + } + + &__text-slogan { + color: $main-accent; + color: #344F10; + font-size: 18px; + text-align: center; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 0.9px; + text-transform: uppercase; + + + @include onmain { + letter-spacing: 1.2px; + text-align: left; + font-size: 24px; + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index a1a5dd0e3..d7201e7b3 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,4 @@ %h1 { - font-family: "Roboto", sans-serif; + font-family: Roboto, sans-serif; font-weight: 400; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..8e0ac0faf 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,80 @@ #{$_property}: $_toValue; } } + +@mixin onmobile { + @media(min-width: 320px) { + @content; + } +} + +@mixin ontablet { + @media(min-width: 768px) { + @content; + } +} + +@mixin onmain { + @media(min-width: 1280px) { + @content; + } +} + +@mixin ondesktop { + @media(min-width: 1440px) { + @content; + } +} + +@mixin paddinginline { + padding-inline: 20px; + + @include ontablet { + padding-inline: 27px; + } + + @include onmain { + padding-inline: 50px; + } + + @include ondesktop { + padding-inline: 130px; + } +} + +@mixin paddingblock { + padding-block: 20px; + + @include ontablet { + padding-block: 28px; + } + + @include onmain { + padding-block: 40px; + } + + @include ondesktop { + padding-block: 50px; + } +} + +@mixin pagegrid { + display: grid; + grid-template-columns: repeat((2), 1fr); + column-gap: 20px; + + @include ontablet { + grid-template-columns: repeat((6), 1fr); + column-gap: 30px; + } + + @include onmain { + grid-template-columns: repeat((12), 1fr); + column-gap: 20px; + } + + @include ondesktop { + grid-template-columns: repeat((12), 1fr); + column-gap: 20px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..f807f1d7a 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,7 @@ -$c-gray: #eee; +$background-color: #E4DFD3; +$background-line: #344F1080; +$title-color: #333; +$button-text-color: #F2F2F2; +$button-text-hover: #E4DFD3; +$link-color: #828282; +$main-accent: #344F10;