ABOUT THE PROJECT
Project Title
HP Gateway to paradise: Love the beauty of the Philippines.
Purpose and Objectives of the Website
Purpose:
A travel and tour business to the Philippines aims to promote the country's rich cultural
heritage, breathtaking landscapes, and world-class tourist destinations. It provides
convenient and well-organized travel experiences, ensuring visitors can explore top
attractions like Palawan, Boracay, and Banaue Rice Terraces hassle-free. The business
also supports local communities by creating job opportunities and boosting the economy
through tourism. Additionally, it helps travelers discover unique experiences, from island
hopping and diving to historical and culinary tours. Ultimately, the goal is to make every
visitor’s journey memorable while showcasing the beauty and hospitality of the
Philippines.
Objectives:
1. Promote Philippine Tourism – Showcase the country’s stunning destinations,
rich culture, and unique experiences to attract both local and international
travelers.
2. Provide Hassle-Free Travel Services – Offer well-organized tour packages,
accommodations, and transportation to ensure a smooth and enjoyable travel
experience.
3. Support Local Communities – Boost the local economy by collaborating with
small businesses, tour guides, and artisans, creating jobs and sustainable tourism
opportunities.
4. Ensure Customer Satisfaction & Safety – Deliver high-quality, safe, and
memorable travel experiences that meet or exceed customer expectations.
Background Information of the Topic
The travel and tour business in the Philippines plays a vital role in the country’s
economy, attracting millions of local and international tourists each year. With its diverse
landscapes, from pristine beaches to historical landmarks, the industry offers curated
travel experiences, including island hopping, eco-tourism, and cultural tours. This sector
1
continues to grow, driven by government initiatives, improved infrastructure, and the
increasing demand for unique and hassle-free travel experiences.
Project Schedule
Task/Phase Assigned To Start End Duratio Dependencies
Date Date n
Phase 1: Initiation 27th 28th 4 days None
Jan Jan
Think of Topic Hector Pangan 27th Jan 27th 2 hours None
Jan
Searching of Definitions Hector Pangan 27th Jan 27th 3 hours Think of Topic
Jan
Define Goals Hector Pangan 27th Jan 28th 2 hours Search Definitions
Jan &
30 mins
Phase 2: Planning & 28th 1st 5 days Initiation Completed
Design Jan Feb
Making the Code Hector Pangan 28th Jan 29th 2 days Identifying Errors
Jan
Designing Website Hector Pangan 29th Jan 29th 1 day Make Code
Jan
Create Wireframes Hector Pangan 30th Jan 30th 1 day Made and Designed
Jan Website
Create Schedule Hector Pangan 31st Jan 31st 6 hours Made and Designed
Jan Website
Phase 3: Execution 31st 1st 2 days Planning & Design
Jan Feb Completed
Monitor Progress Hector Pangan 31st Jan 1st Feb 2 hours Planning & Design
Completed
Functional Test Hector Pangan 31st 1st Feb 2 hours Monitor Progress
Feb
Bug Fixing Hector Pangan 31st 1st Feb 3 hours Functional Test
Feb
Testing and Validation Hector Pangan 1st Feb 2nd 1 day Bug Fixing
Feb
2
Phase 4: Evaluation 2nd 2nd 1 day Execution Completed
Feb Feb
Review Code Hector Pangan 2nd Feb 2nd 30 mins Execution and Code
Feb Completed
Gather Feedback Hector Pangan 2nd Feb 2nd 1 hour Review Code
Feb
Evaluate Progress Hector Pangan 2nd Feb 2nd 2 hours Gather Feedback
Feb
Create Documentation Hector Pangan 2nd Feb 2nd 1 hour & Complete and made
Feb 45 mins code
Submit and Upload Hector Pangan 2nd Feb 2nd 50 mins Code, Wireframe,
Feb Schedule,
Documentation all
complete.
Website Wireframes
Home Page
3
Website Wireframes
Information Page
4
Website Wireframes
Developer Page
5
Website Wireframes
Places Page
6
Website Wireframes
Contact Page
7
Website User Interface
Homepage
8
Website User Interface
Information Page
9
Website User Interface
Developers Page
10
Website User Interface
Places Page
11
Website User Interface
Contact Page
References
12
References
1. https://www.google.com/imgres?q=philippines&imgurl=https%3A%2F
%2Fi.natgeofe.com%2Fn%2F04505c35-858b-4e95-a1a7-d72e5418b7fc%2Fsteep-
karst-cliffs-of-el-nido-in-palawan.jpg%3Fw%3D1534%26h%3D768&imgrefurl=https
%3A%2F%2Fwww.nationalgeographic.com%2Ftravel%2Farticle%2Fpartner-
content-know-before-you-go-the-
philippines&docid=K4szPBboXyZQeM&tbnid=rY4q1O_7QFMp8M&vet=12ahUKEwisj
tGW-
KSLAxWL8DQHHbCQK6wQM3oECFIQAA.i&w=1534&h=767&hcb=2&ved=2ahUKEw
isjtGW-KSLAxWL8DQHHbCQK6wQM3oECFIQAA
2. https://www.britannica.com/topic/history-of-Philippines
3. https://www.google.com/imgres?q=palawan&imgurl=https%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent
%2Fv1%2F6393c8d5c1431c1facf105fa%2F1670629626926-VA7BYZCPRL6IOBEW18IZ%2FCebu%2BTo
%2BPalawan%2B1.png&imgrefurl=https%3A%2F%2Fwww.wanderandsoul.com%2Finspiration%2Fcebu-to-
palawan&docid=aFjXpYGiBE07EM&tbnid=Q13UpPXm3RC-DM&vet=12ahUKEwjMm5jI-
KSLAxWC3jQHHdkeOr8QM3oECHsQAA..i&w=1200&h=628&hcb=2&ved=2ahUKEwjMm5jI-
KSLAxWC3jQHHdkeOr8QM3oECHsQAA
4. https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.rappler.com%2Flife-and-style%2Ftravel
%2Fboracay-included-world-greatest-places-2022-time-magazine
%2F&psig=AOvVaw3s6mi3huQSejL4Mex2EYN0&ust=1738584154162000&source=images&cd=vfe&opi=899784
49&ved=0CBQQjRxqFwoTCIi1x-L4pIsDFQAAAAAdAAAAABAE
5. https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.travel-palawan.com%2Fbohol-travel-guide
%2F&psig=AOvVaw2VxO3xbR7ptSC54et5VGYJ&ust=1738584177326000&source=images&cd=vfe&opi=899784
49&ved=0CBQQjRxqFwoTCICruvH4pIsDFQAAAAAdAAAAABBB
6. https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.behance.net%2Fgallery
%2F17598693%2FBanaue-Rice-
TerracesPhilippines&psig=AOvVaw3l7XbEmfU4lv4lUQyBfnwa&ust=1738584255886000&source=images&cd=vfe
&opi=89978449&ved=0CBQQjRxqFwoTCMilzpL5pIsDFQAAAAAdAAAAABBK
7. https://www.google.com/imgres?q=siargao%20landscape%20picture&imgurl=https%3A%2F%2Ffestivepinoy.com
%2Fwp-content%2Fuploads%2F2024%2F05%2Ftropical_paradise_in_asia.jpg&imgrefurl=https%3A%2F
%2Ffestivepinoy.com%2Fsiargao-island-philippines%2F&docid=8mJRZlg8edWD7M&tbnid=BUc9cw6KG0Ys-
M&vet=12ahUKEwiSiILM-
aSLAxWRgq8BHTrqEaIQM3oECFcQAA..i&w=1006&h=575&hcb=2&ved=2ahUKEwiSiILM-
aSLAxWRgq8BHTrqEaIQM3oECFcQAA
8. https://www.google.com/imgres?q=vigan%20landscape%20picture&imgurl=https%3A%2F
%2Fimages.squarespace-cdn.com%2Fcontent%2Fv1%2F5a87961cbe42d637c54cab93%2F1552229691786-
1M8KURNE27AO4YVQZDRO%2Fvigan-philippines-city-guide%252B%252Bthings-to-do-see&imgrefurl=https
%3A%2F%2Fwww.laidbacktrip.com%2Fposts%2Fwhat-to-do-vigan-ilocos-sur-
philippines&docid=Uoi3uo678YqbAM&tbnid=x1ZOHRPmjRsWtM&vet=12ahUKEwir0NTc-
aSLAxXudfUHHYMcFBwQM3oECFYQAA..i&w=1000&h=667&hcb=2&ved=2ahUKEwir0NTc-
aSLAxXudfUHHYMcFBwQM3oECFYQAA
9. https://www.w3schools.com/bootstrap5/bootstrap_containers.php
10. https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
11. https://www.w3schools.com/bootstrap5/bootstrap_typography.php
12. https://www.w3schools.com/bootstrap5/bootstrap_images.php
13. https://www.w3schools.com/bootstrap5/bootstrap_jumbotron.php
14. https://www.w3schools.com/bootstrap5/bootstrap_buttons.php
15. https://www.w3schools.com/bootstrap5/bootstrap_cards.php
16. https://www.w3schools.com/bootstrap5/bootstrap_navs.php
13
17. https://www.w3schools.com/bootstrap5/bootstrap_navbar.php
18. https://www.w3schools.com/bootstrap5/bootstrap_carousel.php
19. https://www.w3schools.com/bootstrap5/bootstrap_modal.php
20. https://www.w3schools.com/bootstrap5/bootstrap_forms.php
21. https://www.w3schools.com/bootstrap5/bootstrap_colors.php
SAMPLE CODES
<html>
<body class="index-page">
<header id="header" class="header d-flex align-items-center light-background sticky-top">
<div class="container-fluid position-relative d-flex align-items-center justify-content-
between">
<a href="index.html" class="logo d-flex align-items-center me-auto me-xl-0">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="sitename">Country</h1>
</a>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="information.html">Information</a></li>
<li><a href="places.html">Places</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
<div class="header-social-links">
<a href="https://www.facebook.com/panganhector17" class="facebook"><i class="bi bi-
facebook"></i></a>
<a href="https://www.instagram.com/hctrpngn_/" class="instagram"><i class="bi bi-
instagram"></i></a>
</div>
</div>
</header>
<main class="main">
<!-- Hero Section -->
14
<section id="hero" class="hero section">
<img src="assets/img/ph.avif" alt="" data-aos="fade-in">
<div class="container text-center" data-aos="zoom-out" data-aos-delay="100">
<div class="row justify-content-center">
<div class="col-lg-8">
<h2 class="text-white">Philippines</h2>
<p class="text-white">Country in Asia</p>
<a href="information.html" class="btn-get-started text-white">About PH</a>
</div>
</div>
</div>
</section><!-- /Hero Section -->
</main>
<footer id="footer" class="footer light-background">
<div class="container">
<div class="copyright text-center ">
<p>© <span>Copyright</span> <strong class="px-1 sitename">Hector</strong>
<span>All Rights Reserved<br></span></p>
</div>
<div class="social-links d-flex justify-content-center">
<a href="https://www.facebook.com/panganhector17"><i class="bi
bi-facebook"></i></a>
<a href="https://www.instagram.com/hctrpngn_/"><i class="bi bi-instagram"></i></a>
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you've purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
</div>
</div>
</footer>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-
center"><i class="bi bi-arrow-up-short"></i></a>
<!--Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<!-- Main JS File -->
15
<script src="assets/js/main.js"></script>
</body>
</html>
16
