Skip to content

WebPage Design project. A responsive Music Shop Page with layouts for small, medium, and large screens. Using CSS, Bootstrap & flickity

Notifications You must be signed in to change notification settings

Stricks1/onlineShop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)

Screenshot Main Page Fullscreen

Screenshot Search Page Fullscreen

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

🤝 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

About

WebPage Design project. A responsive Music Shop Page with layouts for small, medium, and large screens. Using CSS, Bootstrap & flickity

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published