Hit The Target Challenge

Challenge Description

Create a visually engaging target using HTML and CSS. This challenge focuses on using absolute positioning and animations to form concentric circles that mimic a target. Experiment with colors, sizes, and animations to make the target come to life. This is a great opportunity to practice CSS gradients, positioning, and animations.

Table of Content

1. Challenge Description
2. Introduction
3. Purpose
4. Features
5. Pre Requisites
6. File Structure
7. Tools
8. Preview
9. Contributing

Introduction

Welcome to the 'Hit the Target' challenge! In this task, you'll be creating a visually appealing target using HTML and CSS. This challenge focuses on building concentric circles with engaging animations, helping you enhance your skills in CSS positioning, animations, and gradients.

Purpose

The purpose of the 'Hit the Target' challenge is to practice creating visually appealing targets using HTML and CSS. By focusing on building concentric circles with animations, participants can strengthen their skills in CSS positioning, animations, and gradients. This challenge encourages creativity while providing a hands-on opportunity to refine web development techniques.

Features

1. Concentric Circles: Build a target-like design using nested HTML elements styled with CSS.
2. CSS Gradients: Utilize CSS gradients to create visually appealing color transitions within the circles.
3. Animations: Implement animations to create a pulsating effect or other dynamic behaviors using CSS keyframes.
4. Skill Enhancement: Practice CSS positioning, animations, and gradients while fostering creativity in web design.

Pre Requisites

1. Basic HTML and CSS Knowledge
2. Understanding of CSS Gradients
3. Animation Fundamentals

File Structure

    Hit-The-Target-Challenge/
    │
    ├── index.html
    ├── styles.css
    └── README.md

Tools

1. Code Editor (e.g., VS Code, Sublime, Atom, etc.)
2. Web Browser (e.g., Google Chrome, Mozilla Firefox, or Safari, etc.)
3. Version Control (Optional)(e.g., Git, Github or any other platform).

Preview

You can also watch the live demo on my CodePen: Hit the Target Demo

Below is the Screenshot of the the this challenge

Contributing

Thank you for considering contributing to the Hit the Target challenge! Contributions are welcome and encouraged. To contribute, please follow these guidelines:

How to Contribute

1. Fork the Repository: Start by forking the repository to your own GitHub account.
2. Clone the Repository: Clone the forked repository to your local machine using Git.

                   git clone https://github.com/Yashi-Singh-1/Hit-The-Target.git
               

                   cd Hit-The-Target
               

3. Make Changes: Implement your changes and improvements to the HTML (index.html) or CSS (styles.css) files. Ensure your code follows best practices and is well-commented.
4. Test Your Changes: Verify that your modifications work as intended by testing them in different browsers and screen sizes.
5. Commit Your Changes: Commit your changes with a clear and descriptive commit message.

                   git add .
               

                   git commit -m "Add feature: [brief description of your changes]"
               

6. Push to Your Fork: Push your changes to your forked repository on GitHub.

                   git push origin main
               

7. Submit a Pull Request: Go to your forked repository on GitHub and submit a pull request to the main repository. Provide a detailed description of your changes and why they are beneficial.