├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── README.md ├── assets ├── font │ ├── GothamBold.ttf │ ├── GothamRoundedLight.otf │ ├── HelveticaNeueCyr-Bold.ttf │ ├── HelveticaNeueCyr-Light.ttf │ └── HelveticaNeueCyr-Medium.ttf ├── img │ ├── Screenshot_2020-12-16Ampert1.png │ ├── Screenshot_2020-12-16Ampert2.png │ ├── deals.jpg │ ├── logo.png │ ├── r1p1.jpg │ ├── r1p2.jpg │ ├── r1p3.jpg │ ├── r1p4.jpg │ ├── r1p5.jpg │ ├── r1p6.jpg │ ├── rating.png │ ├── result1.jpg │ ├── result2.jpg │ ├── result3.jpg │ ├── result4.jpg │ ├── result5.jpg │ ├── smartmockups.png │ └── user.jpg └── stylesheet │ ├── _department.scss │ ├── _extentions.scss │ ├── _filter-section.scss │ ├── _fonts.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _media-queries.scss │ ├── _nav.scss │ ├── _reset.scss │ ├── _search-results.scss │ ├── _var.scss │ ├── style.css │ ├── style.css.map │ └── style.scss ├── index.html ├── package-lock.json ├── package.json └── pages └── list.html /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.4.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.0.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 33 | - name: Webhint Report 34 | run: npx hint --telemetry=off . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x stylelint-csstree-validator 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.scss" -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport" 16 | ] 17 | } -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true, 7 | "csstree/validator": true 8 | }, 9 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 10 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/Microverse-blueviolet) 2 | 3 | # Ampert - Online Audio Equipment Shop 4 | 5 | ![screenshot](./assets/img/smartmockups.png) 6 | 7 | This project is the last part of Microverse's HTML and CSS module. It consists of two responsive pages of an online audio equipment shop. Design provided by [Mohammed Awad on Behance](https://www.behance.net/gallery/24796463/ZATTIX). 8 | 9 | ## Built With 10 | 11 | - HTML 5 12 | - CSS 3 13 | - Sass 14 | 15 | ## Live Demo 16 | 17 | [Ampert](https://gscarv13.github.io/HTML-CSS-Capstone/) 18 | 19 | 20 | ## Getting Started 21 | 22 | Visit the live version on the link above. 23 | 24 | To get a local copy follow these simple steps: 25 | 26 | - Use `git clone https://github.com/gscarv13/HTML-CSS-Capstone.git` 27 | - Move to the directory where the project was cloned to. 28 | - Open the index.html file in your browser. 29 | 30 | 31 | ## Authors 32 | 33 | 👤 **Gustavo Silva de Carvalho** 34 | 35 | - GitHub: [@gscarv13](https://github.com/gscarv13) 36 | - Twitter: [@Gscarv13](https://twitter.com/Gscarv13) 37 | - LinkedIn: [Gustavo Carvalho](https://www.linkedin.com/in/gustavo-silva-de-carvalho-72998a156/) 38 | 39 | ## 🤝 Contributing 40 | 41 | Contributions, issues, and feature requests are welcome! 42 | 43 | Feel free to leave your suggestion on the [issues page](https://github.com/gscarv13/HTML-CSS-Capstone/issues). 44 | 45 | ## Show your support 46 | 47 | Give a ⭐️ if you like this project! 48 | 49 | ## 📝 License 50 | 51 | This project is [MIT](https://opensource.org/licenses/mit-license.php) licensed. 52 | -------------------------------------------------------------------------------- /assets/font/GothamBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/font/GothamBold.ttf -------------------------------------------------------------------------------- /assets/font/GothamRoundedLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/font/GothamRoundedLight.otf -------------------------------------------------------------------------------- /assets/font/HelveticaNeueCyr-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/font/HelveticaNeueCyr-Bold.ttf -------------------------------------------------------------------------------- /assets/font/HelveticaNeueCyr-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/font/HelveticaNeueCyr-Light.ttf -------------------------------------------------------------------------------- /assets/font/HelveticaNeueCyr-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/font/HelveticaNeueCyr-Medium.ttf -------------------------------------------------------------------------------- /assets/img/Screenshot_2020-12-16Ampert1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/Screenshot_2020-12-16Ampert1.png -------------------------------------------------------------------------------- /assets/img/Screenshot_2020-12-16Ampert2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/Screenshot_2020-12-16Ampert2.png -------------------------------------------------------------------------------- /assets/img/deals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/deals.jpg -------------------------------------------------------------------------------- /assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/logo.png -------------------------------------------------------------------------------- /assets/img/r1p1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/r1p1.jpg -------------------------------------------------------------------------------- /assets/img/r1p2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/r1p2.jpg -------------------------------------------------------------------------------- /assets/img/r1p3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/r1p3.jpg -------------------------------------------------------------------------------- /assets/img/r1p4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/r1p4.jpg -------------------------------------------------------------------------------- /assets/img/r1p5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/r1p5.jpg -------------------------------------------------------------------------------- /assets/img/r1p6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/r1p6.jpg -------------------------------------------------------------------------------- /assets/img/rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/rating.png -------------------------------------------------------------------------------- /assets/img/result1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/result1.jpg -------------------------------------------------------------------------------- /assets/img/result2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/result2.jpg -------------------------------------------------------------------------------- /assets/img/result3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/result3.jpg -------------------------------------------------------------------------------- /assets/img/result4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/result4.jpg -------------------------------------------------------------------------------- /assets/img/result5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/result5.jpg -------------------------------------------------------------------------------- /assets/img/smartmockups.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/smartmockups.png -------------------------------------------------------------------------------- /assets/img/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gscarv13/HTML-CSS-Capstone/1da71a55addab936f13d65f5f36317bb312e705d/assets/img/user.jpg -------------------------------------------------------------------------------- /assets/stylesheet/_department.scss: -------------------------------------------------------------------------------- 1 | @import "_var.scss"; 2 | @import "_extentions.scss"; 3 | 4 | .dept-header { 5 | color: $gray; 6 | padding-top: 20px; 7 | padding-bottom: 15px; 8 | margin-left: 30px; 9 | margin-right: 30px; 10 | font-family: $helvetica-b; 11 | border-bottom: solid 0.5px #ddd; 12 | 13 | i { 14 | margin-right: 10px; 15 | } 16 | } 17 | 18 | .dept-header-details { 19 | margin-left: 10px; 20 | font-family: $helvetica-l; 21 | font-size: 13px; 22 | color: $gray; 23 | } 24 | 25 | .grid-wrapper { 26 | display: flex; 27 | } 28 | 29 | .grid { 30 | margin: 0 auto; 31 | max-width: 1300px; 32 | display: grid; 33 | grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 34 | // grid-template-columns: 1fr 1fr; 35 | gap: 20px; 36 | padding: 30px; 37 | } 38 | 39 | .product-icon-container { 40 | position: relative; 41 | } 42 | 43 | .left-arrow { 44 | position: absolute; 45 | top: 50%; 46 | left: -10%; 47 | } 48 | 49 | .right-arrow { 50 | position: absolute; 51 | top: 50%; 52 | right: -10%; 53 | } 54 | 55 | .card { 56 | height: 90%; 57 | display: flex; 58 | flex-direction: column; 59 | justify-content: space-between; 60 | background-color: #fff; 61 | border: #ddd 1px solid; 62 | box-shadow: 0 1px 3px rgba(192, 190, 190, 0.52); 63 | padding: 1rem; 64 | } 65 | 66 | .card-img-container { 67 | align-self: center; 68 | width: 100%; 69 | object-fit: cover; 70 | } 71 | 72 | .product-info { 73 | margin-top: 25px; 74 | align-self: center; 75 | font-family: $helvetica-l; 76 | line-height: 1.3; 77 | 78 | h4 { 79 | a { 80 | color: $dark; 81 | } 82 | } 83 | 84 | p { 85 | font-family: inherit; 86 | font-size: 14px; 87 | 88 | span { 89 | font-weight: bold; 90 | } 91 | } 92 | } 93 | 94 | .tag { 95 | font-size: 14px; 96 | color: $pink; 97 | font-family: $gotham-bold; 98 | } 99 | 100 | .card-img { 101 | height: 100%; 102 | width: 100%; 103 | } 104 | 105 | .card-price { 106 | @extend %flex-between; 107 | 108 | padding-top: 10px; 109 | } 110 | 111 | .sign { 112 | border: $gray solid 0.3px; 113 | padding: 0 3px; 114 | font-size: 15px; 115 | } 116 | 117 | .price { 118 | font-family: $gotham-bold; 119 | color: $pink; 120 | } 121 | -------------------------------------------------------------------------------- /assets/stylesheet/_extentions.scss: -------------------------------------------------------------------------------- 1 | %px-1 { 2 | padding-left: 2rem; 3 | padding-right: 2rem; 4 | } 5 | 6 | %px-2 { 7 | padding-left: 3rem; 8 | padding-right: 3rem; 9 | } 10 | 11 | %px-3 { 12 | padding-left: 4rem; 13 | padding-right: 4rem; 14 | } 15 | 16 | %flex-between { 17 | display: flex; 18 | justify-content: space-between; 19 | } 20 | 21 | %flex-column { 22 | display: flex; 23 | flex-direction: column; 24 | } 25 | 26 | %ul-style-none { 27 | list-style: none; 28 | text-decoration: none; 29 | } 30 | -------------------------------------------------------------------------------- /assets/stylesheet/_filter-section.scss: -------------------------------------------------------------------------------- 1 | @import '_var.scss'; 2 | 3 | .filter-section { 4 | width: 215px; 5 | border-right: #ccc 1px solid; 6 | padding: 20px 15px; 7 | } 8 | 9 | .filter-group { 10 | h3 { 11 | padding: 10px 0; 12 | margin-bottom: 10px; 13 | font-size: 16px; 14 | font-weight: normal; 15 | color: $dark; 16 | font-family: $helvetica-b; 17 | border-bottom: #ccc 1px solid; 18 | } 19 | } 20 | 21 | .checkbox-item { 22 | margin: 10px 0; 23 | font-family: $helvetica-l; 24 | font-size: 14px; 25 | color: $dark; 26 | 27 | input { 28 | margin-right: 8px; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/stylesheet/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import '_var.scss'; 2 | 3 | @font-face { 4 | font-family: "Gotham Bold"; 5 | src: url(../font/GothamBold.ttf); 6 | } 7 | 8 | @font-face { 9 | font-family: "Gotham Rounded Light"; 10 | src: url(../font/GothamRoundedLight.otf); 11 | } 12 | 13 | @font-face { 14 | font-family: "Helvetica Light"; 15 | src: url(../font/HelveticaNeueCyr-Light.ttf); 16 | } 17 | 18 | @font-face { 19 | font-family: "Helvetica Medium"; 20 | src: url(../font/HelveticaNeueCyr-Medium.ttf); 21 | } 22 | 23 | @font-face { 24 | font-family: "Helvetica Bold"; 25 | src: url(../font/HelveticaNeueCyr-Bold.ttf); 26 | } 27 | -------------------------------------------------------------------------------- /assets/stylesheet/_footer.scss: -------------------------------------------------------------------------------- 1 | @import "_var.scss"; 2 | @import "_extentions.scss"; 3 | 4 | .about { 5 | margin: 0 auto; 6 | grid-area: about; 7 | width: 220px; 8 | 9 | p { 10 | text-align: justify; 11 | color: $gray; 12 | font-family: $helvetica-m; 13 | font-size: 14px; 14 | margin-bottom: 30px; 15 | } 16 | } 17 | 18 | .footer-categories { 19 | @extend %flex-column; 20 | 21 | margin: 0 auto; 22 | text-align: left; 23 | 24 | ul { 25 | @extend %ul-style-none; 26 | 27 | padding-top: 8px; 28 | 29 | li { 30 | a { 31 | font-family: Arial, Helvetica, sans-serif; 32 | color: $gray; 33 | } 34 | } 35 | } 36 | 37 | h4 { 38 | color: $pink; 39 | border-bottom: $pink solid 1px; 40 | padding-bottom: 8px; 41 | } 42 | 43 | grid-area: categories; 44 | margin-bottom: 30px; 45 | } 46 | 47 | .footer-navigation { 48 | @extend %flex-column; 49 | 50 | margin: 0 auto; 51 | text-align: left; 52 | 53 | ul { 54 | @extend %ul-style-none; 55 | 56 | padding-top: 8px; 57 | 58 | li { 59 | a { 60 | font-family: Arial, Helvetica, sans-serif; 61 | color: $gray; 62 | } 63 | } 64 | } 65 | 66 | h4 { 67 | color: $pink; 68 | border-bottom: $pink solid 1px; 69 | padding-bottom: 8px; 70 | } 71 | 72 | grid-area: navigation; 73 | margin-bottom: 30px; 74 | } 75 | 76 | .footer-menu { 77 | @extend %flex-column; 78 | 79 | grid-area: btns; 80 | color: $gray; 81 | 82 | div { 83 | margin: 10px auto; 84 | } 85 | 86 | margin-bottom: 30px; 87 | } 88 | 89 | .menu-btn { 90 | font-family: $helvetica-m; 91 | color: $pink; 92 | display: flex; 93 | justify-content: space-between; 94 | align-items: baseline; 95 | width: 200px; 96 | } 97 | 98 | .pink-btn { 99 | color: #fff; 100 | background-color: $pink; 101 | padding: 5px; 102 | font-family: $helvetica-m; 103 | border-radius: 3px; 104 | } 105 | 106 | .white-btn { 107 | width: 80px; 108 | color: $dark; 109 | background-color: #fff; 110 | padding: 5px; 111 | font-family: $helvetica-m; 112 | border: $gray 1px solid; 113 | border-radius: 3px; 114 | } 115 | 116 | .copyright { 117 | display: flex; 118 | justify-content: space-between; 119 | margin: 10px auto; 120 | border-top: #ccc solid 1px; 121 | padding: 20px; 122 | grid-area: copyr; 123 | color: $gray; 124 | font-family: $helvetica-l; 125 | } 126 | 127 | footer { 128 | padding: 1rem; 129 | border-top: #ccc solid 1px; 130 | color: $dark; 131 | font-size: 15px; 132 | display: grid; 133 | grid-template-areas: "about about about about" "navigation navigation categories categories" "btns btns btns btns" "copyr copyr copyr copyr"; 134 | text-align: center; 135 | } 136 | 137 | .logo { 138 | width: 100px; 139 | } 140 | 141 | .footer-icons { 142 | i { 143 | padding: 0 10px; 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /assets/stylesheet/_header.scss: -------------------------------------------------------------------------------- 1 | @import '_var.scss'; 2 | @import '_extentions.scss'; 3 | 4 | .header-top { 5 | @extend %flex-column; 6 | 7 | align-items: center; 8 | justify-content: center; 9 | font-family: $gotham-bold; 10 | color: #fff; 11 | font-size: 35px; 12 | height: 250px; 13 | background-color: $pink; 14 | 15 | h1 { 16 | font-family: "Audiowide", sans-serif; 17 | } 18 | 19 | form { 20 | display: flex; 21 | margin-top: 20px; 22 | 23 | input { 24 | font-family: $helvetica-m; 25 | border: #ccc solid 0.2px; 26 | padding: 10px 5px; 27 | } 28 | 29 | select { 30 | font-family: $helvetica-m; 31 | border: #ccc solid 0.2px; 32 | } 33 | 34 | button { 35 | font-size: 15px; 36 | color: $gray; 37 | background-color: $dark; 38 | padding: 5px 25px; 39 | font-family: $helvetica-m; 40 | border: none; 41 | border-radius: 3px; 42 | margin-left: 10px; 43 | } 44 | } 45 | } 46 | 47 | .deals-h3 { 48 | margin-bottom: 30px; 49 | color: $gray; 50 | font-family: $helvetica-b; 51 | } 52 | 53 | .deals-container { 54 | padding: 50px 0; 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | } 59 | 60 | .deals-img { 61 | width: 200px; 62 | } 63 | 64 | .deals-title { 65 | color: $pink; 66 | font-family: $helvetica-b; 67 | font-size: 18px; 68 | } 69 | 70 | .text-deal { 71 | width: 500px; 72 | margin-top: 50px; 73 | margin-left: 50px; 74 | 75 | p { 76 | color: $dark; 77 | font-family: $helvetica-m; 78 | margin-top: 30px; 79 | } 80 | } 81 | 82 | .deals-btn { 83 | margin-top: 30px; 84 | width: 280px; 85 | display: flex; 86 | border-radius: 8px; 87 | border: $pink 2px solid; 88 | 89 | p { 90 | margin: 0; 91 | } 92 | } 93 | 94 | .deals-icon { 95 | color: $pink; 96 | border-radius: 100%; 97 | padding: 10px 13px; 98 | border: #ccc solid 1px; 99 | margin: 0 15px; 100 | } 101 | 102 | .price-btn { 103 | text-align: center; 104 | color: #fff; 105 | background-color: $pink; 106 | padding: 5px; 107 | font-family: $helvetica-m; 108 | width: 80px; 109 | border-right: #9b3b49 solid 1px; 110 | } 111 | 112 | .buy-btn { 113 | text-align: center; 114 | width: 100%; 115 | color: #fff; 116 | background-color: $pink; 117 | padding: 5px; 118 | font-family: $helvetica-m; 119 | } 120 | -------------------------------------------------------------------------------- /assets/stylesheet/_media-queries.scss: -------------------------------------------------------------------------------- 1 | @import "_var.scss"; 2 | 3 | @media only screen and (max-width: 767px) { 4 | .d-mobile-none { 5 | display: none; 6 | } 7 | 8 | .buy-links { 9 | display: none; 10 | } 11 | 12 | .nav-main { 13 | padding-left: 5px; 14 | padding-right: 5px; 15 | 16 | a { 17 | font-size: 12px; 18 | } 19 | } 20 | } 21 | 22 | @media only screen and (min-width: 768px) { 23 | .d-mid-none { 24 | display: none; 25 | } 26 | 27 | .card-price-result { 28 | display: none; 29 | } 30 | 31 | .grid { 32 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 33 | } 34 | 35 | .grid-results { 36 | padding: 50px 0; 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | width: 100%; 41 | margin: 0; 42 | } 43 | 44 | .card-result { 45 | background-color: #fafafa; 46 | width: 90%; 47 | border: none; 48 | border-top: #ccc solid 1px; 49 | border-bottom: #ccc solid 1px; 50 | box-shadow: none; 51 | margin: 0; 52 | display: flex; 53 | flex-direction: row; 54 | align-content: center; 55 | justify-content: space-around; 56 | } 57 | 58 | .info-result { 59 | margin-left: 30px; 60 | align-self: auto; 61 | height: 3rem; 62 | 63 | p { 64 | margin: 10px 0; 65 | } 66 | } 67 | 68 | .list-img { 69 | display: block; 70 | max-height: 200px; 71 | max-width: 100%; 72 | } 73 | 74 | footer { 75 | padding: 0; 76 | padding-top: 50px; 77 | grid-template-areas: "about navigation categories btns" "copyr copyr copyr copyr"; 78 | } 79 | 80 | .about { 81 | width: 300px; 82 | } 83 | 84 | .copyright { 85 | width: 92%; 86 | } 87 | 88 | .container { 89 | display: flex; 90 | } 91 | } 92 | 93 | @media only screen and (min-width: 992px) { 94 | .nav-login { 95 | display: flex; 96 | } 97 | 98 | .nav-main { 99 | padding: 0 80px; 100 | } 101 | 102 | .right-arrow { 103 | display: inline; 104 | } 105 | 106 | .left-arrow { 107 | display: inline; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /assets/stylesheet/_nav.scss: -------------------------------------------------------------------------------- 1 | @import "_var.scss"; 2 | @import "_extentions.scss"; 3 | 4 | .nav-main { 5 | @extend %px-2; 6 | @extend %flex-between; 7 | 8 | height: 60px; 9 | align-items: center; 10 | background-color: $dark; 11 | 12 | a { 13 | padding-left: 20px; 14 | color: $gray; 15 | font-size: 15px; 16 | font-family: $gotham-light; 17 | 18 | img { 19 | width: 65px; 20 | } 21 | } 22 | 23 | .link-highlight { 24 | color: $pink; 25 | } 26 | 27 | .pink-btn { 28 | color: #fff; 29 | margin-left: 15px; 30 | padding: 5px 10px; 31 | } 32 | } 33 | 34 | .user-pic-container { 35 | border-radius: 100%; 36 | } 37 | 38 | .nav-items { 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | 44 | .d-mibile-none { 45 | color: #fff; 46 | } 47 | 48 | .nav-login { 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | } 53 | 54 | .user-pic { 55 | margin-left: 10px; 56 | border-radius: 100%; 57 | width: 50px; 58 | } 59 | -------------------------------------------------------------------------------- /assets/stylesheet/_reset.scss: -------------------------------------------------------------------------------- 1 | @import "_var.scss"; 2 | 3 | a { 4 | text-decoration: none; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | font-family: $gotham-light; 11 | } 12 | 13 | main { 14 | background-color: #fafafa; 15 | } 16 | -------------------------------------------------------------------------------- /assets/stylesheet/_search-results.scss: -------------------------------------------------------------------------------- 1 | @import '_var.scss'; 2 | @import '_extentions.scss'; 3 | 4 | .grid-results { 5 | display: flex; 6 | flex-direction: column; 7 | } 8 | 9 | .result-container { 10 | width: 100%; 11 | padding: 50px 0; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: stretch; 16 | 17 | p { 18 | align-self: flex-start; 19 | margin-left: 20px; 20 | } 21 | } 22 | 23 | .list-img { 24 | margin-bottom: 20px; 25 | height: 200px; 26 | width: auto; 27 | } 28 | 29 | .result-img-container { 30 | display: flex; 31 | justify-content: center; 32 | } 33 | 34 | .text-result { 35 | font-family: $helvetica-l; 36 | color: $gray; 37 | } 38 | 39 | .result-title { 40 | color: $dark; 41 | font-family: $helvetica-b; 42 | font-size: 18px; 43 | } 44 | 45 | .card-price-result { 46 | @extend %flex-between; 47 | 48 | margin-top: 10px; 49 | } 50 | 51 | .buy-links { 52 | margin-top: 15px; 53 | width: 100%; 54 | 55 | a { 56 | border-radius: 8px; 57 | padding: 8px 10px; 58 | } 59 | } 60 | 61 | .nav-page { 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | 66 | a { 67 | border: $gray 1px solid; 68 | color: $gray; 69 | width: 10px; 70 | padding: 3px 8px; 71 | margin: 10px 5px; 72 | } 73 | 74 | a:hover { 75 | border: $pink 1px solid; 76 | background-color: $pink; 77 | color: #fff; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /assets/stylesheet/_var.scss: -------------------------------------------------------------------------------- 1 | $pink: #d35266; 2 | $gray: #888; 3 | $dark: #383838; 4 | 5 | $gotham-bold: "Gotham Bold", san-serif; 6 | $gotham-light: "Gotham Rounded Light", san-serif; 7 | $helvetica-l: "Helvetica Light", san-serif; 8 | $helvetica-m: "Helvetica Medium", san-serif; 9 | $helvetica-b: "Helvetica Bold", san-serif; 10 | -------------------------------------------------------------------------------- /assets/stylesheet/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Gotham Bold"; 3 | src: url(../font/GothamBold.ttf); 4 | } 5 | @font-face { 6 | font-family: "Gotham Rounded Light"; 7 | src: url(../font/GothamRoundedLight.otf); 8 | } 9 | @font-face { 10 | font-family: "Helvetica Light"; 11 | src: url(../font/HelveticaNeueCyr-Light.ttf); 12 | } 13 | @font-face { 14 | font-family: "Helvetica Medium"; 15 | src: url(../font/HelveticaNeueCyr-Medium.ttf); 16 | } 17 | @font-face { 18 | font-family: "Helvetica Bold"; 19 | src: url(../font/HelveticaNeueCyr-Bold.ttf); 20 | } 21 | a { 22 | text-decoration: none; 23 | } 24 | 25 | * { 26 | margin: 0; 27 | padding: 0; 28 | font-family: "Gotham Rounded Light", san-serif; 29 | } 30 | 31 | main { 32 | background-color: #fafafa; 33 | } 34 | 35 | .nav-main { 36 | padding-left: 3rem; 37 | padding-right: 3rem; 38 | } 39 | 40 | .nav-main { 41 | display: flex; 42 | justify-content: space-between; 43 | } 44 | 45 | .nav-main { 46 | height: 60px; 47 | align-items: center; 48 | background-color: #383838; 49 | } 50 | .nav-main a { 51 | padding-left: 20px; 52 | color: #888; 53 | font-size: 15px; 54 | font-family: "Gotham Rounded Light", san-serif; 55 | } 56 | .nav-main a img { 57 | width: 65px; 58 | } 59 | .nav-main .link-highlight { 60 | color: #d35266; 61 | } 62 | .nav-main .pink-btn { 63 | color: #fff; 64 | margin-left: 15px; 65 | padding: 5px 10px; 66 | } 67 | 68 | .user-pic-container { 69 | border-radius: 100%; 70 | } 71 | 72 | .nav-items { 73 | display: flex; 74 | justify-content: center; 75 | align-items: center; 76 | } 77 | 78 | .d-mibile-none { 79 | color: #fff; 80 | } 81 | 82 | .nav-login { 83 | display: flex; 84 | justify-content: center; 85 | align-items: center; 86 | } 87 | 88 | .user-pic { 89 | margin-left: 10px; 90 | border-radius: 100%; 91 | width: 50px; 92 | } 93 | 94 | .header-top { 95 | display: flex; 96 | flex-direction: column; 97 | } 98 | 99 | .header-top { 100 | align-items: center; 101 | justify-content: center; 102 | font-family: "Gotham Bold", san-serif; 103 | color: #fff; 104 | font-size: 35px; 105 | height: 250px; 106 | background-color: #d35266; 107 | } 108 | .header-top h1 { 109 | font-family: "Audiowide", sans-serif; 110 | } 111 | .header-top form { 112 | display: flex; 113 | margin-top: 20px; 114 | } 115 | .header-top form input { 116 | font-family: "Helvetica Medium", san-serif; 117 | border: #ccc solid 0.2px; 118 | padding: 10px 5px; 119 | } 120 | .header-top form select { 121 | font-family: "Helvetica Medium", san-serif; 122 | border: #ccc solid 0.2px; 123 | } 124 | .header-top form button { 125 | font-size: 15px; 126 | color: #888; 127 | background-color: #383838; 128 | padding: 5px 25px; 129 | font-family: "Helvetica Medium", san-serif; 130 | border: none; 131 | border-radius: 3px; 132 | margin-left: 10px; 133 | } 134 | 135 | .deals-h3 { 136 | margin-bottom: 30px; 137 | color: #888; 138 | font-family: "Helvetica Bold", san-serif; 139 | } 140 | 141 | .deals-container { 142 | padding: 50px 0; 143 | display: flex; 144 | align-items: center; 145 | justify-content: center; 146 | } 147 | 148 | .deals-img { 149 | width: 200px; 150 | } 151 | 152 | .deals-title { 153 | color: #d35266; 154 | font-family: "Helvetica Bold", san-serif; 155 | font-size: 18px; 156 | } 157 | 158 | .text-deal { 159 | width: 500px; 160 | margin-top: 50px; 161 | margin-left: 50px; 162 | } 163 | .text-deal p { 164 | color: #383838; 165 | font-family: "Helvetica Medium", san-serif; 166 | margin-top: 30px; 167 | } 168 | 169 | .deals-btn { 170 | margin-top: 30px; 171 | width: 280px; 172 | display: flex; 173 | border-radius: 8px; 174 | border: #d35266 2px solid; 175 | } 176 | .deals-btn p { 177 | margin: 0; 178 | } 179 | 180 | .deals-icon { 181 | color: #d35266; 182 | border-radius: 100%; 183 | padding: 10px 13px; 184 | border: #ccc solid 1px; 185 | margin: 0 15px; 186 | } 187 | 188 | .price-btn { 189 | text-align: center; 190 | color: #fff; 191 | background-color: #d35266; 192 | padding: 5px; 193 | font-family: "Helvetica Medium", san-serif; 194 | width: 80px; 195 | border-right: #9b3b49 solid 1px; 196 | } 197 | 198 | .buy-btn { 199 | text-align: center; 200 | width: 100%; 201 | color: #fff; 202 | background-color: #d35266; 203 | padding: 5px; 204 | font-family: "Helvetica Medium", san-serif; 205 | } 206 | 207 | .card-price { 208 | display: flex; 209 | justify-content: space-between; 210 | } 211 | 212 | .dept-header { 213 | color: #888; 214 | padding-top: 20px; 215 | padding-bottom: 15px; 216 | margin-left: 30px; 217 | margin-right: 30px; 218 | font-family: "Helvetica Bold", san-serif; 219 | border-bottom: solid 0.5px #ddd; 220 | } 221 | .dept-header i { 222 | margin-right: 10px; 223 | } 224 | 225 | .dept-header-details { 226 | margin-left: 10px; 227 | font-family: "Helvetica Light", san-serif; 228 | font-size: 13px; 229 | color: #888; 230 | } 231 | 232 | .grid-wrapper { 233 | display: flex; 234 | } 235 | 236 | .grid { 237 | margin: 0 auto; 238 | max-width: 1300px; 239 | display: grid; 240 | grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 241 | gap: 20px; 242 | padding: 30px; 243 | } 244 | 245 | .product-icon-container { 246 | position: relative; 247 | } 248 | 249 | .left-arrow { 250 | position: absolute; 251 | top: 50%; 252 | left: -10%; 253 | } 254 | 255 | .right-arrow { 256 | position: absolute; 257 | top: 50%; 258 | right: -10%; 259 | } 260 | 261 | .card { 262 | height: 90%; 263 | display: flex; 264 | flex-direction: column; 265 | justify-content: space-between; 266 | background-color: #fff; 267 | border: #ddd 1px solid; 268 | box-shadow: 0 1px 3px rgba(192, 190, 190, 0.52); 269 | padding: 1rem; 270 | } 271 | 272 | .card-img-container { 273 | align-self: center; 274 | width: 100%; 275 | object-fit: cover; 276 | } 277 | 278 | .product-info { 279 | margin-top: 25px; 280 | align-self: center; 281 | font-family: "Helvetica Light", san-serif; 282 | line-height: 1.3; 283 | } 284 | .product-info h4 a { 285 | color: #383838; 286 | } 287 | .product-info p { 288 | font-family: inherit; 289 | font-size: 14px; 290 | } 291 | .product-info p span { 292 | font-weight: bold; 293 | } 294 | 295 | .tag { 296 | font-size: 14px; 297 | color: #d35266; 298 | font-family: "Gotham Bold", san-serif; 299 | } 300 | 301 | .card-img { 302 | height: 100%; 303 | width: 100%; 304 | } 305 | 306 | .card-price { 307 | padding-top: 10px; 308 | } 309 | 310 | .sign { 311 | border: #888 solid 0.3px; 312 | padding: 0 3px; 313 | font-size: 15px; 314 | } 315 | 316 | .price { 317 | font-family: "Gotham Bold", san-serif; 318 | color: #d35266; 319 | } 320 | 321 | .footer-menu, .footer-navigation, .footer-categories { 322 | display: flex; 323 | flex-direction: column; 324 | } 325 | 326 | .footer-navigation ul, .footer-categories ul { 327 | list-style: none; 328 | text-decoration: none; 329 | } 330 | 331 | .about { 332 | margin: 0 auto; 333 | grid-area: about; 334 | width: 220px; 335 | } 336 | .about p { 337 | text-align: justify; 338 | color: #888; 339 | font-family: "Helvetica Medium", san-serif; 340 | font-size: 14px; 341 | margin-bottom: 30px; 342 | } 343 | 344 | .footer-categories { 345 | margin: 0 auto; 346 | text-align: left; 347 | grid-area: categories; 348 | margin-bottom: 30px; 349 | } 350 | .footer-categories ul { 351 | padding-top: 8px; 352 | } 353 | .footer-categories ul li a { 354 | font-family: Arial, Helvetica, sans-serif; 355 | color: #888; 356 | } 357 | .footer-categories h4 { 358 | color: #d35266; 359 | border-bottom: #d35266 solid 1px; 360 | padding-bottom: 8px; 361 | } 362 | 363 | .footer-navigation { 364 | margin: 0 auto; 365 | text-align: left; 366 | grid-area: navigation; 367 | margin-bottom: 30px; 368 | } 369 | .footer-navigation ul { 370 | padding-top: 8px; 371 | } 372 | .footer-navigation ul li a { 373 | font-family: Arial, Helvetica, sans-serif; 374 | color: #888; 375 | } 376 | .footer-navigation h4 { 377 | color: #d35266; 378 | border-bottom: #d35266 solid 1px; 379 | padding-bottom: 8px; 380 | } 381 | 382 | .footer-menu { 383 | grid-area: btns; 384 | color: #888; 385 | margin-bottom: 30px; 386 | } 387 | .footer-menu div { 388 | margin: 10px auto; 389 | } 390 | 391 | .menu-btn { 392 | font-family: "Helvetica Medium", san-serif; 393 | color: #d35266; 394 | display: flex; 395 | justify-content: space-between; 396 | align-items: baseline; 397 | width: 200px; 398 | } 399 | 400 | .pink-btn { 401 | color: #fff; 402 | background-color: #d35266; 403 | padding: 5px; 404 | font-family: "Helvetica Medium", san-serif; 405 | border-radius: 3px; 406 | } 407 | 408 | .white-btn { 409 | width: 80px; 410 | color: #383838; 411 | background-color: #fff; 412 | padding: 5px; 413 | font-family: "Helvetica Medium", san-serif; 414 | border: #888 1px solid; 415 | border-radius: 3px; 416 | } 417 | 418 | .copyright { 419 | display: flex; 420 | justify-content: space-between; 421 | margin: 10px auto; 422 | border-top: #ccc solid 1px; 423 | padding: 20px; 424 | grid-area: copyr; 425 | color: #888; 426 | font-family: "Helvetica Light", san-serif; 427 | } 428 | 429 | footer { 430 | padding: 1rem; 431 | border-top: #ccc solid 1px; 432 | color: #383838; 433 | font-size: 15px; 434 | display: grid; 435 | grid-template-areas: "about about about about" "navigation navigation categories categories" "btns btns btns btns" "copyr copyr copyr copyr"; 436 | text-align: center; 437 | } 438 | 439 | .logo { 440 | width: 100px; 441 | } 442 | 443 | .footer-icons i { 444 | padding: 0 10px; 445 | } 446 | 447 | .card-price-result { 448 | display: flex; 449 | justify-content: space-between; 450 | } 451 | 452 | .grid-results { 453 | display: flex; 454 | flex-direction: column; 455 | } 456 | 457 | .result-container { 458 | width: 100%; 459 | padding: 50px 0; 460 | display: flex; 461 | flex-direction: column; 462 | align-items: center; 463 | justify-content: stretch; 464 | } 465 | .result-container p { 466 | align-self: flex-start; 467 | margin-left: 20px; 468 | } 469 | 470 | .list-img { 471 | margin-bottom: 20px; 472 | height: 200px; 473 | width: auto; 474 | } 475 | 476 | .result-img-container { 477 | display: flex; 478 | justify-content: center; 479 | } 480 | 481 | .text-result { 482 | font-family: "Helvetica Light", san-serif; 483 | color: #888; 484 | } 485 | 486 | .result-title { 487 | color: #383838; 488 | font-family: "Helvetica Bold", san-serif; 489 | font-size: 18px; 490 | } 491 | 492 | .card-price-result { 493 | margin-top: 10px; 494 | } 495 | 496 | .buy-links { 497 | margin-top: 15px; 498 | width: 100%; 499 | } 500 | .buy-links a { 501 | border-radius: 8px; 502 | padding: 8px 10px; 503 | } 504 | 505 | .nav-page { 506 | display: flex; 507 | justify-content: center; 508 | align-items: center; 509 | } 510 | .nav-page a { 511 | border: #888 1px solid; 512 | color: #888; 513 | width: 10px; 514 | padding: 3px 8px; 515 | margin: 10px 5px; 516 | } 517 | .nav-page a:hover { 518 | border: #d35266 1px solid; 519 | background-color: #d35266; 520 | color: #fff; 521 | } 522 | 523 | .filter-section { 524 | width: 215px; 525 | border-right: #ccc 1px solid; 526 | padding: 20px 15px; 527 | } 528 | 529 | .filter-group h3 { 530 | padding: 10px 0; 531 | margin-bottom: 10px; 532 | font-size: 16px; 533 | font-weight: normal; 534 | color: #383838; 535 | font-family: "Helvetica Bold", san-serif; 536 | border-bottom: #ccc 1px solid; 537 | } 538 | 539 | .checkbox-item { 540 | margin: 10px 0; 541 | font-family: "Helvetica Light", san-serif; 542 | font-size: 14px; 543 | color: #383838; 544 | } 545 | .checkbox-item input { 546 | margin-right: 8px; 547 | } 548 | 549 | @media only screen and (max-width: 767px) { 550 | .d-mobile-none { 551 | display: none; 552 | } 553 | 554 | .buy-links { 555 | display: none; 556 | } 557 | 558 | .nav-main { 559 | padding-left: 5px; 560 | padding-right: 5px; 561 | } 562 | .nav-main a { 563 | font-size: 12px; 564 | } 565 | } 566 | @media only screen and (min-width: 768px) { 567 | .d-mid-none { 568 | display: none; 569 | } 570 | 571 | .card-price-result { 572 | display: none; 573 | } 574 | 575 | .grid { 576 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 577 | } 578 | 579 | .grid-results { 580 | padding: 50px 0; 581 | display: flex; 582 | align-items: center; 583 | justify-content: center; 584 | width: 100%; 585 | margin: 0; 586 | } 587 | 588 | .card-result { 589 | background-color: #fafafa; 590 | width: 90%; 591 | border: none; 592 | border-top: #ccc solid 1px; 593 | border-bottom: #ccc solid 1px; 594 | box-shadow: none; 595 | margin: 0; 596 | display: flex; 597 | flex-direction: row; 598 | align-content: center; 599 | justify-content: space-around; 600 | } 601 | 602 | .info-result { 603 | margin-left: 30px; 604 | align-self: auto; 605 | height: 3rem; 606 | } 607 | .info-result p { 608 | margin: 10px 0; 609 | } 610 | 611 | .list-img { 612 | display: block; 613 | max-height: 200px; 614 | max-width: 100%; 615 | } 616 | 617 | footer { 618 | padding: 0; 619 | padding-top: 50px; 620 | grid-template-areas: "about navigation categories btns" "copyr copyr copyr copyr"; 621 | } 622 | 623 | .about { 624 | width: 300px; 625 | } 626 | 627 | .copyright { 628 | width: 92%; 629 | } 630 | 631 | .container { 632 | display: flex; 633 | } 634 | } 635 | @media only screen and (min-width: 992px) { 636 | .nav-login { 637 | display: flex; 638 | } 639 | 640 | .nav-main { 641 | padding: 0 80px; 642 | } 643 | 644 | .right-arrow { 645 | display: inline; 646 | } 647 | 648 | .left-arrow { 649 | display: inline; 650 | } 651 | } 652 | 653 | /*# sourceMappingURL=style.css.map */ 654 | -------------------------------------------------------------------------------- /assets/stylesheet/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["_fonts.scss","_reset.scss","_var.scss","_extentions.scss","_nav.scss","_header.scss","_department.scss","_footer.scss","_search-results.scss","_filter-section.scss","_media-queries.scss"],"names":[],"mappings":"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","file":"style.css"} -------------------------------------------------------------------------------- /assets/stylesheet/style.scss: -------------------------------------------------------------------------------- 1 | @use 'fonts'; 2 | @use 'var'; 3 | @use 'reset'; 4 | @use 'extentions'; 5 | @use 'nav'; 6 | @use 'header'; 7 | @use 'department'; 8 | @use 'footer'; 9 | @use 'search-results'; 10 | @use 'filter-section'; 11 | @use 'media-queries'; 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Ampert 12 | 13 | 14 | 15 | 34 |
35 |
36 |

