NOTICKET: CLEANUP
This commit is contained in:
parent
99ef4bef93
commit
e36eeadc89
2 changed files with 113 additions and 103 deletions
104
app/css/main.css
104
app/css/main.css
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>© 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
|
<p>© 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
|
||||||
|
|
Loading…
Reference in a new issue