Frontend Mentor - Huddle landing page with alternating feature blocks solution

This is a solution to the Huddle landing page with alternating feature blocks challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links

• Solution URL: Huddle Landing Page w/ Alternating Blocks (SASS + Mobile-first + BEM) | Frontend Mentor
• Live Site URL: https://huddle-landing-page-with-alternating-feature-blocks-blush-ten.vercel.app/

Table of contents

• Overview
  • The challenge
• My process
  • Built with
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

My process

Built with

• Semantic HTML5 markup
• Mobile-first approach
• Flex Layout
• BEM naming convention
• SASS - Sass modules

Useful resources

• SASS Architecture

• Mobile-first approach

• CSS Guidelines

• BEM naming convention

• BEM naming examples

• How TO - Two Column Layout

• Material Design Box Shadows

• CSS background Property

• Solving Sticky Hover States with @media (hover: hover)

Author

• Frontend Mentor - @melvinaguilar

Acknowledgments

When using sass in order to build this solution

• Install sass if not yet installed:

npm install -g sass

• Run build command from command line:

sass assets/sass/main.scss assets/css/style.css

• If you want to edit the code and test, in the root folder of this repository, run this command from the command line:

sass --watch assets/sass/main.scss assets/css/style.css

File structure

.
├── assets
│   ├── css
│   │   ├── style.css
│   │   └── style.css.map
│   ├── images
│   │   ├── bg-hero-desktop.svg
│   │   ├── bg-hero-mobile.svg
│   │   ├── favicon-32x32.png
│   │   ├── icon-email.svg
│   │   ├── icon-location.svg
│   │   ├── icon-phone.svg
│   │   ├── illustration-flowing-conversation.svg
│   │   ├── illustration-grow-together.svg
│   │   ├── illustration-mockups.svg
│   │   ├── illustration-your-users.svg
│   │   └── logo.svg
│   └── sass
│       ├── abstracts
│       │   ├── _animations.scss
│       │   ├── _mixins.scss
│       │   └── _variables.scss
│       ├── base
│       │   ├── _page.scss
│       │   └── _reset.scss
│       ├── component
│       │   ├── _attribution.scss
│       │   ├── _buttons.scss
│       │   ├── _heading.scss
│       │   ├── _horizontal-list.scss
│       │   └── _screen-reader.scss
│       ├── layout
│       │   ├── _card.scss
│       │   ├── _footer.scss
│       │   └── _header.scss
│       └── main.scss
├── design
│   ├── active-states.jpg
│   ├── desktop-design.jpg
│   ├── desktop-preview.jpg
│   └── mobile-design.jpg
├── index.html
└── README.md