hndfaw / dog-party

1. A brief overview of my project:

I started my design with the small size layout for phones and tablets; then I added three breakpoints to make it compatible with different device screen sizes. The first breakpoint starts hiding navigator links and showing the burger button; the second breakpoint resizes dog tiles (the three dogs) to make them compatible with the bigger screens, and the last breakpoint makes small size changing and lives margins around the web page.

I added JavaScript to open the menu when the user clicks on the burger button and closes when the burger button is clicked again, also it changes the shape of the burger button to X shape. I also used JavaScript to highlight each dog part when the user clicks on the navigator links.

2. Challenges and Solutions:

- Challenge 1 The background image (Park Image) needed to get darker, I tried to add another dive on top of it and add balck background with 0.5 oppacity, but it was not a good approach because I would need to change the display of some elements to absolute or fixed.

Solution 1 I change the opacity of Park Image in photoshop to 0.5.

ok I changed this solustion by using the original image and adding a new layer on the top of it using CSS with the black background-color and opacity of 0.5.

• Challenge 2 It was challenging to give animation to the dog tiles using float, any animation that would make an element inside the tile disappear or change the size of an element; it was affecting the tile's size; therefore it was affecting the entire page.

• Solution 2 In my animation, I did not resize any element or disappear them; I change their opacity and add other features that would keep the size of the element.

Note Regarding the second challenge, flex-box works perfectly to solve it, I tested separately.

3. Screenshots of both project and my website:

• Screenshot of the project:

• Screenshot of my website:

4. Link to my website on GitHub.