Frontend Mentor - Stats preview card component solution

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

Table of contents

• The challenge
• Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size with little or no technical deficulty

Links

• Solution URL:(https://github.com/ronalking182/card-component-challange-01)
• Live Site URL:( https://ronalking182.github.io/card-component-challange-01/)

My process

HTML

• I created a div conatianer for everything so that i can be able to use flexbox to controll the layout .

• I also created a div sub-contianer for the image.

• I also created a second contianer which i name "container2" and made sure it was inside the maine contianer .

• Inside the "contianer2" : - I inserted two paragraph . - I inserted a span inside the first paragraph so that i would be able to change the color of a specific text given by the challange.

• I also created another div called number inside container2

• Inside my Number div i inserted a ul tag that enabled me to list out the required text givine to me by the challange

• I inside my ul tag i inserted a br tag and a p tag to enable my work look exactly like the challange.

Css

• I first of all created my mobile layout first
• then i used the filter design which i newly leanrnt to add an opacity to make the image look exactly like the one in the challange
• I used flexbox to arrange my li's both in the moble view and desktop view
• i used media quires to make my desktop view
• in my desktop view i made use of the flexbos which i put in the main contianer class to position it as the challange demmanded

Built with

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

What I learned

I learnt how to :

• use the filter in css to edite a picture .
• i also learnt that position relative and absolute is relivant to position element in html.

#pic{
    filter: opacity(50%)
}

Continued development

• woul definetly continue to use media quries to master how to use Max-width and Min-width.
• I would also continue to use fitlter to edite picture to master it

Useful resources

• resource 1: (https://www.w3schools.com/cssref/css3_pr_filter.asp)
• This helped me to be able to use filter to edite my picture . I really liked this pattern and will use it going forward.

Author

• Frontend Mentor - (https://www.frontendmentor.io/profile/ronalking182)
• Twitter - @kingdavidabu