Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
Hey @kateneilsen, great job on this project!
To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…
It’ll look something like this:
:root { --primary-color: value; --secondary-color: value; --tertiary-color: value; }
And to use the variables you’ll use the var() function. So it’ll look like this.
h1 { color: var(—primary-color); }
Heres are some articles regarding CSS Variables.
You can also take a look at my projects and see how I use it.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://www.w3schools.com/css/css3_variables.asp
Happy Coding!
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello @kateneilsen, Congratulations on completing this challenge!
👨💻 Here are some tips to improve your solution code:
Remove the
flex: 1
to make the mobile version have the title near the form and avoid a huge gap:.intro-container { /* flex: 1; */ color: white; text-align: center; align-items: center; justify-content: center; margin: 70px 20px 0px 20px; }
Add a hover effect for the button to stylize it and make it more interactive:
.blue-box:hover { filter: saturate(1.5); transition: ease 0.3s; }
✌️ I hope this helps you and happy 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