Funland OS Project
Project Brief
Fun Land theme park have built a new hotel to enhance their guest experience. They require a digital solution to advertise both the hotel and their theme park.
The website needs to appeal to families with young children and this needs to be reflected in the colour scheme and digital assets (images/videos) chosen for the site.
The website needs to:
1. Provide customers with help and information about the attractions and facilities at the hotel and theme park.
2. Allow customers to check availability and book a room at the hotel.
3. Allow customers to book tickets for the theme park.
4. Allow customers to log in to manage their bookings.
Assets & Documents
Design Proposal (pdf)
Funland Project Code
Use the same php page to display different attractions depending on which one the user has clicked on.
Single Attractions (php)
Attractions Images (zip)
Attractions Table SQL (sql)
Bootstrap Date Picker
How to change the format of the Bootstrap datepicker to display dd/mm/yyyy
Advanced Form Controls
How to add an extra input box to a form based on a user's selection. This form uses JavaScript to display an additional text box based on the option selected in the drop down box. This example is asking for dietary requirements - if the user selects 'yes' they are presented with an additional text box where they can add a message.
Creating a Favicon
A favicon is the small square image displayed on the left of the browser tab - it's only tiny so it needs to be as limited as possible in detail. You can use this website to upload a png image and download it as a favicon file. Store this in your website images folder and add this code to the <head> section:
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
Build Your Own Template with Bootstrap
Read the Bootstrap Documentation to learn how to customise elements on your page.
Use Google Fonts to add your own customised fonts.
Use my Font Awesome webkit (or make your own) to add custom icons to your site:
<script src="https://kit.fontawesome.com/93dc59955d.js" crossorigin="anonymous"></script>
An example of a page built with Bootstrap
Enjoy :)