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
Getting Started
You can get a local copy of the repository please run the following commands on your terminal:
$ cd <folder>
$ git clone git@github.com: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!