https://github.com/craigdoescode/component-card-fm
Component card exercise from frontend mentor.
https://github.com/craigdoescode/component-card-fm
Last synced: about 1 year ago
JSON representation
Component card exercise from frontend mentor.
- Host: GitHub
- URL: https://github.com/craigdoescode/component-card-fm
- Owner: CraigDoesCode
- Created: 2021-06-26T21:17:16.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-27T11:38:13.000Z (almost 5 years ago)
- Last Synced: 2025-02-08T19:45:23.401Z (over 1 year ago)
- Language: CSS
- Size: 578 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Stats preview card component solution
This is my solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62).
## 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
Users should be able to:
- View the optimal layout depending on their device's screen size
### Desktop view
### Mobile View
### Links
- Live Site URL: [craig1001.github.io/component-card-fm/](https://craig1001.github.io/component-card-fm/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
### What I learned
Two different menthod of creating colour overlays, firstly setting the image and the background of a containger and adding and overlay element on top
, secondly making the background the desired color and reducing the opacity of the image to greate the appearance of an overlay.
See two versions below:
V1 (overlay):
```html
```
```css
.image {
width: 50%;
background-image: url("../images/image-header-desktop.jpg");
}
.overlay{
background-color: hsla(277, 64%, 61%, 60%);
width: 100%;
height: 100%;
}
```
V2 (underlay):
```html
```
```css
img {
opacity: 40%;
}
.overlay {
background-color: hsl(277, 64%, 61%);
}
```
### Continued development
Moving forward I want to further my understanding of flex and responsive design so im able to organsie my css better.
## Author
- Website - [Craig Noford](https://www.linkedin.com/in/craig-norford-9a33838a/)
- Frontend Mentor - [@craig1001](https://www.frontendmentor.io/profile/craig1001)
- Twitter - [@craignorford](https://www.twitter.com/craignorford)