@VCarames
Posted
Hey @Dan-raccoon-69, some suggestions to improve you code:
-
The Article Element would not be the best choice to wrap each card, since they can not stand on their own. A great way to see if you can wrap something in article tag, is if you remove everything and that single component makes sense by itself.
-
To give you HTML code structure, you want to set up your code in the following manner (Matt Studdert recommend this layout)
<body>
<header></header>
<main>
<section>
<div class="supervisor-card"></div>
<div class="team-card"></div>
<div class="karma-card"></div>
<div class="calculator-card"></div>
</section>
</main>
</body>
-
The Blockquote Element is being used incorrectly and not needed for this challenge.
-
The icons serve no other purpose than to be decorative; They add no value. There Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
.card-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"supervisor team calculator"
"supervisor karma calculator";
}
.karma-card {
grid-area: karma;
}
.calculator-card {
grid-area: calculator;
align-self: center;
}
.team-card {
grid-area: team;
}
.supervisor-card {
grid-area: supervisor;
align-self: center;
}
Happy Coding! 👻🎃
Marked as helpful
