making welcome page. I have the H1 tag with some text where I would like, and got a background-image slideshow working, but when I try and add a button directly below my H1 tag, it puts it all the way at the bottom. I can center align it with text align, but vertical align and different displays have not worked. I've even tried to z-index, position relative to manually place it where I want, but that even seems to not be working. Even the styling from my css stopped showing up.
* {
font-family: 'Playfair Display', serif;
padding: 0;
margin: 0
}
body {
background-color: #000000;
}
h1 {
width: 100%;
color: white;
height: 100vh;
font-size: xx-large;
line-height: justify;
max-width: 350px;
text-align: center;
vertical-align: middle;
display: table-cell;
background-color: transparent;
}
.button {
background-color: black;
border: 2px white solid;
width: 250px;
height: 50px;
}
.button_container {
padding: 15px;
font-size: xx-large;
}
.crossfade>figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: auto;
background-repeat: no-repeat;
background-position: right center;
color: transparent;
height: 100%;
right: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
max-width: 600px;
z-index: 0;
}
.crossfade>figure:nth-child(1) {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 96%, rgba(255, 255, 255, 0) 100%), url('../img/Galileo.png');
}
.crossfade>figure:nth-child(2) {
animation-delay: 6s;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 96%, rgba(255, 255, 255, 0) 100%), url('../img/ozzy.png');
}
.crossfade>figure:nth-child(3) {
animation-delay: 12s;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 96%, rgba(255, 255, 255, 0) 100%), url('../img/Tyson.png');
}
.crossfade>figure:nth-child(4) {
animation-delay: 18s;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 96%, rgba(255, 255, 255, 0) 100%), url('../img/matt and trey.png');
}
.crossfade>figure:nth-child(5) {
animation-delay: 24s;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 96%, rgba(255, 255, 255, 0) 100%), url('../img/goku.png');
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 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=Noto+Sans&family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
<h1>A Tribute to People, Places and Art that have inspired me</h1>
<div class="button_container">
<button label="Enter" type="button">Enter</button>
</div>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>First time posting, sorry if I missed anything you might need.