diff --git a/index.html b/index.html index 1663706..2a291e9 100644 --- a/index.html +++ b/index.html @@ -14,172 +14,171 @@ header { background-color: #3498db; + position: relative; /* Damit das Logo korrekt positioniert wird */ color: white; text-align: center; - padding: 1rem; + padding: 1vh; + font-size: 1vw; } .container { - max-width: 1200px; + width: 70%; margin: 0 auto; - padding: 1rem; + padding: 1vh 0; } + /* Standard-Layout (Desktop) */ .logo { position: absolute; - top: 10px; /* Abstand vom oberen Rand */ - right: -70px; /* Abstand vom rechten Rand */ - width: auto; /* Breite des Logos */ - height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */ + top: 50%; /* Logo vertikal zentrieren */ + right: 2%; /* Position rechts */ + width: 10vw; /* Größe relativ zur Bildschirmbreite */ + height: auto; /* Höhe automatisch anpassen */ + transform: translateY(-50%); /* Logo vertikal zentrieren */ } .search-container { display: flex; flex-direction: column; align-items: center; - margin-bottom: 2rem; + margin-bottom: 3vh; } #query { - width: 100%; - max-width: 600px; - padding: 0.75rem; - font-size: 1rem; - border-radius: 5px; - border: 1px solid #ccc; - margin-bottom: 1rem; + width: 60%; + padding: 1.5vh; + font-size: 1.5vw; + border-radius: 1vw; + border: 0.2vw solid #ccc; + margin-bottom: 2vh; } - #searchButton { - padding: 0.75rem 2rem; - font-size: 1rem; + #searchButton, #resetButton { + padding: 1.5vh 4vw; + font-size: 1.5vw; background-color: #3498db; color: white; border: none; - border-radius: 5px; + border-radius: 1vw; cursor: pointer; transition: background-color 0.3s ease; + margin: 1vh; } - #searchButton:hover { - background-color: #2980b9; - } - - #resetButton { - padding: 0.75rem 2rem; - font-size: 1rem; - background-color: #3498db; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; - } - - - #resetButton:hover { + #searchButton:hover, #resetButton:hover { background-color: #2980b9; } .checkbox-section { - display: flex; - flex-wrap: wrap; - gap: 1rem; + display: grid; + grid-template-columns: repeat(3, 1fr); /* Drei Spalten */ + grid-auto-rows: minmax(100px, auto); + gap: 2vw; justify-content: center; - margin-bottom: 2rem; + margin-bottom: 5vh; + } + + .checkbox-container { + display: grid; + grid-template-columns: repeat(3, 1fr); /* Drei Spalten */ + gap: 10px; /* Abstand zwischen den Gruppen */ + margin-top: 10px; /* Abstand nach oben */ } .checkbox-group { background-color: white; - padding: 1rem; - border-radius: 5px; + padding: 15px; + border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - max-width: 300px; - width: 100%; } - .checkbox-group label { - font-size: 1.1rem; + font-size: 1vw; color: #3498db; font-weight: bold; } .checkbox-group input[type="checkbox"] { - margin-right: 0.5rem; + margin-right: 1vw; } footer { text-align: center; - padding: 1rem; + padding: 2vh; background-color: #3498db; color: white; - margin-top: -125px; /* Verschiebt den Footer 20px nach oben */ - + font-size: 1vw; + margin-top: 5vh; } - /* Responsive Styles */ - @media (max-width: 768px) { + /* Tablet-Layout (Bildschirmbreite bis 1200px) */ + @media (max-width: 1200px) { + .checkbox-container { + grid-template-columns: repeat(2, 1fr); /* 2 Spalten für Tablet */ + } + .checkbox-group { - max-width: 100%; + padding: 12px; /* Kleinere Polsterung für Tablet */ + } + + .checkbox-group label { + font-size: 15px; /* Kleinere Schriftgröße für Tablet */ } } - /* Stile für die Kategorie-Checkbox */ - .category-label { - font-size: 1.2rem; /* Größere Schriftgröße */ - font-weight: bold; /* Fett für mehr Betonung */ - color: #e67e22; /* Eine auffällige Farbe für die Kategorie */ - display: flex; - align-items: center; + /* Mobile-Layout (Bildschirmbreite bis 768px) */ + @media (max-width: 768px) { + .checkbox-container { + grid-template-columns: 1fr; /* 1 Spalte für Mobile */ + gap: 15px; /* Kleinerer Abstand für Mobile */ + } + + .checkbox-group { + padding: 10px; /* Kleinere Polsterung für Mobile */ + } + + .checkbox-group label { + font-size: 14px; /* Kleinere Schriftgröße für Mobile */ + } } - .category-label input[type="checkbox"] { - margin-right: 0.5rem; - transform: scale(1.2); /* Größere Checkbox für die Kategorie */ + /* Sehr kleine Bildschirme (Bildschirmbreite bis 480px) */ + @media (max-width: 480px) { + .checkbox-container { + gap: 10px; /* Noch kleinerer Abstand für sehr kleine Bildschirme */ + } + + .checkbox-group { + padding: 8px; /* Minimale Polsterung für sehr kleine Bildschirme */ + } + + .checkbox-group label { + font-size: 13px; /* Kleinste Schriftgröße für sehr kleine Bildschirme */ + } } - .category-label span { - margin-left: 0.5rem; - } + /* 4K-Bildschirme (Bildschirmbreite ab 1920px) */ + @media (min-width: 1920px) { + .search-container { + margin-bottom: 40px; /* Größerer Abstand nach unten */ + } - /* Normale Checkbox-Stile für die Shops */ - .checkbox-group label { - font-size: 1rem; /* Normale Schriftgröße für Shops */ - color: #3498db; /* Normale Farbe für Shops */ - } - - .checkbox-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Dynamische Spaltenaufteilung */ - grid-gap: 50px; /* Abstand zwischen den Kategorien */ - } - - .checkbox-group { - background-color: #f7f7f7; - border-radius: 8px; + #query { + width: 60%; /* Breitere Suchleiste für 4K */ padding: 15px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - display: block; /* Jede Kategorie bekommt ihren eigenen Block */ - } + font-size: 20px; /* Größere Schriftgröße für 4K */ + border-radius: 15px; /* Größere abgerundete Ecken */ + margin-bottom: 25px; /* Größerer Abstand nach unten */ + } - .category-label { - font-size: 1.2rem; - font-weight: bold; - color: #e67e22; - display: block; /* Stellen Sie sicher, dass das Label seine eigene Zeile einnimmt */ - margin-bottom: 0.5px; /* Abstände nach unten */ - white-space: normal; /* Zeilenumbrüche erlauben, falls notwendig */ - line-height: 1.2; /* Einstellen der Zeilenhöhe für bessere Lesbarkeit */ - } + .button-group { + gap: 20px; /* Größerer Abstand zwischen den Buttons */ + } - .category-label input[type="checkbox"] { - margin-right: 10px; - transform: scale(1.2); - } - - label { - font-size: 1rem; - color: #3498db; + #searchButton, #resetButton { + padding: 15px 30px; + font-size: 20px; /* Größere Schriftgröße für 4K */ + border-radius: 15px; /* Größere abgerundete Ecken */ + } } @@ -188,7 +187,7 @@

Einkauf Suche

@@ -203,40 +202,63 @@
-
- -
- -
- - -
- - - -
- - -
+

- -
+ +
+ + +
- -
+ +
- - + +
+ + +
+ + +
+ + +
+ + +
+
+ +
+ +
+ +
+ + +
+ + +
+ + +
+ + +
-
+ + + +
+ +
+ +
+ +
+ + +
+ + + +
+ +
+ +
+ +
+ + +
+ + + +
-
- -
- -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
-
- -
- -
- -
- - -
- - -
- - -
- - -
-
- -
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-

© 2024 Einkauf Suche - Alle Rechte vorbehalten

+

© 2025 Einkauf Suche - Alle Rechte vorbehalten