Below the fullscreen home card, I want the about div to appear
I am struggling to get it to display correctly.
In my HTML code, both divs are in the correct order, but I couldn't find any solutions online.
<body>
<div class="homeCard">
<div class="homeCardTitle">
<h1>Robin Riezebos</h1>
</div>
</div>
<div class="aboutCard">
<div class="aboutCardText">
<h2>About</h2>
</div>
</div>
</body>
Either my CSS is missing something or I made a mistake, and I can't figure out what it is. Please help...
index.css
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
height: 100%;
width: 100%;
position: fixed;
float: left;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
position: fixed;
width: 100%;
height: 320px;
top: 50%;
margin-top: -160px;
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
background-color: #1F1F1F;
color: white;
height: 500px;
}