L
Lulu
New member
- Beiträge
- 1
- Punkte Reaktionen
- 0
Hallo, ich bin noch ziemlich neu in diesem ganzen Programmier Zeugs, und bin schon auf ein Problem gestoßen. Bei meinem Text auf dem Hero Image, ist der Hintergrund nicht durchsichtig. Ich habe versucht das mit dem background-color: transparent; versucht, doch der macht nur die hälfte weg. Hier ist mein HTML code
Und hier ist mein CSS:
Ich würde mich auf Hilfe freuen.
Vielen Dank!
Lucien
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dreisam Republik</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="Top_Container">
<header>
<nav>
<ul class="nav__links">
<li><a href="#">Forum</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Über uns</a></li>
</ul>
</nav>
<a class="cta" href="#"><button>Login</button>
</header>
<div class="Banner">
<div class="Container">
<div class="Banner_Content">
<h1>Die Dreisam Republik<h1>
<p>Die Dreisam Republik ist ein Ein-Wöchiges Projekt, wo das DFG/LFA eine eigene Wirtschaft aufbaut<p>
</div>
</div>
</div>
</div>
</body>
</html>Und hier ist mein CSS:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
}
li, a, button {
font-family: "Montserrat", sans-serif;
font weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0,3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9
}
button {
padding: 9px 25px;
background-color: rgba(0,136,169,1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0,3s ease 0s;
}
button:hover {
background-color: rgba(0,136,169,0.8);
}
h1 {
margin-top: 40px;
margin-left: 65px;
margin-bottom: 20px;
}
.Banner {
background:url("DRHI3.png");
padding-top: 40%;
}
.Banner_Content {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
background-color: transparent;
text-decoration: none;
}Ich würde mich auf Hilfe freuen.
Vielen Dank!
Lucien
