View website in Github pages

A genuine website for my friends Hofra Bed & Breakfast. The website features a welcome page, information on the rooms, the barn, pricing, intresting destinations and inviting images.

This website will be my first and my friends gave me the opportunity to code a website for their first business. There will be changes to this website in the future along with my learning progress. I'm very excited and nervous at the same time.

• Provide information about the branches
• Provide intresting destination near by, Dellendistrict shall be the final destination
• Provide warm and inviting images

• Guest shall feel welcomed
• Geust shall find pinpoint information on each branch
• Easy to find contact information

• Get companies to have their conference at Hofra Bed & Breakfast
• A feature for a second, much smaller barn will be added
• The income from the B&B shall cover one persons yearly income

• Wants to stay without any distractions
• Wants to stay for a longer time not just one night

• Intresting place to stay
• A different place to celebrate their important day in life
• Finding activities during their stay

• Welcome
• The rooms
• The barn
• Dellendistrict
• Contact

Each page features the buisness logo, placed above all context, a responsive navigation bar and a footer. The footer features an address linking to Google maps, telephone number and e-mail with a click to call function and social media icons linking to B&B's 2 social media pages.

Each page features its own welcome hero image.

The page features a hero image of the inside of the courtyard, a warm welcome to Hofra Bed & Breakfast, hero images of the 3 main features with a link to each page and reviews from guests.

The page features a hero image of the suite, a description of the house, service and a call to action button which guides the visitor to the contact page.

The page features a hero image showing styled tables ready for the festivity, a description of the barn, packages and prices, a gallery and a call to action button which guides the potential guest to the contact page.

The page features a hero image of a destination to visit, the aim of the page and 3 section. The 3 sections are diveded into Events, Wintertime and Hiking.

The page features a hero image birds-eye view of the farm, contact informations, a map linking to Google maps and a contact form with a send button

Logo - Exists in the header and the footer of every page and allows the potential guest to easily navigate back to the Welcome page.

Navigation Bar - Exists on every page and allows the potential guest to navigate thru the website's pages.

Hero Image – Exists on every page and allows the potential guest to get a feeling for their stay.

Social Icons - Exist on every page and allows the potential guest to access the social platforms.

Call to Action Button - Exist on The rooms and The barn pages and guides the potential guest to the contact page.

Back to top button will be appearing on the bottom of each page for smaller devices.

Welcome page – Allows the potential guest to view what Hofra Bed & Breakfast offers.

The rooms page – Allows the potential guest to view the rooms and services.

The Barn page – Allows the potential guest to view the different areas, packages and pricing.

Dellendistirct – Allows the potential guest to plan their activities and gives them a heads up on interesting events nearby.

Contact Form - Allows potential guest to get in contact.

Slide show of the hero image on each page. – additional Javascrip knowledge needed. Fonts Hofra Bed & Breakfast wants to use different fonts, those were not available at this time but are similar to the current fonts. Second barn a feature for the much smaller barn will be added to The barn page. The smaller barn was not part of the original wireframe. This barn could be used for smaller gatherings. Modals feature images for The rooms and Dellendistrict shall be shown in a modal with more information, or with hidden information due to size of the screen.

• This project uses HTML and CSS programming languages.
• BootstrapCDN
  • This project uses Bootstrap 4.2.1 to simplify the structure and the overall responsive design of the website.
  • This project uses Boootstrap JS for the responsive navbar.
  • This project uses Bootstrap CDN for FontAwsome icons.
• Google Fonts
  • This project uses Google Fonts to style the website fonts.
• Pinetools
  • This project uses Pintools an Online Image Color Picker to look for colour which match the theme of the PowerPoint presentation provided by Jenny Gustafsson.
• TinyPNG
  • This project uses TinyPNG to reduce the size of the images used on this website.
• CompressJPEG
  • This project uses CompressJPEG to reduce the size of the images used on this website.

• The barn 2 packages with information and pricing were added

• Problem solving information can be found in seperate problemsolving.md file.

• Testing information can be found in seperate testing.md file.

1. Log into GitHub.
2. From the list of repositories select haselnuts/Hofr-Bed-Breakfast
3. From the menu items below the navigation bar, select Settings
4. Scoll down to GitHub pages
5. Under Source click the dropdown menu labelled None and select Master
6. Select Save
7. Reload the page
8. Follow the link after Your site is published at

The original text was in swedish and provided by Jenny Gustafsson. Translation into english was done by the developer.

Most images used on this website were provided by Jenny Gustafsson and Per Brodén. Additional images for The barn were provided by Peter Larsson. Additional images for Dellendistrict Events were provided by Eva Larsson Södergren. Image #4 for Dellendistrict Wintertime was provided by Fredrik Berg. The hero image for the Dellendistrict page was provided by Nadine Schmidt, the developer of this website.

README.md

• Structure taken from AJ Graves repository: portrait-artist

To all at

• Slack
• W3schools.com
• Stackflow

Gallery posistioning

• https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp