Skip to content
OverviewSolutions
3
Comments
3
Néstor
@nesc11

All comments

  • Lisset B•120
    @LissetBejarSubmitted 9 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
    @nesc11Posted 9 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
    @mnsa2020Submitted 9 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
    @nesc11Posted 9 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
  • Néstor•60
    @nesc11Posted 9 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
    0