https://github.com/yashi-singh-1/day-1-css-challenge

This project is a part of the 100 Days CSS Challenge. It focuses on creating a visually appealing, centered display of the number "100" using HTML and CSS. The design includes a gradient background and carefully positioned elements to form the digits.
https://github.com/yashi-singh-1/day-1-css-challenge

100daysofcss css css-challenge css3 front-end front-end-development frontend html html5 ui ui-design web-design web-development

Last synced: about 1 month ago
JSON representation

This project is a part of the 100 Days CSS Challenge. It focuses on creating a visually appealing, centered display of the number "100" using HTML and CSS. The design includes a gradient background and carefully positioned elements to form the digits.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-1-css-challenge
• Owner: Yashi-Singh-1
• License: mit
• Created: 2024-06-13T07:15:56.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-13T07:24:25.000Z (6 months ago)
• Last Synced: 2024-06-13T10:24:57.363Z (6 months ago)
• Topics: 100daysofcss, css, css-challenge, css3, front-end, front-end-development, frontend, html, html5, ui, ui-design, web-design, web-development
• Language: CSS
• Homepage:
• Size: 306 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
CSS Challenge - README




    
Project Overview

    
This challenge involves creating a centered number display within a styled frame using only HTML and CSS. The goal is to create a visually appealing design featuring the number "100" with specific styles applied to the digits and surrounding elements.





    
Table of Contents

    


        
Preview

        
Installation

        
Usage

        
Structure

        
Styling

        
Challenges

        
Contributing

        
Credits

        
License

        
Contact

    





    
Preview

    
Below is a preview of the final design for this challenge. You can also view it live on 100 Days CSS Challenge - Day 1.

    





    
Installation

    
To get started with this project, simply download the files and open them in your preferred web browser.

    
Files Included:

    


        


index.html - The HTML file containing the structure of the project.

        


style.css - The CSS file containing the styling rules for the project.

    





    
Usage

    
Open the index.html file in your web browser to view the challenge. You can also view the styles in the style.css file to see how the design is implemented.





    
Project Structure

    
The project is structured with the following files:

    


        


index.html - Contains the HTML structure of the challenge.

        


style.css - Contains the CSS styles applied to the HTML elements.

        


README.md - Contains information about project.

    

    
The HTML structure consists of a main div with the class "frame" that contains a centered number display and descriptive text.





    
Styling

    
The CSS file style.css styles the layout and design of the number display. Key parts of the CSS include:

    


        
Frame styling to create a centered container with a gradient background.

        
Centering the content within the frame using absolute positioning and transform properties.

        
Creating the digits of the number "100" using div elements styled with specific dimensions, positions, and rotations.

        
Styling the text elements to differentiate between the large "Days" and smaller "CSS Challenge" texts.

    





    
Challenges

    
Some challenges you might face while replicating this design include:

    


        
Ensuring the elements are perfectly centered within the frame.

        
Creating the correct shape and position for each part of the digits.

        
Applying the gradient background smoothly and ensuring browser compatibility.

    





    
Contributing

    
Contributions are welcome! If you have suggestions for improvements or new features, please follow these steps:

    


        
Fork the repository.

        
Create a new branch (git checkout -b feature/YourFeature).

        
Commit your changes (git commit -m 'Add some feature').

        
Push to the branch (git push origin feature/YourFeature).

        
Open a Pull Request.

    





    
Credits

    
This project is part of the 100 Days CSS Challenge. Special thanks to the creators of the challenge for their inspiration and resources.





    
License

    
This project is licensed under the MIT License. See the LICENSE file for details.





    
Contact

    
If you have any questions or suggestions, feel free to reach out:

    


        
Email: Yashi Singh



        
GitHub: github.com/Yashi-Singh-1



        
LinkedIn: Yashi Singh (www.linkedin.com/in/yashi-singh-b4143a246)