Unit 2 · This Is Me In Tech
Stage 3 of 7
Unit 2 · This Is Me In Tech
Stage 3 of 7
Unit 2 · Stage 3
Your header looks great. Right now the three cards are stacked in a plain column. You will use flexbox to line them up in a neat row that wraps on small screens. (pause on a highlighted word to see what it does)
Your <main> has the class container, and it holds the three cards. When you make it a flex container, its cards line up side by side instead of stacking.
A few properties turn .container into a flexible row.
displayflex turns the container into a flexible box and lines its cards up in a row.justify-contentcenter pushes the row of cards into the middle of the page.gap20px keeps them from touching.flex-wrapwrap lets cards drop to the next line on a narrow screen, so nothing gets squished..container rule with display: flex;, justify-content: center;, gap: 20px;, flex-wrap: wrap;, and padding: 40px 20px; then press ▶ Run.What display value lines boxes up in a flexible row? Type it, then press Submit to unlock the next steps.
Each <section> has the class card. Give the cards a white background, rounded corners, a set width, and inside padding.
background-colorwhite makes each card pop against the light blue page.border-radius8px gives a soft, friendly edge.width320px keeps all three even.text-alignleft lines the text up on the left inside the card, which is easier to read than centered..card rule with background-color: white;, border-radius: 8px;, width: 320px;, padding: 20px;, and text-align: left; then Run.To complete Stage 3, your .container needs display: flex and your .card needs rounded corners. Press Check my work when you are ready. This opens Stage 4 and lets your teacher see that you finished.