Looking to create a Q&A Page with a specific layout in mind:
Q. Question
A. Answer
However, using
"align-text:center;"
results in this layout:
Q. Long Question
A. Short Answer
The challenge is, how do I achieve this desired layout:
Q. Long Question
A. Short Question
My current CSS code:
.about-text {
font-family: 'Nunito Sans', sans-serif;
text-align: justify;
font-size: 40px;
opacity: 0;
animation: intro-left 4s ease 1.75s forwards;
-webkit-animation: intro-right 4s ease 1.75s forwards;
-moz-animation: intro-right 4s ease 1.75s forwards;
-o-animation: intro-right 4s ease 1.75s forwards;
animation: intro-right 4s ease 1.75s forwards;
}
Keyframes for the animation:
@keyframes intro-right {
0% { transform: translateX(10%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes intro-left {
0% { transform: translateX(-10%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
HTML structure being used:
<div class='about' id='learn-more'>
<br><br><br>
<h1 class='about-title'>About and Q&A</h1>
<br>
<h2 class='about-text'><strong>Q.</strong> Long Question</h2>
<p class='about-text'><strong>A.</strong> Short Answer</p>
<br>
</div>