Law Firm Website

Instructions

Assignment: Replicate a law firm Website Design

Description:

For your final project, you will have the opportunity to practice your web design skills by replicating a law firm website based on the provided Figma design. This assignment will allow you to focus on accurately translating a design into code, paying attention to details, and improving your CSS proficiency.

Instructions:

1. Project Overview Review the Figma design using the following link: Click for link. Your task is to replicate the design as closely as possible using HTML and CSS.

2. Replication Carefully study the design, including layout, colors, typography, buttons, and spacing. Write well-structured HTML code to represent the various sections of the website. Apply CSS styling to achieve the visual elements of the design. Aim for pixel-perfect replication, matching colors, fonts, and proportions.

3. Requirements Create an HTML/CSS project dedicated to replicating the provided Figma design. Use semantic HTML tags to structure the content logically. Apply CSS styling to accurately reproduce the design's visual components. Ensure that the design is responsive and adapts well to different screen sizes.

4. Additional Tasks Include at least one hover effect (e.g., on buttons or links) to enhance interactivity. Optimize your project for loading speed by compressing images (if applicable). Validate your HTML code to ensure it follows best practices.

5. Submission Create a new GitHub repository for this project. Give the repository a descriptive name, such as "Project-C4-Group3". Host your project on GitHub using GitHub pages. Include a brief description of your project, highlighting any challenges you faced and how you overcame them. Copy the URL of your GitHub repository and the URL to the hosted site. Open Microsoft Teams and navigate to the appropriate assignment channel. Submit the assignment link.

6. Evaluation Your project will be evaluated based on the following criteria: Accuracy of replication compared to the Figma design. Attention to detail in styling, layout, and spacing. Responsiveness and adaptability across different devices. Clean and organized HTML/CSS code. Implementation of additional tasks (hover effect, optimization).