Harry v.1

2024-02-25 18:24:48 +01:00 · 2024-02-25 18:24:48 +01:00 · e589994616
commit e589994616
9 changed files with 159 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+# Druhý Projekt Engeto Akademie
+
+- Druhý projekt Engeto Akademie stránka s responzivním menu, pro menu a pozadí je použit motiv s fantasy Harry Potter.
--- a/colors.css
+++ b/colors.css
@ -0,0 +1,5 @@
+/* Colors */
+:root {
+  --special-blue: #15304c;
+  --special-white: #ffffff;
+}
--- a/image/PngItem_1608357.png
+++ b/image/PngItem_1608357.png
--- a/image/background.webp
+++ b/image/background.webp
--- a/image/logo.png
+++ b/image/logo.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,47 @@
+<!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" />
+    <link rel="stylesheet" href="query.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="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>
+    <main>
+      <!-- Background - Bradavice CSS import -->
+      <section class="welcome"></section>
+    </main>
+    <script src="script.js"></script>
+  </body>
+</html>
--- a/query.css
+++ b/query.css
@ -0,0 +1,28 @@
+/* Import barviček z colors.css */
+@import "colors.css";
+
+@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;
+  }
+}
--- a/script.js
+++ b/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/style.css
+++ b/style.css
@ -0,0 +1,61 @@
+/* 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;
+}
+
+.logo {
+  flex-grow: 1;
+}
+
+.logo img {
+  width: 200px;
+  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;
+}
+
+/* Harry - Welcome*/
+
+.welcome {
+  background: url("image/background.webp");
+  min-height: calc(100vh - 70px);
+  background-size: cover;
+  background-position: center;
+}