Ampert

37 |

Audio is Power

38 | 39 |
40 | 47 | 48 | 49 | 50 | 51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 |

DEALS

60 | White-gamer-headset 61 |
62 |
63 | Logitech - G733 LIGHTSPEED Wireless DTS Headphone 64 |
65 |

66 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt 67 | quia repellendus numquam debitis rem voluptatum necessitatibus 68 | eveniet amet dolorem modi quisquam, quo labore ipsum inventore 69 | minima laboriosam adipisci, asperiores provident. 70 |

71 | 72 |

Brand: Logitech

73 | 74 |
75 | $99 76 | 77 | 78 | Purchase Details 79 | 80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |
88 |
89 |
90 |

91 | Headphone 92 | (Headsets, Wireless and Sports) 93 |

94 |
95 |
96 | 97 |
98 | 99 | Headphone Razer Kraken X 100 | 101 |
102 |

Kraken X Wired Gaming Headset

103 | New 104 |

Brand: Razer

105 |
106 | + 107 | $44.99 108 |
109 |
110 |
111 |
112 |
113 | 114 | Sennheiser-Headphone 115 | 116 |
117 |

Wireless Over-the-Ear Headphones

118 | New 119 |

Brand: Sennheiser

120 |
121 | + 122 | $199.99 123 |
124 |
125 |
126 |
127 | 128 | sony-headphone 129 | 130 |
131 |

