Skip to content

Develop #7488

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

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

Develop #7488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
e77192b
reset default margins
alxcja21 Jan 29, 2026
d40317a
adding header and nav tag
alxcja21 Jan 29, 2026
ee675d4
adding class to header
alxcja21 Jan 29, 2026
aedf5c7
header is now display flex
alxcja21 Jan 29, 2026
e7eca8f
adding Roboto font
alxcja21 Jan 29, 2026
3ff2f5c
adding Logo
alxcja21 Jan 29, 2026
d2a3b46
Logo
alxcja21 Jan 29, 2026
592ea23
add nav links
alxcja21 Jan 29, 2026
2162a64
remove text-decoration
alxcja21 Jan 29, 2026
99a2286
flexbox qualities added
alxcja21 Jan 29, 2026
42b8697
improving nav links
alxcja21 Jan 29, 2026
7b41dbb
adding font-size
alxcja21 Jan 29, 2026
af3dce2
adding width and height to header
alxcja21 Jan 29, 2026
4b41c40
improved font
alxcja21 Jan 30, 2026
40fc165
improved ul
alxcja21 Jan 30, 2026
e806c9e
updating list styles
alxcja21 Jan 30, 2026
aa91437
styling active links
alxcja21 Jan 30, 2026
03a3ee9
improving nav links styles and layout
alxcja21 Jan 30, 2026
f7022f7
adjusting img tag
alxcja21 Jan 31, 2026
4cfb8fa
final adjustments to font
alxcja21 Jan 31, 2026
58e6f57
final adjustments
alxcja21 Jan 31, 2026
1212162
font
alxcja21 Jan 31, 2026
3dcf0d6
padding improvement
alxcja21 Jan 31, 2026
7ac762a
deleting box-sizing
alxcja21 Jan 31, 2026
f099990
adjusting box sizing
alxcja21 Jan 31, 2026
bc8eeb8
class names improvement
alxcja21 Feb 1, 2026
09cec39
css adjustent
alxcja21 Feb 1, 2026
ae8fccb
nav adjustment
alxcja21 Feb 2, 2026
9441d1d
box-sizing adjustment
alxcja21 Feb 3, 2026
c8be5b5
text-align removed
alxcja21 Feb 3, 2026
f1c73e4
box-sizing adjustment
alxcja21 Feb 3, 2026
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
89 changes: 87 additions & 2 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,95 @@
<title>Moyo header</title>
<link
rel="stylesheet"
href="./style.css"
href="style.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>Moyo header</h1>
<header class="header">
<div class="header__inner">
<a
href="#index.html"
class="logo"
>
<img
src="images/logo.png"
alt="Moyo logo"
/>
</a>
<nav class="nav">
<ul class="list__items">
<li class="nav__item">
<a
href="#"
class="nav__link is-active"
>
Apple
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
Samsung
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
Smartphones
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
data-qa="hover"
>
Laptops & Computers
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
Gadgets
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
Tablets
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
Photo
</a>
</li>
<li class="nav__item">
<a
href="#"
class="nav__link"
>
Video
</a>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
80 changes: 80 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,83 @@
body {
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 12px;
margin: 0;
}

.header,
.header__inner,
.logo,
.list__items,
.nav__item,
.nav__link {
box-sizing: border-box;
}

.header {
padding: 0;
background-color: white;
}

.header__inner {
padding: 0 50px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.list__items {
list-style: none;
display: flex;
padding: 0;
margin: 0;
justify-content: flex-end;
align-items: center;
}

.nav__item:not(:last-child) {
margin-right: 20px;
}

.nav__link {
text-transform: uppercase;
text-decoration: none;
color: black;
font-style: normal;
font-weight: 500;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

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

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

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

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

.logo {
display: flex;
align-items: center;
}