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.
Below is a preview of the final design for this challenge. You can also view it live on 100 Days CSS Challenge - Day 1.
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.
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.
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.
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
divelements styled with specific dimensions, positions, and rotations. - Styling the text elements to differentiate between the large "Days" and smaller "CSS Challenge" texts.
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.
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.
This project is part of the 100 Days CSS Challenge. Special thanks to the creators of the challenge for their inspiration and resources.
This project is licensed under the MIT License. See the LICENSE file for details.
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)