Wired Earbud Headphones

132 | New 133 |

Brand: Sony

134 |
135 | + 136 | $29.99 137 |
138 |
139 |
140 |
141 | 142 | Sesh-Evo-True-Wireless-In-Ear 143 | 144 |
145 |

Sesh Evo True Wireless In-Ear

146 | New 147 |

Brand: Skullcandy

148 |
149 | + 150 | $34.99 151 |
152 |
153 |
154 |
155 | 156 | JLab-Audio-Headphone 157 | 158 |
159 |

JBuds Air Sport True Wireless

160 | New 161 |

Brand: JLab Audio

162 |
163 | + 164 | $55.99 165 |
166 |
167 |
168 |
169 | 170 |
171 | 172 | Skullcandy-Headphone 173 | 174 |
175 |

Crusher Evo Over-the-Ear Wireless Headset

176 | New 177 |

Brand: Skullcandy

178 |
179 | + 180 | $149.99 181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |

189 | Headphone 190 | (Headsets, Wireless and Sports) 191 |

192 |
193 |
194 | 195 |
196 | 197 | Headphone Razer Kraken X 198 | 199 |
200 |

Kraken X Wired Gaming Headset

201 | New 202 |

Brand: Razer

203 |
204 | + 205 | $44.99 206 |
207 |
208 |
209 |
210 |
211 | 212 | Sennheiser-Headphone 213 | 214 |
215 |

