My content won’t rest inside my background image properly. I need it to be centered with one another. It’s just not happening. The first image is the expectation and the other is mine. Can anyone cross check my code and help provide a solution?
| expectation | mine |
|---|---|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Video</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero">
<video autoplay loop muted plays-inline >
<source src="assets/4763824-uhd_3840_2160_24fps.mp4" />
</video>
</section>
<section class="content">
<h1>Journey</h1>
<a href=" ">Explore</a>
</section>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.hero {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
position: relative;
padding: 0 5%;
display: flex;
justify-content: center;
align-items: center;
}
.content {
text-align: center;
}
.content h1 {
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.5s;
}
.content h1:hover {
-webkit-text-stroke: 2px white;
color: transparent;
}
.content a {
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid white;
padding: 14px 50px;
margin-top: 20px;
transition: 0.5s;
}
.content a:hover {
background: #fff;
color: #000;
}
.back-video {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
@media (min-aspect-ratio: 16/9) {
.back-video {
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.back-video {
width: auto;
height: 100%;
}
}
I tried changing the position and display of the hero class but it did nothing.
New contributor
Kewonte’ Thomas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
0