DEV Community

Cover image for Challenge 8 - Profile card component - Frontend Mentor
Abhishek Baliyan
Abhishek Baliyan

Posted on

Challenge 8 - Profile card component - Frontend Mentor

Challenge 8, 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.

Table of contents

Overview

Profile card component challenge by Frontend Mentor, Coded by Abhishek Baliyan.

The challenge

  • Build out the project to the designs provided

Screenshot

Desktop View
Mobile View

Links

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

  • I learned how to add images on background, How to position them & how to stick them same place with vw/vh.
background: url(../images/bg-pattern-bottom.svg) top 50vh left 44vw no-repeat, url(../images/bg-pattern-top.svg) bottom 43vh right 51vw no-repeat;
Enter fullscreen mode Exit fullscreen mode

Author

Top comments (0)