DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on • Updated on

Self-Taught Developer Journal, Day 20: TOP Landing Page Cont.: The Fourth Section and Footer

Today...

Thinking Through The Odin Project Landing Page cont.

The Odin Project Project Landing Page Full Design Image

I added the background color for the inner call to action box so I could see where the container was. Then I made cta-section a flex container to use justify-content: center and align-items: center to quickly center the inner box.

I set the border radius of the inner call-to-action box to round the corners. Next, I realized I needed to arrange the items in the inner box and created class containers for the left and right elements in the HTML document. A similar approach to how I did the hero section.

Add Containers

Once that was completed, I set the inner call-to-action class into a flex container, centered the items, and added padding.

I removed the margin and padding from the left text. I made a class for the call to action heading to select and style it since I used a div element. Lastly, I configured the button style and added margin-left to create space between the button and text.

Completed Fourth Section and Footer

I finally completed my first landing page! It was much harder than I imagined, but I could tell I was improving as I continued based on how much easier it was to recall what to do. Now onto JavaScript!

Resources

The Odin Project Landing Page Project

Day 19: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-19-top-landing-page-cont-complete-the-third-section-2pbj
Please refer to Starting My Self-Taught Developer Journey for context.

Discussion (0)