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);
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
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>
<html lang="de">
<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>Ferienwohnung Vermietung</title>
</head>
<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>
<main>
<ul>
<li>
<figure>
@ -42,9 +49,9 @@
<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.
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>
@ -58,10 +65,10 @@
</figure>
</li>
</ul>
</main>
</main>
<footer>
<footer>
<p>&copy; 2024 Fortnite GmbH. Alle Rechte vorbehalten.</p>
</footer>
</body>
</footer>
</body>
</html>