Submission for the module test Batch 23D
Project Overview
-
Make the Landing page UI as shown in the Figma link (15 Marks)
-
Make a Navbar (15 marks)
Make sure the Navbar is always fixed at the top while scrolling(5) The navbar must be responsive to all page sizes, whether Laptop, tablet or mobile. (5) Add 3 buttons navigating the user to specific sections of the page(5) -> Home (To the Top of the page) -> Contact Us( To the footer of the page discussed below) -> About (To the About us Section of the page discussed below) -> Our services (To our services section of the page) 3. The biggest heading should be animated(10 marks)
Animate using keyframes of your choice E.g., Fade in for 2 seconds. 4. On clicking the down arrow, it should take the user to the Our Services component. (5 Marks)
- Create an about us section ( 10 marks)
The image should be on the left. (2.5 marks) Heading and text should be on the right. (2.5 marks) Add Media query for this section to make it responsive such that on smaller screen size photo should be on top, and the Heading and text should be below it. (5 marks) 6. Create our services section (15 Marks) - Make a minimum of 3 cards and show them in a row. (5 Marks) - Our services have an overflow-x which allows all services to be horizontally scrollable. (5 marks) - Add a hover animation: on hovering on the service card, make the background black and the font white in 0.3 seconds. (5 marks)
-
Create a Contact us is form. (10 marks) - All 4 fields must have the correct input type and must be mandatory in order to submit the form. (5) - Add success alert on clicking submit button. Success alert should be only visible when all 3 fields are filled, and the user clicks on submit button. (5)
-
Make the mobile view using a media query to make the page responsive to different screen sizes (10 marks)
-
The project must be deployed (10 marks)
Figma Link - https://www.figma.com/file/K9x6Hw8UrJD4EFAEQ5JnPb/M5-Test?node-id=0%3A1&t=zankSE8bnk4ld951-1