/profile-card-component

This is a solution to the "Profile Card Component" challenge on Frontend Mentor challenges.

Primary LanguageSCSS

Frontend Mentor - Profile card component solution

This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links


Table of contents

Overview

The challenge

  • Build out the project to the designs provided

My process

Built with

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

Useful resources

Author

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-pattern-bottom.svg
│   │   ├── bg-pattern-card.svg
│   │   ├── bg-pattern-top.svg
│   │   ├── favicon-32x32.png
│   │   └── image-victor.jpg
│   └── sass
│       ├── abstracts
│       │   ├── _mixins.scss
│       │   └── _variables.scss
│       ├── base
│       │   ├── _page.scss
│       │   └── _reset.scss
│       ├── component
│       │   ├── _heading.scss
│       │   └── _screen-reader.scss
│       ├── layout
│       │   └── _profile-card.scss
│       └── main.scss
├── design
│   ├── desktop-design.jpg
│   ├── desktop-preview.jpg
│   └── mobile-design.jpg
├── index.html
└── README.md