A static travel website
Back
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
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
Image(s):
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
Image(s):
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
Image(s):
Scope of work:
Skills used:
Deployment, Netlify, Netlify CLI