Submitted 9 months ago
Product-preview-card-component using HTML CSS JavaScript
@HusniddinAyubjonov
Design comparison
SolutionDesign
Community feedback
- @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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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