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 right under your h4 rule, inside your <style>. Use the example below if you need it, then press ▶ Run..container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
padding: 40px 20px;
}
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 right under your .container rule. Use the example below if you need it, then press ▶ Run..card {
background-color: white;
border-radius: 8px;
width: 320px;
padding: 20px;
text-align: left;
}
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.