https://github.com/pktcodes/backroads-tours-html-css-project
Backroads Tours Project using HTML and CSS - Flexbox
https://github.com/pktcodes/backroads-tours-html-css-project
css-flexbox css3 font-awesome git google-fonts html5 javascript pexels
Last synced: 3 months ago
JSON representation
Backroads Tours Project using HTML and CSS - Flexbox
- Host: GitHub
- URL: https://github.com/pktcodes/backroads-tours-html-css-project
- Owner: pktcodes
- Created: 2022-12-12T05:34:59.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-24T19:12:25.000Z (over 3 years ago)
- Last Synced: 2025-06-04T23:58:58.328Z (about 1 year ago)
- Topics: css-flexbox, css3, font-awesome, git, google-fonts, html5, javascript, pexels
- Language: SCSS
- Homepage: https://html-css-backroads-tours-prod.netlify.app/
- Size: 4.53 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Backroads | Tours Company 🏖️
> PROD [Live] : https://html-css-backroads-tours-prod.netlify.app/
#### Backroads Tours consists of a straightforward user interface where there is a
- List of sections i.e. Header, About, Services, Featured, Contact, Gallery, Footer.
- **Header** is the hero which has the **Navbar**, headings, background image and an **`Explore Tours`** on click navigates to *Featured Tours* section.
- On screens >992px, the Navbar will have a **Logo**, links to navigate across the sections of the page, and *icons* to the social media managed by the company.
- On screens <992px, the Navbar will have *logo*, **NavButton** with toggle functionality which upon the click opens and closes **Navigation Pane** that has the links to navigate across the sections of the page.
- **About** will have an image and some information about the company along with **`Read More`**.
- **Services** has articles with some information that tells about the benefits provided by the company for the tour.
- **Featured** has been implemented in cards that show some of the featured tours along with an **`All Tours`**.
- **Contact** will have some info about the latest updates and a signup *form* to fill in the email along with **`Submit`**.
- **Gallery** showcases the images of the tourist places along with a *Search* icon on the hover of each image.
- **Footer** has links to navigate across the sections of the page, icons of social media operated by the company, and copyright information.
- **Responsive design** has been implemented across all the sections of the page using *CSS Flexbox* with columns layout.
- Icons are implemented using by **Font Awesome**, images from **Pexels** and fonts using **Google Fonts**.
- To run the project locally, clone the repo, and open the `index.html` in the browser.
#### Languages
HTML5, CSS3 - Flexbox, JavaScript
#### Deployment / Hosting
Netlify
---
*Note: I have developed this project ~ [3] as part of HTML & CSS Tutorial and Projects Course(Flexbox&Grid) taught by John Smilga.*