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

51
index.html
View File

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

38
style.css
View File

@ -9,12 +9,12 @@
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;
} }
@ -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;
}