Me and my friends go yearly to a music festival that is called Rock Werchter. Due to the corona pandemic that festival was cancelled. The strict lockdown that we had became more lenient in June so my friend that it would be fun to have a little Rock Werchter party in his back garden. That gave me the idea to make a “fake” website for that party and give it a look and feel of the official website https://www.rockwerchter.be/nl/ . It is by no means a copy but more a parody of the website with pictures of me and my friends from earlier editions of de festival.

If you have ever seen the official Rock Werchter site the frontpage should seem familiar. Also navigating the site should feel the same and there are a lot of pictures(atmosphere impressions). Since the site is a parody and for a good laugh there is no real information on the website. Also the color scheme is not a copy since the color scheme of the official website changes from time to time.

You can find the wireframes that I used for this project *****. The real wireframe was of course the official RW2020 website(now the RW2021 website is live!). The header and footer are visually copied and the section is more or less my own interpretation. Features In this project I added the following features:

• A navigation menu with a linear-gradient which is on top of the banner and on smaller screens it is under the banner
• The date-location container is always on top of the banner.
• The navigation menu has a scroll over effect and shows on which page the user is.
• Most of the pictures have a zoom in effect when the user scrolls over them.
• The pictures scale with the screen size but on small screens they are simply shown under each other.
• The footer has social links that link to the official RW social pages.
• These social links scale with the screen size.
• Every page has a textbox that is under the banner and has the same layout and color scheme. When the navigation menu moves to under the banner the textbox is pushed down.

• The frontpage footer has sponsor links that link to the official sponsor website.
• On the frontpage(home) there is a video that can be played

• There are two rows of three line up bands. These three pictures scale next each other.
• With small screen sizes these pictures are stacked under each other.

• There is a textbox within the textbox with a list of rules for the festival camping.
• This inner textbox has a darker color scheme to highlight its importance.

• There is a central background picture with a sign-up form on top.
• The sign up form needs First name, Last name, email address and telephone number.
• There is a placeholder text in de boxes.
• The telephone number is rejected if it does not have the same pattern as the placeholder.
• The boxes have a hover function.
• There are three options of how thirsty you are and 1 must be chosen.
• The Let’s Rock button has a hover function.
• Under The form there is a textbox with a disclaimer text.

I have used the following technologys for this project:

• HTML5,Standard markup language for Web Pages
• CSS3,Cascading Style Sheets as the design of the site
• Gitpod, for my development environment
• Github, for version control
• Bootstrap, for a responsive and mobile-first layout
• Font Awesome, for the social link icons
• Google Fonts, Text style fonts
• Google/w3schools, for knowledge and tips & tricks

All test were performed on a windows 10 laptop using the Chrome browser. Desktop(laptop) and mobile configuration(iPhone 6/7/8 Plus). See compatibility for the non functional test enviroments.

• Mobile
  1. The date location container is on top of the background banner and the navbar is placed under the banner.
  2. The navbar items are placed vertically.
• Tablet and desktop
  1. The date location container and the navbar are on top of the background banner.
  2. The navbar items are placed horizontally.

• Mobile, tablet and desktop
  1. When hovering over a nav item that item turns black.
  2. Clicking on the item takes the user to that page.
  3. The navbar item of the page the user is on is colored black.
  4. The navbar is placed to the right of the screen.
  5. When the screen is made smaller the navbar items don’t overlap.

• Mobile:
  1. The textbox is placed under the navbar.
  2. The first three pictures have a zoom animation when the user clicks on them.
  3. The fourth and fifth pictures don’t have a zoom animation.
  4. Between the fourth and fifth picture there is a video.
  5. The video can be played as is or full screen.
• Tablet and desktop:
  1. The textbox is placed under the banner.
  2. There is a big picture on the left and two smaller pictures on the right, one on top of the other. These three pictures fit in one row.
  3. These three pictures have a zoom animation when the user hovers over them.
  4. The second row has video in the middle and a picture on either side.
  5. These pictures in the second row don’t have a zoom animation.
  6. The video can be played as is or full screen.
  7. The pictures scale with the screen size.

• Mobile:
  1. The textbox is placed under the navbar.
  2. The six line-up pictures are placed vertically.
  3. All pictures have a zoom animation when the user clicks on them.
• Tablet and desktop:
  1. The textbox is placed under the banner.
  2. There are two rows with three line-up pictures.
  3. All pictures have a zoom animation when the user hovers over them.
  4. The pictures scale with the screen size.

• Mobile:
  1. The textbox is placed under the navbar.
  2. There is a second textbox inside the first textbox with a other background color and a list of rules in it.
  3. The six festival pictures are placed vertically.
  4. All pictures have a zoom animation when the user clicks on them.
