The live site can be found here
This Front End Mentor challenge focuses on responsive design utilizing HTML and CSS. See the blogr-landing-page for more information or to try this challenge yourself. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Visitors should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements - in the case of this challenge, the only interactive state is the cursor should change to a pointer when hovered over the "button."
- Solution URL: solution URL
- Live Site URL: live site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I implemented an array of CSS variable and learned about CSS Scope and the multiple benefits both bring to the combatting the complexities of updating the overall page layout.
:root {
--light-red:hsl(356, 100%, 66%);
--very-light-red:hsl(355,100%,74%);
--very-dark-blue: hsl(208, 49%, 24%);
--white: hsl(0, 0%, 100%);
--grayish-blue: hsl(240, 2%, 79%);
--very-dark-grayish-blue:hsl(206, 13%, 34%);
--very-dark-black-blue: hsl(240, 10%, 16%);
--bg-gradient-very-light-red: rgba(255, 143, 112, .8);
--bg-gradient-light-red:rgb(255, 61, 84, .8);
--body-grad-gray-blue:rgb(44, 45, 63);
--body-grad-desat-blue: rgb(63, 65, 100);
}
I'm excited to return to Front End Mentor and am hoping I can complete many more challenges and meet some interesting Developers along the way. I am continuing my learning journey through multiple outlets and look forward to when the "impossible" seem like near-second-hand knowledge!
- Frontend Mentor - @stephaniequintana