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

moyo header #4893

Closed
wants to merge 8 commits into from
+195 −3
Closed

moyo header #4893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7f6863d
moyo header
AndriiZakharenko Apr 27, 2024
0c63131
add class-is-active & da-ga_hover
AndriiZakharenko Apr 27, 2024
74bbf20
checked & updated
AndriiZakharenko Apr 27, 2024
0c53a52
style css added
AndriiZakharenko Apr 28, 2024
cd92337
favicon deleted
AndriiZakharenko Apr 28, 2024
206dcbe
fonts added to css
AndriiZakharenko Apr 28, 2024
f9172fb
add fonts to head
AndriiZakharenko Apr 28, 2024
af68078
add task solution
AndriiZakharenko Apr 29, 2024
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
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,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://AndriiZakharenko.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://AndriiZakharenko.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
94 changes: 93 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,100 @@
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:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
</head>

<body>
<h1>Moyo header</h1>
<header class="header">
<div class="header__wraper">
<div class="header__logo">
<img
src="images/logo.png"
alt="moyo logo"
/>
</div>
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a
href="#"
class="header__link is-active"
>
Apple
</a>
</li>
<li class="header__item">
<a
href="#"
class="header__link"
>
Samsung
</a>
</li>
<li class="header__item">
<a
href="#"
class="header__link"
>
Smartphones
</a>
</li>
<li class="header__item">
<a
href="#"
class="header__link"
data-qa="hover"
>
Laptops & Computers
</a>
</li>
<li class="header__item">
<a
href="#"
class="header__link"
>
Gadgets
</a>
</li>
<li class="header__item">
<a
href="#"
class="header__link"
>
Tablets
</a>
</li>
<li class="header__item">
<a
href="#"
class="header__link"
>
Photo
</a>
</li>
<li class="header__item">
<a
href="#"
class="header__link"
>
Video
</a>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
100 changes: 100 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,103 @@
/* ======= VARS ======= */

:root {
/* colors */
--black: #000;
--grey: #666;
--yellow: #f0f4e7;
--violet: #e3d9ed;
--white: #fff;
--blue: #00acdc;

/* font-size */
--main: 12px;
--line-height: 14px;
}

/* ======= NULL CSS ======= */

html {
font-family: Roboto, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
color: var(--main);
background-color: var(--white);
}

body {
margin: 0;
}

ul,
li {
list-style: none;
padding: 0;
margin: 0;
}

a,
a:visited {
text-decoration: none;
}

/* =======HEADER ======= */

.header__wraper {
display: flex;
padding: 0 50px;
justify-content: space-between;
align-items: center;
}

.header__logo {
align-self: center;
justify-content: center;
height: 40px;
}

.header__list {
display: flex;
}

.header__item:not(:first-child) {
margin-left: 20px;
}

.header__link {
font-weight: 500;
font-size: var(--main);
line-height: 60px;
text-transform: uppercase;
text-align: center;
display: flex;
align-items: center;
color: var(--black);
height: 60px;
transition: color 0.3s ease;
}

.header__link:hover {
color: var(--blue);
}

.header__link:active {
color: var(--blue);
box-shadow: 0 4px 0 var(--blue);
}

.is-active {
position: relative;
color: var(--blue);
}

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