NOTICKET: CLEANUP

This commit is contained in:
Snoweuph 2024-02-19 21:16:52 +01:00
parent 99ef4bef93
commit e36eeadc89
Signed by: Snoweuph
GPG key ID: A494330694B208EF
2 changed files with 113 additions and 103 deletions

View file

@ -1,61 +1,75 @@
body { /*#region Colors*/
font-family: Arial, sans-serif; :root {
--black: black;
--white: white;
--blue: #007ea7;
--navy-blue: #003459;
--ice_blue: #c2eafc;
}
/*#endregion*/
/*region Base Styling*/
html, body{
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #c2eafc; }
body {
font-family: Arial, sans-serif;
background-color: var(--ice_blue);
color: #00171f; 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 { button {
background-color: #00a8e8; background-color: var(--blue);
color: #ffffff;
padding: 10px 20px; padding: 10px 20px;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
button:hover { button:hover {
background-color: #003459; background-color: #003459;
} }
/*#endregion*/
img { header {
border: 3px solid #000000; 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; margin: Auto;
position: relative; position: relative;
right: 3px; right: 3px;
} }
/*#endregion*/
footer {
background-color: var(--blue);
outline: 5px solid var(--black);
color: var(--white);
padding: 10px;
text-align: center;
width: 100%;
}

View file

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