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
Desktop view:
Active state:
Mobile view:
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I understood concepts related to flexbox while working on this challange. Designing and customizing the already available vector logos was a great source of practice of css basics.
Using media queries to enhance for the mobile first design was really interesting.
And how using svg's as bacground images directly was something really cool, which i didn't knew before:
body{
background-image:url(/images/bg-mobile.svg);
background-color: hsl(257, 40%, 49%);
font-size:1rem;
color:white;
font-family: 'Open Sans', sans-serif;
font-weight:400;
}
Moreover there are several more concepts which taught me much. Take a look at the repo to get an idea of those.
- Freecodecamp Tutorial by kevin powell - This tutorial helped me a lot in understanding the CSS concepts like flexbox,etc.
- stackoverflow question - This taught me a completely new concept of inline-flex which helped me a lot in this project.
- Linkedin - Debraj Bhal
- Frontend Mentor - @krishna-vasudev
- Twitter - @BhalDebraj
This software is open source, licensed under the MIT License.