Starter Exercise 2b: Layout with Flexbox + CSS Grid and Image Basics
FlexBox
What is the name of the parent elements that contains these paragraphs? Use the attached CSS file to make the parent be set to display:flex. Then, try out the different values for flex-direction on it. Preview between each change to see what happens.
Lorem ipsum sed porta tristique tristique. In eu lacus maximus, faucibus ligula quis, vehicula arcu. Suspendisse finibus orci sed neque facilisis blandit. Vestibulum ac ex dui. Morbi commodo aliquam bibendum.
Lorem ipsum sed porta tristique tristique. In eu lacus maximus, faucibus ligula quis, vehicula arcu. Suspendisse finibus orci sed neque facilisis blandit. Vestibulum ac ex dui. Morbi commodo aliquam bibendum.
Grid
Inserting Images
Practice inserting a 'content' image in the html: Pretend you’re selling console TVs, so place an image of a TV right here after this paragraph tag closes (Insert > Image > choose an image from the images folder supplied in this starter exercise folder):
Now practice incorporating a 'presentational' image for the whole page through the CSS file: Go over to the CSS file, and incorporate a background-image in the body selector of the CSS rules (choose an image from the folder that would be appropriate for a background pattern). Test the background-repeat property with a repeat, and with no-repeat. Preview in the browser in between.
Now incorporate your own background image into just this div named 'container,' which holds this paragraph: First, find or create and optimize your own small GIF or PNG file, and put it in the images folder of this starter folder. Then, all from the attached CSS file, add in a selector for this parent div called, ‘container’ to be able to control its background-image. Test out background-image properties for the image that you pulled in. Then, give the parent container some padding (an inner cushion of space). It may help to change the type color of the p selector (example — color: red;) to make it legible with the background image you chose.