This project demonstrates how to create a glowing circle with alphabets arranged in a clock-like structure using HTML and CSS. Each letter of the alphabet is positioned around the circumference of the circle, and the circle glows with a neon-like effect.
You can see a live demo of the project here.
CLICK HERE TO SUBSCRIBE MY YOUTUBE CHANNEL
- Glowing Circle: The circle has a neon-like glow effect.
- Alphabet Arrangement: Letters are arranged around the circle like a clock.
- Responsive Design: The circle adjusts to different screen sizes.
To use this project, simply download or clone the repository:
git clone https://github.com/logusivam/Glowing_circle.gitAlternatively, you can directly copy the HTML and CSS code into your project files.
- Include the CSS in your HTML file:
<link rel="stylesheet" href="style.css" type="text/css" />
- Add the following HTML structure:
<div class="circle"></div>
<ul>
<li style="--i:-4"><span>a</span></li>
<li style="--i:-3"><span>c</span></li>
<li style="--i:-2"><span>n</span></li>
<li style="--i:-1"><span>m</span></li>
<li style="--i:0"><span>v</span></li>
<li style="--i:1"><span>j</span></li>
<li style="--i:2"><span>g</span></li>
<li style="--i:3"><span>y</span></li>
<li style="--i:4"><span>u</span></li>
<li style="--i:5"><span>b</span></li>
<li style="--i:6"><span>g</span></li>
<li style="--i:7"><span>f</span></li>
<li style="--i:8"><span>f</span></li>
<li style="--i:9"><span>k</span></li>
<li style="--i:10"><span>s</span></li>
<li style="--i:11"><span>p</span></li>
<li style="--i:12"><span>l</span></li>
- Customize the design and functionality in the
style.cssand files as needed.
Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.