Skip to content

Commit

Permalink
added solution
Browse files Browse the repository at this point in the history
  • Loading branch information
Gennadiy99 committed Nov 29, 2024
1 parent f2d4745 commit 509ec9f
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 9 deletions.
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
Original file line number Diff line number Diff line change
@@ -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
9 changes: 5 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,12 @@
"keywords": [],
"author": "Mate Academy",
"license": "GPL-3.0",
"dependencies": {},
"devDependencies": {
"@linthtml/linthtml": "^0.9.6",
"@mate-academy/backstop-config": "latest",
"@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",
"backstopjs": "6.3.23",
"jest": "^29.7.0",
Expand Down
5 changes: 3 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Moyo header

Create HTML page with the header using `flexbox` based on the [Figma Mockup](https://www.figma.com/file/1sog2rmfyCjnVxkeZ3ptnc/MOYO-%2F-Header?node-id=0%3A1&mode=dev).

The page should match the design Pixel Perfect: all the sizes, colors and distanced MUST be the same as on the design.
Expand Down Expand Up @@ -27,8 +28,8 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
- [DEMO LINK](https://<Gennadiy99>.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://<Gennadiy99>.github.io/layout_moyo-header/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
74 changes: 73 additions & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,89 @@
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>

<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
/>

<title>Moyo header</title>
<link
rel="stylesheet"
href="./style.css"
/>

<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>

<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>

<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>Moyo header</h1>
<div class="container">
<header class="head head__flex">
<div class="head__item1">
<a
class="head-logo-link"
href="#"
>
<img
src="images/logo.png"
alt="picture logo"
/>
</a>
</div>
<div class="head__item2">
<nav class="head-nav">
<ul class="head-nav-list">
<li>
<a
class="is-active"
href="#"
>
Apple
</a>
</li>
<li>
<a href="#">Samsung</a>
</li>
<li>
<a href="#">Smartphones</a>
</li>
<li>
<a
href="#"
data-qa="hover"
>
Laptops & Computers
</a>
</li>
<li>
<a href="#">Gadgets</a>
</li>
<li>
<a href="#">Tablets</a>
</li>
<li>
<a href="#">Photo</a>
</li>
<li>
<a href="#">Video</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
</body>
</html>
94 changes: 94 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,97 @@
html {
box-sizing: border-box;
font-family: Roboto, sans-serif;
font-style: normal;
}

*,
*::after,
*::before {
box-sizing: border-box;
}

:root {
--color-blue-active: #00acdc;
}

ul {
margin: 0;
padding: 0;
}

body {
box-sizing: inherit;
margin: 0;
background-color: #c9c8c8;
}

.container {
max-width: 1200px;
}

/* Стили для Хедера */
.head {
padding-left: 50px;
padding-right: 50px;
font-weight: 500;
background: #fff;
}

.head__flex {
display: flex;
align-items: center;
justify-content: space-between;
}

/* .head__item1 {
}
.head-logo-link {
}
.head__item2 {
}
.head-nav {
} */

.head-nav-list {
display: flex;
list-style: none;
gap: 20px;
}

a {
display: inline-block;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #000;
transition: all 0.3s;
}

.head-nav-list a {
padding-top: 22.5px;
padding-bottom: 22.5px;
}

/* стиль для активной ссылки */
.is-active {
position: relative;
color: var(--color-blue-active);
}

.is-active::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 37px;
height: 4px;
border-radius: 8px;
background: var(--color-blue-active);
}

a[data-qa='hover']:hover {
color: var(--color-blue-active);
}

0 comments on commit 509ec9f

Please sign in to comment.