Wireless Over-the-Ear Headphones

216 | New 217 |

Brand: Sennheiser

218 |
219 | + 220 | $199.99 221 |
222 |
223 |
224 |
225 | 226 | sony-headphone 227 | 228 |
229 |

Wired Earbud Headphones

230 | New 231 |

Brand: Sony

232 |
233 | + 234 | $29.99 235 |
236 |
237 |
238 |
239 | 240 | Sesh-Evo-True-Wireless-In-Ear 241 | 242 |
243 |

Sesh Evo True Wireless In-Ear

244 | New 245 |

Brand: Skullcandy

246 |
247 | + 248 | $34.99 249 |
250 |
251 |
252 |
253 | 254 | JLab-Audio-Headphone 255 | 256 |
257 |

JBuds Air Sport True Wireless

258 | New 259 |

Brand: JLab Audio

260 |
261 | + 262 | $55.99 263 |
264 |
265 |
266 |
267 | 268 |
269 | 270 | Skullcandy-Headphone 271 | 272 |
273 |

Crusher Evo Over-the-Ear Wireless Headset

274 | New 275 |

Brand: Skullcandy

276 |
277 | + 278 | $149.99 279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |

287 | Headphone 288 | (Headsets, Wireless and Sports) 289 |

290 |
291 |
292 | 293 |
294 | 295 | Headphone Razer Kraken X 296 | 297 |
298 |

