https://github.com/yashi-singh-1/vertical-circle-cascade

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.
https://github.com/yashi-singh-1/vertical-circle-cascade

css css3 front-end front-end-challenge frontend frontend-challenge frontend-challenges html html-css html-css-challenge html5 htmlcss htmlcsschallenge

Last synced: 4 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/vertical-circle-cascade
• Owner: Yashi-Singh-1
• Created: 2024-06-30T11:06:02.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-30T11:22:37.000Z (5 months ago)
• Last Synced: 2024-07-02T09:01:27.158Z (4 months ago)
• Topics: css, css3, front-end, front-end-challenge, frontend, frontend-challenge, frontend-challenges, html, html-css, html-css-challenge, html5, htmlcss, htmlcsschallenge
• Language: CSS
• Homepage:
• Size: 23.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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:





Fork the Repository: Click the "Fork" button on the top right corner of the repository page

    to create your own copy on GitHub.



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.



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.



Implement Your Changes: Make your changes to the codebase, ensuring they align with the

    challenge requirements.



Test Your Changes: Before committing, test your changes locally to verify everything works

    as expected.



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"





Push Your Branch: Push your local branch to your forked repository on GitHub:

    
git push origin feature/your-feature-name





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.



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.