kankys/AkademieProjekt3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header v1

Browse Source
This commit is contained in:
Lukáš Kaňka 2024-03-22 22:19:38 +01:00
commit 4592daf535
6 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
colors.css Normal file
View File

BIN
img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
img/terminal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

51
index.html Normal file
View File

@ -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>

17
script.js Normal file
View File

@ -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";
}
});

103
style.css Normal file
View File

@ -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;
}