Blogr Landing Page
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.
Table of contents
The challenge
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."
Screenshot
Links
- Solution URL: solution URL
- Live Site URL: live site URL
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
What I learned
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);
}Continued development
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!
Author
- Frontend Mentor - @stephaniequintana