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!