Menu
So I’m trying to center my H1 near the top and my P right under the H1. However, when centering the P, the H1 gets pushed away.
Below´s the code.
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<link
href=”https://fonts.googleapis.com/css?family=Oxanium&display=swap”
rel=”stylesheet”
/>
<link rel=”stylesheet” href=”style.css” />
<title>Document</title>
</head>
<body>
<div class=”container”>
<div class=”menu”>
<ul>
<li class=”logo”><img src=”./Img/crypto.png” alt=”” /></li>
<li class=”active”>Home</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
<li>
<a href=”#” class=”signup-btn”><span>Sign Up</span></a>
</li>
</ul>
</div>
<div class=”background”>
<section id=”BackgroundText”>
<h1>
I will scam you! Send me your Credit card info
</h1>
<p>You wont belive how many scames we pulled off</p>
</section>
<img src=”./Img/rich.png” alt=”” />
</div>
</div>
</body>
</html>
[code]
* {
margin: 0;
padding: 0;
font-family: “Oxanium”, cursive;
overflow: hidden;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
background: #42455a;
z-index: -2;
}
.menu ul {
display: inline-flex;
margin: 50px;
}
.menu ul li {
list-style: none;
margin: 0 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo,
img {
margin: -7px 48px 0 0;
width: 40px;
}
.active:active {
color: #19dafa !important;
}
.signup-btn {
position: absolute;
right: 100px;
text-decoration: none;
color: white;
border: 2px solid transparent;
border-radius: 20px;
background-image: linear-gradient(#42455a, #42455a),
radial-gradient(circle at top left, #fd00da, #19d7f8);
background-origin: border-box;
background-clip: content-box, border-box;
text-align: center;
}
.signup-btn span {
display: block;
padding: 8px 22px;
}
.background {
display: flex;
align-items: center;
justify-content: flex-end;
border: 2px solid blue;
width: 100vw;
height: 70vh;
background-image: radial-gradient(circle at top left, #fd00da, #19d7f8);
}
.background img {
position: absolute;
width: 450px;
opacity: 0.8;
z-index: 1;
}
#BackgroundText {
display: flex;
border: 2px solid black;
height: 100%;
width: 100%;
}
#BackgroundText,
h1 {
margin: auto;
border: 2px solid red;
text-align: center;
color: white;
z-index: 2;
text-transform: uppercase;
}
#BackgroundText,
p {
margin: 100px 10px auto;
text-align: center;
font-size: 1.5rem;
border: 2px solid orange;
color: white;
z-index: 2;
text-transform: uppercase;
}