Desktop and mobile solution using CSS Grid

Hello, I made a big update to the solution I had proposed.

I studied a little more in detail CSS Grid. I still have to work on the subject through practical cases. This is not what is missing.

I reviewed the units of measurement so that the responsive mode corresponds to what was requested.

I followed the advice to start the challenge in mobile first directly.

I am satisfied with the result. I updated my GitHub repository.

Thanks for your advice and have a nice day.

Hey there! 👋 Here are some suggestions to help improve your code:

• To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• Add a max-width to the component’s container to prevent it from warping on larger screens.

• Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.

Here is how it looks like fully implemented: EXAMPLE

• To enhance the semantics of your component, you want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

Code:

<figure>
   <figcaption></figcaption>
   <blockquote></blockquote>
</figure>

More Info:

ARTICLE

• Implement a Mobile First approach 📱 > 🖥

With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

👾Hello @Darkjulius, congratulations on your new solution!

Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! Here are some tips for you:

1.Fix the alignment and the container size adding max-width: 1110px and add flexbox

body {
    display: flex;
    background-color: hsl(0, 0%, 81%);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

2.You've missed the color for the background, in this case is background-color: #EDF2F8 and add it to the body.

3.The html structure you’ve used here works, but if you want to make this even better, you can replace the <div> you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with <main> and each testimonial card with <article>, then you can use a tag that not everyone knows, for the paragraph containing the quote you can replace the <p> with <blockquote> that is tag the describe exactly its content.

This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

✌️ I hope this helps you and happy coding!