{"id":19400579,"url":"https://github.com/yashi-singh-1/vertical-circle-cascade","last_synced_at":"2025-07-29T09:35:43.377Z","repository":{"id":246767106,"uuid":"822126250","full_name":"Yashi-Singh-1/Vertical-Circle-Cascade","owner":"Yashi-Singh-1","description":"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.","archived":false,"fork":false,"pushed_at":"2024-06-30T11:22:37.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-10T11:15:05.623Z","etag":null,"topics":["css","css3","front-end","front-end-challenge","frontend","frontend-challenge","frontend-challenges","html","html-css","html-css-challenge","html5","htmlcss","htmlcsschallenge"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yashi-Singh-1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-30T11:06:02.000Z","updated_at":"2024-06-30T11:25:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"9d936c0e-44f4-478b-b04a-58a5b096b583","html_url":"https://github.com/Yashi-Singh-1/Vertical-Circle-Cascade","commit_stats":null,"previous_names":["yashi-singh-1/vertical-circle-cascade"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-1%2FVertical-Circle-Cascade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-1%2FVertical-Circle-Cascade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-1%2FVertical-Circle-Cascade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yashi-Singh-1%2FVertical-Circle-Cascade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yashi-Singh-1","download_url":"https://codeload.github.com/Yashi-Singh-1/Vertical-Circle-Cascade/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232874769,"owners_count":18590013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","front-end","front-end-challenge","frontend","frontend-challenge","frontend-challenges","html","html-css","html-css-challenge","html5","htmlcss","htmlcsschallenge"],"created_at":"2024-11-10T11:15:18.487Z","updated_at":"2025-01-07T11:47:33.688Z","avatar_url":"https://github.com/Yashi-Singh-1.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eVertical Circle Cascade Challenge\u003c/h1\u003e\n\n\u003ch2 id=\"challenge-overview\"\u003eChallenge Overview\u003c/h2\u003e\n\u003cp\u003eCreate a vertically aligned, overlapping circle design within a container using HTML and CSS. Ensure circles\nextending beyond the container are clipped for a clean, polished look.\u003c/p\u003e\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#challenge-overview\"\u003eChallenge Overview\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#introduction\"\u003eIntroduction\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#purpose\"\u003ePurpose\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#file-structure\"\u003eFile Structure\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#tools\"\u003eTools\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#preview\"\u003ePreview\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#credits\"\u003eCredits\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"introduction\"\u003eIntroduction\u003c/h2\u003e\n\u003cp\u003eThis challenge focuses on using HTML and CSS to create a visually appealing design of vertically aligned,\noverlapping circles within a container. The objective is to ensure that the circles are clipped when they\nextend beyond the container boundaries.\u003c/p\u003e\n\n\u003ch2 id=\"purpose\"\u003ePurpose\u003c/h2\u003e\n\u003cp\u003eThe purpose of this challenge is to practice and enhance skills in CSS positioning, styling, and layout\ntechniques. It also helps in understanding the use of the \u003ccode\u003eoverflow\u003c/code\u003e property to manage content\noverflow within a container.\u003c/p\u003e\n\n\u003ch2 id=\"features\"\u003eFeatures\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eVertically aligned circles\u003c/li\u003e\n\u003cli\u003eOverlapping design\u003c/li\u003e\n\u003cli\u003eClipped circles when extending beyond the container\u003c/li\u003e\n\u003cli\u003eClean and polished look\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"prerequisites\"\u003ePrerequisites\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eBasic knowledge of HTML and CSS\u003c/li\u003e\n\u003cli\u003eUnderstanding of CSS positioning and box model\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"file-structure\"\u003eFile Structure\u003c/h2\u003e\n\u003cpre\u003e\nVertical-Circle-Cascade/\n│\n├── index.html\n├── styles.css\n└── README.md\n\u003c/pre\u003e\n\n\u003ch2 id=\"tools\"\u003eTools\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eHTML\u003c/li\u003e\n\u003cli\u003eCSS\u003c/li\u003e\n\u003cli\u003eCode editor (e.g., VSCode)\u003c/li\u003e\n\u003cli\u003eBrowser for preview\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"preview\"\u003ePreview\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://codepen.io/Yashi-the-lessful/pen/ZENdomV\"\u003eLive Demo\u003c/a\u003e\u003c/p\u003e\n\nPreview: \n\u003cimg src=\"Preview.png\" alt=\"Vertical Circle Cascade Screenshot\"\u003e\n\n\n\u003ch2 id=\"contributing\"\u003eContributing\u003c/h2\u003e\n\u003cp\u003eTo contribute to this challenge, follow these steps:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eFork the Repository:\u003c/strong\u003e Click the \"Fork\" button on the top right corner of the repository page\n    to create your own copy on GitHub.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eClone the Repository:\u003c/strong\u003e Clone the forked repository to your local machine using Git. Use the\n    following command in your terminal:\n    \u003cbr\u003e\u003ccode\u003egit clone https://github.com/your-username/Vertical-Circle-Cascade.git\u003c/code\u003e\n    \u003cbr\u003eReplace \u003ccode\u003eyour-username\u003c/code\u003e with your GitHub username.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCreate a New Branch:\u003c/strong\u003e Move into the cloned repository directory and create a new branch to\n    work on your changes:\n    \u003cbr\u003e\u003ccode\u003ecd Vertical-Circle-Cascade\u003c/code\u003e\n    \u003cbr\u003e\u003ccode\u003egit checkout -b feature/your-feature-name\u003c/code\u003e\n    \u003cbr\u003eReplace \u003ccode\u003eyour-feature-name\u003c/code\u003e with a descriptive name for your feature or bug fix.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eImplement Your Changes:\u003c/strong\u003e Make your changes to the codebase, ensuring they align with the\n    challenge requirements.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eTest Your Changes:\u003c/strong\u003e Before committing, test your changes locally to verify everything works\n    as expected.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCommit Your Changes:\u003c/strong\u003e Once tested, stage and commit your changes with a clear and descriptive\n    commit message:\n    \u003cbr\u003e\u003ccode\u003egit add .\u003c/code\u003e\n    \u003cbr\u003e\u003ccode\u003egit commit -m \"Add feature: your feature description\"\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePush Your Branch:\u003c/strong\u003e Push your local branch to your forked repository on GitHub:\n    \u003cbr\u003e\u003ccode\u003egit push origin feature/your-feature-name\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCreate a Pull Request:\u003c/strong\u003e Go to your forked repository on GitHub and click on the \"Compare \u0026\n    pull request\" button next to your newly pushed branch. Provide a detailed description of your changes and\n    submit the pull request to the main repository's \u003ccode\u003emaster\u003c/code\u003e branch.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eReview and Feedback:\u003c/strong\u003e Your pull request will be reviewed by the repository maintainers. Make\n    any requested changes if needed and collaborate until your contribution is accepted.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2 id=\"credits\"\u003eCredits\u003c/h2\u003e\n\u003cp\u003eInspired by \u003ca href=\"https://cssbattle.dev/\"\u003eCSS Battle\u003c/a\u003e.\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashi-singh-1%2Fvertical-circle-cascade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyashi-singh-1%2Fvertical-circle-cascade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashi-singh-1%2Fvertical-circle-cascade/lists"}