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

addded Navigation bar, changed Name, added Logo,

Browse source
This commit is contained in:
Leon Voß 2024-02-20 02:51:52 +01:00
parent 91a8d7b6d5
commit 7d65285270
Signed by: Leon
GPG key ID: 0CF5D5D1C790ADC9
3 changed files with 109 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/css/main.css
View file

@ -22,8 +22,10 @@ body {
background-color: var(--ice_blue); background-color: var(--ice_blue);
color: var(--black); color: var(--black);
} }
button { button {
background-color: var(--blue); background-color: var(--blue);
color: var(--white);
padding: var(--spacing-small); padding: var(--spacing-small);
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -42,9 +44,47 @@ header {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
header > h1 { header > h3 {
margin: 0; margin: 0;
margin-right: 70%;
} }
header > img {
position: fixed;
padding-right: 89%;
aspect-ratio: 1/1;
object-fit: cover;
width: 8%;
height: 8%;
}
/* Add a black background color to the top navigation */
nav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
nav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
nav a.active {
background-color: #04aa6d;
color: white;
}
/*#region Entries*/ /*#region Entries*/
ul { ul {
list-style: none; list-style: none;
@ -64,7 +104,7 @@ li {
li :nth-child(3) { li :nth-child(3) {
flex-grow: 1; flex-grow: 1;
} }
li > figure{ li > figure {
position: relative; position: relative;
padding: 0; padding: 0;
margin: 0; margin: 0;

BIN
app/img/traumunterkünfte_logo.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

127
app/index.html
View file

@ -1,67 +1,74 @@
<!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>Traumunterkünfte</title>
</head> </head>
<body>
<header>
<img src="img/traumunterkünfte_logo.jpg" alt="Traumunterkünfte Logo" />
<h3>Traumunterkünfte</h3>
</header>
<body> <nav>
<header> <a class="active" href="#home">Home</a>
<h1>Ferienwohnung Vermietung</h1> <a href="#news">News</a>
</header> <a href="#contact">Contact</a>
<a href="#about">About</a>
</nav>
<main> <main>
<ul> <ul>
<li> <li>
<figure> <figure>
<img <img
src="img/ferienwohnung_am_see.jpg" src="img/ferienwohnung_am_see.jpg"
alt="Ferienwohnung am See" alt="Ferienwohnung am See"
/> />
</figure> </figure>
<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> </li>
<li> <li>
<figure> <figure>
<img <img
src="img/luxusvilla_berge.jpg" src="img/luxusvilla_berge.jpg"
alt="Luxusvilla in den Bergen" alt="Luxusvilla in den Bergen"
/> />
</figure> </figure>
<h2>Luxusvilla in den Bergen</h2> <h2>Luxusvilla in den Bergen</h2>
<p> <p>
Entfliehen Sie dem Alltag und verbringen Sie Ihren Urlaub in unserer 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 luxuriösen Villa hoch in den Bergen. Die Villa bietet Platz für bis
8 Personen und verfügt über einen eigenen Pool, eine Sauna und einen zu 8 Personen und verfügt über einen eigenen Pool, eine Sauna und
atemberaubenden Blick auf die Berglandschaft. einen atemberaubenden Blick auf die Berglandschaft.
</p> </p>
<p>Preis pro Nacht: 300€</p> <p>Preis pro Nacht: 300€</p>
<button>Buchen</button> <button>Buchen</button>
</li> </li>
<li> <li>
<figure> <figure>
<img <img
src="img/luxusvilla_berge.jpg" src="img/luxusvilla_berge.jpg"
alt="Luxusvilla in den Bergen" alt="Luxusvilla in den Bergen"
/> />
</figure> </figure>
</li> </li>
</ul> </ul>
</main> </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>