diff --git a/assets/design.css b/assets/design.css
index bd85a95..793115a 100644
--- a/assets/design.css
+++ b/assets/design.css
@@ -1,56 +1,102 @@
-
-* {
- box-sizing: border-box;
+*{
margin: 0;
padding: 0;
- background-color: #24252A;
-}
-
-li, a, button {
+ box-sizing: border-box;
font-family: sans-serif;
- font-weight: 500;
- font-size: 16px;
- color: #ecf0f1;
- text-decoration: none;
}
-header {
+body{
+ height: 100vh;
display: flex;
- justify-content: space-between;
align-items: center;
- padding: 30px 10%;
+ justify-content: center;
}
-.logo {
+.menu {
+ overflow: hidden;
+ background-color: #333;
+ position: fixed;
+ top: 0;
+ width: 100%;
+}
+
+.menu a {
+ float: left;
+ display: block;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 25px 16px;
+ text-decoration: none;
+ transition: ease 0.3s;
+}
+
+.menu p{
+ position: fixed;
+ top: 25px;
+ right: 100px;
+ color: #f2f2f2;
+}
+
+.menu a:hover {
+ background: #ddd;
+ color: black;
+}
+
+.seite {
+ width: 100%;
+ height: 100%;
+ padding: 80px 20px;
+ transition: .4s ease;
+}
+
+.seite h1 {
+ text-align: center;
+}
+
+.seite p {
+ padding: 30px 0;
+}
+
+
+#dark_mode {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ appearance: none;
+ -webkit-appearance : none;
+ -moz-appearance : none;
+ -o-appearance : none;
+ width: 70px;
+ height: 35px;
+ background: black;
+ border-radius: 22px;
cursor: pointer;
+ outline: none;
}
-.menu_list {
- list-style: none;
-}
-
-.menu_list li {
- display: inline-block;
- padding: 0px 20px;
-}
-
-.menu_list li a {
- transition: all 0.3s ease 0.5s;
-}
-
-.menu_list li a :hover {
- color: #0088a9;
-}
-
-button {
- padding: 9px 25px;
- background-color: rgba(0,13,169,1);
- border: none;
- border-radius: 50px;
+#dark_mode::before {
+ content: '';
+ position: absolute;
+ width: 35px;
+ height: 30px;
+ background-color:white;
+ border-radius: 35px;
+ top: 2px;
+ left: 2px;
cursor: pointer;
- transition: all 0.3s ease 0s;
+ transition: .3s linear;
}
-button:hover {
- background-color: rgba(0,13,169,0.8);
+#dark_mode:checked + .seite {
+ background-color: rgb(19, 18, 18);
+ color: white;
+}
+
+
+#dark_mode:checked::before {
+ left: 30px;
+}
+
+#dark_mode:checked {
+ background: rgb(12, 177, 81);
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 32bb58c..98d205f 100644
--- a/index.html
+++ b/index.html
@@ -2,21 +2,23 @@
- KBM - Startseite
+ Startseite
-
+
+
+
+
+
+
+
Test
+
-
-
-