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

37
app/index.html
View file

@ -1,18 +1,25 @@
<!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>
@ -42,9 +49,9 @@
<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>
@ -58,10 +65,10 @@
</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>