https://github.com/kvishalrj/qtripstatic

A static tour website
https://github.com/kvishalrj/qtripstatic

Last synced: 11 days ago
JSON representation

A static tour website

• Host: GitHub
• URL: https://github.com/kvishalrj/qtripstatic
• Owner: kvishalrj
• Created: 2024-06-11T04:38:41.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-11T05:08:57.000Z (7 months ago)
• Last Synced: 2024-06-12T09:11:17.237Z (7 months ago)
• Language: HTML
• Homepage: https://qtrip-static-3cg2he09x-vishal-kumars-projects.vercel.app/
• Size: 25.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# QTripStatic💻

### QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities. 

During the course of this project,

Created 3 different web pages from Wireframe layout using HTML and CSS

Utilized Bootstrap extensively for responsive design

Deployed the website to Netlify/Vercel

While building this Buildout, the developer:

   - Understood the application requirements and implemented the project from scratch.

   - Tested the implementation to ensure correctness and responsiveness across different devices.

   - Made use of CSS Flexbox and CSS Grids to create a visually appealing layout.

 >## Create layout for the landing page and make it responsive

 ### Scope of Work

- Added a navigation bar which collapses automatically on smaller devices to display a toggle icon

- Utilized CSS properties to add the hero image and align elements in it as per the design

Implemented the cities grid section by using Bootstrap’s grid

- Improved the cities grid section by making images responsive and added effect on hovering over an image tile

### Skills used

HTML, CSS, CSS Flexbox, Responsive Design, Bootstrap, VS Code Live Server

## Screenshot of the Landing Page 👇

![](/images/1.png)

![](/images/2.png)

![](/images/3.png)

>## Implement the adventures page

 ### Scope of Work

- Created a responsive grid of adventures using Bootstrap’s grid

- Made adventure type and price text on the cards responsive using Bootstrap’s flex containers

- Added proper spacing between the adventure’s grid using Bootstrap spacing shorthands

- Made the images to be responsive using Bootstrap’s responsive image classes

### Skills used

HTML, CSS, Bootstrap, Bootstrap Flex, Bootstrap Spacing, Bootstrap Responsive Images

## Screenshot of the Adventure Page 👇

![](/images/4.png)

>## Add the adventure details page to complete the static web page features

 ### Scope of Work

- Came up with the page’s HTML layout from scratch

- Positioned images of varying sizes and set them to toggle visibility based on screen sizes

- Created the “Sold out” side section to be fixed on the screen even on scrolling

### Skills used

HTML, CSS, Bootstrap, Bootstrap Display, CSS Positioning

## Screenshot of the Adventure Page 👇

![](/images/5.png)

![](/images/6.png)

>## Deploy the QTripStatic website

 ### Scope of Work

- Deployed the QTripStatic website to Netlify using Netlify CLI commands

### Skills used

Deployment, Netlify, Netlify CLI