header v1

2024-03-22 22:19:38 +01:00 · 2024-03-22 22:19:38 +01:00 · 4592daf535
commit 4592daf535
6 changed files with 171 additions and 0 deletions
--- a/colors.css
+++ b/colors.css
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/terminal.png
+++ b/img/terminal.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="cs">
+  <!-- Lukáš Kaňka -->
+  <!-- lukas.kanka@outlook.cz -->
+  <!-- Discord: Lukáš K. -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+  
+    <script
+      src="https://kit.fontawesome.com/0a43c6cd1f.js"
+      crossorigin="anonymous"
+    ></script>
+    <title>Project 2</title>
+  </head>
+
+  <body>
+    <header>
+      <!-- Harry - logo (Harry Potter) -->
+      <div class="logo">
+	      <img src="img/terminal.png" alt="" />
+<h1 class="title">Terminal</h1>
+      </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>
+    <main>
+      <!-- Background - Bradavice CSS import -->
+      <section class="welcome"></section>
+    </main>
+
+    <footer>Copyright &copy;  <a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a> 2024</footer>
+    <script src="script.js"></script>
+  </body>
+</html>
+
--- a/script.js
+++ b/script.js
@ -0,0 +1,17 @@
+//Nastavení Header menu
+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/style.css
+++ b/style.css
@ -0,0 +1,103 @@
+/* Import barviček z colors.css */
+@import "colors.css";
+
+* {
+  margin: 0;
+
+  padding: 0;
+
+  box-sizing: border-box;
+}
+
+/* Harry ( header) */
+
+header {
+  display: flex;
+  align-items: center;
+  background-color: var(--special-blue);
+  height: 70px;
+  flex-direction: row;
+}
+
+.title {
+ padding-top: 25px;
+}
+
+.logo {
+  flex-grow: 1;
+  display: flex;
+}
+
+.logo img {
+  /*width: 100px;*/
+  height: 100px;
+  padding-top: 15px;
+  margin-left: 20px;
+}
+
+/* Harry - navigation */
+nav {
+  margin-right: 30px;
+}
+
+nav li {
+  display: inline-block;
+  list-style-type: none;
+  margin-right: 20px;
+}
+
+nav li a {
+  text-decoration: none;
+  color: var(--special-white);
+}
+
+/*Harry - navigation icons */
+
+.menu-icon {
+  display: none;
+  margin-right: 30px;
+}
+
+/*Header small display*/
+@media (max-width: 600px) {
+  header {
+    position: relative;
+  }
+  header nav {
+    position: absolute;
+    top: 70px;
+    background-color: var(--special-blue);
+    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;
+  }
+}
+
+
+
+
+
+
+
+
+/*footer pevná pozice*/
+
+footer {
+  position: fixed;
+  bottom: 0;
+  position: center;
+  
+  }
+