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

112
app/index.html
View file

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