diff --git a/.eslintignore b/.eslintignore index 9b1c8b133c..89f52aaca4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ +/backstop_data /dist diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 99555e2597..b7fecf886b 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Follow the videos in this and next lessons to implement the page block by block: - Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson. - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar. - When done check yourself using the [CHECKLIST](./checklist.md) when finished. -- Deploy and create a Pull Request with a [DEMO LINK](https://.github.io/layout_landing-page/). +- Deploy and create a Pull Request with a [DEMO LINK](https://Bukavyna.github.io/layout_landing-page/). # Tips & Hints - Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`. diff --git a/src/images/Header-bg-mobile.png b/src/images/Header-bg-mobile.png new file mode 100644 index 0000000000..f780b37552 Binary files /dev/null and b/src/images/Header-bg-mobile.png differ diff --git a/src/images/Icon-Burger-menu.png b/src/images/Icon-Burger-menu.png new file mode 100644 index 0000000000..b98ca26c85 Binary files /dev/null and b/src/images/Icon-Burger-menu.png differ diff --git a/src/images/Icon-Close.png b/src/images/Icon-Close.png new file mode 100644 index 0000000000..ccc6b101ee Binary files /dev/null and b/src/images/Icon-Close.png differ diff --git a/src/images/Icon-burger-menu.png b/src/images/Icon-burger-menu.png new file mode 100644 index 0000000000..b98ca26c85 Binary files /dev/null and b/src/images/Icon-burger-menu.png differ diff --git a/src/images/Logo.png b/src/images/Logo.png new file mode 100644 index 0000000000..23e19606d5 Binary files /dev/null and b/src/images/Logo.png differ diff --git a/src/images/Phone-number.png b/src/images/Phone-number.png new file mode 100644 index 0000000000..abcf9ec14c Binary files /dev/null and b/src/images/Phone-number.png differ diff --git a/src/index.html b/src/index.html index 428e3b54bb..16f1ffe196 100644 --- a/src/index.html +++ b/src/index.html @@ -1,22 +1,157 @@ - + - Landing Page + Product cards - + + + - -

Landing Page

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

+ Your senses. +
+ Set free. +

+
+
+ +
+ +
+

Categories

+
+
+

About Us

+
+
+

Contact Us

+
+
+ + diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css new file mode 100644 index 0000000000..14ef288f7c --- /dev/null +++ b/src/styles/blocks/header.css @@ -0,0 +1,22 @@ +.header { + box-sizing: border-box; + height: 100vh; + background-size: cover; + background-position: center; + background-image: url(../../images/Header-bg-mobile.png); + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.header__title { + font-weight: 700; + font-size: 36px; + line-height: 36px; + color: #fff; + margin: 0; +} + +.header__bottom { + padding: 0 20px 40px; +} diff --git a/src/styles/blocks/header.css.map b/src/styles/blocks/header.css.map new file mode 100644 index 0000000000..61275c078d --- /dev/null +++ b/src/styles/blocks/header.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["header.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"header.css"} \ No newline at end of file diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..151e4fa076 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,26 @@ +.header { + box-sizing: border-box; + height: 100vh; + background-size: cover; + background-position: center; + background-image: url('../images/Header-bg-mobile.png'); + + display: flex; + flex-direction: column; + justify-content: space-between; + + &__title { + font-family: $font-family-manrope; + font-weight: $font-weight-bold; + font-size: 36px; + line-height: 36px; + color: #fff; + margin: 0; + } + + &__bottom { + padding-bottom: 40px; + + @include content-padding-inline; + } +} diff --git a/src/styles/blocks/icon.css b/src/styles/blocks/icon.css new file mode 100644 index 0000000000..cdc3dbcacd --- /dev/null +++ b/src/styles/blocks/icon.css @@ -0,0 +1,17 @@ +.icon { + display: block; + width: 24px; + height: 24px; +} + +.icon--phone { + background-image: url(/src/images/Phone-number.png); +} + +.icon--menu { + background-image: url(/src/images/Icon-Burger-menu.png); +} + +.icon--close { + background-image: url(/src/images/Icon-Close.png); +} diff --git a/src/styles/blocks/icon.css.map b/src/styles/blocks/icon.css.map new file mode 100644 index 0000000000..9b000390c2 --- /dev/null +++ b/src/styles/blocks/icon.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["icon.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE","file":"icon.css"} \ No newline at end of file diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..856d6892c8 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,24 @@ +.icon { + display: block; + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-size: cover; + + @include on-tablet { + height: 32px; + width: 32px; + } + + &--phone { + background-image: url('../images/Phone-number.png'); + } + + &--menu { + background-image: url('../images/Icon-burger-menu.png'); + } + + &--close { + background-image: url('../images/Icon-Close.png'); + } +} diff --git a/src/styles/blocks/menu.css b/src/styles/blocks/menu.css new file mode 100644 index 0000000000..be11d72d8a --- /dev/null +++ b/src/styles/blocks/menu.css @@ -0,0 +1,40 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: #f9f9f9; + font-weight: 700; + text-transform: uppercase; +} + +.menu__nav { + margin-top: 60px; +} + +.menu__content { + padding-inline: 20px; +} + +.menu__phone-number { + display: block; + color: inherit; + text-decoration: none; + margin-top: 48px; + font-weight: 700; + font-size: 16px; + line-height: 22px; + letter-spacing: 1px; +} + +.menu__call-to-order { + display: block; + width: fit-content; + color: inherit; + text-decoration: none; + margin-top: 16px; + padding-bottom: 4px; + border-bottom: 1px solid #1b2129; + font-weight: 700; + font-size: 16px; + line-height: 22px; + letter-spacing: 1px; +} diff --git a/src/styles/blocks/menu.css.map b/src/styles/blocks/menu.css.map new file mode 100644 index 0000000000..c32f1b8dcf --- /dev/null +++ b/src/styles/blocks/menu.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["menu.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA","file":"menu.css"} \ No newline at end of file diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..91c6176678 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,35 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: #f9f9f9; + + font-family: $font-family-manrope; + font-weight: $font-weight-bold; + text-transform: uppercase; + letter-spacing: 1px; + + &__nav { + margin-top: 60px; + } + + &__content { + @include content-padding-inline; + } + + &__phone-number { + display: block; + color: inherit; + text-decoration: none; + margin-top: 48px; + } + + &__call-to-order { + display: block; + width: fit-content; + color: inherit; + text-decoration: none; + margin-top: 16px; + padding-bottom: 4px; + border-bottom: 1px solid $main-text-color; + } +} diff --git a/src/styles/blocks/nav.css b/src/styles/blocks/nav.css new file mode 100644 index 0000000000..25febebdc8 --- /dev/null +++ b/src/styles/blocks/nav.css @@ -0,0 +1,17 @@ +.nav__linc { + color: inherit; + text-decoration: none; + text-transform: none; + font-size: 22px; + line-height: 22px; + letter-spacing: 1px; +} + +.nav__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 32px; +} diff --git a/src/styles/blocks/nav.css.map b/src/styles/blocks/nav.css.map new file mode 100644 index 0000000000..ec1252f14b --- /dev/null +++ b/src/styles/blocks/nav.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["nav.scss"],"names":[],"mappings":"AACE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA","file":"nav.css"} \ No newline at end of file diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..f6e0e92ebe --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,21 @@ +.nav { + &__linc { + color: inherit; + text-decoration: none; + text-transform: none; + + font-size: 22px; + line-height: 22px; + letter-spacing: 1px; + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 32px; + } +} diff --git a/src/styles/blocks/page.css b/src/styles/blocks/page.css new file mode 100644 index 0000000000..8505bad387 --- /dev/null +++ b/src/styles/blocks/page.css @@ -0,0 +1,27 @@ +.page { + font-family: Manrope, sans-serif; + font-size: 16px; + line-height: 22px; + color: #1b2129; + scroll-behavior: smooth; +} + +.page__body { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.page__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + pointer-events: none; +} + +.page__menu:target { + opacity: 1; + pointer-events: all; +} diff --git a/src/styles/blocks/page.css.map b/src/styles/blocks/page.css.map new file mode 100644 index 0000000000..56f9d49108 --- /dev/null +++ b/src/styles/blocks/page.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["page.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA","file":"page.css"} \ No newline at end of file diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..9b74c99196 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,29 @@ +.page { + font-family: Manrope, sans-serif; + font-size: 16px; + line-height: 22px; + color: $main-text-color; + + scroll-behavior: smooth; + + &__body { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/top-bar.css b/src/styles/blocks/top-bar.css new file mode 100644 index 0000000000..5cd5266801 --- /dev/null +++ b/src/styles/blocks/top-bar.css @@ -0,0 +1,18 @@ +.top-bar { + padding: 24px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.top-bar--logo { + display: flex; + width: 152px; + max-height: 100%; + height: auto; +} + +.top-bar__icons { + display: flex; + gap: 24px; +} diff --git a/src/styles/blocks/top-bar.css.map b/src/styles/blocks/top-bar.css.map new file mode 100644 index 0000000000..641fdb1e51 --- /dev/null +++ b/src/styles/blocks/top-bar.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["top-bar.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA","file":"top-bar.css"} \ No newline at end of file diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..c25fffa986 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,25 @@ +.top-bar { + padding-block: 24px; + + @include content-padding-inline; + + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-block: 64px; + } + + &__logo { + display: flex; + width: 152px; + max-height: 100%; + height: auto; + } + + &__icons { + display: flex; + gap: 24px; + } +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000000..001ee46d1a --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,181 @@ +body { + font-family: Manrope, sans-serif; + margin: 0; +} + +.header { + box-sizing: border-box; + height: 100vh; + background-size: cover; + background-position: center; + background-image: url("../images/Header-bg-mobile.png"); + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.header__title { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 36px; + color: #fff; + margin: 0; +} + +.header__bottom { + padding-bottom: 40px; + padding-inline: 20px; +} + +@media (min-width: 576px) { + .header__bottom { + padding-inline: 72px; + } +} + +.page { + font-family: Manrope, sans-serif; + font-size: 16px; + line-height: 22px; + color: #1b2129; + scroll-behavior: smooth; +} + +.page__body { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.page__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + pointer-events: none; +} + +.page__menu:target { + opacity: 1; + pointer-events: all; +} + +.top-bar { + padding-block: 24px; + padding-inline: 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +@media (min-width: 576px) { + .top-bar { + padding-inline: 72px; + } +} + +@media (min-width: 576px) { + .top-bar { + padding-block: 64px; + } +} + +.top-bar__logo { + display: flex; + width: 152px; + max-height: 100%; + height: auto; +} + +.top-bar__icons { + display: flex; + gap: 24px; +} + +.icon { + display: block; + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-size: cover; +} + +@media (min-width: 576px) { + .icon { + height: 32px; + width: 32px; + } +} + +.icon--phone { + background-image: url("../images/Phone-number.png"); +} + +.icon--menu { + background-image: url("../images/Icon-burger-menu.png"); +} + +.icon--close { + background-image: url("../images/Icon-Close.png"); +} + +.menu { + box-sizing: border-box; + height: 100vh; + background-color: #f9f9f9; + font-family: Manrope, sans-serif; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; +} + +.menu__nav { + margin-top: 60px; +} + +.menu__content { + padding-inline: 20px; +} + +@media (min-width: 576px) { + .menu__content { + padding-inline: 72px; + } +} + +.menu__phone-number { + display: block; + color: inherit; + text-decoration: none; + margin-top: 48px; +} + +.menu__call-to-order { + display: block; + width: fit-content; + color: inherit; + text-decoration: none; + margin-top: 16px; + padding-bottom: 4px; + border-bottom: 1px solid #1b2129; +} + +.nav__linc { + color: inherit; + text-decoration: none; + text-transform: none; + font-size: 22px; + line-height: 22px; + letter-spacing: 1px; +} + +.nav__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 32px; +} diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 0000000000..9b0f84d4f3 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["index.scss","blocks/header.scss","utils/variables.scss","utils/mixins.scss","blocks/page.scss","blocks/top-bar.scss","blocks/icon.scss","blocks/menu.scss","blocks/nav.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE,aCTkB;EDUlB,aCXe;EDYf;EACA;EACA;EACA;;AAGF;EACE;EEdF;;AANA;EFmBA;IEVE;;;;ACVJ;EACE;EACA;EACA;EACA,OFHgB;EEKhB;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;;;ACzBN;EACE;EFMA;EEFA;EACA;EACA;;AFNA;EEDF;IFUI;;;AATF;EEDF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;;AHJA;EGDF;IAQI;IACA;;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;ACrBJ;EACE;EACA;EACA;EAEA,aLFoB;EKGpB,aLJiB;EKKjB;EACA;;AAEA;EACE;;AAGF;EJPA;;AANA;EIaA;IJJE;;;AIQF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/BF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000000..28489a78fb --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,13 @@ +body { + font-family: Manrope, sans-serif; + margin: 0; +} + +@import "./utils/variables"; +@import "./utils/mixins"; +@import "./blocks/header"; +@import "./blocks/page"; +@import "./blocks/top-bar"; +@import "./blocks/icon"; +@import "./blocks/menu"; +@import "./blocks/nav"; diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/utils/mixins.css.map b/src/styles/utils/mixins.css.map new file mode 100644 index 0000000000..eb2439bd4b --- /dev/null +++ b/src/styles/utils/mixins.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"mixins.css"} \ No newline at end of file diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..5ff3308e10 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,13 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 72px; + } +} diff --git a/src/styles/utils/variables.css.map b/src/styles/utils/variables.css.map new file mode 100644 index 0000000000..8653e8ae2a --- /dev/null +++ b/src/styles/utils/variables.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"variables.css"} \ No newline at end of file diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..8333a3cbc9 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,4 @@ +$tablet-min-width: 576px; +$main-text-color: #1b2129; +$font-weight-bold: 700; +$font-family-manrope: Manrope, sans-serif;