From f356b37c9e76bc0d3998b697da8c2f0134f0805b Mon Sep 17 00:00:00 2001 From: Selina Erci Date: Wed, 23 Jul 2025 12:49:23 +0200 Subject: [PATCH] Rredundantz in Header.css und Hero.css normalisieren --- styles/components/Header.css | 170 ++++++++++++++++++----------------- styles/components/Hero.css | 144 +++++++++-------------------- 2 files changed, 127 insertions(+), 187 deletions(-) diff --git a/styles/components/Header.css b/styles/components/Header.css index cd92d64..b7d5761 100644 --- a/styles/components/Header.css +++ b/styles/components/Header.css @@ -1,131 +1,133 @@ .header { - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: rgba(26, 26, 26, 0.95); - z-index: 1000; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 1rem; - height: 70px; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: #0e0c0c; + z-index: 1000; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(5px); + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + height: 70px; + margin: 0 143px 0 143px; + border-bottom: 1px solid #444; } - .header-spacer { - height: 70px; /* Should match the header height */ + height: 70px; + /* Should match the header height */ } .logo-container { - display: flex; - align-items: center; + display: flex; + align-items: center; } .logo { - margin-left: 2em; - height: 4em; - width: auto; - transition: transform 0.3s ease; + margin-left: 2em; + height: 4em; + width: auto; + transition: transform 0.3s ease; } .logo:hover { - transform: scale(1.05); + transform: scale(1.05); } .nav-main { - display: flex; - align-items: center; + display: flex; + align-items: center; } .nav-main a, .dropdbtn { - margin: 0 1rem; - color: white; - text-decoration: none; - font-size: 1rem; - cursor: pointer; + margin: 0 1rem; + color: white; + text-decoration: none; + font-size: 1rem; + cursor: pointer; } .nav-main a:hover, .dropdbtn:hover { - color: #ffa500; + color: #ffa500; } /* Dropdown für Home */ .dropdown { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } .dropdown-content { - display: none; - position: absolute; - background-color: #0e0c0c; - min-width: 200px; - z-index: 1; - border: 1px solid #444; - border-radius: 4px; - max-height: 400px; - overflow-y: auto; + display: none; + position: absolute; + background-color: #0e0c0c; + min-width: 200px; + z-index: 1; + border: 1px solid #444; + border-radius: 4px; + max-height: 400px; + overflow-y: auto; } .dropdown-content a { - color: #f5f5f5; - padding: 0.5rem 1rem; - text-decoration: none; - display: block; + color: #f5f5f5; + padding: 0.5rem 1rem; + text-decoration: none; + display: block; } .dropdown-content a:hover { - background-color: #1f1a1a; - color: #ffa500; + background-color: #1f1a1a; + color: #ffa500; } .dropdown:hover .dropdown-content { - display: block; + display: block; } @media (max-width: 768px) { - .header { - height: 65px; - } - - .logo { - margin-left: 1em; - height: 3em; - } - - .dropdown-content { - right: 0; - } - - .header-spacer { - height: 65px; - } + .header { + height: 65px; + } + + .logo { + margin-left: 1em; + height: 3em; + } + + .dropdown-content { + right: 0; + } + + .header-spacer { + height: 65px; + } } @media (max-width: 480px) { - .header { - padding: 0.5rem; - height: 60px; - } - - .logo { - margin-left: 0.5em; - height: 2.5em; - } - - .nav-main a, - .dropdbtn { - margin: 0 0.5rem; - font-size: 0.9rem; - } - - .header-spacer { - height: 60px; - } -} + .header { + padding: 0.5rem; + height: 60px; + } + + .logo { + margin-left: 0.5em; + height: 2.5em; + } + + .nav-main a, + .dropdbtn { + margin: 0 0.5rem; + font-size: 0.9rem; + } + + .header-spacer { + height: 60px; + } +} \ No newline at end of file diff --git a/styles/components/Hero.css b/styles/components/Hero.css index cfebc2a..35fe500 100644 --- a/styles/components/Hero.css +++ b/styles/components/Hero.css @@ -1,128 +1,66 @@ -/* === Header & Nav === */ -.header { - background-color: #0e0c0c; - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 2rem; - border-bottom: 1px solid #444; -} - - +/* === Hero === */ .hero-overlay { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png'); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - margin-top: 2em; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + margin-top: 2em; } h1 { - padding-top: 2em; -} - -.nav-main { - display: flex; - align-items: center; - margin-right: 377px; -} - -.nav-main a, -.dropdbtn { - margin: 0 1rem; - color: white; - text-decoration: none; - font-size: 1rem; - cursor: pointer; -} - -.nav-main a:hover, -.dropdbtn:hover { - color: #ffa500; -} - -/* Dropdown für Home */ -.dropdown { - position: relative; - display: inline-block; -} - -.dropdown-content { - display: none; - position: absolute; - background-color: #0e0c0c; - min-width: 160px; - z-index: 1; - border: 1px solid #444; - border-radius: 4px; -} - -.dropdown-content a { - color: #f5f5f5; - padding: 0.5rem 1rem; - text-decoration: none; - display: block; -} - -.dropdown-content a:hover { - background-color: #1f1a1a; - color: #ffa500; -} - -.dropdown:hover .dropdown-content { - display: block; + padding-top: 2em; } .hero { - position: relative; - height: 70vh; - display: flex; - align-items: center; - justify-content: center; - color: white; - margin-bottom: 2rem; + position: relative; + height: 70vh; + display: flex; + align-items: center; + justify-content: center; + color: white; + margin-bottom: 2rem; } .hero-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - /* Background is set in the component */ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + /* Background is set in the component */ } .hero-content { - position: relative; - text-align: center; - z-index: 1; + position: relative; + text-align: center; + z-index: 1; } .hero-content h1 { - font-size: 4rem; - font-weight: bold; + font-size: 4rem; + font-weight: bold; } .hero-content p { - margin: 0.5rem 0 1rem 0; - font-size: 1.2rem; + margin: 0.5rem 0 1rem 0; + font-size: 1.2rem; } .button { - margin-top: 2rem; - padding: 0.8rem 2rem; - background: linear-gradient(45deg, #ffa500, #ff7f00); - color: white; - border: none; - border-radius: 30px; - font-size: 1rem; - font-weight: bold; - text-decoration: none; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); - transition: transform 0.2s, box-shadow 0.2s; + margin-top: 2rem; + padding: 0.8rem 2rem; + background: linear-gradient(45deg, #ffa500, #ff7f00); + color: white; + border: none; + border-radius: 30px; + font-size: 1rem; + font-weight: bold; + text-decoration: none; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + transition: transform 0.2s, box-shadow 0.2s; } .button:hover { - transform: translateY(-3px); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); -} + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); +} \ No newline at end of file