Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/meltrust/html-capstone-project-shop

A beautiful and totally responsive musical instruments shop. CSS Flexbox, Grid, and Media Queries were used among other industry-standard tools. Made with HTML5 and CSS3.
https://github.com/meltrust/html-capstone-project-shop

css3 html media-queries

Last synced: 10 days ago
JSON representation

A beautiful and totally responsive musical instruments shop. CSS Flexbox, Grid, and Media Queries were used among other industry-standard tools. Made with HTML5 and CSS3.

Awesome Lists containing this project

README 

        
[![Contributors][contributors-shield]][contributors-url]

[![Forks][forks-shield]][forks-url]

[![Stargazers][stars-shield]][stars-url]

[![Issues][issues-shield]][issues-url]








  

    Reserved logo

  



  
Zattix



  
HTML & CSS Project --> HTML-capstone-project-shop


  




    Explore the docs »

    


    


    -

    Report a Bug

    -

    Request a Feature

    -

  



## Table of Contents



- [About the Project](#about-the-project)



  - [This is the main homepage](#this-is-the-main-homepage)

  - [This is the product search page](#this-is-the-product-search-page)

  - [Check out a Live Demo](#check-out-a-live-demo)

  - [Watch a video with the presentation of the project](#watch-a-video-with-the-presentation-of-the-project)

  - [Future Updates and Roadmap](#future-updates-and-roadmap)

  - [Built With](#built-with)

  - [Validators](#validators)

  - [Install](#install)

 

- [Author](#author)

- [Contributing](#contributing)

- [Show Your Support](#show-your-support)

- [Acknowledgments](#acknowledgments)

- [License](#license)



  

## About the project

    

A beautiful and responsive musical instruments shop built with business specifications based on the design by Mohammed Awad.  CSS Flexbox, Grid, and Media Queries were used among other industry-standard tools. Made with HTML5 and CSS3.  Totally responsive. Based on the design by Mohammed Awad.



## This is the main homepage



![screenshot](./home-screenshot.png)



  This page shows the main catalogue of the shop.  It shows in the center of the screen a showcased product, it lets the user          

  search by department exactly what he/she is looking for.  One can also scroll down if preferred to show the entire array of  

  musical instruments on sale.  On the bottom of the page, there is a navigational footer, complete with links to social 

  media.

  



## This is the product search page



![screenshot](./search-screenshot.png)



  This one is the search results page of the shop. It shows a really handy sidebar with a HTML form full of search controls   

  so the user can finetune his/her search to find exactly the instrument desired, the size and the price range.  Showcasing 

  at the center is the full array of discovered products with the last search.



## Check out a Live Demo 

  

[Visit Zattix here!](https://meltrust.github.io/HTML-capstone-project-shop/index.html)



## Watch a video with the presentation of the project

  

[Video explaining Zattix features](https://www.loom.com/share/d252d68804ab415a984578a5dd456db6)



## Future Updates and Roadmap



- Include more images.

- Update all the links.



## Built With



- HTML 5

- CSS Flexbox

- CSS Grid

- BootStrap

- Custom @media Queries



## Validators



  *  W3C validator for HTML

  *  Stickler for "Style Matters" stickler

  *  Stylelint for VSCode



## Install



To get a local copy up and running follow these simple example steps:



1. Under the repository name, click the Clone or download green button.



![clone](https://user-images.githubusercontent.com/53324035/73660989-4451aa80-4667-11ea-8a89-176f89d6548a.png)



2. Copy the URL given by clicking the clipboard button



3. Open a terminal window in your local machine and change the current directory to the one you

   want the clone directory to be made.



4. Type  git clone and the paste the URL you previusly copied to the clipboard



5. Change the current directory to the newly created folder



6. Now open the index.html file on your browser. Use the menu to go to the catalogue of products.

   By clicking on one product, you will be taken to the product page. You can test these three pages

   changing the width of your browser window. The content will fit either to desktop and mobile screen

   sizes.



## Author



👤 **Miguel Tapia**



- Github: [@meltrust](https://github.com/meltrust)

- Linkedin: [linkedin](https://www.linkedin.com/in/meltrust/)

- Or talk to me directly at: [email protected]



## Contributing



🤝 Contributions, issues and feature requests are welcome!



Feel free to check the [issues page](issues/).



## Show your support



Give a ⭐️ if you like this project!



## Acknowledgments



- [Mohammed Awad](https://www.behance.net/gallery/24796463/ZATTIX) for his cool design.

- Hat tip to anyone whose code was used

- Inspiration

- etc



  

## License



📝 This project is [MIT](lic.url) licensed.

  



[contributors-shield]: https://img.shields.io/github/contributors/Meltrust/HTML-capstone-project-shop.svg?style=flat-square

[contributors-url]: https://github.com/Meltrust/HTML-capstone-project-shop/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/Meltrust/HTML-capstone-project-shop

[forks-url]: https://github.com/Meltrust/HTML-capstone-project-shop/network/members

[stars-shield]: https://img.shields.io/github/stars/Meltrust/HTML-capstone-project-shop

[stars-url]: https://github.com/Meltrust/phaser3-shooter-game/stargazers

[issues-shield]: https://img.shields.io/github/issues/Meltrust/HTML-capstone-project-shop.svg?style=flat-square

[issues-url]: https://github.com/Meltrust/HTML-capstone-project-shop/issues