Kraken X Wired Gaming Headset

299 | New 300 |

Brand: Razer

301 |
302 | + 303 | $44.99 304 |
305 |
306 |
307 |
308 |
309 | 310 | Sennheiser-Headphone 311 | 312 |
313 |

Wireless Over-the-Ear Headphones

314 | New 315 |

Brand: Sennheiser

316 |
317 | + 318 | $199.99 319 |
320 |
321 |
322 |
323 | 324 | sony-headphone 325 | 326 |
327 |

Wired Earbud Headphones

328 | New 329 |

Brand: Sony

330 |
331 | + 332 | $29.99 333 |
334 |
335 |
336 |
337 | 338 | Sesh-Evo-True-Wireless-In-Ear 339 | 340 |
341 |

Sesh Evo True Wireless In-Ear

342 | New 343 |

Brand: Skullcandy

344 |
345 | + 346 | $34.99 347 |
348 |
349 |
350 |
351 | 352 | JLab-Audio-Headphone 353 | 354 |
355 |

JBuds Air Sport True Wireless

356 | New 357 |

Brand: JLab Audio

358 |
359 | + 360 | $55.99 361 |
362 |
363 |
364 |
365 | 366 |
367 | 368 | Skullcandy-Headphone 369 | 370 |
371 |

Crusher Evo Over-the-Ear Wireless Headset

