Welcome to Iceland

(Developer: Anzela Siniavskaja)

The purpose of the site is to provide information about Iceland. The site provides information and images of the most popular tourist locations in Iceland.

Users of this website can find out more about the Iceland, short concept about most popular places for tourists, a gallery of of a beautiful natur, fauna and places, and a contact form for requesting more information. The website was created using the responsive-first concept and is responsive on all screen sizes.

The repository can be found at this Link

Overview

This website is designed as a four page website with four sections Home, About, Gallery, and Contact. All animations are fully responsive for all media screens.

User Experience

Target audience

• Accessibility
• Good presentation and a visually appealing design regardless of screen size
• Simple Navigation

---

Design

Colour

• colors.co was used to generate colors.
• Deep and earthy colors was chosen for the website to show the nature beauty of the country.

Fonts

• Poppins: sans-serif

Used Technologies

Languages

• HTML Hyper Text Markup Language
• CSS Cascading Style Sheets

Features

Existing Features

• Navigation Bar

  • The Navigation bar has a fixed position at the top of each page so that users have access to the menu at all times when scrolling through the content in all pages.

  • The navigation bar is fully responsive on all four pages.

  • The font color is in contrast with the navigation background color.

  • The navigation bar is at the top of the page, and it is fixed to the top. The logo is in the left-hand corner of the navigation.

  • On small screens navigation bar mooving under the icon.

    

  • The navigation bar links to each of the four pages of the site: Home, About, Gallery and Contact Us.

• Footer

  • The footer is visible on all pages so that address and social media links are always available to the user.

  • Contains active links as navbar so user can easily reach each page from footer asweal.

  • The social media icons link to the four relevant social media accounts which placed on the center in the footer.

    

• Home Page

  • As a backroung I set a mp4 format video of Icelandic Aurora night.

    

  • Home Page is a main navigation page, it contains linked navigation bar, footer and at the center fo home page user can find a Welcome greetings an a active "Explore" button which also can provide user to an "About" page.

  • Explore button changing its color when user pointing coursore on it as it shows active button.

• About Page

  • Its an main info page which contains main information about the Iceland.

  • Each topic is separated into seperate section, also have its own topic name, picture, small part of text and button which is linked with Wikipedia page for more info.

  • All topics set in two columns and four rows on a big screen, as screen size decreasing rows number decreasing and column number increasing.

  • Each section also have a hover effect you can see on a picture below "Blue Lagoon" section.

    

• Gallery

  • The Gallery page contains an image gallery section which shows images relevant to the site.

  • All images on big screen shown in three columns on big screens, started from 425px screens shown in a single column.

  • All images also have a hover effect as elements on "About" page, you can see on a picture below fox image.

    

• Contact Us

  • For "Contact Us" page I choose as a background a Lava picture so express the thoughts what is says on a "Home" page "Land of Ice and Fire".

  • Contact Us page contains contact form in a center od the page.

  • Contact form contains FULL NAME, EMAIL, MOBILE NUMBER and MESSAGE fiels, with button under.

    

Future addings

• Road Map

  • One more page can be added with travel roadmap

• Navigation Bar

  • A hamburger menu could be implemented to save space on smaller screens.

Testing

• In terms of accessibility, the website and the code itself have been carefully checked for compatibility with screen readers and the color palette used to ensure good visibility of all elements.

Validation

• HTML Validator was run at several points during the project and small syntax errors identified were fixed. At the final stage no errors or warnings were found

• CSS Validator was run several times during the project and picked up small syntax errors which were corrected. At the time of submission the css code successfully passed the validator with no errors.

Responsiveness

• The website was tested on on such browsers as Chrome, Edge and Safari with no problems found.
• The website was tested on numerous sized screens including Mobile phone, Ipad, Laptop and was found to respond as expected to all sizes. Chrome development tools was used throughout the design process to check responsiveness and breakpoints.

Ligthouse

Bugs

• There are no bugs detected.

  

Deployment

The site was deployed to Github pages using the following steps:

• Log in to GitHub

• Navigate to Angela-Sin in the list of repositories

• In the GitHub repository, navigate to the Settings tab

• In Settings scroll down to GitHub pages which opens in a new page.

• From the source section drop-down menu, select the Master Branch

• Once the master branch has been selected, the page is automatically refreshed and a display indicates the successful deployment and the link to the address.

  The website is hosted on GitHub Pages and can be accessed via this Link

Version Control

• The sourse of code is stored in the GitHub page.
• The repository contains a single branch, and all code has been submitted and commited as it was written, to ensure a good understanding. The repository can be found at this Link, and can be downloaded or cloned for further development.

Commands

• git add . - to add all changes to the staging state.
• git commit -m "commit message" - to commit changes
• git push - to push all commits to repository on GitHub.

Credits

Media

• Video for Home Page backround was taken from pixabay.com
• Images for Info Page, Gallery and Contact page was tooken from pixabay.com pexels.com

Text content

• Text content was taken from google.com and Wikipedia.

HTML CSS code

• Code was created using information provided by Codeinstitute, W3school and youtube where I took the idea for a video backround for "Home" page.

Tools

• AmIResponsive was used to take the screenshot with different devices presented at the top of this document.
• colors.co was used to generate colors.
• Freeformater used to format css code.
• pagespeed.web used to chech page accesability.

Acknowledgements

• A big thank you for my mentor Medale Oluwafemi for helping me understand the requirements and guiding me through the realization of this project!
• The the Code Institute tutor support team for helping me with the correct guidance.