Today...
Thinking Through The Odin Project Landing Page cont.
For the second section, I selected the image-section id and set the display property to flex to make it a flex container. This changed the child elements, the heading and images container, into flex items. The default flex direction is row which lines the items horizontally side by side. To edit it to match the landing page output, I changed the flex direction to column. Now, the heading sits over the images container.
When the flex direction is set to column, the main axis is vertical across the page and the cross axis is horizontal. This means that to center the flex items horizontally, I put the center value for the align-items property instead of justify-content. I also set center for justify-content, but there wasn't any change. I'm guessing there was no change because the items are already being centered by the existing margins and space filled.
Continuing to my images class, which is composed of the four image boxes with text in their own container class image-container. To have the image-container classes align side by side, I set the images class to also be a flex container. Then I created the four blue image boxes by adding a image-box class on the img element to make another container. Then I referred to the MDN docs for the border shorthand property, https://developer.mozilla.org/en-US/docs/Web/CSS/border, to make the blue border. I set the height and width for the box, but I noticed I was setting it for the image element which displayed an additional border underneath. To fix the overlapping borders, I made a div element, nested the img element there, and moved the image-box class to the div. Lastly, I set the border-radius to 8px to round the edges of the border.
With the boxes made, I needed to adjust each of the four boxes and their text to be equally spaced and contained from each other. I also needed to make sure all the four boxes were still centered in the section. To start, I made the image-box class for each box and text into a flex container and set the direction to column. Then I set align-items to center to get the box and text centered too.
To be continued...
Resources
The Odin Project Landing Page Project
Day 15: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-15-top-landing-page-cont-4mef
Please refer to Starting My Self-Taught Developer Journey for context.
Top comments (0)