diff --git a/Front-end-Projects/Basic/CSS Solar System/Readme.md b/Front-end-Projects/Basic/CSS Solar System/Readme.md new file mode 100644 index 00000000..61914ab6 --- /dev/null +++ b/Front-end-Projects/Basic/CSS Solar System/Readme.md @@ -0,0 +1,69 @@ +

đŸ’Ĩ CSS Solar System đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

The CSS Solar System is a visually immersive representation of our solar system, crafted entirely with HTML and CSS. This project features a realistic arrangement of planets orbiting the sun, each with carefully scaled sizes and orbital paths. Through the use of CSS animations and transformations, each planet follows its unique orbit, capturing the beauty and motion of celestial bodies. This project demonstrates creative and technical CSS skills by simulating complex motion without JavaScript, offering an interactive and educational visualization of the solar system for viewers.

+
+ + + + +## :zap: How to run it? 🕹ī¸ + +
+

To run this project locally, follow these steps: + +1. Fork the repository. + +2. Clone the repository to your local machine: + git clone + +3. Open the project folder in your preferred code editor, now you can view website in live. + +

+
+ + + +## :zap: Screenshots 📸 + + +![Screenshot (38)](https://github.com/user-attachments/assets/0050b66c-eb63-4cb6-8b97-056f4bb22f92) + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Arzoo Singh

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Front-end-Projects/Basic/CSS Solar System/index.html b/Front-end-Projects/Basic/CSS Solar System/index.html new file mode 100644 index 00000000..0efbe81b --- /dev/null +++ b/Front-end-Projects/Basic/CSS Solar System/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
  7. +
  8. +
  9. +
+ + \ No newline at end of file diff --git a/Front-end-Projects/Basic/CSS Solar System/style.css b/Front-end-Projects/Basic/CSS Solar System/style.css new file mode 100644 index 00000000..7313cbe5 --- /dev/null +++ b/Front-end-Projects/Basic/CSS Solar System/style.css @@ -0,0 +1,110 @@ + +body { + background: #000F; + color: #FFFA; + margin: 0; + width: 100vw; + } + + ol { + all: unset; + aspect-ratio: 1 / 1; + container-type: inline-size; + display: grid; + width: 100%; + } + + li { + aspect-ratio: 1 / 1; + border: 1px dashed; + border-radius: 50%; + display: grid; + grid-area: 1 / 1; + place-self: center; + width: var(--d, 2cqi); + &::after { + animation: rotate var(--t, 3s) linear infinite; + aspect-ratio: 1 / 1; + background: var(--b, hsl(0, 0%, 50%)); + border-radius: 50%; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); + content: ''; + display: block; + offset-path: content-box; + width: var(--w, 2cqi); + } + } + + @keyframes rotate { + to { + offset-distance: 100%; + } + } + + .sun { + --b: radial-gradient(circle, #f9d71c 0%, #f9a825 50%, #f9a825 100%); + --d: 10cqi; + --w: 8cqi; + border: 0; + &::after { + animation: none; + offset-path: none; + place-self: center; + } + } + + .mercury { + --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%); + --d: 15cqi; + --t: 2105.26ms; + --w: 2.0526cqi; + } + + .venus { + --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%); + --d: 25cqi; + --t: 4210.53ms; + --w: 2.6053cqi; + } + + .earth { + --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%); + --d: 35cqi; + --t: 6315.79ms; + --w: 3.1579cqi; + } + + .mars { + --b: radial-gradient(circle, #e57373 0%, #af4448 100%); + --d: 45cqi; + --t: 8421.05ms; + --w: 3.7105cqi; + } + + .jupiter { + --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%); + --d: 60cqi; + --t: 12631.58ms; + --w: 4.8158cqi; + } + + .saturn { + --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%); + --d: 75cqi; + --t: 14736.84ms; + --w: 5.3684cqi; + } + + .uranus { + --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%); + --d: 84.5cqi; + --t: 10526.32ms; + --w: 4.2632cqi; + } + + .neptune { + --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%); + --d: 94cqi; + --t: 20000ms; + --w: 6cqi; + } \ No newline at end of file