This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the page depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: Frontend Mentor Solution
- Live Site URL: Huddle Landing Page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
It took me a long time to complete this challenge. I took a break for a while because I was struggling to position the background images. I was also of the opinion that it looked bad at different viewport sizes - it was responsive enough (or at all). After I had gained some more experience with background images, I took another swing at it. By then, I also knew a little more about Grid was able to construct a page that maintains a nice appearance at various sizes.
.page {
display: grid;
grid-template-columns: 56% 1fr;
grid-template-rows: 1fr;
flex: 1;
}
I need more practice with Grid and responsiveness.
- The Many Ways to Change an SVG Fill on Hover (and When to Use Them) - I didn't know how I was going to create the hover effect for the icons. Then I read this!
- GitHub Profile - jaycgreenwald
- Frontend Mentor - @jaycgreenwald
- Twitter - @jaycgreenwald