Skip to content

Mansour0007/Stats-preview-card-component

Repository files navigation

# Frontend Mentor - Stats preview card component solution This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Table of contents - [Overview](#overview) - [The challenge](#the-challenge) - [Screenshot](#screenshot) - [Links](#links) - [My process](#my-process) - [Built with](#built-with) - [What I learned](#what-i-learned) - [Continued development](#continued-development) - [Useful resources](#useful-resources) - [Author](#author) - [Acknowledgments](#acknowledgments) ## Overview ### The challenge Stats preview card component solution ### Screenshot ![](images\Screen-Shot.png) ![](images\Screen-Shot2.png) ### Links - Solution URL: [Add solution URL here]https://github.com/Mansour0007/Stats-preview-card-component) - Live Site URL: [Add live site URL here](https://stoic-shannon-a8fcf3.netlify.app/) ## My process ### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox ### What I learned using flex-box but i think i need a lot of practice with responsiv

Some HTML code I'm proud of

````adding color background to the img ```css I know i kinda over complicated the code but that's what clicked with me i'm sure there is easier way to takle this .proud-of-this-css { .img-div { background-image: linear-gradient( rgba(74, 14, 112, 0.6), rgba(73, 13, 110, 0.6) ), url(/images/image-header-desktop.jpg); width: 730px; height: 445px; border-radius: 0 8px 8px 0; } .mobile-img { background-image: linear-gradient( rgba(74, 14, 112, 0.6), rgba(73, 13, 110, 0.6) ), url(/images/image-header-desktop.jpg); width: 100%; height: 300px; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; border-radius: 10px 10px 0 0; display: none; } ```` ### Continued development ```definitely i need to focus on first mobile responsive approach and also responsive layout in general ## Author - Frontend Mentor - [@yourusername]https://www.frontendmentor.io/profile/Mansour0007) ## Acknowledgments thank you to all web devs helping and giving advise on Frontend mentore they help out a lot ``` #Stats-preview-card-component

About

Stats preview card component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published