Prasenjit-3433 / Splash-Page-Design

A modern looking landing page built from Figma Design ❄️

Splash Page

A modern looking landing page built from Figma Design ❄️
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Tech Stack
2. Getting Started
   • Prerequisites
   • Installation
3. Implementation
4. Features
5. Contributing
6. License
7. Contact
8. References

🙋 About The Project

Figma is a modern, streamlined design tool that makes the developer handoff process smooth and seamless. Developers now have better access to the designs and have the ability to extract information about typography, redlines, colors, measurement and more.

In this project, a pre-designed Figma Design is brought into a real landing page!. 🔥

(back to top)

🛠 Built With

• 
• 
• 

(back to top)

🚀 Getting Started

This is an example of how you may start on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• Live Server Extension

Installation

1. First of all install Live Server extension by Ritwick Dey.
2. Once the extension was installed, then right-click on index.html and select Open with Live Server.
3. It'll open a new tab in browser & start serving the Splash Page. Enjoy!.

(back to top)

🏗️ Implementation

• In Figma, the Code panel offers an easy way to extract code information from a specific page element. The code will be displayed by clicking on a layer. Currently, Figma supports CSS, Swift, and XML, but notice that most of the code available involves only visual properties and spacing. No Javascript or other logic is exported.

• Select a pre-designed Figma Deisgn from internet. In case, you didn't find anything, use the same design I used Here.

• Then break the whole design into small Ui Components & start building indivisual components.

Ui Components:

1. Title & Text

   • On click on the Title on the design of the Figma, the corresponding styles shows on left side.
   • Copy and paste the styles from Figma & give the same style in style.css.
   • Styles in Figma uses paid fonts. So here we use fonts from google fonts.
   
2. Image Assets

   • In order to import an image asset from Figma, first we need to click on the image & select the entire component at left side-bar.
   • Then right side, navigate to `Export` tab.
   • Select import format like PNG, JPG, SVg etc. and size like 1x, 2x etc.
   • Finally click on `Export` button to download or preview it before download.
   
3. Toggle Backgrounds

   • There're three divs at the right top to toggle between three backgrounds - One SVG , Two Linear-Gradients.
   • On two consecutive click on same button leads to set background to default background of the Figma Design.

For more information, visit necessary references Link

(back to top)

🤝 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 better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

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

(back to top)

📜 License

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

(back to top)

📮 Contact

Prasenjit Sutradhar - @twitter_handle - [e-mail]

Project Link: https://github.com/Prasenjit-3433/Splash-Page-Design

(back to top)

✌️ References

• Figma For Developer
• Splash Page Design
• HeroPatterns - Background
• uiGradients - Background
• Memory Leaks
• Record heap snapshots

(back to top)