All comments

Lisset B• 120
@LissetBejar
Submitted 7 months ago
What are you most proud of, and what would you do differently next time?

Figuring out the positioning of the testimonials

What challenges did you encounter, and how did you overcome them?

Struggled a bit with the positioning

What specific areas of your project would you like help with?

Any feedback is welcome
Testimonials Grid Section
1
Néstor• 60
@nesc11
Posted 6 months ago
Greetings,

Your project is very similar to the design, but there is one card that must have a different background (Patrick testimony), also I implemented the colors in the following way to avoid repeating code and to make it feel a little more intuitive:

/* n is the number of your card, so you must have 5 classes and these are just example colors */ .card-n { --primary-color: 219, 29%, 14%; --secondary-color: 210, 46%, 95%; } .card { background-color: hsl(var(--primary-color)); color: hsl(var(--secondary-color)); } .card .verified-graduate { color: hsl(var(--secondary-color), 0.5) } .card .review { color: hsl(var(--secondary-color), 0.7) }

I hope you find it useful, keep coding!
0
mnsa2020• 330
@mnsa2020
Submitted 7 months ago
What are you most proud of, and what would you do differently next time?

I'm glad that i am not facing any problem for this project

What challenges did you encounter, and how did you overcome them?

I may will do another project that will increase my skill significantly

What specific areas of your project would you like help with?

I'll help something like how design the card using pure CSS without any framework or library
Four card feature section solution
2
Néstor• 60
@nesc11
Posted 6 months ago
Greetings!

Actually the only thing that would try to improve is to make it a little more similar to the design, for example I could implement a max-width or increase the padding-inline in your div.container tag until you are satisfied with the result.

.container { width: 90%; max-width: 1000px; }

I hope you find it useful, keep coding!
0

Husniddin Ayubjonov• 1,110

@HusniddinAyubjonov

Submitted 7 months ago

Product-preview-card-component using HTML CSS JavaScript

Néstor• 60

@nesc11

Posted 7 months ago

Greetings,

I have some suggestions about your code:

You might try to add more custom properties, so you can can leverage a template in all your projects, maybe for a little project like this is not a problem. I took that from a Kevin Powell tutorial. For example:

:root {
    /* Font family */
    --ff-sans: "Montserrat", sans-serif;
    --ff-serif: "Fraunces", serif;

    /* Font sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;
    --fs-6xl: 3.75rem;

    /* Font weights */
    --fw-m: 500;
    --fw-b: 700;

    /* COLORS */
    /* Primary */
    --clr-dark-cyan: hsl(158, 36%, 37%);
    --clr-cream: hsl(30, 38%, 92%);

    /* Neutral */
    --clr-neutral-very-dark-blue: hsl(212, 21%, 14%);
    --clr-neutral-dark-grayish-blue: hsl(228, 12%, 48%);
    --clr-neutral-white: hsl(0, 0%, 100%);
}

In the tag div with the class name card, you can replace the units of the width property from px to % and additionally set a max-width property, so your card becomes more responsive.

.card {
    background-color: var(--clr-neutral-white);
    width: 90%;
    max-width: 650px;
    margin-inline: auto;
    border-radius: 10px;
}

I hope you find it useful, keep coding!

Marked as helpful

Néstor

All comments

Testimonials Grid Section

Four card feature section solution

Product-preview-card-component using HTML CSS JavaScript