372 | New 373 |

Brand: Skullcandy

374 |
375 | + 376 | $149.99 377 |
378 |
379 |
380 |
381 |
382 |
383 |
384 | 440 | 441 | 442 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "hint": "6.0.x", 4 | "stylelint": "13.3.x", 5 | "stylelint-config-standard": "20.0.x", 6 | "stylelint-csstree-validator": "^1.9.0", 7 | "stylelint-scss": "3.17.x" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /pages/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Ampert 11 | 12 | 13 | 14 | 33 |
34 |
35 |

Ampert

36 |

Audio is Power

37 | 38 |
39 | 46 | 47 | 48 | 49 | 50 |
51 |
52 |
53 |
54 |
55 | 114 |
115 |

Your search returned 5 items

116 |
117 |
118 | 119 | Headphone Razer Kraken X 121 | 122 |
123 |

Reference 4" 35W 2-Way Powered Monitors 124 |

125 | New 126 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt 127 | quia repellendus numquam 128 |

129 |

Brand: Klipsch

130 |
131 | $99 132 | 133 | 134 | Purchase Details 135 | 136 |
137 |
138 | + 139 | $44.99 140 |
141 |
142 |
143 |
144 | 145 | hometheater-system 146 | 147 |
148 |

Home Theater System - Black 149 |

