Vertical Circle Cascade Challenge

Challenge Overview

Create a vertically aligned, overlapping circle design within a container using HTML and CSS. Ensure circles extending beyond the container are clipped for a clean, polished look.

Table of Contents

• Challenge Overview
• Introduction
• Purpose
• Features
• Prerequisites
• File Structure
• Tools
• Preview
• Contributing
• Credits

Introduction

This challenge focuses on using HTML and CSS to create a visually appealing design of vertically aligned, overlapping circles within a container. The objective is to ensure that the circles are clipped when they extend beyond the container boundaries.

Purpose

The purpose of this challenge is to practice and enhance skills in CSS positioning, styling, and layout techniques. It also helps in understanding the use of the overflow property to manage content overflow within a container.

Features

• Vertically aligned circles
• Overlapping design
• Clipped circles when extending beyond the container
• Clean and polished look

Prerequisites

• Basic knowledge of HTML and CSS
• Understanding of CSS positioning and box model

File Structure

Vertical-Circle-Cascade/
│
├── index.html
├── styles.css
└── README.md

Tools

• HTML
• CSS
• Code editor (e.g., VSCode)
• Browser for preview

Preview

Live Demo

Preview:

Contributing

To contribute to this challenge, follow these steps:

1. Fork the Repository: Click the "Fork" button on the top right corner of the repository page to create your own copy on GitHub.
2. Clone the Repository: Clone the forked repository to your local machine using Git. Use the following command in your terminal:
   git clone https://github.com/your-username/Vertical-Circle-Cascade.git
   Replace your-username with your GitHub username.
3. Create a New Branch: Move into the cloned repository directory and create a new branch to work on your changes:
   cd Vertical-Circle-Cascade
git checkout -b feature/your-feature-name
   Replace your-feature-name with a descriptive name for your feature or bug fix.
4. Implement Your Changes: Make your changes to the codebase, ensuring they align with the challenge requirements.
5. Test Your Changes: Before committing, test your changes locally to verify everything works as expected.
6. Commit Your Changes: Once tested, stage and commit your changes with a clear and descriptive commit message:
   git add .
git commit -m "Add feature: your feature description"
7. Push Your Branch: Push your local branch to your forked repository on GitHub:
   git push origin feature/your-feature-name
8. Create a Pull Request: Go to your forked repository on GitHub and click on the "Compare & pull request" button next to your newly pushed branch. Provide a detailed description of your changes and submit the pull request to the main repository's master branch.
9. Review and Feedback: Your pull request will be reviewed by the repository maintainers. Make any requested changes if needed and collaborate until your contribution is accepted.

Credits

Inspired by CSS Battle.