nicht angemeldet
Hallo Leute
Ich bin neu im Programmieren und habe gerade folgendes Problem. Ich möchte einen schönen Titel in der Mitte erstellen und oben rechts eine Navbar machen, jedoch verschiebt sich der Titel durch diese Navbar.
Wie kann ich das beheben?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Coustard:wght@400;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yanone+Kaffeesatz:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title>Test Website</title>
</head>
<body>
<a href="#">Discord</a>
<a href="#">Info</a>
<a href="#">Forum</a>
<a href="#">Regelwerk</a>
<a href="#">Shop</a>
<div class="Titlebar">
<h1>NewFamily <br> State</h1>
</div>
<p class="underbar">Werde jetzt ein Teil der Community</p>
</body>
</html>
body{
font-family: 'Coustard', serif;
height: 100%;
background-color: azure;
}
.Titlebar{
color: rgb(207, 2, 197);
text-align: center;
font-size: 300%;
}
.underbar{
color: blueviolet;
font-size: 25px;
font-weight: bold;
text-align: center;
}
a{
text-decoration: none;
color: blue;
font-weight: bold;
margin-left: 12px;
float: right;
}
a:hover{
color: blue;
text-shadow: 1px 2px 0px #6f00ff;
color: blue;
}
Rolf B