commit e589994616c988bd3cc38f4bba35a9ca5ecbfcd8 Author: Lukáš Date: Sun Feb 25 18:24:48 2024 +0100 Harry v.1 diff --git a/README.md b/README.md new file mode 100644 index 0000000..85c5cf4 --- /dev/null +++ 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. diff --git a/colors.css b/colors.css new file mode 100644 index 0000000..6abac34 --- /dev/null +++ b/colors.css @@ -0,0 +1,5 @@ +/* Colors */ +:root { + --special-blue: #15304c; + --special-white: #ffffff; +} diff --git a/image/PngItem_1608357.png b/image/PngItem_1608357.png new file mode 100644 index 0000000..f7dec9b Binary files /dev/null and b/image/PngItem_1608357.png differ diff --git a/image/background.webp b/image/background.webp new file mode 100644 index 0000000..b6a7681 Binary files /dev/null and b/image/background.webp differ diff --git a/image/logo.png b/image/logo.png new file mode 100644 index 0000000..ea0d00b Binary files /dev/null and b/image/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..26dd4b7 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + Project 2 + + + +
+ + + + + + +
+ + + + +
+
+
+ +
+
+ + + diff --git a/query.css b/query.css new file mode 100644 index 0000000..e14776c --- /dev/null +++ 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; + } +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..839aa84 --- /dev/null +++ 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"; + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..fe6b64b --- /dev/null +++ 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; +}