Diagon Alley™

HTML & CSS capstone project: Online shopping platform

Built With

• HTML5
• BOOTSTRAP
• CSS3
• Sass

Live Demo

Live Demo Link

Project Description

Diagon Alley™ is an online shopping platform for everything you can think of for the wizarding world and you can get it all from the comfort of your home. The project is inspired by Diagon Alley in Harry Potter for those of you who are muggles.

It features a navigation bar, a section for advertising the most popular item at the moment and different sections for the different categories of items being sold. There is also a search results page showcasing what you've searched for.

The website is fully responsive across mobile, tablet and desktop devices by utilizing CSS Flexbox and Bootstrap. There are special breakpoints used to achieve responsiveness for the nav and the footer elements.

The icons used are from Fontawesome and Material Icons.

Working on the product category sections was the most tasking part of the project because of how the products are supposed to display on different screen sizes. It was also the most fun as I got to use Bootstrap in a way I hadn't before. That is my favourite feature of the project. Additionally, getting to use Harry Potter as my platform's theme made the project ten times more fun to work on, based on my love for the wizarding world.

Project Requirements

2 pages:

• the main page (search page), with a link to the results page
• the search results page

Each of these pages should have versions for 2 different screen sizes:

• mobile: up to 768px
• tablet & desktop: from 768px

Follow the guidelines of the given design, including:

• colors
• typographies: font face, size and weight
• layout: composition and space between elements, for the 2 given screen sizes

Screenshots

Getting Started 🚀

These instructions will get you a copy of the project up and running on your local machine.

How To Use 🔧

From your command line, first clone the project:

# Clone this repository
$ git clone https://github.com/paulzay/Zattix

# Go into the repository
$ cd Zattix

# Open the project on Vscode
$ code .

Start Live Server

CONTRIBUTOR

👤 Paul Ogolla

• Github: @paulzay
• Twitter: @paulzay
• Linkedin: Paul Ogolla

Acknowledgments

This design was made by Mohammed Awad and can be found on Behance

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.