From c8902a24a55f94f9a66a1ad94532bbf19d969f16 Mon Sep 17 00:00:00 2001 From: Arzoo Singh Date: Fri, 8 Nov 2024 15:14:33 +0530 Subject: [PATCH] Done adding all files --- .../Basic/CSS Solar System/index.html | 22 ++++ .../Basic/CSS Solar System/style.css | 110 ++++++++++++++++++ 2 files changed, 132 insertions(+) create mode 100644 Front-end-Projects/Basic/CSS Solar System/index.html create mode 100644 Front-end-Projects/Basic/CSS Solar System/style.css 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