diff --git a/app/css/main.css b/app/css/main.css index a4c492a..1364cf7 100644 --- a/app/css/main.css +++ b/app/css/main.css @@ -1,61 +1,75 @@ -body { - font-family: Arial, sans-serif; +/*#region Colors*/ +:root { + --black: black; + --white: white; + --blue: #007ea7; + --navy-blue: #003459; + --ice_blue: #c2eafc; +} +/*#endregion*/ +/*region Base Styling*/ +html, body{ margin: 0; padding: 0; - background-color: #c2eafc; +} +body { + font-family: Arial, sans-serif; + background-color: var(--ice_blue); color: #00171f; } - -header { - background-color: #003459; - outline: 5px solid black; - color: #ffffff; - padding: 1px; - text-align: center; -} - -.flex-container { - width: 80%; - margin: auto; - padding: 20px; - display: flex; - flex-wrap: wrap; -} - -.listing { - background-color: #ffffff; - outline: 2px solid black; - border: 1px solid #007ea7; - padding: 10px; - margin-bottom: 30px; -} - -footer { - background-color: #007ea7; - outline: 5px solid black; - color: #ffffff; - padding: 10px; - text-align: center; - position: fixed; - bottom: 0; - width: 100%; -} - button { - background-color: #00a8e8; - color: #ffffff; + background-color: var(--blue); padding: 10px 20px; border: none; cursor: pointer; } - button:hover { background-color: #003459; } - -img { - border: 3px solid #000000; +/*#endregion*/ +header { + background-color: var(--navy-blue); + outline: 5px solid var(--black); + color: var(--white); + padding: 1px; + text-align: center; +} +/*#region Entries*/ +ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); +} +li { + background-color: var(--white); + outline: 2px solid black; + border: 1px solid var(--blue); + padding: 10px; + margin-bottom: 30px; + display: flex; + flex-direction: column; +} +li :nth-child(3) { + flex-grow: 1; +} +li > img { + width: 100%; + aspect-ratio: 5/2; + object-fit: cover; + border: 3px solid var(--black); margin: Auto; position: relative; right: 3px; } +/*#endregion*/ +footer { + background-color: var(--blue); + outline: 5px solid var(--black); + color: var(--white); + padding: 10px; + text-align: center; + width: 100%; +} + diff --git a/app/index.html b/app/index.html index 52746d4..8da7abe 100644 --- a/app/index.html +++ b/app/index.html @@ -1,64 +1,60 @@ - - - - - Ferienwohnung Vermietung - + + + + + Ferienwohnung Vermietung + - -
-

Ferienwohnung Vermietung

-
+ +
+

Ferienwohnung Vermietung

+
-
-
- - Ferienwohnung am See -

Ferienwohnung am See

-

- Genießen Sie einen erholsamen Aufenthalt in unserer charmanten - Ferienwohnung direkt am See. Die Wohnung bietet Platz für bis zu 4 - Personen und verfügt über eine voll ausgestattete Küche, ein - gemütliches Wohnzimmer und einen Balkon mit Blick auf den See. -

-

Preis pro Nacht: 100€

- -
+
+ +
-
- Luxusvilla in den Bergen -

Luxusvilla in den Bergen

-

- Entfliehen Sie dem Alltag und verbringen Sie Ihren Urlaub in unserer - luxuriösen Villa hoch in den Bergen. Die Villa bietet Platz für bis zu - 8 Personen und verfügt über einen eigenen Pool, eine Sauna und einen - atemberaubenden Blick auf die Berglandschaft. -

-

Preis pro Nacht: 300€

- -
- -
- Luxusvilla in den Bergen -
-
- - - + +