Skip to content

Latest commit

 

History

History
68 lines (46 loc) · 2.32 KB

README.md

File metadata and controls

68 lines (46 loc) · 2.32 KB
Raw

Glowing Circle with Alphabets

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.

Demo

Screenshot 2024-05-28 150906

You can see a live demo of the project here.

CLICK HERE TO SUBSCRIBE MY YOUTUBE CHANNEL

Features

  • 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.

Installation

To use this project, simply download or clone the repository:

git clone https://github.com/logusivam/Glowing_circle.git

Alternatively, you can directly copy the HTML and CSS code into your project files.

Usage

  1. Include the CSS in your HTML file:
<link rel="stylesheet" href="style.css" type="text/css" />
  1. 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>
  1. Customize the design and functionality in the style.css and files as needed.

Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.