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 93d9738cc4..1989a909f8 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ Adapt the page to the following screens: 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/layout_dia/). + [DEMO LINK](https://Ga1dar.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index fb7ba68c60..95ec54ba33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1222,10 +1222,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -6610,10 +6611,11 @@ } }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, + "license": "MIT", "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -7168,10 +7170,11 @@ "dev": true }, "node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", "dev": true, + "license": "MIT", "dependencies": { "isarray": "0.0.1" } diff --git a/package.json b/package.json index aee2e6ad6b..e44c362eb4 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/images/BG.png b/src/images/BG.png new file mode 100644 index 0000000000..ace54648f2 Binary files /dev/null and b/src/images/BG.png differ diff --git a/src/images/logo/Air (1).png b/src/images/logo/Air (1).png new file mode 100644 index 0000000000..912258f6ac Binary files /dev/null and b/src/images/logo/Air (1).png differ diff --git a/src/images/logo/Air.png b/src/images/logo/Air.png new file mode 100644 index 0000000000..9a6bb904be Binary files /dev/null and b/src/images/logo/Air.png differ diff --git a/src/images/logo/Logo.png b/src/images/logo/Logo.png new file mode 100644 index 0000000000..1665f68559 Binary files /dev/null and b/src/images/logo/Logo.png differ diff --git a/src/images/logo/icon-Menu.png b/src/images/logo/icon-Menu.png new file mode 100644 index 0000000000..ca83b07f12 Binary files /dev/null and b/src/images/logo/icon-Menu.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..d569f41cd2 100644 --- a/src/index.html +++ b/src/index.html @@ -7,13 +7,178 @@ content="width=device-width, initial-scale=1.0" /> Dia + + + + + + + + + -

Dia

+
+
+
+ + + + + +
+ +
+ + + Hire us + +
+
+

Strategic Agency

+

+ We believe in the power of bold ideas that +
+ can solve business challenges. +

+ + Learn more + +
+
+
+
+
+

Who we are

+
+
+

Our expertise

+
+
+

Air is a full service creative agency

+
+
+

Testimonials

+
+
+

Vision, Passion, Resultss

+
+
+
+
+

Send us a message

+
+ + + +
+
+

Contact us

+
+
+
+
+
+
+
+
diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000000..36c9fa1014 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,155 @@ +.header { + margin: 0; + background-image: url(/src/images/BG.png); + background-size: cover; + background-repeat: no-repeat; + overflow: hidden; + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__bottom { + margin-block: 48px; + margin-inline: 21px; + } + + &__title { + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + letter-spacing: -2px; + text-align: left; + color: $header-text-color; + margin-top: 0; + } + + &__push { + height: 50px; + width: 100%; + background-color: #2060f6; + text-align: center; + line-height: 50px; + text-decoration: none; + color: $header-text-color; + font-size: 15px; + font-weight: 600; + padding-inline: 94px; + padding-block: 14px; + border-radius: 8px; + } + + &__text { + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + color: $header-text-color; + } +} + +.top-bar { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0; + column-gap: 32px; + + &__logo-link { + display: flex; + height: 25px; + width: 44px; + margin: 20px; + } + + &__logo { + height: 25px; + width: 44px; + } + + &__button { + height: 20px; + color: $header-text-color; + text-decoration: none; + text-transform: uppercase; + font-weight: 700; + font-size: 13px; + letter-spacing: 3px; + text-align: center; + margin: 18px; + text-wrap: nowrap; + } +} + +.menu-toggle { + display: none; /* Скрываем чекбокс по умолчанию */ +} + +.icon-menu { + display: block; + background-image: url(/src/images/logo/icon-Menu.png); + background-size: cover; + height: 24px; + width: 24px; + color: $header-text-color; + margin: 24px; + + @media (min-width: 580px) { + & { + display: none; + } + } +} + +.nav { + display: flex; + margin: 0; + + @media (max-width: 560px) { + & { + display: none; + overflow: hidden; + max-height: 100%; + transition: max-height 0.5s ease; + } + } + + &__list { + display: flex; + flex-direction: column; + row-gap: 24px; + width: 130px; + list-style: none; + color: $header-text-color; + position: absolute; + top: 30; + + left: 70px; + background-color: #2c2c2c; + align-items: center; + + @media (min-width: 580px) { + & { + flex-direction: row; + column-gap: 48px; + top: 0; + width: 100%; + position: relative; + } + } + } + + &__link a { + color: $header-text-color; + text-decoration: none; + text-transform: uppercase; + margin-left: 20px; + } +} + +.menu-toggle:checked + .top-bar__icon + .menu .nav { + display: block; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..d547b0bb1c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,5 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './page'; +@import './header'; diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 0000000000..54ea5aaa12 --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,10 @@ +html { + font-family: Poppins, 'Open Sans', sans-serif; + font-size: normal; + font-style: normal; +} + +body { + margin: 0; + background: $c-gray; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..c5acddbcee 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,2 @@ $c-gray: #eee; +$header-text-color: #fff;