diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64ccfa..f3065d3 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,5 +19,11 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - run: npm ci - - run: npm start & sleep 5 && npm test + - 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/.gitignore b/.gitignore index 0f8d3cf..549c139 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/README.md b/README.md index 7fa4acc..bcc18f6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,12 @@ -# Base layout template with Gulp, SCSS and Stylelint -1. Create a repo using this template -1. Replace `` and `` with your Github username and the new repo name - - [DEMO LINK](https://.github.io//) + - [DEMO LINK](https://encrt.github.io/tt1_roga_i_kopyta/) + +#Тестовое задание +Ссылка на макет в [Figma](https://www.figma.com/file/wvkEXGLJt8nYvXvdtds0hk/Untitled?node-id=0%3A1) + +Макет представляет себой облегченную копию того, что мы обычно верстаем. В реальности чуть сложнее - у нас есть формы и необычное расположение графические элементов, взаимодействие с посторонним API посредством AJAX запросов. +Задача +1. Сверстать данный макет. Бутстрап не используем. +2. Сделать макет адаптивным на свое усмотрение при помощи @media запросов (иконки переносятся флексом - и так дале). +3. Подключить javascript файл и по клику на action-кнопку вывести любое всплывающее окно на ваше усмотрение. +4. Залить на github и дать ссылку +# Roga_I_Kopyta diff --git a/package.json b/package.json index fe21228..c3eb14e 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": "0.0.1", - "@mate-academy/scripts": "^0.2.0", + "@mate-academy/scripts": "^0.9.7", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7..0000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/age.png b/src/images/age.png new file mode 100644 index 0000000..863deea Binary files /dev/null and b/src/images/age.png differ diff --git a/src/images/cow.png b/src/images/cow.png new file mode 100644 index 0000000..4f4e079 Binary files /dev/null and b/src/images/cow.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000..a2181b2 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/mc_logo.png b/src/images/mc_logo.png new file mode 100644 index 0000000..f53c3da Binary files /dev/null and b/src/images/mc_logo.png differ diff --git a/src/images/mc_title.png b/src/images/mc_title.png new file mode 100644 index 0000000..2dea956 Binary files /dev/null and b/src/images/mc_title.png differ diff --git a/src/images/section_1_bg.jpg b/src/images/section_1_bg.jpg new file mode 100644 index 0000000..62d529a Binary files /dev/null and b/src/images/section_1_bg.jpg differ diff --git a/src/images/services/1_gift.png b/src/images/services/1_gift.png new file mode 100644 index 0000000..e86ef58 Binary files /dev/null and b/src/images/services/1_gift.png differ diff --git a/src/images/services/2_chart.png b/src/images/services/2_chart.png new file mode 100644 index 0000000..4e637ca Binary files /dev/null and b/src/images/services/2_chart.png differ diff --git a/src/images/services/3_dollar.png b/src/images/services/3_dollar.png new file mode 100644 index 0000000..2c062a3 Binary files /dev/null and b/src/images/services/3_dollar.png differ diff --git a/src/images/services/4_sport.png b/src/images/services/4_sport.png new file mode 100644 index 0000000..da9606c Binary files /dev/null and b/src/images/services/4_sport.png differ diff --git a/src/images/services/5_previevs.png b/src/images/services/5_previevs.png new file mode 100644 index 0000000..a0131d9 Binary files /dev/null and b/src/images/services/5_previevs.png differ diff --git a/src/images/services/6_casino.png b/src/images/services/6_casino.png new file mode 100644 index 0000000..e91ac32 Binary files /dev/null and b/src/images/services/6_casino.png differ diff --git a/src/images/visa_logo.png b/src/images/visa_logo.png new file mode 100644 index 0000000..d8a4867 Binary files /dev/null and b/src/images/visa_logo.png differ diff --git a/src/index.html b/src/index.html index 5d357bd..d98a0f8 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,281 @@ - + - Title + R&K Promo - -

Hello Mate Academy

+ + +
+
+
+ + + SLOGAN GOES HERE + +
+
+ Cow image +
+
+

