/figma2code_landingPage

Champion Responsive Website Design: A Figma Landing Page project with a responsive layout for desktop, tablet, and mobile devices. Both the Figma design and the website were built from scratch using HTML, CSS, and JavaScript.

Primary LanguageCSS

Champion Responsive Website

Welcome to the Champion Responsive Website project! This repository contains the design and development of a landing page website that is fully responsive for desktop, tablet, and mobile devices.

Champion Responsive Website Design

Table of Contents

About the Project

This project was initiated as a challenge to design a Figma landing page website from scratch for all screen types. The design was then converted into a functional working website using HTML, CSS, and JavaScript.

Features

  • Responsive Design: Works seamlessly on desktop, tablet, and mobile devices.
  • Design System: Defined colors, components, and assets that form a cohesive design system.
  • Interactive Elements: Includes interactive components built with JavaScript.

Design System

The design system was meticulously created in Figma, defining all colors, components, and assets. You can find the Figma design file and all related assets in the figma_design directory of this repository.

Installation

To get a local copy up and running, follow these simple steps:

  1. Clone the repository:

    git clone https://github.com/Promisead/figma2code_landingPage.git
  2. Navigate to the project directory:

    cd figma2code_landingPage

Usage

Open the index.html file in your preferred web browser to view the website locally. Make sure you have a live server setup if you're working on a local development environment.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this project better, please fork the repository and create a pull request. You can also simply open an issue with the tag "enhancement".

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Promise Champion - promiseduke@gmail.com

Project Link: https://github.com/Promisead/figma2code_landingPage

figma2code_landingPage