150 | New 151 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt 152 | quia repellendus numquam 153 |

154 |

Brand: Boytone

155 |
156 | $99 157 | 158 | 159 | Purchase Details 160 | 161 |
162 |
163 | + 164 | $64.99 165 |
166 |
167 |
168 |
169 | 170 | Home-speaker 171 | 172 |
173 |

Home Speaker 300 Wireless Smart Speaker 174 |

175 | New 176 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt 177 | quia repellendus numquam 178 |

179 |

Brand: Bose

180 |
181 | $199.99 182 | 183 | 184 | Purchase Details 185 | 186 |
187 |
188 | + 189 | $44.99 190 |
191 |
192 |
193 |
194 | 195 | jlab-audio-microphone 196 | 197 |
198 |

TALK GO Plug & Play USB Microphone 199 |

200 | New 201 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt 202 | quia repellendus numquam 203 |

204 |

Brand: JLab Audio

205 |
206 | $99 207 | 208 | 209 | Purchase Details 210 | 211 |
212 |
213 | + 214 | $49.99 215 |
216 |
217 |
218 |
219 | 220 | Audio-Technica-turntable 222 | 223 |
224 |

Bluetooth Stereo Turntable - Black 225 |

226 | New 227 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt 228 | quia repellendus numquam 229 |

230 |

Brand: Audio-Technica

231 |
232 | $299,99 233 | 234 | 235 | Purchase Details 236 | 237 |
238 |
239 | + 240 | $44.99 241 |
242 |
243 |
244 |
245 | 253 |
254 |
255 |
256 | 312 | 313 | 314 | --------------------------------------------------------------------------------