https://github.com/basedhound/space-travel_ui

A responsive Space Travel website built with HTML, CSS, and JavaScript, featuring a modern landing page. It includes responsive styling across all devices, and JavaScript for interactive elements.
https://github.com/basedhound/space-travel_ui

css design html javascript js landing-page responsive ui ux website

Last synced: 29 days ago
JSON representation

A responsive Space Travel website built with HTML, CSS, and JavaScript, featuring a modern landing page. It includes responsive styling across all devices, and JavaScript for interactive elements.

• Host: GitHub
• URL: https://github.com/basedhound/space-travel_ui
• Owner: basedhound
• Created: 2023-02-26T16:40:20.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-05T14:41:41.000Z (6 months ago)
• Last Synced: 2024-11-09T03:24:50.601Z (3 months ago)
• Topics: css, design, html, javascript, js, landing-page, responsive, ui, ux, website
• Language: HTML
• Homepage: https://space-travel-fv.netlify.app
• Size: 24.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    

      

    

  
Space Travel Website



##  
 📋 Table of Contents

- ✨ [Introduction](#introduction)

- ⚙️ [Tech Stack](#tech-stack)

- 📝 [Features](#features)

- 🚀 [Quick Start](#quick-start)

##  
 ✨ Introduction

**[EN]** A responsive Space Travel website built with HTML, CSS, and JavaScript, featuring a modern landing page with interactive elements. This project highlights responsive design principles, effective use of media queries for adaptive styling, and JavaScript-driven interactions to ensure a dynamic and engaging user experience across all devices.

**[FR]** Un site web responsive sur le thème de l'Espace construit avec HTML, CSS et JavaScript, présentant une page de destination moderne avec des éléments interactifs. Ce projet met en avant les principes de design responsive, l'utilisation efficace des media queries pour un style adaptatif, et des interactions JavaScript pour garantir une expérience utilisateur dynamique et engageante sur tous les appareils.

##  
 ⚙️ Tech Stack

- **HTML** (HyperText Markup Language) is the standard markup language used for creating web pages. It provides the structure of a webpage by defining elements such as headings, paragraphs, links, images, and other content. HTML elements are represented by tags, which tell the browser how to display the content.

- **CSS** (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages. By separating content from design, CSS enables developers to maintain and update the visual style of multiple pages efficiently.

  

- **JavaScript** is a versatile, high-level programming language commonly used for web development. It enables interactive elements on web pages, such as dynamic content updates, form validation, animations, and user interface enhancements. JavaScript runs in the browser and is integral to building modern, interactive websites and web applications.

## 
 📝 Features

- `Utility classes`

  - Do one thing, and do it very well

  - Often only have one declaration, but they can have multiple when required

  - Allow things to be much more modular, and allow us to write a lot less in the long run

- Advantages of `RGB` & `HSL`

  - If we store the `RGB` or `HSL` values in a custom property, it makes it really easy to tweak the alpha value when needed.

- Finding the right balance

  - Utility classes let us work quickly

  - BUT, when we have something like our numbered titles that is always the same, it can be a good idea to find a balance

- Adding the spacing

  - Utility are very common (.m-1, .m-2, etc.)

  - We don't really need that in this design, and we can use something else that will speed things up

- Interactive elements

  - The explore button

  - Underlined indicators

  - Dot indicators

  - Number indicators

- To-do

  - Research scrollbar-gutter

  - Add page transition effects

- Responsive implementing order

  - Mobilde

  - Tablet (`@media (min-width: 35rem)`)

  - Desktop (`@media (min-width: 45rem)`)# space-travel_uix

## 
 🚀 Quick Start

Follow these steps to set up the project locally on your machine.


**Prerequisites**

Make sure you have the following installed on your machine:

- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)


**Cloning the Repository**

```bash

git clone {git remote URL}

```


**Running the Project**

Use [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

to launch a development local server with live reload feature for static & dynamic pages.






  
Preview



### Home page demos



  



  

    

    

  

 

### Destination page demos



  



  

    

    

  

 

### Crew page demos



  



  

    

    

  

 

### Technology page demos