Design comparison
Community feedback
- @DocForLoopPosted 5 days ago
Hi,
Welcome, I see some issues in your code here are my suggestions:
- I would use semantic HTML , like main, section, footer
- I would put every css rules to the separate css file
- In figma design file there are the correct colors, fonts ,spacings that you can use
- I would dowload the font files and in css I would use @font-face rules
- Your h3 element set to display:flex, but it is unnecessary ,because it is not a flex container.
I hope it will be helpful. All the best!
Marked as helpful0 - @UnifiesPosted 5 days ago
Hi Ebunoluwa, nice work!
It seems though that you designed this without looking through the style guide. We are supposed to match the colors as much as possible but your chosen colors, background colors and fonts are different from what was given - please check the style guide for every challenge you work on in order to recreate the design as exact as possible.
Given fonts and colors for this challenge were this:
- The font family is the Outfit font - Family: Outfit. Grab the embed code for the font from this link and include in your HTML file.
- White: hsl(0, 0%, 100%) [card container]
- Slate 300: hsl(212, 45%, 89%) [body background color]
- Slate 500: hsl(216, 15%, 48%) [color for light text]
- Slate 900: hsl(218, 44%, 22%) [font color for bold text]
- Weights: 400, 700
-- Give a box shadow to the container div and some margin-bottom before the attributions for a cleaner result.
In order to create a clean, reusable code though, it is recommended to create colors, fonts, and sizes as variables like so:
:root { /* Colors */ --White: hsl(0, 0%, 100%); --Slate-300: hsl(212, 45%, 89%); --Slate-500: hsl(216, 15%, 48%); --Slate-900: hsl(218, 44%, 22%); /* Fonts */ --fs-h2: 0.95rem; --fs-p: 0.85rem; --fw-400: 400; --fw-700: 700; }
and then you can use them for styling like
background-color: var(--Slate-300);
.Reason being: These things may change in a real project, so when it does all you have to do is change them from the root instead of searching in the whole css file/s.
--Slate-300
is a custom name, you can name it anything you want. But for readability giving it a meaningful name would be better.Other little code changes you might consider making:
Delete the imported comments in the code that only tell you what to do and move the attribution styling to the external CSS file and delete that block of code from your HTML file
These don't affect your code in any way but will be a good edit for a cleaner code.
0
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