• Tablet and desktop:
  1. The textbox is placed under the banner.
  2. There are three rows with one festivalpark picture.
  3. The second row has three pictures, one big one in the middle with a smaller picture on both sides.
  4. All pictures have a zoom animation when the user hovers over them.
  5. The pictures scale with the screen size.

• Mobile:
  1. The textbox is placed under the navbar.
  2. There is one picture in the background.
  3. The sign up form is on top of the picture.
  4. The picture scales with the screen size.
  5. There are four boxes to fill in.
  6. The place holder text is colored black.
  7. There are three thirst levels of which one has to be selected.
  8. All boxes need to be filled.
  9. The Emailbox needs an email format.
  10. The telephone number box needs to be filled with the placeholder layout.
  11. The send button has a hover function.
  12. When the user uses the send button, the https://formdump.codeinstitute.net site is opened.
  13. Under the sign up form there is a disclaimer textbox.
• Tablet and desktop:
  1. The textbox is placed under the banner.
  2. There is one picture that covers the whole background.
  3. The sign up form is on top of the picture and fits in the picture.
  4. The picture scales with the screen size.
  5. There are four boxes to fill in.
  6. The place holder text is colored grey.
  7. There are three thirst levels of which one has to be selected.
  8. All boxes need to be filled.
  9. The Emailbox needs an email format.
  10. The telephone number box needs to be filled with the placeholder layout.
  11. The send button has a hover function.
  12. When the user uses the send button, the https://formdump.codeinstitute.net site is opened.
  13. Under the picture there is a disclaimer textbox.

• Mobile:
  1. There are five social media links centered in a full row.
  2. When the user clicks on a link the black circle becomes grey.
  3. When the user clicks on a link, the official RW social site is opened in a new tab.
  4. There are six sponsor links centered (only on the homepage), two by three.
  5. When the user clicks on a link, the official sponsor site is opened in a new tab.
• Tablet and desktop:
  1. There are five social media centered in a full row.
  2. These links scale with the screen size.
  3. When the user clicks on a link the black circle becomes grey.
  4. When the user clicks on a link, the official RW social site is opened in a new tab.
  5. There are six sponsor links placed center horizontally(Only on the homepage). When they don’t fit in one row they go down one by one.
  6. When the user clicks on a link, the official sponsor site is opened in a new tab.

I checked my CSS code on https://jigsaw.w3.org/css-validator and got the following errors.

• 45 .menucontainer Ongeldig getal : background 45deg geen linear-gradient waarde )
• 302 .picture-container Ongeldig getal : background 45deg geen linear-gradient waarde )
• 431 .signup-form Ongeldig getal : background 45deg geen linear-gradient waarde )

I ignored these errors since the code works as expected.

-Scaling of the pictures is not optimal. Next time I’m going to take a better look at the size(amount of pixels) a picture has. Also I’m not really happy with the pictures in the CSS. That is something I’m going to do fundamentally different next time.

I tested my site on three browsers in both desktop(laptop) and mobile configuration. I also looked at the site on my phone and tablet that run android. I did not test on an Apple device or browser.

• Chrome
• Edge
• Firefox

This project was created using Github. From there I used Gitpod.io to write my code. Then I used commits to git followed by pushes to my GitHub repository. As my final step I've deployed this project to GitHub Pages from the GitHub repository using the following steps:

1. Login to my GitHub account
2. Go to the Alternative-RW2020-1 repository
3. Go to the settings-tab
4. Scroll down to the GitHub Pages section
5. At the GitHub Pages section, choose "master branch" as your source
6. The page will now automatically refresh and the repository deployed
7. You can now scroll down again to the GitHub Pages section to retrieve the link for the website

To run this project locally the following steps should be followed:

1. You can follow this link to the Alternative-RW2020-1 repository
2. Click on the green colored button "Clone or download"
3. Copy the URL that pops up
4. In your local IDE open Git Bash
5. The next step is to change your current working directory to the location you want for your cloned directory
6. Now type in "git clone" and paste the copied URL
7. When you press Enter your local clone will be created

• All the content for this page was written by myself except the disclaimer text.
• I use the sponsor logos that are hosted by the official RW site.
• The disclaimer text is a general one that I got from https://www.ecoinvent.org/disclaimer.html

• The pictures that I used are made by me and my friend in de pictures.
• The video is made by me.
• The banner is made by me.

• My friend Joris that gave the party and gave me the idea to make a site for that party.
• My mentor Ignatius Ukwuoma for giving some good advise.
• My colleague Robbert Bos who also does this course and gave me some pointers.
• My friends for the positive feedback.