Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pintu544/frontend-30-day-challenge

The TravelBae is a web application designed to provide users with information about various travel destinations, allowing them to explore details about each destination, view a landing page with an overview, and access a report page for insights and feedback.
https://github.com/pintu544/frontend-30-day-challenge

bootstrap html-css-javascript

Last synced: 6 days ago
JSON representation

The TravelBae is a web application designed to provide users with information about various travel destinations, allowing them to explore details about each destination, view a landing page with an overview, and access a report page for insights and feedback.

Awesome Lists containing this project

README 

        



  

  

  



  


Overview


The TravelBae is a web application designed to provide users with information about various travel destinations, allowing them to explore details about each destination, view a landing page with an overview, and access a report page for insights and feedback.


Live Link for Reference


https://paper-i–tanaypratap.repl.co/


Features


    

  1. Landing Page
    

    1.1 Header
    

    Title: “TravelBae”
    

    Tagline: “Explore Exciting Destinations with Us!”
    

    1.2 Call-to-Action
    

    Button: “View Destinations”
    

    Functionality: Redirects to the Destinations Page.
    2. 

  2. Destinations Page
    

    2.1 Header
    

    Title: “Explore Our Destinations”
    

    2.2 Destination Cards
    

    Card Structure: Each card includes an image, destination name, brief description, and a “View Details” button.
    

    Functionality: Clicking on “View Details” redirects to the specific destination page.
    

    2.3 Destinations
    

    Number of Destinations: 4 (Italy, Tokyo, Bali, Rome)
    3. 

  3. Specific Destination Pages (Italy, Tokyo, Bali, Rome)
    

    3.1 Header
    

    Title: [Destination Name]
    

    3.2 Content
    

    Information: Description, highlights, and attractions of the specific destination.
    

    3.3 Navigation
    

    Navbar: Home, Destinations, Report
    4. 

  4. Report Page
    

    4.1 Header
    

    Title: “Travel Report”
    

    Subtitle: “Explore Insights and Statistics”
    

    4.2 Destinations Overview
    

    Summary Statistics: Total destinations, most popular destination, total visitors, etc.
    

    4.3 Customer Feedback
    

    Testimonials: Display customer feedback and testimonials.
    5. 

  5. Navigation
    

    5.1 Navbar
    

    Pages: Home, Destinations, Report
    

    Links: Proper navigation links to each page.
    6. 

  6. Footer
    

    6.1 Copyright
    

    Text: “© [Year] TravelBae. All rights reserved.”
    

    Technical Specifications
    

    HTML
    

    Bootstrap for responsive design.
    

    Conclusion
    

    The TravelBae PRD outlines the key features and specifications for the development of a user-friendly platform that provides information about various travel destinations. By incorporating a landing page, destination pages, and a report page, the application aims to cater to the needs of both potential travellers and administrators.
    7. 



Style Guide


Landing Page


Images


Favicon: https://placehold.co/16x16/EFEFEFF/grey?text=TB


Italy: https://placehold.co/400x300/EFEFEFF/grey?text=Italy


Tokyo: https://placehold.co/400x300/EFEFEFF/grey?text=Tokyo


Bali: https://placehold.co/400x300/EFEFEFF/grey?text=Bali


Colors:


Primary Background Color: #343a40 (Dark gray for the navbar and footer).


Primary Text Color: #ffffff (White for text on dark backgrounds).


Secondary Background Color: #f8f9fa (Light gray for card backgrounds).


Button Color: #007bff (Primary blue for buttons).


Button Hover Color: #0056b3 (Slightly darker blue on button hover).


Fonts:


Heading Font: Use a sans-serif font such as ‘Roboto’ or ‘Helvetica’.


Body Text Font: Use a legible font like ‘Roboto’, ‘Arial’, or ‘Helvetica’.


Navbar:


Navbar background color: Dark gray (#343a40).


Navbar text color: White (#ffffff).


Active Navbar Item: Bold text.


Navbar Toggler Icon: White (#ffffff).


Footer:


Footer background color: Dark gray (#343a40).


Footer text color: White (`#ffffff``).


General Guidelines:


Ensure responsive design for different screen sizes using Bootstrap classes.


Use consistent padding and margins for elements to maintain visual harmony.


Destinations Page


Italy


Tokyo


Bali


Rome


Report Page