DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on • Updated on

Self-Taught Developer Journal, Day 19: TOP Landing Page Cont.: Completing The Third Section

Today...

Thinking Through The Odin Project Landing Page cont.

The Odin Project Project Landing Page Full Design Image
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.

Flex End

To fix it, I removed align-self: flex-end.

Flex End Removed

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.

Third 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.

Discussion (0)