Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mariumshiraz/100_days_challenges_day-1
Day 1: CSS Challenge
https://github.com/mariumshiraz/100_days_challenges_day-1
100-days-css-challenge css3 html-css html5
Last synced: 1 day ago
JSON representation
Day 1: CSS Challenge
- Host: GitHub
- URL: https://github.com/mariumshiraz/100_days_challenges_day-1
- Owner: mariumshiraz
- Created: 2024-09-14T14:46:52.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-14T15:06:16.000Z (2 months ago)
- Last Synced: 2024-10-13T15:43:01.900Z (about 1 month ago)
- Topics: 100-days-css-challenge, css3, html-css, html5
- Language: CSS
- Homepage: https://mariumshiraz.github.io/100_Days_Challenges_day-1/
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📅 Day 1: CSS Challenge
## 🌟 Project Overview
Welcome to the CSS Challenge for Day 1! This project showcases a creative design for displaying "100" using pure HTML and CSS. The design includes a gradient background and stylized shapes to represent the numbers.## 📂 Files
- **index.html**: The main HTML file for the structure of the page.
- **style.css**: The CSS file that styles the page with gradients, shapes, and layout.## 🛠️ Features
- **Gradient Background** 🌈: Creates a visually appealing effect from orange to light orange.
- **Stylized Numbers** 🔢: Unique design for the numbers "1" and "0" using CSS shapes and transformations.
- **Responsive Layout** 📱: Centered content that adjusts well to different screen sizes.## 🚀 How to Run
1. **Clone the Repository** 🧩:
```bash
git clone
```
2. **Open `index.html`** in your web browser to view the design.## 📜 Key Technologies
- **HTML5** 🛠️
- **CSS3** 🎨
- CSS Variables
- Flexbox
- Box Shadows
- Transforms## 📸 Screenshot
![day_1](https://github.com/Fredy002/100-Days-Of-CSS-Projects/assets/104151778/ebd3508f-7c7d-4be2-9ed2-3f879c095c3c)## 💡 Inspiration
Inspired by modern CSS techniques to create clean and effective designs.## 🎉 Enjoy experimenting with CSS and pushing your design skills!