prvni várka

2024-04-17 23:13:56 +02:00
commit 25ef045289
19 changed files with 433 additions and 0 deletions
--- a/NavBar/index.html
+++ b/NavBar/index.html
@ -0,0 +1,31 @@
+<head>
+  <!-- Nav Bar -->
+  <script
+    src="https://kit.fontawesome.com/0a43c6cd1f.js"
+    crossorigin="anonymous"
+  ></script>
+</head>
+<body>
+  <header>
+    <!-- Harry - logo (Harry Potter) -->
+    <div class="logo">
+      <img src="image/logo.png" alt="" />
+    </div>
+
+    <!-- Harry - navigation -->
+    <nav>
+      <ul>
+        <li><a href="">Domů</a></li>
+        <li><a href="">O nás</a></li>
+        <li><a href="">Kontakt</a></li>
+      </ul>
+    </nav>
+
+    <div class="menu-icon">
+      <!-- Ikona hamburger -->
+      <i class="fa-solid fa-bars"></i>
+      <!-- Ikona cross -->
+      <!-- <i class="fa-solid fa-xmark"></i> -->
+    </div>
+  </header>
+</body>
--- a/NavBar/script.js
+++ b/NavBar/script.js
@ -0,0 +1,15 @@
+const menuIcon = document.querySelector(".menu-icon");
+const menuList = document.querySelector("nav");
+const hamburgerIcon = document.querySelector(".fa-solid");
+
+menuIcon.addEventListener("click", () => {
+  if (hamburgerIcon.classList[1] === "fa-bars") {
+    hamburgerIcon.classList.add("fa-xmark");
+    hamburgerIcon.classList.remove("fa-bars");
+    menuList.style.display = "block";
+  } else {
+    hamburgerIcon.classList.add("fa-bars");
+    hamburgerIcon.classList.remove("fa-xmark");
+    menuList.style.display = "none";
+  }
+});
--- a/NavBar/style.cs
+++ b/NavBar/style.cs
@ -0,0 +1,68 @@
+header {
+  display: flex;
+  align-items: center;
+  background-color: #313131;
+  height: 70px;
+  flex-direction: row;
+  /*position: fixed;*/
+}
+
+.logo {
+  flex-grow: 1;
+}
+
+.logo img {
+  width: 150px;
+  margin-left: 40px;
+}
+
+/* EOS - navigation */
+nav {
+  margin-right: 40px;
+}
+
+nav li {
+  display: inline-block;
+  list-style-type: none;
+  margin-right: 20px;
+}
+
+nav li a {
+  text-decoration: none;
+  color: #734f96;
+  /*border: 1px solid #734f96;*/
+}
+
+/* EOS - navigation icons */
+
+.menu-icon {
+  display: none;
+  margin-right: 30px;
+}
+
+
+@media (max-width: 600px) {
+  header {
+    position: relative;
+  }
+  header nav {
+    position: absolute;
+    top: 70px;
+    background-color: #313131;
+    width: 100%;
+    display: none;
+  }
+
+  .menu-icon {
+    display: block;
+    color: var(--special-white);
+    font-size: 23px;
+  }
+
+  header nav li {
+    display: block !important;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}