Leon/Website-Ferienwohnung
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

NOTICKET: CLEANUP

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

104
app/css/main.css
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%;
}

112
app/index.html
View file

@ -1,64 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/main.css" />
<title>Ferienwohnung Vermietung</title> <title>Ferienwohnung Vermietung</title>
</head> </head>
<body> <body>
<header> <header>
<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> Genießen Sie einen erholsamen Aufenthalt in unserer charmanten
Genießen Sie einen erholsamen Aufenthalt in unserer charmanten Ferienwohnung direkt am See. Die Wohnung bietet Platz für bis zu 4
Ferienwohnung direkt am See. Die Wohnung bietet Platz für bis zu 4 Personen und verfügt über eine voll ausgestattete Küche, ein
Personen und verfügt über eine voll ausgestattete Küche, ein gemütliches Wohnzimmer und einen Balkon mit Blick auf den See.
gemütliches Wohnzimmer und einen Balkon mit Blick auf den See. </p>
</p> <p>Preis pro Nacht: 100€</p>
<p>Preis pro Nacht: 100€</p> <button>Buchen</button>
<button>Buchen</button> </li>
</div> <li>
<img
src="img/luxusvilla_berge.jpg"
alt="Luxusvilla in den Bergen"
/>
<h2>Luxusvilla in den Bergen</h2>
<p>
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.
</p>
<p>Preis pro Nacht: 300€</p>
<button>Buchen</button>
</li>
<li>
<img
src="img/luxusvilla_berge.jpg"
alt="Luxusvilla in den Bergen"
/>
</li>
</ul>
</main>
<div class="listing"> <footer>
<img <p>&copy; 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
src="img/luxusvilla_berge.jpg" </footer>
alt="Luxusvilla in den Bergen" </body>
style="width: 100%"
/>
<h2>Luxusvilla in den Bergen</h2>
<p>
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.
</p>
<p>Preis pro Nacht: 300€</p>
<button>Buchen</button>
</div>
<div class="listing">
<img
src="img/luxusvilla_berge.jpg"
alt="Luxusvilla in den Bergen"
style="width: 100%"
/>
</div>
</div>
<footer>
<p>&copy; 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html> </html>