From aa54896a50b1c0627e2b0070ee98301b46f99f75 Mon Sep 17 00:00:00 2001 From: TaniaFedortsi Date: Fri, 20 Sep 2024 17:42:38 +0200 Subject: [PATCH] fixed moyo header --- package-lock.json | 2 +- package.json | 3 +- src/index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++- src/style.css | 75 +++++++++++++++++++++++++++++++++++++++++- 4 files changed, 158 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7eef7e5ecc..f2629d2d98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,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" } diff --git a/package.json b/package.json index 45fd6b0d41..f9efec6748 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/backstop-config": "latest", @@ -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" }, diff --git a/src/index.html b/src/index.html index b39fe97123..e1dd02f611 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,87 @@ /> -

Moyo header

+
+ + +
+ + diff --git a/src/style.css b/src/style.css index 293d3b1f13..812e2fb5ba 100644 --- a/src/style.css +++ b/src/style.css @@ -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; }