My Perfect Holiday & Safari is a company that prides itself in creating the best holiday experience one can imagine in and around Cape Town, South Africa. The agents you will be working with is professional and has travelled far and wide, and knows exactly what will suit your budget and travel needs.
My Perfect Holiday and Safari is a website idea for a Travel Agency (My Perfect Holiday & Safari). The purpose of this website is to advertise the company, My Perfect Holiday & Safari and to showcase the possible adventures and offers that the client can experience by using the services of this Travel Agency.
The website design is inspired by the safari and all its beauty.
The Webiste can be viewed live by clicking on this link!
Back To Top
Back To Table Of Contents
My Perfect Holiday & Safari website is designed with the intent for the user to navigate and use the website with ease. The Website is easily navigable and has large text that will make it simple to read.
The main Goal of My Perfect Holiday & Safari is to advertise the Travel Agency's services and the different available Activities, the Website has an African/Safari feel to it. This shows the customer that the Agency is based in South Africa and can offer the best deals and experiences.
- The user will be able to navigate easily throughout the site and understand all the contents that is provided.
- The user will find enough information about the Travel Agency and will also be able to contact them through a Contact Us Form that they can fill in or the customer can contact the Travel Agency through the provided Contact Details.
- The user will also be able to view the different Activities that are available for them to include in their perfect holiday bundle.
- The user will also be able to access the website from any device with access to a browser, i.e Smartphone, Tablet and/or a Computer and the website will be responsive to said device.
The Main Color Scheme that was chosen for this website was based on the typical color that would come to mind if one was to think of Africa or Safari. When designing the website, the main color #724A1B and #47583E came to mind. I used the website Coolor to generate the complementary colors that will fit hand-in-hand with the main colors that were chosen.
The Main font that is used for this website is Roboto and the secondary font is Oswald. The font, sans-serif, is used as a back-up font for in case the user's browser does not support the main and secondary fonts. The website Google Fonts was used to select and import the fonts.
The website Font Awesome was used for the icons that can be seen in the footer and on the Contact Us page.
The Application Balsamiq was used to create the basic idea and layout for the My Perfect Holiday & Safari website as suggested by code institute.
Simple Site Map
This Sitemap was designed to get the basic layout and structure of the website.
Home Page
The Home Page is a simple page with information about the Travel Agency and what they can offer. In The original design, The About Page was included as an extra html page. It was suggested by my Mentor that it might be a better and cleaner idea to combine the Home and About Us page, I agreed to that suggestion and added the About Us Information below the Home Page Information.
Activities Page
On the Activities Page, there are 5 cards that are presented and will flip around and reveal the related information when the card is clicked/hovered over.
In the original design, the Hero image was displayed at the top of the Activities and Contact Us pages. My Mentor asked if the hero image was needed on the other pages as well and challenged me to find a way to show the relation to the pages without a hero image on every single page. I came to the conclusion that having a shadow below the navigation bar will show the relation between the pages without the need of the hero image on each page.
Contact Us Page
On the Contact Us Page, there are two panels, a left and a right panel. The left panel displays the Contact Form and the Right Panel Displays the Contact Information.
Back To Top
Back To Table Of Contents
Navigation Bar - All Pages
When the user hover over the 3 different links, the links will grow. When the user click on the link, the page will change to the corresponding page and the link will change color to indicate that said page is currently active.navbar-vid.mp4
Back To Top Button - Home Page
This button will appear when the user scroll past a certain point. When the user click on this button, they will be taking back to the top of the home page.back-to-top-button.mp4
Flip Cards - Activities Page
When the user hover/click on the card, the card will flip reavealing the corresponding details.activities-card-flip.mp4
Interactive Map - Contact Page
The user will be able to interact with the map (Just like how one would be able to interact with google maps) on the contact us page.contact-iframe-map.mp4
Footer - All Pages
The footer has a hover effect on the social links and when a user hover over the links, it will grow, rotate and change color.footer-hover-effect.mp4
Back To Top
Back To Table Of Contents
-
HTML5
Used for providing the core structure of the website pages. -
CSS3
Used for styling the HTML documents -
JavaScript
Used to integrate specific features and create dynamic and interactive web content.
-
Google Fonts
This Website was used to help choose the perfect fonts that will work together and to import the fonts onto the website. -
Font Awesome
This website helped with using icons to give the website a betting user experience. -
GitPod
This website was used as a developers platform for writing code, committing the code and to push it to Github. -
Github
This website is used to store code and make it possible for developers to commit and push code. This website also allows the Developer to share code with other developers. -
Balsamiq
This application was suggested by Code Institute to use for planning and creating a wireframe for the website. -
Reverso
I used this website to help with the spelling and grammer. -
Unsplash
All of the Images used on the website is from this website. -
Bootstrap
This website is a well known and used website by developers to help with coding and styling. -
Box Shadow Generator
I used this website to help with creating a box shadow with certain specifications. -
Maps Generator
When creating the Contact Details, I used this website to help generate the location on a map and to create a iframe so the user can interact with the map. -
Kruger Shalati Website
The details for the Kruger Shalati Hotel was found under their About Us page on this website. -
Color Picker
This website helped make it easier choosing complementary color scheme for the website. -
CSS Gradient
Used this website to generate a gradient color into code that can be used in HTML5/CSS3. -
CorelDraw App
This App was used to reduse the size of the images.
Back To Top
Back To Table Of Contents
I used Responsive Design Checker to test if my website is responsive on all devices. Chrome DevTools was also used to check for responsiveness
To validate the HTML on the website, I used W3C Validator.
Index Page Validator
Activities Page Validator
Contact Us Page Validator
To validate the CSS code one the website, I used Jigsaw Validator. The CSS Page was tested and there were no errors
Styles Page Validator
The Lighthouse feature on Chrome DevTools was used to test the Accessibility of the three pages:
Home Page
Activities Page
Contact Page
Back To Top
Back To Table Of Contents
GitPod Was used for the development of the website.
GitHub was used to Host and Deploy the the website.
The following steps was taking to Deploy the website via Github:
- Creating the Repository
- Log into Github.
- Locate the template that was provided by Code Institute. Template
- Click on the "Use This Template" on the top of the Repository.
- Enter the name that was chosen for the website.
- Clicked on the "Create repository from Template" button.
- Deploying the Website.
- In the GitHub repository, click on the "Settings" Tab.
- Navigate to the "Pages" subsection from the left hand pannel.
- Select the "main" branch and select the "Save" button.
- Now a link has been generated for the Live Website.
Back To Top
Back To Table Of Contents
When creating the README File, multiple examples was used from other students to help with creating this README file.
CodePen is a social development environment for front-end designers and developers. Fellow Front-End Developers can use this website to help with certain code and features.
The following code were used as inspiration with some of the features on the website:
Card Flip Feature
Back to top button on home page
Unsplash
All of the Images used on the website is from the website, Unsplash.
Back To Top
Back To Table Of Contents
Navigation Bar
The Navigation bar is featured across all three pages and allows the user to navigate around the website using the Home, Activities and Contact Us links provided. The Navigation bar is identical on all three pages and this will allow for the user to navigate around with ease. The current page that is selected will be highlighted so the user will know on what page they currently are on.
Landing Page
The landing page includes a hero image that is the first image the user will see when the website opens. On the image is a short text that briefly tells the user what to expect about the website. AS the user scrolls down, they will see more information about the Travel Agency and what to expect about the website.
Activities Page
On the Activities page, the user will be able to see what kind of activities are available to help build the perfect holiday. There are about 5 flip cards and each one will have a picture on the front of the card and when the user hovers over the card, it will flip around and reveal items related to the type of activities.
Contact Us Page
When the user go to the Contact Us Page, they will have two types of contact options. On the Left side of the page is a contact us Form that the user will be able to fill in and it will send the message to the Travel Agency. On The Right hand side of the website, there will be contact details that the user can use to contact the Travel Agency self. The map on the Contact Details shows the exact location and the map is interactive, and allows the user to zoom in, out and move it all about.
Footer
The Footer has a simple design that shows the social tags. Each tag links to the relative social media page and all links will open in a new tab and keep the current website open as well, this will make it easy for the user to navigate and the user would not have to worry about navigating back to the website. There is also an on hover effect on the social media links, it will change color, rotate and grow bigger.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent