HTML & CSS Capstone Project. A responsive Music Shop Page

In this project, I create a music online shop with a 'main page with search option' and 'results' page. I used HTML & CSS techniques, such as semantic HTML, positioning of content with bootstrap, and flexbox among others. Also for learning purposes I used a framework - 'Flickity' to build a carousel. Worked on two different main versions, showing the content, one for fullscreen >= 768px another for < 768px. I saw that I could improve it a little more on smaller screens, so I worked with some adjustments when a screen became less than 576px.

Large Screen (Search page/Results page)

Medium Screen (Search page/Results page)

Screenshot Main Page Medium Screen

Screenshot Search Page Medium Screen

Small Screen (Search page/Results page)

Screenshot Main Page Small Screen

Screenshot Search Page Small Screen

Built With

• HTML,
• CSS,
• Bootstrap,
• Font Awesome,
• Flickity

Live Demo

Live Demo Link

Getting Started

You can get a local copy of the repository please run the following commands on your terminal:

$ cd <folder>

$ git clone [email protected]:Stricks1/onlineShop.git

To navigate between the pages you can use the 'Search' button to go for the Results page, and to get back to main page you can use any of the 'Home' nav links, one is on the header and the other on the footer.

Authors

👤 Author

Gabriel Malheiros Silveira

• Github: @Stricks1
• E-mail: Gabriel Silveira
• Linkedin: Gabriel Silveira

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Project Capstone from Microverse HTML & CSS curriculum
• Design idea (layout, colors, font) was inspired by Mohammed Awad, you can find the original idea on Behance
• Used Flickity tool to build the Hot Ads carousel - You can see the Flickity GitHub repo here