Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ressuman/law-firm-landing-page-project

Replicating a Law Firm Website-I used this opportunity to practice my web design skills by replicating a law firm website based on the provided Figma design. This project allowed me to focus on accurately translating a design into code, paying attention to details, and improving my CSS proficiency.
https://github.com/ressuman/law-firm-landing-page-project

css3 figma html5 javascript

Last synced: 27 days ago
JSON representation

Host: GitHub
URL: https://github.com/ressuman/law-firm-landing-page-project
Owner: ressuman
Created: 2023-12-18T20:39:12.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-05-28T10:53:45.000Z (8 months ago)
Last Synced: 2024-11-11T17:09:47.373Z (3 months ago)
Topics: css3, figma, html5, javascript
Language: CSS
Homepage: https://ressuman-law-firm-landing-page.netlify.app/
Size: 14.4 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Law Firm Landing Page

## TASK- Replicating a Law Firm Website Design

### Objective

- Replicating a Law Firm Website-I used this opportunity to practice my web design skills by replicating a law firm website based on the provided Figma design. This project allowed me to focus on accurately translating a design into code, paying attention to details, and improving my CSS proficiency.

### Instructions

#### 1. Project Overview

- I reviewed the Figma design using the following link: [Click for link](https://www.figma.com/file/QUreEf9IO2uhYH5ZKyAh0y/Law-firm-site?type=design&node-id=0-1&mode=design&t=zLcGAO8wFUNjAfN9-0).
- My main task and objective is to replicate the design as closely as possible using HTML and CSS and some few Javascript code.

#### 2. Replication

- I carefully studied the design, including layout, colors, typography, buttons, and spacing.
- I wrote a well-structured HTML code to represent the various sections of the website and applied CSS styling and Javascript functionalities to achieve the visual elements of the design.
- I then aimed for pixel-perfect replication, matching colors, fonts, and proportions.

#### 3. Requirements

- I created an HTML/CSS/Javascript project dedicated to replicating the provided Figma design.
- I used semantic HTML tags to structure the content logically and applied CSS styling to accurately reproduce the design's visual components.
- I also ensured that the design is responsive and adapts well to different screen sizes.

#### 4. Additional Tasks

- Included at least one hover effect (e.g., on buttons or links) to enhance interactivity.
- Optimized the project for loading speed by compressing images (if applicable).
- Validated my HTML code to ensure it follows best practices.

##### Law Firm Landing Page

![Law Firm Landing Page gif](./Assets/video/law-firm-landing-page.gif)