Submitted 5 months ago

Recipe page using HTML and CSS only

Abubakar sadiq•330

@abubakar-sadiq001

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I built the solution without getting the colors, I generated colors with the color palette and I also finished it in under 150 mins

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

Looking for matching colors consumes a lot of my time. but with the help of the CSS color palette, I get the matching colors

Community feedback

Ahmed Mahmud•70
@dDevAhmedPosted 5 months ago
You did a great job, Keep it up 👍
Marked as helpful
0

EFEELE•350

@EFEELEPosted 5 months ago

Great job!!

Details about the design colors can be found in your style-guide.md file.

You can create custom properties in your style sheet as follows:

/* Define variables in :root */
:root {
    --Nutmeg: hsl(14, 45%, 36%);
    --Dark-Raspberry: hsl(332, 51%, 32%);

    --Rose-White: hsl(330, 100%, 98%);
    --Eggshell: hsl(30, 54%, 90%);
    --Light-Grey: hsl(30, 18%, 87%);
    --Wenge-Brown: hsl(30, 10%, 34%);
    --Dark-Charcoal: hsl(24, 5%, 18%);
}


/* and that's what you can call them *.
body {
    background-color: var(--Eggshell);
}

You can do tests in codepen https://codepen.io/efeeledev/pen/KKLyGyZ

Please log in to post a comment

Join 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