+ Sports betting +

+

+ high odds - big winnings +

+

+

+

+ For Android 4.0.3 or higher +

+
+
+
+
+
+
+

+ New Customers Get up to + $100 + Welcome Bonus! +
+ Bet on Sports with ROGA I KOPYTA™ +

+
+
+
+ image +
+ + Daily betting bonuses + +
+
+
+ image +
+ + Best odds + +
+
+
+ image +
+ + Fastest withdrawals + +
+
+
+ image +
+ + Bets on any sport + +
+
+
+ image +
+ + Live previews + +
+
+
+ image +
+ + Casino & TV games + +
+
+
+

+ Cashout via: +

+
+
+ visa +
+
+ mastercard + mastercard title +
+
+ visa +
+
+
+
+
+
+
+
+

+ Copyright © 2019 - 2021 «Roga i Kopyta» +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis justo nec mauris rhoncus, ut mattis ante +

+

+ cursus. Fusce mattis tortor id quam ultricies, eget porta odio facilisis. +

+ age +
+
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a..91c42aa 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,13 @@ 'use strict'; + +const popupWindow = document.querySelector('.popup'); +const popupOpener = document.querySelector('.section-top__button'); +const popupCloser = document.querySelector('.popup__close-btn'); + +popupOpener.onclick = function() { + popupWindow.style.transform = 'translateX(0)'; +}; + +popupCloser.onclick = function() { + popupWindow.style.transform = 'translateX(100%)'; +}; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3f..0000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb4..18a30f1 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,12 @@ -h1 { - @extend %h1; +@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;900&display=swap"); + +.title { + text-transform: uppercase; + background: linear-gradient(180deg, #fff, #cddcdf, #e0f9ff); + background-clip: text; + -webkit-background-clip: text; + color: transparent; + display: inline-block; + transform: matrix(0.98, 0, -0.21, 1, 0, 0); + padding: 0; } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 1366a06..0000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "utils/vars"; -@import "utils/mixins"; -@import "utils/extends"; diff --git a/src/styles/components/cashout.scss b/src/styles/components/cashout.scss new file mode 100644 index 0000000..a546ffc --- /dev/null +++ b/src/styles/components/cashout.scss @@ -0,0 +1,51 @@ +.cashout { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 30px; + + &__title { + font-family: "Inter", sans-serif; + font-weight: 500; + font-size: 40px; + text-transform: uppercase; + letter-spacing: 0.02em; + color: #fff; + margin: 0 0 30px; + } + + &__cards { + display: flex; + gap: 30px; + + @include onScreen { + gap: 10px; + } + + @include onTablet { + flex-direction: column; + } + } +} + +.card { + display: flex; + justify-content: center; + align-items: center; + width: 255px; + height: 62px; + background-color: #fff; + border-radius: 10px; + + &__logo--mc { + height: 37px; + width: 59px; + margin-right: 12px; + } + + @include onScreen { + width: 220px; + height: 52px; + } +} diff --git a/src/styles/components/figure.scss b/src/styles/components/figure.scss new file mode 100644 index 0000000..f5c98a8 --- /dev/null +++ b/src/styles/components/figure.scss @@ -0,0 +1,6 @@ +.parallelogram { + display: block; + text-align: center; + border-radius: 5px; + transform: skew(-27deg); +} diff --git a/src/styles/components/footer.scss b/src/styles/components/footer.scss new file mode 100644 index 0000000..be18b25 --- /dev/null +++ b/src/styles/components/footer.scss @@ -0,0 +1,38 @@ +.footer { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-bottom: 50px; + + &__description { + font-family: "Inter", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + line-height: 18px; + letter-spacing: 0.04em; + opacity: 0.6; + text-align: center; + color: #fff; + padding: 0 12px; + margin: 0; + + @include onScreen { + width: 70%; + } + + @include onMobile { + font-size: 12px; + line-height: 14px; + } + } + + &__age { + position: absolute; + width: 23px; + left: 90%; + bottom: 49px; + } +} diff --git a/src/styles/components/logo.scss b/src/styles/components/logo.scss new file mode 100644 index 0000000..f94cd0f --- /dev/null +++ b/src/styles/components/logo.scss @@ -0,0 +1,15 @@ +.logo { + width: 416px; + height: 112px; + margin-bottom: 29px; + + @include onTablet { + width: 292px; + height: 78px; + } + + @include onMobile { + width: 208px; + height: 66px; + } +} diff --git a/src/styles/components/popup.scss b/src/styles/components/popup.scss new file mode 100644 index 0000000..80de150 --- /dev/null +++ b/src/styles/components/popup.scss @@ -0,0 +1,38 @@ +.popup { + display: flex; + flex-direction: column; + position: fixed; + background-image: url(../images/section_1_bg.jpg); + background-size: cover; + background-position: 50%; + color: #fff; + z-index: 1; + height: 100%; + width: 100%; + padding: 20px 0; + transform: translateX(100%); + transition: transform 0.4s; + + &__close-btn { + position: fixed; + top: 15px; + right: 15px; + + width: 40px; + height: 40px; + background-color: rgb(184, 119, 119); + cursor: pointer; + font-size: 26px; + text-align: center; + line-height: 40px; + } + + &__text { + background-color: rgb(99, 89, 126); + padding: 20px; + } + + &__footer { + margin-top: 20px; + } +} diff --git a/src/styles/components/sections.scss b/src/styles/components/sections.scss new file mode 100644 index 0000000..baf6cc7 --- /dev/null +++ b/src/styles/components/sections.scss @@ -0,0 +1,232 @@ +.section { + display: flex; + flex-direction: column; + align-self: center; + width: 100%; + + &-top { + background-image: url(../images/section_1_bg.jpg); + background-size: cover; + background-position: 50%; + padding-top: 36px; + + &__actions { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 80px; + + @media (max-width: 565px) { + flex-direction: column; + } + } + + &__app-description { + display: flex; + flex-direction: column; + align-items: center; + } + + &__image-container { + display: flex; + justify-content: center; + align-items: center; + } + + &__image { + + @include onScreen { + width: 335px; + height: 335px; + } + + @include onTablet { + width: 250px; + height: 250px; + } + } + + &__title { + font-family: "Anton", sans-serif; + font-size: 72px; + font-weight: 400; + font-style: normal; + line-height: 106px; + letter-spacing: 0.1em; + margin: 0; + + @include onScreen { + font-size: 52px; + line-height: 80px; + } + + @include onTablet { + font-size: 42px; + line-height: 52px; + } + + @include onMobile { + font-size: 36px; + } + } + + &__subtitle { + font-family: "Inter", sans-serif; + font-size: 34px; + font-weight: 600; + font-style: normal; + line-height: 41px; + letter-spacing: 0.07em; + margin: 0 0 46px; + + @include onScreen { + font-size: 24px; + line-height: 32px; + } + + @include onTablet { + font-size: 20px; + line-height: 32px; + margin: 0 0 32px; + } + + @include onMobile { + font-size: 18px; + line-height: 26px; + margin: 0 0 32px; + letter-spacing: 0.02em; + } + } + + &__android-ver { + font-family: "Inter", sans-serif; + font-size: 19px; + font-weight: normal; + color: #fff; + text-align: center; + line-height: 23px; + transform: matrix(0.98, 0, -0.22, 1, 0, 0); + + @include onTablet { + font-size: 14px; + } + } + + &__slogan { + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 34px; + line-height: 56px; + color: #fff; + width: 492px; + height: 56px; + background: linear-gradient(90deg, #00b0ff, #0726ce); + margin-bottom: 28px; + + @include onScreen { + font-size: 28px; + line-height: 48px; + width: 410px; + height: 48px; + } + + @include onTablet { + font-size: 22px; + line-height: 34px; + width: 320px; + height: 34px; + } + + @include onMobile { + font-size: 18px; + line-height: 30px; + width: 280px; + height: 30px; + } + } + + &__button { + cursor: pointer; + font-family: "Inter", sans-serif; + font-style: normal; + font-weight: 900; + font-size: 36px; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 2px; + line-height: 94px; + color: #fff; + width: 518px; + height: 94px; + background: linear-gradient(90deg, #ffc123, #fa4800); + box-shadow: 0 0 16px 1px #ffc123; + margin-bottom: 16px; + + &:before { + content: "DOWNLOAD FOR FREE"; + } + + @include onScreen { + font-size: 24px; + width: 372px; + height: 74px; + line-height: 74px; + } + + @include onTablet { + font-size: 22px; + width: 260px; + height: 64px; + line-height: 64px; + + &:before { + content: "DOWNLOAD"; + } + + @include onMobile { + font-size: 18px; + height: 52px; + line-height: 52px; + } + } + } + } + + &-bottom { + + &__title { + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 30px; + text-align: center; + line-height: 36px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: #fff; + padding: 40px 0 0; + margin: 0; + + @include onScreen { + font-size: 24px; + } + + @include onTablet { + padding: 18px 10px 0; + } + + @include onMobile { + font-size: 18px; + line-height: 26px; + letter-spacing: 0; + } + + &--accent { + color: #fa4800; + } + + &--bold { + font-weight: 800; + } + } + } +} diff --git a/src/styles/components/services.scss b/src/styles/components/services.scss new file mode 100644 index 0000000..73e7610 --- /dev/null +++ b/src/styles/components/services.scss @@ -0,0 +1,85 @@ +.services { + display: grid; + grid-template-columns: 33% 33% 33%; + width: 100%; + padding-top: 40px; + justify-content: space-between; + justify-items: center; + align-items: center; + + @include onTablet { + width: unset; + grid-template-columns: 50% 50%; + } + + @include onMobile { + grid-template-columns: 1fr; + } + + &__item { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + height: 168px; + margin: 0 40px 40px; + + @include onScreen { + margin: 0 12px 40px; + } + } + + &__picture { + display: flex; + justify-content: center; + align-items: center; + width: 116px; + height: 116px; + border-radius: 50%; + background: radial-gradient(50% 50% at 50% 50%, + rgba(255, 181, 32, 0.3) 0%, + rgba(0, 0, 0, 0.3) 63.54%, + rgba(0, 0, 0, 0.3) 94.06%, + rgba(0, 162, 253, 0.3) 96.88%); + margin-bottom: 18px; + } + + &__image { + &--1 { + width: 49px; + height: 46px; + } + + &--2 { + width: 42px; + height: 42px; + } + + &--3 { + width: 55px; + height: 55px; + } + + &--4 { + width: 80px; + height: 60px; + } + + &--5 { + width: 40px; + height: 45px; + } + + &--6 { + width: 45px; + height: 50px; + } + } + + &__title { + font-family: "Anton", sans-serif; + font-size: 24px; + font-weight: 400; + line-height: 30px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..81889d6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ -@import "utils"; -@import "fonts"; -@import "typography"; +@import "./typography"; +@import "./utils/reset"; +@import "./utils/_mixins"; -body { - background: $c-gray; -} +@import "./components/popup.scss"; +@import "./components/sections.scss"; +@import "./components/footer.scss"; +@import "./components/logo.scss"; +@import "./components/figure.scss"; +@import "./components/services.scss"; +@import "./components//cashout.scss"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0..0000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c7978..a5f5802 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,17 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin onMobile { + @media (max-width: 440px) { + @content; + } +} + +@mixin onTablet { + @media (max-width: 768px) { + @content; + } +} + +@mixin onScreen { + @media (max-width: 1056px) { + @content; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006f..0000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000..91ef73d --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,27 @@ + +.page, +.page__body, +h1, +h2, +h3, +h4, +h5, +h6, +p { + padding: 0; + margin: 0; +} + +.page { + box-sizing: border-box; + background-color: #00053b; +} + +.container { + display: flex; + flex-direction: column; + align-self: center; + justify-content: center; + align-items: center; + max-width: 1024px; +}