Hallo,
ich habe für mich mal eine Seite designen lassen um diese dann selbst zu programmieren, leider habe ich jetzt schon das erste Problem aber ich bin auch noch ein blutiger Anfänger :)
Das Design für den Header sieht so aus:
Problem:
Aktuell bin ich soweit:
Mein Problem ist jetzt, dass Logo (der halbe Kopf auf der rechten Seite) in den Hintergrund zu integrieren, welcher hinter dem Menü etc. liegt. Ich weiß nicht genau wie ich das schaffe.
Mein HTML Code.
Mein CSS Code:
Gehört das Bild in den Header Background? Sollte ich dafür ein neues div erstellen aber ich habe es nicht hinbekommen, dass es rechts angeordnet wird und im Hintergrund liegt.
Vielen Dank für eure Hilfe.
Mfg
ich habe für mich mal eine Seite designen lassen um diese dann selbst zu programmieren, leider habe ich jetzt schon das erste Problem aber ich bin auch noch ein blutiger Anfänger :)
Das Design für den Header sieht so aus:
Problem:
Aktuell bin ich soweit:
Mein Problem ist jetzt, dass Logo (der halbe Kopf auf der rechten Seite) in den Hintergrund zu integrieren, welcher hinter dem Menü etc. liegt. Ich weiß nicht genau wie ich das schaffe.
Mein HTML Code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>navbar test</title>
</head>
<body>
<header>
<div class="navbar">
<img class="logo" src="/IMG/logo.png" alt="Logo">
<nav>
<ul class="nav-links">
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#cases">cases</a></li>
<li><a href="#blog">blog</a></li>
</ul>
</nav>
<a class="cta" href=""><button>Contact</button></a>
</div>
</div>
</header>
<section class="about">
<div class="about-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus at aliquam architecto sint quia libero aliquid nesciunt quam ut cum.</div>
<div class="about-right">
<img src="/IMG/logo-wolf.png" alt="Logo-Wolf">
</div>
</section>
</body>
</html>Mein CSS Code:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
li, a, button{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 16px;
color: #333;
text-decoration: none;
}
.navbar{
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 20px 20px;
margin: 20px 20px;
align-items: center;
}
.logo{
height: 80px;
cursor: pointer;
margin-right: auto;
}
.nav-links{
list-style: none;
}
.nav-links li{
display: inline-block;
padding: 0px 20px;
}
.nav-links li a:hover{
color: #e0902e;
border-bottom: #48c9f8 solid 2px;
}
.cta button{
padding: 9px 25px;
background-color: orange;
border: none;
border-radius: 50px;
color: white;
cursor: pointer;
}
.cta button:hover{
background-color: #48c9f8;
}
.about{
width: 100%;
display: flex;
padding: 0px 20px;
}
.about-left{
background-color: red;
padding: 30px;
flex: 1;
}
.about-right{
background: yellow;
padding: 30px;
flex: 1;
width: 50%;
}
.about-right img{
width: 20%;
}Gehört das Bild in den Header Background? Sollte ich dafür ein neues div erstellen aber ich habe es nicht hinbekommen, dass es rechts angeordnet wird und im Hintergrund liegt.
Vielen Dank für eure Hilfe.
Mfg
