Week 01 - Web Page Clone

Author: Peter C. Matthews

This repository contains my submission for the Master Coding course at CodeNation.

The website I have cloned is located at: https://vintagestory.at.

On it's surface, this website seems like a fairly simple layout. So, I've tried to focus on the details, and also add a number of minor changes for the better. Within the assignment brief, it stated that JavaScript was outside the realms of this particular project, and that this was supposed to be a static recreation of a live website.

I have tried to focus on industry best practices, when it comes to CSS. From the layout, and structure of the stylesheet file, to the order of operations within each style block. I've also been able to use pseudo elements to create secondary navigation bars.

Personal Stretch Goals:

1. Create a more consistent user experience, by consistenly using Font Awesome, across the site.

2. I have made the page responsive, down to 320px width, which is the industry recomended minimum resolution to cater for.

   • Less than 1400px wide
     • Increase the overall width of the content to 80% page width.
     • Remove search bar.
   • Less than 1200px wide
     • Increase the overall width of the content to 95% page width.
     • Remove primary navigation menu.
     • Remove secondary navigation menu.
     • Remove Account menu.
     • Add burger menu.
   • Less than 500px wide
     • Increase the width of the burger menu dropdown.
     • Adjust positions of purchase container.
     • Adjust margin of purchase button.
   • Less than 450px wide
     • Remove the Social Buttons
     • Decrease the scaling of the purchase button hover effect.

3. I have added multiple themes to the page. This is something that the original website once had, but were removed. This is my homage to the lonely "Themes" link in the footer of the original website. On Firefox, you can change theme for the page, with View -> Page Style, and then selecting the named theme. I have tried to be as forgiving as I can, when it comes to contrasting, and complimentary colours.

   • Themes:

     • Forest Floor (Default)
     • Desert Skies
     • Permafrost

   • Each theme includes:

     • A new background image for the page, showcasing actual in-game footage.
     • A colour scheme, fitting for the theme.