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

ligt-dark mode v1

Browse Source
This commit is contained in:
Lukáš Kaňka 2024-03-23 19:38:39 +01:00
parent 4e6176f7ab
commit 62990f45c9
3 changed files with 97 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
index.html
View File

@ -1,51 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="cs"> <html lang="cs">
<!-- Lukáš Kaňka --> <!-- Lukáš Kaňka -->
<!-- lukas.kanka@outlook.cz --> <!-- lukas.kanka@outlook.cz -->
<!-- Discord: Lukáš K. --> <!-- 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 <head>
src="https://kit.fontawesome.com/0a43c6cd1f.js" <meta charset="UTF-8" />
crossorigin="anonymous" <meta name="viewport" content="width=device-width, initial-scale=1.0" />
></script> <link rel="stylesheet" href="style.css" />
<title>Project 2</title>
</head>
<body> <script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
<header> <title>Project 2</title>
<!-- Terminal - logo (Terminal) --> </head>
<div class="logo">
<img src="img/terminal.png" alt="" />
<h1 class="title">Terminal</h1>
</div>
<!-- Harry - navigation --> <body>
<nav> <header>
<ul> <!-- Terminal - logo (Terminal) -->
<li><a href="">Domů</a></li> <div class="logo">
<li><a href="">O nás</a></li> <img class="picture" src="img/terminal.png" alt="" />
<li><a href="">Kontakt</a></li> <h1 class="title">Terminal</h1>
</ul> </div>
</nav>
<div class="menu-icon"> <!-- Terminal - navigation -->
<!-- Ikona hamburger --> <nav class="navigation">
<i class="fa-solid fa-bars"></i> <ul>
<!-- Ikona cross --> <li><a class="link" href="">Domů</a></li>
<!-- <i class="fa-solid fa-xmark"></i> --> <li><a class="link1" href="">O nás</a></li>
</div> <li><a class="link2" href="">Kontakt</a></li>
</header> </ul>
<main> </nav>
<!-- Background - Bradavice CSS import -->
<section class="welcome"></section> <div class="menu-icon">
</main> <!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr>
<!-- Sekce 1 -->
<section class="section1">
<section class="welcome">
<h3>Vítám tě na Terminalu, webu věnovanému Terminalům a aplikacim v Terminalu. </h3>
</section>
<footer>Copyright &copy; <a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a> 2024
</footer>
</section>
<script src="script.js"></script>
</body>
<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> </html>

28
script.js
View File

@ -15,3 +15,31 @@ menuIcon.addEventListener("click", () => {
} }
}); });
// Dark Light Mode
const body = document.querySelector("body");
const logo = document.querySelector(".picture");
const link = document.querySelector(".link");
const link1 = document.querySelector(".link1");
const link2 = document.querySelector(".link2");
const nav = document.querySelector(".navigation");
const h1 = document.querySelector("h1");
const h3 = document.querySelector("h3");
const p = document.querySelector("p");
//const footer = document.querySelector(".footer");
const mode = prompt("Chcete dark mode nebo light mode? dark / light");
if (mode === "dark") {
body.style.backgroundColor = "black";
logo.style.backgroundColor = "white";
link.style.color = "white";
link1.style.color = "white";
link2.style.color = "white";
nav.style.backgroundColor = "black";
h1.style.color = "white";
h3.style.color = "white";
p.style.color = "yellow";
footer.style.backgroundColor = "white";
} else {
}

42
style.css
View File

@ -9,18 +9,18 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* Harry ( header) */ /* Terminal ( header) */
header { header {
margin-top: 25px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--special-blue);
height: 70px; height: 70px;
flex-direction: row; flex-direction: row;
} }
.title { .title {
padding-top: 25px; padding-top: 25px;
} }
.logo { .logo {
@ -30,12 +30,12 @@ header {
.logo img { .logo img {
/*width: 100px;*/ /*width: 100px;*/
display: inline-block; /* zajistí, že rámeček bude mít rozměry odpovídající obsahu */
height: 100px; height: 100px;
padding-top: 15px;
margin-left: 20px; margin-left: 20px;
} }
/* Harry - navigation */ /* Terminal - navigation */
nav { nav {
margin-right: 30px; margin-right: 30px;
} }
@ -48,10 +48,10 @@ nav li {
nav li a { nav li a {
text-decoration: none; text-decoration: none;
color: var(--special-white); color: black;
} }
/*Harry - navigation icons */ /*Terminal - navigation icons */
.menu-icon { .menu-icon {
display: none; display: none;
@ -64,16 +64,16 @@ nav li a {
position: relative; position: relative;
} }
header nav { header nav {
background-color: white;
position: absolute; position: absolute;
top: 70px; top: 70px;
background-color: var(--special-blue);
width: 100%; width: 100%;
display: none; display: none;
} }
.menu-icon { .menu-icon {
display: block; display: block;
color: var(--special-white); /*color: var(--special-white);*/
font-size: 23px; font-size: 23px;
} }
@ -85,19 +85,25 @@ nav li a {
} }
} }
/* Sekce */
hr {
margin-top: 25px;
}
.section1 {
padding-top: 50px;
text-align: center;
}
/*footer pevná pozice*/ /*footer pevná pozice*/
footer { footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
position: center; margin-bottom: 10px;
margin-left: 25px;
} }
footer a {
text-decoration: none;
color: black;
}