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>
<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" />
<!-- Lukáš Kaňka -->
<!-- lukas.kanka@outlook.cz -->
<!-- Discord: Lukáš K. -->
<script
src="https://kit.fontawesome.com/0a43c6cd1f.js"
crossorigin="anonymous"
></script>
<title>Project 2</title>
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<body>
<header>
<!-- Terminal - logo (Terminal) -->
<div class="logo">
<img src="img/terminal.png" alt="" />
<h1 class="title">Terminal</h1>
</div>
<script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
<title>Project 2</title>
</head>
<!-- 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>
<body>
<header>
<!-- Terminal - logo (Terminal) -->
<div class="logo">
<img class="picture" src="img/terminal.png" alt="" />
<h1 class="title">Terminal</h1>
</div>
<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>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a class="link" href="">Domů</a></li>
<li><a class="link1" href="">O nás</a></li>
<li><a class="link2" 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>
<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>

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;
}
/* Harry ( header) */
/* Terminal ( header) */
header {
margin-top: 25px;
display: flex;
align-items: center;
background-color: var(--special-blue);
height: 70px;
flex-direction: row;
}
.title {
padding-top: 25px;
padding-top: 25px;
}
.logo {
@ -30,12 +30,12 @@ header {
.logo img {
/*width: 100px;*/
display: inline-block; /* zajistí, že rámeček bude mít rozměry odpovídající obsahu */
height: 100px;
padding-top: 15px;
margin-left: 20px;
}
/* Harry - navigation */
/* Terminal - navigation */
nav {
margin-right: 30px;
}
@ -48,10 +48,10 @@ nav li {
nav li a {
text-decoration: none;
color: var(--special-white);
color: black;
}
/*Harry - navigation icons */
/*Terminal - navigation icons */
.menu-icon {
display: none;
@ -64,16 +64,16 @@ nav li a {
position: relative;
}
header nav {
background-color: white;
position: absolute;
top: 70px;
background-color: var(--special-blue);
width: 100%;
display: none;
}
.menu-icon {
display: block;
color: var(--special-white);
/*color: var(--special-white);*/
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 {
position: fixed;
bottom: 0;
position: center;
}
margin-bottom: 10px;
margin-left: 25px;
}
footer a {
text-decoration: none;
color: black;
}