commit 4592daf535e963b7393c82e2905a1077f257de70 Author: Lukáš Kaňka Date: Fri Mar 22 22:19:38 2024 +0100 header v1 diff --git a/colors.css b/colors.css new file mode 100644 index 0000000..e69de29 diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..67a8659 Binary files /dev/null and b/img/logo.png differ diff --git a/img/terminal.png b/img/terminal.png new file mode 100644 index 0000000..a3233d7 Binary files /dev/null and b/img/terminal.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e876fe9 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + Project 2 + + + +

+ +

Terminal

+ + + + + +

+ +

+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..3ae109e --- /dev/null +++ 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"; + } +}); + diff --git a/style.css b/style.css new file mode 100644 index 0000000..c096bae --- /dev/null +++ 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; + + } +