Change the theme for mars rover imagery page

PranavBarthwal / cosmoXplore

CosmoXplore, where the celestial canvas unfolds its mysteries before your eyes. Immerse yourself in a cosmic odyssey, as we harness the power of NASA's API to bring you a symphony of space resources.

https://cosmoxplore.pranavbarthwal.tech

60 stars 127 forks source link

Change the theme for mars rover imagery page #399

Open surajvast1 opened 3 months ago

surajvast1 commented 3 months ago

Describe the feature

We need to update the Mars Rover imagery page by changing the theme to a Mars-themed background,

adding a parallax scrolling effect, and modifying the content for clarity and relevance. you can get some help from here https://science.nasa.gov/mars/

It should be implemented because

No response

Additional context

No response

Would you like to work on this issue?

None

github-actions[bot] commented 3 months ago

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! Meanwhile you can show some love to this repo by starring it and following the maintainers : @PranavBarthwal , @surajvast1 & @harshit-sharmaaa 😊

Gaurav-Kushwaha-1225 commented 3 months ago

Hi @surajvast1, I am a contributor in GSSoC 24. Can you please assign this issue to me ??

Chandu6702 commented 3 months ago

@PranavBarthwal and @surajvast1 please assign this to me ,I am interested to do it.

PranavBarthwal commented 3 months ago

Assigned to @Gaurav-Kushwaha-1225 because of FCFS policy.

surajvast1 commented 3 months ago

Update @Gaurav-Kushwaha-1225

Gaurav-Kushwaha-1225 commented 3 months ago

Can you give some review over the UI or suggest some idea about the design of mars-rover page that you are expecting. @surajvast1

surajvast1 commented 3 months ago

@Gaurav-Kushwaha-1225 It looks good, but how about changing the entire theme to a reddish color, to align with the Mars theme, would be great. This way, we could implement something similar to what we have on the moon.

Gaurav-Kushwaha-1225 commented 3 months ago

Can anybody help me in How to apply this theme on mars-rover page only. ......

Currently i just created this by changing only background-image property of index.css to

body {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(41, 0, 1, 1));
    overflow-x: hidden;
    color: rgb(255, 255, 255);
    font-family: "Space Grotesk", sans-serif;
}

and background-image property of src/components/Navbar/Navbar.css to

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  background-image: linear-gradient(to left, rgba(41, 0, 1, 0.8), rgba(0, 0, 0, 0.9));
  color: #fff;
  padding: 1rem 2rem;
  text-align: center;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 17px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) saturate(150%);
}

Screenshot from 2024-06-19 03-53-47

surajvast1 commented 3 months ago

Update @Gaurav-Kushwaha-1225 ???

surajvast1 commented 3 months ago

You need to take pull and change it accordingly now

surajvast1 commented 3 months ago

Get it done as soon as possible

Gaurav-Kushwaha-1225 commented 3 months ago

Get it done as soon as possible

I have created the PR #434. But the mars themed navbar, background and scroll-bar color is appearing on all pages which have to be resolved. I'm currently working on it to resolve this issue. But if you have any ideas or suggestions, please let me know.