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 {
|
||||
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
112
app/index.html
|
@ -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>© 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue