/Cosmologist_Doodle

☄️ A brief description on the working of the Universe & the matter that resides in it.

Primary LanguageHTML

Cosmologist_Doodle

🔗 https://swap-nova.github.io/Cosmologist_Doodle/

📊 Problem Statement:

  • It is a website built for getting a quick tour of the field of astronomy.
  • If the reader is new to astronomy, this website can act as a place where the reader can gain knowledge instead of looking into multiple resources.
  • Rather than looking into multiple tabs and then trying to understand the workings of the universe, the user can directly access the website to gain somewhat an idea of the field of astronomy.

⚙ Building the Website from ground up

As this was a hackathon, I had only 2 days to make the best out of it. This is the final design of the website космос Hub.

It is advised to view the website on a laptop as it is not fully responsive.

❄ Talking about the build:

  • The Website is built using HTML, CSS & Bootstrap.
  • Javascript is also used in the website. The cursor on the home page of the website is built by using the functions of Javascript.
  • To create dynamic and interactive content, Javascript was used to make the page more attractive for the user.
  • To make the cursor work for the 'Deep Space' page, we had to use the 'Sass' programming language.
  • 'Sass' is a preprocessor language system that is compiled into CSS.
  • Visual Studio Code offers an extension where we can use the 'Sass' online server and, after writing the code automatically, creates a map & CSS file for the Sass code.
  • Advanced CSS Properties were used. For example, The Box Model implementation, positioning, button styling, etc.
  • In the end, to design a proper navigation bar, we have used the Bootstrap Libraries.
  • Even though the website is not responsive, the navigation bar is a toggle system that automatically creates a dropdown menu when viewed on smaller devices.