single-price-grid-component-master

Hi @Umar094,

Nice work on your design! I noticed a couple of opportunities to enhance it:

Spacing Below the Container: There is a lot of space below your container div. Instead of using:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 0 20px -10px;
    border-radius: 10px;
    width: 45%;
    height: 60%;
}

Consider using:

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 0 20px -10px;
    border-radius: 10px;
    max-width: 650px;
}

The auto in grid-template-rows: repeat(2, auto); allows rows to adjust based on content, and max-width: 650px; provides a more responsive design. The width and height you specified are not necessary.

Formatting "Why Us" Content: For better readability, you can break your "Why Us" content into separate lines using the <br> tag.

Instead of:

<div class="box box-3">
    <h2>Why Us</h2>
    <p>
        Tutorials by industry experts
        Peer & expert code review
        Coding exercises
        Access to our GitHub repos
        Community forum
        Flashcard decks
        New videos every week
    </p>
</div>

Consider using

<div class="box box-3">
    <h2>Why Us</h2>
    <p>
        Tutorials by industry experts<br>
        Peer & expert code review<br>
        Coding exercises<br>
        Access to our GitHub repos<br>
        Community forum<br>
        Flashcard decks<br>
        New videos every week
    </p>
</div>

These adjustments will improve your design. Let me know if you have any questions or need further assistance!

Hope to be helpful.

@Umar094 here’s how you can incorporate rem units into your CSS:

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 0 20px -10px;
    border-radius: .6rem;
    max-width: 45rem;
} 

You can as well adjust the values.

Feel free to let me know if you have any questions or need further assistance!

Hope to be helpful.

@Umar094 yeah, using rem units is better for ensuring scalability, as it allows the design to adapt to the user's browser settings and font size preferences.