NOTICKET: CLEANUP

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%;
+}
+

app/index.html

@@ -12,13 +12,12 @@
   <h1>Ferienwohnung Vermietung</h1>
 </header>
 
-    <div class="container">
-      <div class="listing">
-        <area />
+<main>
+  <ul>
+    <li>
       <img
         src="img/ferienwohnung_am_see.jpg"
         alt="Ferienwohnung am See"
-          style="width: 100%"
       />
       <h2>Ferienwohnung am See</h2>
       <p>
@@ -29,13 +28,11 @@
       </p>
       <p>Preis pro Nacht: 100€</p>
       <button>Buchen</button>
-      </div>
-
-      <div class="listing">
+    </li>
+    <li>
       <img
         src="img/luxusvilla_berge.jpg"
         alt="Luxusvilla in den Bergen"
-          style="width: 100%"
       />
       <h2>Luxusvilla in den Bergen</h2>
       <p>
@@ -46,16 +43,15 @@
       </p>
       <p>Preis pro Nacht: 300€</p>
       <button>Buchen</button>
-      </div>
-
-      <div class="listing">
+    </li>
+    <li>
       <img
         src="img/luxusvilla_berge.jpg"
         alt="Luxusvilla in den Bergen"
-          style="width: 100%"
       />
-      </div>
-    </div>
+    </li>
+  </ul>
+</main>
 
 <footer>
   <p>&copy; 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>