Overview 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
QTrip Landing page
QTrip Adventures page
QTrip Adventure details page
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
Wireframe used for building QTrip landing page QTrip Landing page Responsive navigation bar (Top: Expanded, Bottom: Collapsed/Expanded)
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
Adventures page on varying screen sizes
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
Adventure details page wireframe
Adventure details page on different screen sizes
Deploy the QTripStatic website Scope of work Deployed the QTripStatic website to Netlify using Netlify CLI commands Skills used Deployment, Netlify, Netlify CLI