Today...
Thinking Through The Odin Project Landing Page cont.
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.
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.
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.
Top comments (0)