Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Solution

@Abelo73

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Hassia Issah 50,670

@Hassiai

Posted

Replace the <h2> in the header with p, replace the <h3> with <h2> to fic the accessibility issues.

wrap the header in a div or section , give it a class to style to center the header. in the css give this div/section display: flex; align-items center, justify-content center and give the header a width of 50%.

in the html:
<section><header></header></section>
in the css:  
section{
display: flex;
align-items: center;
justify-content: center
}
header{
width: 50%;
text-align: center;
}

Give the first p in the header a class to style , give it a lighter font weight and an increase font-size. Use the font-family that was given in the styleguide.md. there is no need to give the h2 in .card a font-color

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values for more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord