Final Project : Single-Page Website for Your Favourite Artist

 Final Project - creating a single page website for your favourite Artist

                                       

In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.

---

For the start of this assignment, i had sketch the wireframe for better output.

i had started do my prototype into the figma.

fig 1.1 prototype

After the consultation, sir had found out the margin are not consistent, so i had improved the part of it.

fig 1.2 prototype

i had decided to use exchange card for this section.

Here is the mock-up i had done at figma for reference:

By the prototype, i had started doing my cording part.

fig 1.3 prototype

I used the sticky bar for navigation menu, the logo i had tried to put on it but the logo are too close with the colour i had use for i decided to moved out and use another.

fig 1.4 prototype

I had done the card for this part, i named it as "quotes of the lady" i din't plan to put words inside the card by css and html. the color of image using BMW do consistent the theme of this part.

fig 1.5 prototype

from prototype, i was planing to do the vogue collection, like the image will pop up, but i found out this parallax scroll are more suitable for it, so i directly change my design from coding part.

fig 1.6 prototype

I had checked the navigation are working on it.

fig 1.7 css

next, i moved the next step, by @media to done the width and setting for mobile.

fig 1.8 prototype & css

I found out the word are overlapping the navigation and i couldn’t figure out why so i need to move on next step first, which is checking the css.

fig 1.9 card

After some adjustment, i found out my card also are overlapping, and i try to solve this problem by using z-index in header.

fig 2.0 playlist

Next, i moved to the playlist. I had copy the java script and css from website, but somehow the section doesn't appears, so i had to tried few more different link.

fig 2.1 reference

End up, i find that this is the code which are easier and also could be accessible. The function are working nicely so i decided to use this.

fig 2.2 prototype

After i put my image at the left side, the width are being very weird, so i had to figure out what is happening. Turn out is because i had too much column that are same name, and the width had been fixed 10%, i had open a new section and row for this part.

fig 2.3 error of css

By this step, the css had error of pausing the music, so i had to check on it.

fig 2.4 final result of playlist

After fixing the problems, i had done my last part which is playlist and submitted to sir.

Here is the link:

https://project3-0352888.netlify.app/