Today...
Thinking Through The Odin Project Landing Page cont.
For the third section, I bolded the text for the quote's author. Next, I set the quote-section to become a flex container and the flex direction to column so the quote and quote's author would be stacked over each other. I centered the quote elements with align-items: center. Then I set the quote's author align-self to flex-end so the author would start from the right.
To center the items, I set the width for the quote and quote author classes to 60%. But I noticed after the width was determined, the align-self: flex-end wasn't behaving like I needed it to. Instead, it moved the whole element to start at the end and not the text.
To fix it, I removed align-self: flex-end.
I Googled how to have the text to align right which resulted in me setting text-align: right for the quote's author. I removed margin by setting it to zero and removed the space between the quote elements. Lastly, I added padding to quote-section.
In addition, for the second section, I also ended up adjusting the dimensions of the image boxes and the width of the images container to spread them out more so it would be similar to the Odin Project output.
With the third section complete, the next items left are the fourth section and footer.
Resources
The Odin Project Landing Page Project
Day 18: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-18-top-landing-page-cont-beginning-the-third-section-1aan
Please refer to Starting My Self-Taught Developer Journey for context.
Top comments (0)