zuri-clone-project

Zuri Industry Experience Clone

This is a clone of the Zuri Industry Experience webpage, created for learning and practice purposes.

🔍 About the Project

The goal of this project is to:

• Practice HTML and CSS layout skills
• Improve cloning accuracy by recreating an existing webpage
• Learn how to structure front-end files professionally

📁 Folder Structure

• HTML
• CSS
• Mediaqueries

✅ Features

• Responsive layout
• Clean, semantic HTML
• Organized CSS with custom styles
• Mirror of the original design with potential improvements

🚀 Live Demo

• Check the link below:

📸 Screenshot

• Check the link below: https://drive.google.com/drive/folders/1LejRRzBI85kOMUaAR48CqfM5VxbjUiIP?usp=sharing

🧠 What I Learned

• Adding animation to the website, specifically to the "Grid Section" which transformed the grid items to move upwards when you hover over them.
• Using span tag as divider for my website layout.

🔍 What I struggled with

• I tried to use pseudo-elements to the "Grid Section" to make the first grid-item red and using positioning to align the rest of the other grid.
• I need to understand how to make the background image inherit the overall background of the website.

📌 Acknowledgments

Original design: Zuri Industry Experience
Built for practice purposes only.