Several Figma Landing Pages to HTML & CSS 🎨✨

This project has some landing pages originally designed in Figma by others, which I converted into clean, responsive HTML and CSS code.
Great practice for front-end development and converting designs into code.

Project Structure 📁

All designs are inside one main folder called Figma To Code.
Each design has its own folder inside Figma To Code with the following structur.

How to Explore Designs 🔍

Click the links below to go to each design folder and view its specific README with details:

• Design 1
• Design 2
• Design 3
• Design 4
• Design 5
• Design 6
• Design 7
• Design 8

Project Purpose 🎯

• Practice and improve my HTML and CSS skills.
• Learn how to turn Figma designs into real code.
• Make many different landing pages.

How to Use 🚀

1. Copy the project to your computer:

git clone https://github.com/Ibrahim-Abdirashid/Figma-to-Code.git

2. Open any page folder (like page1, page2, etc.) 📂

3. Open the index.html file in your browser to see the page 🖥️

4. To change the design, edit the style.css file 🎨

Technologies Used 🛠️

• HTML5 📄

• CSS3 (Flexbox, Grid, Media Queries) 🎛️

• No JavaScript (if you didn’t add any) 🚫🟨

What You Can Learn 📚

• How to turn a Figma design into code 🖌️➡️💻

• How to build different landing pages 🏗️

• Modern CSS techniques 🎯

• How to make pages look good on phones and computers 📱💻

Future Plans 🔮

• Add animations and JavaScript to improve user experience ✨🎞️

• Make all pages fully responsive 📐

• Use CSS preprocessors like SASS 💅

Contact 📬

If you have questions or ideas, email me at: Neeykaraamo@gmail.com 📧