addded Navigation bar, changed Name, added Logo,
This commit is contained in:
parent
91a8d7b6d5
commit
7d65285270
3 changed files with 109 additions and 62 deletions
|
@ -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
BIN
app/img/traumunterkünfte_logo.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 30 KiB |
127
app/index.html
127
app/index.html
|
@ -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>© 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
|
<p>© 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue