Submitted almost 3 years agoA solution to the Testimonials grid section challenge
grid
sass/scss
@Rahulgit3D2Y
Code
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AngieLi98
Some tips to improve your HTML include replacing divs with semantic HTML, such as <main> <section><article> , among others, to define the meaning of a web page's content. Here's an example of how you can improve your code:
<body> <main class="cards"> <article class=card1"> <section> <img src="./images/..." alt=""> <div> <h2> <p> </div> </section> <h3> <p> </article> <article class=card2"> So on until finished </main> </body>If you're using a preprocessor like Sass, edit the code from there. Some tips to improve the design include adjusting the font size and color of the H2, and adding a border to the avatar image. For the image and description section, you can make these changes in the HTML:
<section> <img src="./images/..." alt=""> <div> <h2> <p> </div> </section> So, in the SCSS or CSS you're working on, you can do something like this: section { display: flex; align-items: center; gap: 1rem; } to make it look more like the image.
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