Added header for MOYO

mate-academy · Aug 17, 2024 · a53764c · a53764c
1 parent dc555a1
commit a53764c
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
  "@mate-academy/backstop-config": "latest",
  "@mate-academy/bemlint": "latest",
  "@mate-academy/linthtml-config": "latest",
- "@mate-academy/scripts": "^1.7.3",
+ "@mate-academy/scripts": "^1.9.1",
  "@mate-academy/stylelint-config": "latest",
  "backstopjs": "6.2.2",
  "jest": "^29.7.0",

diff --git a/src/font/Roboto-Bold.ttf b/src/font/Roboto-Bold.ttf
diff --git a/src/font/Roboto-Medium.ttf b/src/font/Roboto-Medium.ttf
diff --git a/src/font/Roboto-Regular.ttf b/src/font/Roboto-Regular.ttf
diff --git a/src/images/moyo_1.png b/src/images/moyo_1.png
diff --git a/src/index.html b/src/index.html
@@ -6,9 +6,68 @@
  name="viewport"
  content="width=device-width, initial-scale=1.0"
  />
+ <link rel="stylesheet" href="style.css">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
  <title>Document</title>
  </head>
  <body>
- Hello, world!
+ <header class="header">
+ <a href="#logo">
+ <img src="/src/images/moyo_1.png" alt="moyo"
+ class="img">
+ </a>
+ <nav class="nav">
+ <ul class="container">
+
+ <li class="nav_list">
+ <a href="#Apple" id="Apple"
+ class="a is-active nav_space">Apple
+ </a>
+ </li>
+
+ <li class="nav_list">
+ <a href="#Samsung" id="Samsung"
+ class="is-active a nav_space">Samsung
+ </a>
+ </li>
+
+ <li class="nav_list">
+ <a href="#Smartphones" id="Smartphones"
+ class="is-active a nav_space">Smartphones
+ </a>
+ </li>
+
+ <li class="nav_list">
+ <a href="#Laptops&Computers" id="Laptops&Computers"
+ class="is-active a nav_space" data-qa="hover">Laptops & Computers
+ </a>
+ </li>
+
+ <li class="nav_list">
+ <a href="#Gadgets" id="Gadgets"
+ class="is-active a nav_space">Gadgets
+ </a>
+ </li>
+
+ <li class="nav_list">
+ <a href="#Tablets" id="Tablets"
+ class="is-active a nav_space">Tablets
+ </a>
+ </li>
+
+ <li class="nav_list">
+ <a href="#Photo" id="Photo"
+ class="is-active a nav_space">Photo
+ </a>
+ </li>
+
+ <li class="nav_list">
+ <a href="#Video" id="Video"
+ class="is-active a nav_no_space">Video
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </header>
  </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1 +1,86 @@
-/* styles go here */
+@font-face {
+ font-family: Roboto;
+ src: url(/src/font/Roboto-Medium.ttf);
+}
+
+.header {
+ background: #FFF;
+ display: flex;
+ position: relative;
+ align-items: center;
+}
+
+.img {
+ width: 40px;
+ height: 40px;
+ margin-top: 10px;
+ margin-left: 50px;
+}
+
+.container {
+ height: 15px;
+ padding: 0;
+ display: flex;
+ align-items: center;
+}
+
+.is-active{
+ color: #000;
+}
+
+.nav {
+ display: flex;
+ margin-left: auto;
+ margin-right: 50px;
+ text-align: center;
+ justify-content: space-between;
+}
+
+.nav_no_space {
+ margin-right: 0;
+}
+
+.nav_space {
+ margin-right: 20px;
+}
+
+.a {
+ text-decoration: none;
+ font-family: Roboto, sans-serif;
+ font-size: 12px;
+ line-height: 14.06px;
+ white-space: nowrap;
+ max-width: none;
+ align-items: center;
+ position: relative;
+ display: inline-block;
+ padding: 30px 0;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+.nav_list {
+ list-style: none;
+ text-align: center;
+ margin: 0;
+}
+
+.is-active:hover {
+ color: #00ACDC;
+}
+
+.is-active:target{
+color:#00ACDC;
+}
+
+.is-active:target::after {
+ content:"";
+ display: block;
+ width: 100%;
+ height: 5px;
+ background-color: #00ACDC;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ border-radius: 8px;
+}