Hello Reviewer,

In this branch I and my coding partner @ForHemer have done these tasks:

• Populate the grid item from the javascript object
• Populate the popup modal window from the javascript object
• Done the modal window both for mobile and desktop version
• Duplicate the Figma design
• No linter errors

Thank you 😁

Congratulations @Micky373 :clap:. You did a wonderful job :100:. But, I found a bug on your javaScript:

• [x] When the user enters his email address, even if it is in lower case the system rejects it.

I suggest you fix regex constraint that prevents submitting the correct email address.

• [x] @ForHemer : Congratulations @Micky373 :clap:. You did a wonderful job :100:. The only advice is to put a text align: center; to your email validator to fit your mobile version.

• [x] @Behnam1369 :

1. You are using two different menus for desktop and mobile which is not necessary. Instead, you can use media queries to change the style. It's better to put menu items inside <nav>.
2. You can make your popup window scrollable.
3. You need to fix regex constraint that prevents submitting the correct email address

• [ ] @AlejandroNeira98 :

1. Scale Gym image with height to 100%
2. Make the card container a flex with column direction to fix button position

Hello Reviewer,

In this branch I and my coding partner @ForHemer tried to do:

• Validate the email form if there is an uppercase letter and popup a message to the client
• Use a javascript function to validate the form
• No linter errors

Thank you 😁

Hello Reviewer,

In this mobile menu branch, I have done,

• Make the three bar button to be responsive
• Make the 'X' button to be responsive
• Used 100vh to the menu item and transparent to make it look better
• Fixed the navbar of both the desktop and mobile version to the top with transparent color
• No linter errors
• Followed Github flow with my coding partner @ForHemer

Hello Reviewer, In this PR we ran through the accessibility check list provided to us.

• Page titles : Everything was good and upto standard. NO change was made.
• Image text alternatives** () : Everything was good and upto standard. NO change was made.
• Text headings : We made changes to the order of H3 tag to H2 on line 57.
• Color contrast : Everything was good and upto standard. NO change was made. (Following Figma Design)
• Resize : We changed the main background image positioning to prevent text overlap.
• Interaction: Everything was good and upto standard. NO change was made.
• Moving content : Everything was good and upto standard. NO change was made. (No moving content lasting longer than 5s.)
• Multimedia : N/A
• The basic structure of the page: We made changes to h2 and H3 tags, all else was good on page structure.

Hello Reviewer,

In desktop version project I:

• Added animation to my portfolio
• Applied the HTML & CSS Linters
• Documented work professionally

Thank you 😁

Hello Reviewer,

In desktop version project I:

• Added a desktop_version of my portfolio
• Applied the HTML & CSS Linters
• Documented work professionally
• Designed a portfolio that looks like the Figma design
• Used media queries for desktop version(between 992px and 1100px) and wide desktop version (wider then 1101px)
• Used CSS grid and Flexbox

Thank you 😁

Hello reviewer,

I have finished sections 1 and 2 of the mobile portfolio skeleton. Check for any amendments and please let me know if there should be any amendments.

Thank you