{"id":15431669,"url":"https://github.com/meltrust/html-capstone-project-shop","last_synced_at":"2025-04-19T17:25:04.129Z","repository":{"id":133649985,"uuid":"261386983","full_name":"Meltrust/HTML-capstone-project-shop","owner":"Meltrust","description":"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. ","archived":false,"fork":false,"pushed_at":"2021-11-23T08:04:00.000Z","size":2990,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-18T06:52:38.799Z","etag":null,"topics":["css3","html","media-queries"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Meltrust.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-05T07:17:29.000Z","updated_at":"2023-04-04T16:48:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"e42b8604-4fb7-448f-b3c5-07b1b92f3792","html_url":"https://github.com/Meltrust/HTML-capstone-project-shop","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"8fcc69e81267004bf3d7e01cf7c8d4666ccc0fe3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"Meltrust/readme-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meltrust%2FHTML-capstone-project-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meltrust%2FHTML-capstone-project-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meltrust%2FHTML-capstone-project-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meltrust%2FHTML-capstone-project-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Meltrust","download_url":"https://codeload.github.com/Meltrust/HTML-capstone-project-shop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249748265,"owners_count":21319811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html","media-queries"],"created_at":"2024-10-01T18:23:43.740Z","updated_at":"2025-04-19T17:25:04.113Z","avatar_url":"https://github.com/Meltrust.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n\n\n\u003c!-- PROJECT LOGO --\u003e\n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Meltrust/HTML-capstone-project-shop\" style=\"text-decoration: none;\"\u003e\n    \u003cimg src=\"/assets/images/logo-zattix.png\" alt=\"Reserved logo\" width=\"400\" height=\"100\" align=\"center\"\u003e\n  \u003c/a\u003e\n\n  \u003ch2 align=\"center\"\u003eZattix\u003c/h2\u003e\n\n  \u003ch3 align=\"center\"\u003eHTML \u0026 CSS Project --\u003e HTML-capstone-project-shop\u003ch3\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"#table-of-contents\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    -\n    \u003ca href=\"https://github.com/Meltrust/HTML-capstone-project-shop/issues\"\u003eReport a Bug\u003c/a\u003e\n    -\n    \u003ca href=\"https://github.com/Meltrust/HTML-capstone-project-shop/issues\"\u003eRequest a Feature\u003c/a\u003e\n    -\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Table of Contents\n\n- [About the Project](#about-the-project)\n\n  - [This is the main homepage](#this-is-the-main-homepage)\n  - [This is the product search page](#this-is-the-product-search-page)\n  - [Check out a Live Demo](#check-out-a-live-demo)\n  - [Watch a video with the presentation of the project](#watch-a-video-with-the-presentation-of-the-project)\n  - [Future Updates and Roadmap](#future-updates-and-roadmap)\n  - [Built With](#built-with)\n  - [Validators](#validators)\n  - [Install](#install)\n \n- [Author](#author)\n- [Contributing](#contributing)\n- [Show Your Support](#show-your-support)\n- [Acknowledgments](#acknowledgments)\n- [License](#license)\n\n  \n## About the project\n    \nA 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.\n\n\n\n## This is the main homepage\n\n![screenshot](./home-screenshot.png)\n\n  This page shows the main catalogue of the shop.  It shows in the center of the screen a showcased product, it lets the user          \n  search by department exactly what he/she is looking for.  One can also scroll down if preferred to show the entire array of  \n  musical instruments on sale.  On the bottom of the page, there is a navigational footer, complete with links to social \n  media.\n  \n\n## This is the product search page\n\n![screenshot](./search-screenshot.png)\n\n  This one is the search results page of the shop. It shows a really handy sidebar with a HTML form full of search controls   \n  so the user can finetune his/her search to find exactly the instrument desired, the size and the price range.  Showcasing \n  at the center is the full array of discovered products with the last search.\n\n\n## Check out a Live Demo \n  \n[Visit Zattix here!](https://meltrust.github.io/HTML-capstone-project-shop/index.html)\n\n\n## Watch a video with the presentation of the project\n  \n[Video explaining Zattix features](https://www.loom.com/share/d252d68804ab415a984578a5dd456db6)\n\n\n## Future Updates and Roadmap\n\n- Include more images.\n- Update all the links.\n\n\n## Built With\n\n- HTML 5\n- CSS Flexbox\n- CSS Grid\n- BootStrap\n- Custom @media Queries\n\n\n## Validators\n\n  *  W3C validator for HTML\n  *  Stickler for \"Style Matters\" stickler\n  *  Stylelint for VSCode\n\n\n## Install\n\nTo get a local copy up and running follow these simple example steps:\n\n1. Under the repository name, click the Clone or download green button.\n\n![clone](https://user-images.githubusercontent.com/53324035/73660989-4451aa80-4667-11ea-8a89-176f89d6548a.png)\n\n2. Copy the URL given by clicking the clipboard button\n\n3. Open a terminal window in your local machine and change the current directory to the one you\n   want the clone directory to be made.\n\n4. Type  git clone and the paste the URL you previusly copied to the clipboard\n\n5. Change the current directory to the newly created folder\n\n6. Now open the index.html file on your browser. Use the menu to go to the catalogue of products.\n   By clicking on one product, you will be taken to the product page. You can test these three pages\n   changing the width of your browser window. The content will fit either to desktop and mobile screen\n   sizes.\n\n\n## Author\n\n👤 **Miguel Tapia**\n\n- Github: [@meltrust](https://github.com/meltrust)\n- Linkedin: [linkedin](https://www.linkedin.com/in/meltrust/)\n- Or talk to me directly at: original.mtapia@outlook.com\n\n## Contributing\n\n🤝 Contributions, issues and feature requests are welcome!\n\nFeel free to check the [issues page](issues/).\n\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n\n\n## Acknowledgments\n\n- [Mohammed Awad](https://www.behance.net/gallery/24796463/ZATTIX) for his cool design.\n- Hat tip to anyone whose code was used\n- Inspiration\n- etc\n\n  \n## License\n\n📝 This project is [MIT](lic.url) licensed.\n  \n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[contributors-shield]: https://img.shields.io/github/contributors/Meltrust/HTML-capstone-project-shop.svg?style=flat-square\n[contributors-url]: https://github.com/Meltrust/HTML-capstone-project-shop/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/Meltrust/HTML-capstone-project-shop\n[forks-url]: https://github.com/Meltrust/HTML-capstone-project-shop/network/members\n[stars-shield]: https://img.shields.io/github/stars/Meltrust/HTML-capstone-project-shop\n[stars-url]: https://github.com/Meltrust/phaser3-shooter-game/stargazers\n[issues-shield]: https://img.shields.io/github/issues/Meltrust/HTML-capstone-project-shop.svg?style=flat-square\n[issues-url]: https://github.com/Meltrust/HTML-capstone-project-shop/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeltrust%2Fhtml-capstone-project-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeltrust%2Fhtml-capstone-project-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeltrust%2Fhtml-capstone-project-shop/lists"}