FigmaForge Designs

Description - FigmaForge Designs, built with HTML, CSS, and SASS, underwent enhancements to improve aesthetics and the user experience, following the Figma design. We also employed semantic tags and utilized mixins, variables, and partials for code modularity and maintainability. The Project was about building portfolio and contact webpages and making them responsive for mobile screens.

Key-Features -

• Incorporation of HTML, CSS, and SASS for website development.
• Implementation of enhancements to improve website aesthetics and user experience.
• Strict adherence to the Figma design specifications. Use of semantic HTML tags to enhance accessibility and readability.
• Utilization of mixins, variables, and partials for code modularity and maintainability.
• Responsive design for optimal viewing on devices and screen sizes of 375px.

Collaborators -

1. Sourabh Burman (fw28_093)
2. Heena Parveen (fw28_257)
3. Alipa (fw28_200)
4. Deepak Purohit (fw28_311)
5. Vishnuraj k R (fw28_140)

Contributions -

Sourabh Burman(fw28_093)

• Mid-Section of Contact Page: Designed and created the middle section of the contact page, including its layout and content.
• Embedded Map: Integrated an embedded map to display the location or relevant geographical information.
• Message Section: Added a message section where users can input and submit messages or inquiries.
• Info Section: Included an information section with details about the contact, such as address, phone number, and email.
• Responsiveness: Ensured that the contact page was responsive, adapting to various screen sizes and devices for an optimal user experience.

Heena parveen(fw28_257)

• Navbar with Links: Designed and implemented a responsive navigation bar in the header section. The navbar includes links to essential sections of the website, such as "Contact," "Portfolio," and "Blog."
• Sign-Up Button: Added a visually interactive sign-up button to the navbar. The button is designed to change its appearance when hovered over and is clickable, providing a user-friendly experience.
• Smooth Transitions: Applied smooth transitions to the navigation links, creating a visually pleasing effect. When a link is clicked, it will smoothly redirect users to the corresponding page, enhancing the overall user experience.
• Responsiveness: Ensured that the header section remains fully functional and aesthetically pleasing on various devices and screen sizes. The navigation elements and layout adapt to provide a seamless experience for all users.

Alipa(fw28_200)

• Body Section : In the body section, I've implemented a visually appealing and functional area that includes an email subscription form and some eye-catching images to enhance the user experience.
• Email Subscription : Users can subscribe to updates and newsletters through the email subscription form.
• Images : I've included visually engaging images to enhance the overall presentation of the project.
• Responsiveness : Ensured that the body section remains fully functional and aesthetically pleasing on various devices and screen sizes. The navigation elements and layout adapt to provide a seamless experience for all users.

Deepak Purohit (fw28_311)

• Footer: Created footer with the help of flex-box Model and uses Flex-basis to make it in a desired ratio.
• Latest-Post: Added latest posts/articles in a footer section about our website.
• Social Media: Added social media handles as well as about us.
• Footer-line: Ended with an aesthetic footer line ,mentioning copyright claims
• Responsiveness: Ensured that the footer section remains fully functional and aesthetically pleasing on various devices and screen sizes for an optimal user experience.

Visnuraj K R (fw28_140)

• Mid-Section of Portfolio Page: Designed and created the middle section of the contact page, which includes the middle-section nav-bar, grids, and pagination.
• Nav-bar: Implemented hovering techniques for the middle-section nav-bar.
• Grids: Properly segmented all the grids according to the Figma design, applied appropriate background images to each grid, and added hovering transitions to both the grids and buttons for an attractive visual effect.
• Pagination: Implemented pagination buttons with hovering techniques.
• Responsiveness: Ensured that all content is properly aligned for various screen resolutions and confirmed its full functionality.

Responsive(mobile screen (375px)) -