https://github.com/ayokanmi-adejola/fylo-data-storage-component
A Responsive data storage dashboard component with gradient progress bars and modern UI design. Built with HTML5 & CSS3, featuring mobile-first responsive design and interactive elements. Frontend Mentor challenge solution.
https://github.com/ayokanmi-adejola/fylo-data-storage-component
css flexbox-layout google-fonts html5 mobile-first-workflow
Last synced: 8 months ago
JSON representation
A Responsive data storage dashboard component with gradient progress bars and modern UI design. Built with HTML5 & CSS3, featuring mobile-first responsive design and interactive elements. Frontend Mentor challenge solution.
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/fylo-data-storage-component
- Owner: Ayokanmi-Adejola
- Created: 2025-07-31T17:35:12.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-31T17:43:02.000Z (11 months ago)
- Last Synced: 2025-09-30T00:00:36.626Z (9 months ago)
- Topics: css, flexbox-layout, google-fonts, html5, mobile-first-workflow
- Language: HTML
- Homepage: https://fylo-data-storage-component-one-gamma.vercel.app
- Size: 152 KB
- Stars: 7
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fylo Data Storage Component
A responsive data storage dashboard component built with HTML and CSS, featuring a modern design with gradient progress bars and interactive elements.
## 📋 Overview
This project is a responsive data storage component that displays storage usage statistics in an elegant, user-friendly interface. The component features a dual-card layout with storage visualization and remaining capacity notification.
### Key Features
- **Responsive Design**: Optimized for both mobile and desktop viewing
- **Interactive Progress Bar**: Visual representation of storage usage with gradient styling
- **Speech Bubble Notification**: Prominent display of remaining storage capacity
- **Modern UI**: Clean, professional design with smooth curves and shadows
- **Accessibility**: Semantic HTML structure and proper contrast ratios
## 🛠️ Technologies Used
- **HTML5**: Semantic markup structure
- **CSS3**: Modern styling with Flexbox, CSS Grid, and custom properties
- **Google Fonts**: Raleway font family for typography
- **Responsive Design**: Mobile-first approach with media queries
## 🎨 Design Specifications
### Color Palette
- **Primary Gradient**: `hsl(6, 100%, 80%)` to `hsl(335, 100%, 65%)`
- **Blue 200**: `hsl(243, 100%, 93%)`
- **Grayish Blue**: `hsl(229, 7%, 55%)`
- **Blue 850**: `hsl(228, 56%, 26%)`
- **Blue 950**: `hsl(229, 57%, 11%)`
### Typography
- **Font Family**: Raleway
- **Font Weights**: 400 (Regular), 700 (Bold)
- **Base Font Size**: 14px
## 📱 Responsive Breakpoints
- **Mobile**: 375px and up
- **Desktop**: 768px and up
- **Large Desktop**: 1440px (design width)
## 🏗️ Project Structure
```
fylo-data-storage-component/
├── index.html # Main HTML file
├── images/ # Asset directory
│ ├── bg-desktop.png # Desktop background
│ ├── bg-mobile.png # Mobile background
│ ├── logo.svg # Fylo logo
│ └── icon-*.svg # File type icons
├── design/ # Reference designs
└── README.md # Project documentation
```
## ✨ Key Implementation Details
### CSS Features
- **CSS Custom Properties**: For consistent theming and easy maintenance
- **Flexbox Layout**: For responsive card arrangement
- **CSS Gradients**: For the progress bar styling
- **Pseudo-elements**: For the speech bubble arrow
- **Media Queries**: For responsive design adaptation
## 🚀 Getting Started
### Prerequisites
- A modern web browser
- Basic understanding of HTML and CSS
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Ayokanmi-Adejola/fylo-data-storage-component.git
```
2. Navigate to the project directory:
```bash
cd fylo-data-storage-component
```
3. Open `index.html` in your preferred browser or use a local development server.
### Deployment
This project can be easily deployed to:
- [GitHub Pages](https://pages.github.com/)
- [Vercel](https://vercel.com/)
- [Netlify](https://www.netlify.com/)
## 🎯 Learning Outcomes
This project demonstrates proficiency in:
- **Responsive Web Design**: Creating layouts that work across all device sizes
- **CSS Flexbox**: Efficient layout management and alignment
- **CSS Custom Properties**: Maintainable and scalable styling approach
- **Progressive Enhancement**: Building from mobile-first principles
- **UI/UX Implementation**: Translating design mockups into functional interfaces
## 🙏 Acknowledgments
- Challenge provided by [Frontend Mentor](https://www.frontendmentor.io)
- Design inspiration from modern cloud storage interfaces
- Icons and assets optimized for web performance
## 👨💻 Author
- Frontend Mentor: [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)