Skip to content

Commit

Permalink
fixed moyo header
Browse files Browse the repository at this point in the history
  • Loading branch information
TaniaFedortsi committed Sep 20, 2024
1 parent f2d4745 commit aa54896
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 5 deletions.
2 changes: 1 addition & 1 deletion 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,7 +17,6 @@
"keywords": [],
"author": "Mate Academy",
"license": "GPL-3.0",
"dependencies": {},
"devDependencies": {
"@linthtml/linthtml": "^0.9.6",
"@mate-academy/backstop-config": "latest",
Expand All @@ -28,7 +27,7 @@
"backstopjs": "6.3.23",
"jest": "^29.7.0",
"parcel": "^2.12.0",
"prettier": "^3.3.2",
"prettier": "^3.3.3",
"stylelint": "^16.7.0",
"stylelint-scss": "^6.4.1"
},
Expand Down
83 changes: 82 additions & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,87 @@
/>
</head>
<body>
<h1>Moyo header</h1>
<header class="main-header">
<a
href="#"
class="logo"
>
<img
src="images/logo.png"
alt="Company Logo"
/>
</a>
<nav>
<ul class="nav-menu">
<li>
<a
href="#"
class="nav-link is-active"
>
APPLE
</a>
</li>
<li>
<a
href="#"
class="nav-link"
>
SAMSUNG
</a>
</li>
<li>
<a
href="#"
class="nav-link"
>
SMARTPHONES
</a>
</li>
<li>
<a
href="#"
class="nav-link"
data-qa="hover"
>
LAPTOPS & COMPUTERS
</a>
</li>
<li>
<a
href="#"
class="nav-link"
>
GADGETS
</a>
</li>
<li>
<a
href="#"
class="nav-link"
>
TABLETS
</a>
</li>
<li>
<a
href="#"
class="nav-link"
>
PHOTO
</a>
</li>
<li>
<a
href="#"
class="nav-link"
>
VIDEO
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>

</html>
75 changes: 74 additions & 1 deletion src/style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,76 @@
body {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Roboto, sans-serif;
background-color: #f9f9f9;
}

.main-header {
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 0 50px;
border-bottom: 1px solid #ddd;
position: relative;
}

.logo img {
height: 40px;
width: 40px;
}

.nav-menu {
display: flex;
list-style: none;
}

.nav-menu li {
margin-left: 30px;
}

.nav-menu li:first-child {
margin-left: 0;
}

.nav-link {
text-decoration: none;
color: #333;
font-size: 16px;
line-height: 60px;
position: relative;
}

.nav-link:hover {
color: #00acdc;
}

.nav-link.is-active {
position: relative;
color: #00acdc;
}

.nav-link.is-active::after {
content: '';
position: absolute;
left: 0;
bottom: -20px;
width: 100%;
height: 4px;
background-color: #00acdc;
border-radius: 8px;
}

.header-buttons .btn {
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}

0 comments on commit aa54896

Please sign in to comment.