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

40
app/index.html
View file

@ -1,24 +1,23 @@
<!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>
@ -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,19 +43,18 @@
</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>
</footer> </footer>
</body> </body>
</html> </html>