After Using CSS animation other element not showing on the page - html

Question

Good day, guys, I tried to work on my code and I wasn't able to fix it on my own, the class .hello2 and .more are not showing on the page whereas it should appear below the id="flip" content, which happened it disappear the .hello2 and .more class element, it was my first time to use animation this time guys. here's the code that I been using. Looking forward
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 2rem;
font-family: "Coiny", sans-serif;
}
.circle {
position: relative;
border-radius: 50%;
width: 30rem;
height: 30rem;
background-color: #6CA9A5;
margin: 5rem auto;
}
.hello, .hello2 {
position: relative;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-weight: 900;
letter-spacing: .2rem;
font-size: 2.5rem;
color: #fff;
text-align: center;
padding-top: 100px;
/* z-index: 1; */
}
.hello span:hover {
color: #f4511e;
transition: .59s;
}
.circle a {
font-size: 15px;
text-decoration: none;
}
/* .more a {
height: 150px;
width: 500px;
background-color: #fff;
} */
#container {
color:#999;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-size:36px;
font-weight:bold;
padding-top:180px;
position: relative;
width:100%;
bottom:45%;
display:block;
text-align: center;
}
#flip {
height:60px;
overflow:hidden;
}
#flip > div > div {
border-radius: 30px;
color:#fff;
padding:4px 15px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
#keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
<p class="hello">Let's Make </p>
<div id="container">
<div id="flip">
<div><div>wOrK</div></div>
<div><div>lifeStyle</div></div>
<div><div>Everything</div></div>
</div>
</div>
<p class="hello2">Awesome</p>
Read More
</div>
</div>

Answer 1

I added position:absolute to .hello2
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 2rem;
font-family: "Coiny", sans-serif;
}
.circle {
position: relative;
border-radius: 50%;
width: 30rem;
height: 30rem;
background-color: #6CA9A5;
margin: 5rem auto;
}
.hello, .hello2 {
position: relative;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-weight: 900;
letter-spacing: .2rem;
font-size: 2.5rem;
color: #fff;
text-align: center;
padding-top: 100px;
/* z-index: 1; */
}
/* I added */
.hello2 {
position:absolute;
top:80px; /* changeable */
left:50%;
transform:translateX(-50%);
}
/* I added */
.hello span:hover {
color: #f4511e;
transition: .59s;
}
.circle a {
font-size: 15px;
text-decoration: none;
}
/* .more a {
height: 150px;
width: 500px;
background-color: #fff;
} */
#container {
color:#999;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-size:36px;
font-weight:bold;
padding-top:180px;
position: relative;
width:100%;
bottom:45%;
display:block;
text-align: center;
}
#flip {
height:60px;
overflow:hidden;
}
#flip > div > div {
border-radius: 30px;
color:#fff;
padding:4px 15px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
#keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
<p class="hello">Let's Make </p>
<div id="container">
<div id="flip">
<div><div>wOrK</div></div>
<div><div>lifeStyle</div></div>
<div><div>Everything</div></div>
</div>
</div>
<p class="hello2">Awesome</p>
Read More
</div>
</div>