https://github.com/cosmoart/space-tourism

🪐My solution for the famous frontend-mentor challenge "Space tourism", made with React, JS and CSS in NextJS
https://github.com/cosmoart/space-tourism

css frontend-mentor nextjs react reponsive-web-design

Last synced: 13 days ago
JSON representation

🪐My solution for the famous frontend-mentor challenge "Space tourism", made with React, JS and CSS in NextJS

• Host: GitHub
• URL: https://github.com/cosmoart/space-tourism
• Owner: cosmoart
• License: mit
• Created: 2022-09-14T20:34:31.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-22T01:33:33.000Z (9 months ago)
• Last Synced: 2024-11-17T12:52:17.735Z (about 1 month ago)
• Topics: css, frontend-mentor, nextjs, react, reponsive-web-design
• Language: CSS
• Homepage: https://space-tourist.vercel.app
• Size: 2.53 MB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        












# Space tourism website

🪐My solution for the famous frontend-mentor challenge "Space tourism", made with react, JS and CSS in NextJS. This is a solution to the [Space tourism website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3).

[Solution][solution-url] . [Live Page][live-page]



Table of contents

-   [Overview](#overview)

    -   [The challenge](#the-challenge)

    -   [Screenshots](#screenshots)

    -   [Links](#links)

-   [My process](#my-process)

    -   [Built with](#built-with)

    -   [What I learned](#what-i-learned)

-   [Author](#author)

## Overview

### The challenge

Users should be able to:

-   View the optimal layout for each of the website's pages depending on their device's screen size

-   See hover states for all interactive elements on the page

-   View each page and be able to toggle between the tabs to see new information

### Screenshots

        

		    

                

            

			

                

            

            

                

            

        

        

		    

                

            

			

                

            

            

                

            

        

        

		    

                

            

			

                

            

            

                

            

        

        

		    

                

            

			

                

            

            

                

            

        

### Links

-   [Solution][solution-url]

-   [Live Page][live-page]

## My process

### Built with

-   Mobile-first workflow

-   Semantic HTML5 markup

-   [React](https://reactjs.org/) - JS library

-   [Nextjs](https://nextjs.org) - React framework

⬆️ Back to top


### What I learned

It was the perfect opportunity to play around with NextJS for the first time. Making the css was more difficult than I imagined since NextJS makes some changes to the HTML and CSS (such as images and css module files) but I was able to solve those problems by reading the documentation and doing some research.

Another complication when making the styles was the slider animations of the cards that needed all the cards to be in the HTML and not just one that changed with a state, which would have been much simpler but without cool animations.

⬆️ Back to top


## Author

-   My website - [cosmoart.vercel.app](https://cosmoart.vercel.app)

-   Instagram - [@cosmo_art0](https://www.instagram.com/cosmo_art0/)

-   Frontend Mentor - [@CosmoArt](https://www.frontendmentor.io/profile/cosmoart)

-   Twitter - [@CosmoArt0](https://twitter.com/cosmoart0)

⬆️ Back to top


[live-page]: https://space-tourist.vercel.app

[solution-url]: https://www.frontendmentor.io/solutions/space-tourism-solution-in-nextjs-OMUOrt3m__