diff --git a/index.html b/index.html index 8f912d3..b95c91a 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,28 @@ + + Lukas Eisenhauer -
- Gitea - Codi MD -
+ +

Lukas Eisenhauer

+

+ Willkommen auf meiner Website +

+

+ Ich habe eine website und du liest gerade diese Website. +

+

+ Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten! +

diff --git a/index.html b/index.html index 8f912d3..b95c91a 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,28 @@ + + Lukas Eisenhauer -
- Gitea - Codi MD -
+ +

Lukas Eisenhauer

+

+ Willkommen auf meiner Website +

+

+ Ich habe eine website und du liest gerade diese Website. +

+

+ Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten! +

diff --git a/navbar.html b/navbar.html new file mode 100644 index 0000000..c89129f --- /dev/null +++ b/navbar.html @@ -0,0 +1,9 @@ + diff --git a/index.html b/index.html index 8f912d3..b95c91a 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,28 @@ + + Lukas Eisenhauer -
- Gitea - Codi MD -
+ +

Lukas Eisenhauer

+

+ Willkommen auf meiner Website +

+

+ Ich habe eine website und du liest gerade diese Website. +

+

+ Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten! +

diff --git a/navbar.html b/navbar.html new file mode 100644 index 0000000..c89129f --- /dev/null +++ b/navbar.html @@ -0,0 +1,9 @@ + diff --git a/navbar.js b/navbar.js new file mode 100644 index 0000000..e7da699 --- /dev/null +++ b/navbar.js @@ -0,0 +1,14 @@ +const navbar = ` + +
+ Gitea + Codi MD +
+`; + +function importNavbar() { + var element = document.getElementById("navbar"); + element.innerHTML = navbar; +} diff --git a/index.html b/index.html index 8f912d3..b95c91a 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,28 @@ + + Lukas Eisenhauer -
- Gitea - Codi MD -
+ +

Lukas Eisenhauer

+

+ Willkommen auf meiner Website +

+

+ Ich habe eine website und du liest gerade diese Website. +

+

+ Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten! +

diff --git a/navbar.html b/navbar.html new file mode 100644 index 0000000..c89129f --- /dev/null +++ b/navbar.html @@ -0,0 +1,9 @@ + diff --git a/navbar.js b/navbar.js new file mode 100644 index 0000000..e7da699 --- /dev/null +++ b/navbar.js @@ -0,0 +1,14 @@ +const navbar = ` + +
+ Gitea + Codi MD +
+`; + +function importNavbar() { + var element = document.getElementById("navbar"); + element.innerHTML = navbar; +} diff --git a/styles.css b/styles.css index 00c52eb..ef4b9d1 100644 --- a/styles.css +++ b/styles.css @@ -9,13 +9,13 @@ --white: #ffffff; - --accent_A: #200020; - --accent_B: #400040; - --accent_C: #600060; - --accent_D: #800080; - --accent_E: #A000A0; - --accent_F: #C000C0; - --accent_G: #E000E0; + --accent_A: #202000; + --accent_B: #404000; + --accent_C: #606000; + --accent_D: #808000; + --accent_E: #A0A000; + --accent_F: #C0C000; + --accent_G: #E0E000; --gray_A: #202020; --gray_B: #404040; @@ -26,44 +26,90 @@ --gray_G: #E0E0E0; } +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; + margin: 0; + padding: 0px 0px 0px 0px; +} + body { background-color: var(--white); font-family: Helvetica; + padding: 0px 0px 0px 0px; } -.sidenav { - height: 100%; - width: 100px; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: var(--main_C); - overflow-x: hidden; - padding-top: 20px; +nav { + width: 100%; + background-color: var(--main_D); + padding-left: 30px; + padding-right: 20px; + display: flex; + justify-content: space-between; + align-items: center; } -.sidenav a { - padding: 6px 8px 6px 16px; +nav a { + padding-top: 5px; + text-transform: uppercase; + color: var(--gray_G); + font-size: 20px; + display: inline-block; + text-decoration: none; + transition: color 0.5s; +} + +nav a:hover { + color: var(--white); +} + +.navbar_links { + list-style: none; + display: flex; +} + +.navbar_links a { + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; text-decoration: none; font-size: 15px; - color: var(--white); + color: var(--gray_F); display: block; - transition: background-color 0.5s; + transition: background-color 0.5s, color 0.5s; } -.sidenav a:hover { - background-color: var(--main_E); +.navbar_links a:hover { + background-color: var(--main_F); + color: var(--gray_B); } .body { - margin-left: 100px; } .body h1 { - margin-top: 10%; + margin-top: 5%; text-align: center; text-transform: uppercase; color: var(--gray_B); } +.body h2 { + margin-top: 5%; + text-align: center; + color: var(--gray_C); +} + +.body p { + text-align: center; + margin-left: 20px; + margin-right: 20px; + margin-top: 5px; + margin-bottom: 5px; + color: var(--gray_D); +} +