Crio Portfolio

Back

QTripStatic

A static travel website

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

During the course of this Micro-Experience, the developer:

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

  • Utilized Bootstrap extensively for responsive design

  • Deployed the website to Netlify

image alt text

QTrip Landing page

image alt text

QTrip Adventures page

image alt text

QTrip Adventure details page

QTripStatic Modules

1

Create layout for the landing page and make it responsive

Scope of work:

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

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

  3. Implemented the cities grid section by using Bootstrap’s grid

  4. 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

Image(s):

image alt text

Wireframe used for building QTrip landing page

image alt text

QTrip Landing page

image alt text

Responsive navigation bar (Top: Expanded, Bottom: Collapsed/Expanded)
2

Implement the adventures page

Scope of work:

  1. Created a responsive grid of adventures using Bootstrap’s grid

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

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

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

Skills used:

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

Image(s):

image alt text

Adventures page on varying screen sizes
3

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

Scope of work:

  1. Came up with the page’s HTML layout from scratch

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

  3. Created the "Sold out" side section to be fixed on the screen even on scrolling

Skills used:

HTML, CSS, Bootstrap, Bootstrap Display, CSS Positioning

Image(s):

image alt text

Adventure details page wireframe

image alt text

Adventure details page on different screen sizes
4

Deploy the QTripStatic website

Scope of work:

  1. Deployed the QTripStatic website to Netlify using Netlify CLI commands

Skills used:

Deployment, Netlify, Netlify CLI