Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main #33

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Main #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
db0d054
Test Page
EnCRT Nov 10, 2021
177938c
Test Page
EnCRT Nov 10, 2021
4e7535b
first commit
EnCRT Nov 10, 2021
7f99879
Mobile and Popup added
EnCRT Nov 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions .github/workflows/test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ node_modules
# Generated files
backstop_data
dist
.cache
16 changes: 12 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
# Base layout template with Gulp, SCSS and Stylelint
1. Create a repo using this template
1. Replace `<your_account>` and `<repo_name>` with your Github username and the new repo name
- [DEMO LINK](https://<your_account>.github.io/<repo_name>/)
- [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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Empty file removed src/fonts/.gitkeep
View file
Open in desktop
Empty file.
Binary file removed src/fonts/Roboto-Regular-webfont.woff
View file
Open in desktop
Binary file not shown.
Binary file added src/images/age.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/cow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/mc_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/mc_title.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/section_1_bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/services/1_gift.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/services/2_chart.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/services/3_dollar.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/services/4_sport.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/services/5_previevs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/services/6_casino.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/visa_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
276 changes: 272 additions & 4 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,281 @@
<!DOCTYPE html>
<html lang="en">
<html class="page" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<title>R&K Promo</title>
<link rel="stylesheet" href="./styles/main.scss">
</head>
<body>
<h1>Hello Mate Academy</h1>
<body class="page__body">
<div id="popup" class="popup">
<span class="popup__close-btn">
&times;
</span>
<div class="container">
<img
class="logo"
src="./images/logo.png"
alt="Roga i Kopyta"
>
<div class="popup__header">
<span class="parallelogram section-top__slogan">
SLOGAN GOES HERE
</span>
</div>
<div class="popup__body">
<div class="services">
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--1"
src="./images/services/1_gift.png"
alt="image"
>
</div>
<span class="services__title title">
Daily betting bonuses
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--2"
src="./images/services/2_chart.png"
alt="image"
>
</div>
<span class="services__title title">
Best odds
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--3"
src="./images/services/3_dollar.png"
alt="image"
>
</div>
<span class="services__title title">
Fastest withdrawals
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--4"
src="./images/services/4_sport.png"
alt="image"
>
</div>
<span class="services__title title">
Bets on any sport
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--5"
src="./images/services/5_previevs.png"
alt="image"
>
</div>
<span class="services__title title">
Live previews
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--6"
src="./images/services/6_casino.png"
alt="image"
>
</div>
<span class="services__title title">
Casino & TV games
</span>
</div>
</div>
</div>
<div class="popup__footer">
<p class="popup__text">
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
<main class="main">
<div class="section section-top">
<div class="container">
<img
class="logo"
src="./images/logo.png"
alt="Roga i Kopyta"
>
<span class="parallelogram section-top__slogan">
SLOGAN GOES HERE
</span>
<div class="section-top__actions">
<div class="section-top__image-container">
<img
class="section-top__image"
src="./images/cow.png"
alt="Cow image"
>
</div>
<article class="section-top__app-description">
<h1 class="section-top__title title">
Sports betting
</h1>
<p class="section-top__subtitle title">
high odds - big winnings
</p>
<p
id="popupOpener"
class="parallelogram section-top__button"
>
</p>
<p class="section-top__android-ver">
For Android 4.0.3 or higher
</p>
</article>
</div>
</div>
</div>
<div class="section section-bottom">
<div class="container">
<p class="section-bottom__title section-bottom__title--bold">
New Customers Get up to
<span class="section-bottom__title--accent"> $100 </span>
Welcome Bonus!
<br>
<span class="section-bottom__title">Bet on Sports with ROGA I KOPYTA™</span>
</p>
<div class="section-bottom__services services">
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--1"
src="./images/services/1_gift.png"
alt="image"
>
</div>
<span class="services__title title">
Daily betting bonuses
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--2"
src="./images/services/2_chart.png"
alt="image"
>
</div>
<span class="services__title title">
Best odds
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--3"
src="./images/services/3_dollar.png"
alt="image"
>
</div>
<span class="services__title title">
Fastest withdrawals
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--4"
src="./images/services/4_sport.png"
alt="image"
>
</div>
<span class="services__title title">
Bets on any sport
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--5"
src="./images/services/5_previevs.png"
alt="image"
>
</div>
<span class="services__title title">
Live previews
</span>
</div>
<div class="services__item">
<div class="services__picture">
<img
class="services__image services__image--6"
src="./images/services/6_casino.png"
alt="image"
>
</div>
<span class="services__title title">
Casino & TV games
</span>
</div>
</div>
<div class="section-bottom__cashout cashout">
<h3 class="cashout__title">
Cashout via:
</h3>
<div class="cashout__cards">
<div class="card">
<img
class="card__logo--visa"
src="./images/visa_logo.png"
alt="visa"
>
</div>
<div class="card">
<img
class="card__logo--mc"
src="./images//mc_logo.png"
alt="mastercard"
>
<img src="./images//mc_title.png" alt="mastercard title">
</div>
<div class="card">
<img
class="card__logo--visa"
src="./images/visa_logo.png"
alt="visa"
>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<p class="footer__description">
Copyright © 2019 - 2021 «Roga i Kopyta»
</p>
<p class="footer__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis justo nec mauris rhoncus, ut mattis ante
</p>
<p class="footer__description">
cursus. Fusce mattis tortor id quam ultricies, eget porta odio facilisis.
</p>
<img
class="footer__age"
src="./images/age.png"
alt="age"
>
</div>
</footer>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%)';
};
6 changes: 0 additions & 6 deletions src/styles/_fonts.scss
View file
Open in desktop

This file was deleted.

13 changes: 11 additions & 2 deletions src/styles/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 0 additions & 3 deletions src/styles/_utils.scss
View file
Open in desktop

This file was deleted.

Loading