addded Navigation bar, changed Name, added Logo,
This commit is contained in:
parent
91a8d7b6d5
commit
7d65285270
GPG key ID:
0CF5D5D1C790ADC9
3 changed files with 109 additions and 62 deletions
|
|
@ -22,8 +22,10 @@ body {
|
|||
background-color: var(--ice_blue);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--blue);
|
||||
color: var(--white);
|
||||
padding: var(--spacing-small);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -42,9 +44,47 @@ header {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
header > h1 {
|
||||
header > h3 {
|
||||
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*/
|
||||
ul {
|
||||
list-style: none;
|
||||
|
|
@ -64,7 +104,7 @@ li {
|
|||
li :nth-child(3) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
li > figure{
|
||||
li > figure {
|
||||
position: relative;
|
||||
padding: 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>
|
||||
<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>Traumunterkünfte</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="img/traumunterkünfte_logo.jpg" alt="Traumunterkünfte Logo" />
|
||||
<h3>Traumunterkünfte</h3>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ferienwohnung Vermietung</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a class="active" href="#home">Home</a>
|
||||
<a href="#news">News</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a href="#about">About</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<ul>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="img/ferienwohnung_am_see.jpg"
|
||||
alt="Ferienwohnung am See"
|
||||
/>
|
||||
</figure>
|
||||
<main>
|
||||
<ul>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="img/ferienwohnung_am_see.jpg"
|
||||
alt="Ferienwohnung am See"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<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>
|
||||
<figure>
|
||||
<img
|
||||
src="img/luxusvilla_berge.jpg"
|
||||
alt="Luxusvilla in den Bergen"
|
||||
/>
|
||||
</figure>
|
||||
<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>
|
||||
<figure>
|
||||
<img
|
||||
src="img/luxusvilla_berge.jpg"
|
||||
alt="Luxusvilla in den Bergen"
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
<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>
|
||||
<figure>
|
||||
<img
|
||||
src="img/luxusvilla_berge.jpg"
|
||||
alt="Luxusvilla in den Bergen"
|
||||
/>
|
||||
</figure>
|
||||
<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>
|
||||
<figure>
|
||||
<img
|
||||
src="img/luxusvilla_berge.jpg"
|
||||
alt="Luxusvilla in den Bergen"
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<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