DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on • Updated on

Self-Taught Developer Journal, Day 18: TOP Landing Page Cont.: Beginning the Third Section

Today...

Thinking Through The Odin Project Landing Page cont.

The Odin Project Project Landing Page Full Design Image

I noticed some of the elements of second section were overlapping the elements of the third section. Immediately, I knew it was because I was using my laptop instead of my usual monitors.

To fix this, I removed height:30vh and changed it to adding a margin-bottom at 10%. Now, the space between the second and third section should always be separated by the margin.

I thought this bug was a good way to learn (and reminder to myself) to not only pay attention to the appearance, but also how the elements of the HTML documents are relative to each other.

Second Section Overlap

Next, I selected the quote-section and set the background color to gray. I replaced the lorem ipsum text with the quote from the Odin Project example and set the quote text style.

Third Section Quote

I'm going to end it here today to try and catch up on some sleep. To be continued.

Resources

The Odin Project Landing Page Project

Day 17: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-17-top-landing-page-cont-completing-the-second-section-5h0p
Please refer to Starting My Self-Taught Developer Journey for context.

Discussion (0)