https://github.com/harisdev-netizen/stats-preview-card
This is a solution to the "Stats Preview Card Component" challenge on Frontend Mentor.
https://github.com/harisdev-netizen/stats-preview-card
css css-flexbox frontend-mentor frontendmentor-challenge html-css-javascript html5
Last synced: 4 months ago
JSON representation
This is a solution to the "Stats Preview Card Component" challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/harisdev-netizen/stats-preview-card
- Owner: harisdev-netizen
- Created: 2024-10-21T12:33:48.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-10-21T17:53:30.000Z (8 months ago)
- Last Synced: 2025-01-06T01:15:36.896Z (6 months ago)
- Topics: css, css-flexbox, frontend-mentor, frontendmentor-challenge, html-css-javascript, html5
- Language: CSS
- Homepage: https://stats-previevv-card.netlify.app/
- Size: 463 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
## Welcome! 👋
Thanks for checking out this front-end coding challenge.
This is a solution to the [Stats preview card component](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve frontend coding skills by building realistic projects.
## Table of Contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screens](#screens)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
## Overview
### The challenge
Your users should be able to:
- View the optimal layout for the component depending on their device's screen size
### Screens
#### Desktop Preview
#### Mobile Preview
### Links
- Solution URL: [GitHub Repository](https://github.com/harisdev-netizen/stats-preview-card)
- Live Site URL: [Live Preview](https://community-subscription.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Responsive design with media queries
### What I learned
1. **Google Fonts Setup:**
Successfully integrated Inter and Lexend Deca fonts from Google using `@import`, enhancing the typography's style and readability across the design.
2. **Custom CSS Variables:**
Created reusable color and typography variables using `:root` for primary, secondary, accent, and text colors, along with font-family variables. This allowed for easier customization and theme management.
3. **Flexbox for Layout Structure:**
Utilized Flexbox in the `.insights-section` and `.content-wrapper` classes to easily align and distribute content both horizontally and vertically. This approach helped achieve a clean, centered layout across different viewports.
4. **Typography Styling:**
Applied various typography settings, such as font-weight and line-height, using the imported Inter and Lexend Deca fonts to create visual hierarchy, particularly for headings, paragraphs, and stats.
5. **Image Overlay:**
Implemented a semi-transparent purple overlay on the image using `::after`.
6. **Opacity Adjustments:**
Applied different levels of opacity to text and backgrounds, such as setting `75%` opacity for detailed paragraphs and the image overlay, contributing to a balanced and modern visual hierarchy.
7. **Spacing and Gaps:**
Managed consistent spacing using margin and gap properties, particularly in the `.stats` section, providing enough breathing space between elements and improving readability.
**Have fun building!** 🚀