NOTICKET: CLEANUP

app/css/main.css

@@ -1,10 +1,14 @@
-/*#region Colors*/
+/*#region Variables*/
 :root {
   --black: black;
+  --trancelucent: rgba(0, 0, 0, 0.5);
   --white: white;
   --blue: #007ea7;
   --navy-blue: #003459;
   --ice_blue: #c2eafc;
+
+  --spacing-small: 4px;
+  --spacing-big: 16px;
 }
 /*#endregion*/
 /*#region Base Styling*/
@@ -16,24 +20,30 @@ body {
 body {
   font-family: Arial, sans-serif;
   background-color: var(--ice_blue);
-  color: #00171f;
+  color: var(--black);
 }
 button {
   background-color: var(--blue);
-  padding: 10px 20px;
+  padding: var(--spacing-small);
   border: none;
   cursor: pointer;
 }
 button:hover {
-  background-color: #003459;
+  background-color: var(--navy-blue);
 }
 /*#endregion*/
 header {
+  position: sticky;
   background-color: var(--navy-blue);
-  outline: 5px solid var(--black);
+  box-shadow: 0 var(--spacing-small) var(--spacing-small) var(--trancelucent);
   color: var(--white);
-  padding: 1px;
-  text-align: center;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+header > h1 {
+  margin: 0;
 }
 /*#region Entries*/
 ul {
@@ -42,41 +52,48 @@ ul {
   padding: 0;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 2px;
+  gap: var(--spacing-big);
 }
 li {
   background-color: var(--white);
-  padding: 10px;
-  margin-bottom: 30px;
+  margin: 0;
+  padding: var(--spacing-big);
   display: flex;
   flex-direction: column;
 }
 li :nth-child(3) {
   flex-grow: 1;
 }
-li > img {
-  width: 100%;
+li > figure{
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+li > figure > img {
   aspect-ratio: 5/2;
   object-fit: cover;
+  width: 100%;
+  height: 100%;
 }
-li > img:before {
-  z-index: 10;
-  display: block;
-  content: "hello";
+li > figure::before {
+  content: "";
   position: absolute;
-  width: 100px;
-  height: 100px;
-  left: 0px;
-  right: 0px;
-  background-color: red;
-  box-shadow: inset 0 0 64px 8px red;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 16px 2px var(--trancelucent);
 }
 /*#endregion*/
 footer {
   background-color: var(--blue);
   outline: 5px solid var(--black);
   color: var(--white);
-  padding: 10px 0;
-  text-align: center;
+  height: 64px;
   width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+footer > p {
+  margin: 0;
+  height: min-content;
 }

app/index.html

@@ -15,10 +15,13 @@
 <main>
   <ul>
     <li>
-      <img
-        src="img/ferienwohnung_am_see.jpg"
-        alt="Ferienwohnung am See"
-      />
+      <figure>
+        <img
+          src="img/ferienwohnung_am_see.jpg"
+          alt="Ferienwohnung am See"
+        />
+      </figure>
+
       <h2>Ferienwohnung am See</h2>
       <p>
         Genießen Sie einen erholsamen Aufenthalt in unserer charmanten
@@ -30,10 +33,12 @@
       <button>Buchen</button>
     </li>
     <li>
-      <img
-        src="img/luxusvilla_berge.jpg"
-        alt="Luxusvilla in den Bergen"
-      />
+      <figure>
+        <img
+          src="img/luxusvilla_berge.jpg"
+          alt="Luxusvilla in den Bergen"
+        />
+      </figure>
       <h2>Luxusvilla in den Bergen</h2>
       <p>
         Entfliehen Sie dem Alltag und verbringen Sie Ihren Urlaub in unserer
@@ -45,10 +50,12 @@
       <button>Buchen</button>
     </li>
     <li>
-      <img
-        src="img/luxusvilla_berge.jpg"
-        alt="Luxusvilla in den Bergen"
-      />
+      <figure>
+        <img
+          src="img/luxusvilla_berge.jpg"
+          alt="Luxusvilla in den Bergen"
+        />
+      </figure>
     </li>
   </ul>
 </main>