├── .gitattributes ├── img ├── Logo.png ├── logo2.png ├── Logo-gray.png ├── Logo-name.png ├── Logo-background.png ├── icons8-bangles-27.png ├── icons8-necklace-27.png ├── icons8-twitter-22.png ├── icons8-facebook-f-22.png ├── icons8-instagram-24.png ├── icons8-linkedin-2-24.png ├── icons8-sort-down-20.png ├── 45-degree-fabric-light.png ├── random-grey-variations.png └── icons8-ring-side-view-27.png ├── fonts ├── Raleway-Bold.ttf ├── Raleway-Light.ttf ├── Raleway-Regular.ttf ├── Raleway-ExtraBold.ttf ├── Helvetica45Light_22437.ttf ├── Helvetica65Medium_22443.ttf └── Helvetica85Heavy_22449.ttf ├── .gitignore ├── .stickler.yml ├── LICENSE ├── README.md ├── stylelint.config.js ├── css ├── media-query.css ├── style-search.css └── style.css ├── search.html └── index.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /img/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/Logo.png -------------------------------------------------------------------------------- /img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/logo2.png -------------------------------------------------------------------------------- /img/Logo-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/Logo-gray.png -------------------------------------------------------------------------------- /img/Logo-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/Logo-name.png -------------------------------------------------------------------------------- /fonts/Raleway-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/fonts/Raleway-Bold.ttf -------------------------------------------------------------------------------- /fonts/Raleway-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/fonts/Raleway-Light.ttf -------------------------------------------------------------------------------- /img/Logo-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/Logo-background.png -------------------------------------------------------------------------------- /fonts/Raleway-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/fonts/Raleway-Regular.ttf -------------------------------------------------------------------------------- /img/icons8-bangles-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-bangles-27.png -------------------------------------------------------------------------------- /img/icons8-necklace-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-necklace-27.png -------------------------------------------------------------------------------- /img/icons8-twitter-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-twitter-22.png -------------------------------------------------------------------------------- /fonts/Raleway-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/fonts/Raleway-ExtraBold.ttf -------------------------------------------------------------------------------- /img/icons8-facebook-f-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-facebook-f-22.png -------------------------------------------------------------------------------- /img/icons8-instagram-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-instagram-24.png -------------------------------------------------------------------------------- /img/icons8-linkedin-2-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-linkedin-2-24.png -------------------------------------------------------------------------------- /img/icons8-sort-down-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-sort-down-20.png -------------------------------------------------------------------------------- /img/45-degree-fabric-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/45-degree-fabric-light.png -------------------------------------------------------------------------------- /img/random-grey-variations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/random-grey-variations.png -------------------------------------------------------------------------------- /fonts/Helvetica45Light_22437.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/fonts/Helvetica45Light_22437.ttf -------------------------------------------------------------------------------- /fonts/Helvetica65Medium_22443.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/fonts/Helvetica65Medium_22443.ttf -------------------------------------------------------------------------------- /fonts/Helvetica85Heavy_22449.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/fonts/Helvetica85Heavy_22449.ttf -------------------------------------------------------------------------------- /img/icons8-ring-side-view-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RossielCS/Online-shop-Web-page/HEAD/img/icons8-ring-side-view-27.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node Modules Folder 2 | node_modules/ 3 | 4 | # Visual Studio Config Folder 5 | .vscode/ 6 | 7 | # Package Lock 8 | package-lock.json -------------------------------------------------------------------------------- /.stickler.yml: -------------------------------------------------------------------------------- 1 | # add the linters you want stickler to use for this project 2 | linters: 3 | stylelint: 4 | # indicate where is the config file for stylelint 5 | config: 'stylelint.config.js' 6 | 7 | # PLEASE DO NOT enable auto fixing options 8 | # if you need extra support from you linter - do it in your local env as described in README for this config 9 | 10 | # find full documentation here: https://stickler-ci.com/docs -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Rossiel Carranza 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Online Shop Web Page 2 | This is the HTML & CSS Capstone Project and was build based on an online shop. 3 | I followed the given design which is [ZATTIX](https://www.behance.net/gallery/24796463/ZATTIX) but changed the content to jewelry e-commerce. 4 | 5 | 6 | ![Desktop](https://user-images.githubusercontent.com/60085697/82383088-824ec080-9a03-11ea-8d66-76fd3c1a81da.png) 7 | 8 | ![Mobile](https://user-images.githubusercontent.com/60085697/82383454-33edf180-9a04-11ea-9d16-368dae362e81.jpg) 9 | 10 | ## :hammer: Built With 11 | 12 | - HTML5, 13 | - CSS3, 14 | - Bootstrap 4, 15 | - JavaScript, 16 | - [Stylelint](https://stylelint.io/), 17 | - [Stickler](https://stickler-ci.com/), 18 | - [Visual Studio Code](https://code.visualstudio.com/) 19 | 20 | 21 | ## Live Demo 22 | 23 | [Live Demo Link](https://rossielcs-online-shop-web-page.netlify.app/) 24 | 25 | 26 | ## Getting Started 27 | 28 | 29 | ### Prerequisites 30 | Before you continue, be sure that you have installed: 31 | * A Git GUI. 32 | * An Integrated Development Environment(IDE). 33 | * Chrome or Firefox. Internet Explorer is not supported. 34 | 35 | ### :computer: Usage 36 | To run the project: 37 | - Clone the repository with Git. 38 | - Open it with your IDE. 39 | 40 | ## :gem: Features 41 | 42 | - Grid for layout. 43 | - Flexbox to position the elements inside the Grid. 44 | - Bootstrap's carousel. 45 | - Used Javascript for the slideshow in the "Hot Ads" section. 46 | - Breaking points in the media-query file for responsiveness. 47 | - Works for mobile and desktop. 48 | 49 | ## :woman: Author 50 | 51 | **Rossiel Carranza** 52 | 53 | * Github: [@RossielCS](https://github.com/RossielCS) 54 | * Linkedin: [Rossiel Carranza](https://www.linkedin.com/in/rossiel-carranza/) 55 | 56 | ## 🤝 Contributing 57 | 58 | Contributions, issues and feature requests are welcome! 59 | Feel free to check the [issues page](issues/). 60 | 61 | 1. Fork this repository. 62 | 63 | 2. Create a branch: git checkout -b . 64 | 65 | 3. Make your changes and commit them: git commit -m '' 66 | 67 | 4. Push to the original branch: git push origin / 68 | 69 | 5. Create the pull request. 70 | 71 | 72 | ## Show your support 73 | 74 | Give a ⭐️ if you like this project! 75 | 76 | ## Acknowledgments 77 | 78 | Design idea by [Mohammed Awad on Behance](https://www.behance.net/M_Awad). 79 | 80 | ## 📝 License 81 | 82 | This project is [MIT](lic.url) licensed. 83 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | module.exports = { 4 | "extends": "stylelint-config-recommended", 5 | "rules": { 6 | "at-rule-empty-line-before": [ "always", { 7 | except: [ 8 | "blockless-after-same-name-blockless", 9 | "first-nested", 10 | ], 11 | ignore: ["after-comment"], 12 | } ], 13 | "at-rule-name-case": "lower", 14 | "at-rule-name-space-after": "always-single-line", 15 | "at-rule-semicolon-newline-after": "always", 16 | "block-closing-brace-empty-line-before": "never", 17 | "block-closing-brace-newline-after": "always", 18 | "block-closing-brace-newline-before": "always-multi-line", 19 | "block-closing-brace-space-before": "always-single-line", 20 | "block-opening-brace-newline-after": "always-multi-line", 21 | "block-opening-brace-space-after": "always-single-line", 22 | "block-opening-brace-space-before": "always", 23 | "color-hex-case": "lower", 24 | "color-hex-length": "short", 25 | "comment-empty-line-before": [ "always", { 26 | except: ["first-nested"], 27 | ignore: ["stylelint-commands"], 28 | } ], 29 | "comment-whitespace-inside": "always", 30 | "custom-property-empty-line-before": [ "always", { 31 | except: [ 32 | "after-custom-property", 33 | "first-nested", 34 | ], 35 | ignore: [ 36 | "after-comment", 37 | "inside-single-line-block", 38 | ], 39 | } ], 40 | "declaration-bang-space-after": "never", 41 | "declaration-bang-space-before": "always", 42 | "declaration-block-semicolon-newline-after": "always-multi-line", 43 | "declaration-block-semicolon-space-after": "always-single-line", 44 | "declaration-block-semicolon-space-before": "never", 45 | "declaration-block-single-line-max-declarations": 1, 46 | "declaration-block-trailing-semicolon": "always", 47 | "declaration-colon-newline-after": "always-multi-line", 48 | "declaration-colon-space-after": "always-single-line", 49 | "declaration-colon-space-before": "never", 50 | "declaration-empty-line-before": [ "always", { 51 | except: [ 52 | "after-declaration", 53 | "first-nested", 54 | ], 55 | ignore: [ 56 | "after-comment", 57 | "inside-single-line-block", 58 | ], 59 | } ], 60 | "function-comma-newline-after": "always-multi-line", 61 | "function-comma-space-after": "always-single-line", 62 | "function-comma-space-before": "never", 63 | "function-max-empty-lines": 0, 64 | "function-name-case": "lower", 65 | "function-parentheses-newline-inside": "always-multi-line", 66 | "function-parentheses-space-inside": "never-single-line", 67 | "function-whitespace-after": "always", 68 | "indentation": 2, 69 | "length-zero-no-unit": true, 70 | "max-empty-lines": 1, 71 | "media-feature-colon-space-after": "always", 72 | "media-feature-colon-space-before": "never", 73 | "media-feature-name-case": "lower", 74 | "media-feature-parentheses-space-inside": "never", 75 | "media-feature-range-operator-space-after": "always", 76 | "media-feature-range-operator-space-before": "always", 77 | "media-query-list-comma-newline-after": "always-multi-line", 78 | "media-query-list-comma-space-after": "always-single-line", 79 | "media-query-list-comma-space-before": "never", 80 | "no-eol-whitespace": true, 81 | "no-missing-end-of-source-newline": true, 82 | "number-leading-zero": "always", 83 | "number-no-trailing-zeros": true, 84 | "property-case": "lower", 85 | "rule-empty-line-before": [ "always-multi-line", { 86 | except: ["first-nested"], 87 | ignore: ["after-comment"], 88 | } ], 89 | "selector-attribute-brackets-space-inside": "never", 90 | "selector-attribute-operator-space-after": "never", 91 | "selector-attribute-operator-space-before": "never", 92 | "selector-combinator-space-after": "always", 93 | "selector-combinator-space-before": "always", 94 | "selector-descendant-combinator-no-non-space": true, 95 | "selector-list-comma-newline-after": "always", 96 | "selector-list-comma-space-before": "never", 97 | "selector-max-empty-lines": 0, 98 | "selector-pseudo-class-case": "lower", 99 | "selector-pseudo-class-parentheses-space-inside": "never", 100 | "selector-pseudo-element-case": "lower", 101 | "selector-pseudo-element-colon-notation": "double", 102 | "selector-type-case": "lower", 103 | "unit-case": "lower", 104 | "value-list-comma-newline-after": "always-multi-line", 105 | "value-list-comma-space-after": "always-single-line", 106 | "value-list-comma-space-before": "never", 107 | "value-list-max-empty-lines": 0, 108 | }, 109 | } -------------------------------------------------------------------------------- /css/media-query.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 940px) { 2 | .item-user, 3 | .item-postad { 4 | display: none; 5 | } 6 | 7 | .part2 { 8 | height: auto; 9 | } 10 | 11 | .row-part2 { 12 | flex-wrap: wrap; 13 | } 14 | 15 | .product-part2 { 16 | flex-basis: 30%; 17 | } 18 | 19 | .business-info-footer { 20 | max-width: 120px; 21 | } 22 | } 23 | 24 | @media only screen and (max-width: 845px) { 25 | .footer01 { 26 | flex-wrap: wrap; 27 | } 28 | 29 | .options-footer { 30 | width: 100%; 31 | display: flex; 32 | flex-direction: row; 33 | justify-content: space-between; 34 | } 35 | } 36 | 37 | @media only screen and (max-width: 768px) { 38 | nav, 39 | .nav-logo { 40 | height: 50px; 41 | } 42 | 43 | .nav-list { 44 | font-size: 12px; 45 | } 46 | 47 | .nav01-display-none { 48 | display: none; 49 | } 50 | 51 | .nav02-display-none { 52 | height: 35px; 53 | margin: auto; 54 | } 55 | 56 | #header-search { 57 | height: 350px; 58 | } 59 | 60 | .header-list01 { 61 | margin-right: 0; 62 | } 63 | 64 | .menu-item { 65 | font-size: 25px; 66 | } 67 | 68 | .search-header { 69 | height: 450px; 70 | grid-template-columns: 1fr minmax(auto, 500px) 1fr; 71 | } 72 | 73 | .form-header { 74 | flex-direction: column; 75 | font-size: 14px; 76 | } 77 | 78 | .form-header input[type=submit] { 79 | margin: 10px 0 30px 0; 80 | } 81 | 82 | .form-header input[type=text] { 83 | padding: 0 35px; 84 | } 85 | 86 | #logoname-search { 87 | margin: 30px auto; 88 | } 89 | 90 | .results-search { 91 | grid-template-columns: 1fr auto 1fr; 92 | } 93 | 94 | .options-search { 95 | padding-top: 20px; 96 | padding-bottom: 0; 97 | display: flex; 98 | flex-direction: column; 99 | justify-content: space-around; 100 | } 101 | 102 | .options-search, 103 | .showing-results { 104 | grid-column: 2 / 3; 105 | } 106 | 107 | .options01-form { 108 | flex-direction: column; 109 | } 110 | 111 | .title-options-search { 112 | margin-top: 0; 113 | } 114 | 115 | .options-form-search { 116 | display: flex; 117 | flex-direction: row; 118 | flex-wrap: wrap; 119 | } 120 | 121 | .title-options-search h3 { 122 | font-size: 14px; 123 | } 124 | 125 | .checkbox-custom { 126 | font-size: 13px; 127 | margin-right: 25px; 128 | } 129 | 130 | .footer01 { 131 | flex-wrap: nowrap; 132 | } 133 | 134 | .business-info-footer { 135 | max-width: 100%; 136 | } 137 | 138 | .footer01, 139 | .categories-list-box { 140 | flex-direction: column; 141 | } 142 | 143 | .nav02-display-none, 144 | .categories-list-footer, 145 | .navigation-list-footer { 146 | display: flex; 147 | } 148 | 149 | .categories-list-footer li, 150 | .navigation-list-footer li { 151 | margin-right: 10px; 152 | } 153 | } 154 | 155 | @media only screen and (max-width: 736px) { 156 | .product-hotads { 157 | flex-direction: column; 158 | align-items: center; 159 | } 160 | 161 | .hotads-img-box, 162 | .product-info-hotads { 163 | width: 100%; 164 | } 165 | 166 | .product-info-hotads { 167 | padding: 20px 0 0 0; 168 | text-align: center; 169 | } 170 | 171 | .buttons-hotads { 172 | height: 30px; 173 | padding-left: 13px; 174 | padding-right: 13px; 175 | font-size: 13px; 176 | } 177 | 178 | .display-none-hotads { 179 | display: none; 180 | } 181 | 182 | .product-part2 { 183 | flex-basis: 40%; 184 | } 185 | 186 | .footer01 > * { 187 | font-size: 12px; 188 | } 189 | 190 | .footer01 h6 { 191 | font-size: 13px; 192 | padding-right: 10px; 193 | } 194 | 195 | .categories-list-footer, 196 | .navigation-list-footer, 197 | .options-footer { 198 | flex-wrap: wrap; 199 | } 200 | 201 | .options-footer { 202 | flex-wrap: wrap; 203 | justify-content: flex-start; 204 | } 205 | 206 | .button-footer { 207 | margin-left: 0; 208 | margin-right: 10px; 209 | } 210 | } 211 | 212 | @media only screen and (max-width: 470px) { 213 | .list-display-none { 214 | display: none; 215 | } 216 | 217 | .nav-icon { 218 | font-size: 15px; 219 | } 220 | 221 | .logo-name img { 222 | max-width: 300px; 223 | } 224 | 225 | .hotads-img-box { 226 | height: 200px; 227 | } 228 | 229 | .purchase-text-hotads { 230 | display: none; 231 | } 232 | 233 | .result { 234 | flex-direction: column; 235 | } 236 | 237 | .img-showing { 238 | width: 100%; 239 | margin-bottom: 20px; 240 | } 241 | 242 | .op-titlebtn-footer { 243 | margin-right: 20px; 244 | } 245 | 246 | .items-footer02 { 247 | flex-direction: column-reverse; 248 | } 249 | } 250 | -------------------------------------------------------------------------------- /css/style-search.css: -------------------------------------------------------------------------------- 1 | /* HEADER SEARCH */ 2 | 3 | #header-search { 4 | height: 210px; 5 | } 6 | 7 | #logoname-search { 8 | margin: auto 0 20px 20px; 9 | } 10 | 11 | /* HEADER SEARCH */ 12 | 13 | /* MAIN */ 14 | 15 | main { 16 | margin: auto; 17 | display: grid; 18 | grid-template-columns: 1fr minmax(auto, 1100px) 1fr; 19 | grid-template-rows: auto; 20 | background-image: url("../img/45-degree-fabric-light.png"); 21 | } 22 | 23 | /* MAIN */ 24 | 25 | .results-search { 26 | grid-column: 2 / 3; 27 | display: grid; 28 | grid-template-columns: 1fr 4fr; 29 | } 30 | 31 | .options-search { 32 | grid-column: 1 / 2; 33 | padding: 30px 20px; 34 | } 35 | 36 | .options01-form { 37 | display: flex; 38 | } 39 | 40 | .options01-form > * { 41 | padding-right: 10px; 42 | } 43 | 44 | .title-options-search { 45 | margin: 10px 0; 46 | font-size: 14px; 47 | border-bottom: 1px solid rgba(136, 136, 136, 0.5); 48 | } 49 | 50 | .title-options-search h2 { 51 | font-size: 16px; 52 | } 53 | 54 | .checkbox-custom { 55 | position: relative; 56 | padding-left: 30px; 57 | margin-bottom: 10px; 58 | display: block; 59 | cursor: pointer; 60 | font-size: 13.5px; 61 | -webkit-user-select: none; 62 | -moz-user-select: none; 63 | -ms-user-select: none; 64 | user-select: none; 65 | } 66 | 67 | .checkbox-custom input { 68 | position: absolute; 69 | opacity: 0; 70 | cursor: pointer; 71 | height: 0; 72 | width: 0; 73 | } 74 | 75 | .checkmark { 76 | position: absolute; 77 | top: 3px; 78 | left: 0; 79 | height: 16px; 80 | width: 16px; 81 | background-color: white; 82 | border: 1px solid rgba(136, 136, 136, 0.5); 83 | border-radius: 2px; 84 | } 85 | 86 | .checkbox-custom:hover input ~ .checkmark { 87 | background-color: rgba(136, 136, 136, 0.5); 88 | } 89 | 90 | .checkmark::after { 91 | content: ""; 92 | position: absolute; 93 | display: none; 94 | } 95 | 96 | .checkbox-custom .checkmark::after { 97 | left: 4px; 98 | top: 1px; 99 | width: 5px; 100 | height: 10px; 101 | border: solid #383838; 102 | border-width: 0 2px 2px 0; 103 | -webkit-transform: rotate(45deg); 104 | -ms-transform: rotate(45deg); 105 | transform: rotate(45deg); 106 | } 107 | 108 | .checkbox-custom input:checked ~ .checkmark::after { 109 | display: block; 110 | } 111 | 112 | .header-showing-results { 113 | padding: 30px 20px; 114 | } 115 | 116 | .header-showing-results h3 { 117 | margin: 0; 118 | font-size: 15px; 119 | line-height: 15px; 120 | } 121 | 122 | .showing-results { 123 | grid-column: 2 / 3; 124 | display: flex; 125 | flex-direction: column; 126 | border-left: 1px solid rgba(136, 136, 136, 0.5); 127 | border-right: 1px solid rgba(136, 136, 136, 0.5); 128 | } 129 | 130 | .result { 131 | padding: 20px; 132 | margin-bottom: 10px; 133 | display: flex; 134 | align-items: center; 135 | border-top: 1px solid rgba(136, 136, 136, 0.5); 136 | border-bottom: 1px solid rgba(136, 136, 136, 0.5); 137 | } 138 | 139 | .result:hover { 140 | background-color: white; 141 | } 142 | 143 | .result:hover .gcall-button { 144 | display: flex !important; 145 | } 146 | 147 | .info-results { 148 | margin-left: 30px; 149 | } 150 | 151 | .img-showing-box { 152 | min-width: 200px; 153 | } 154 | 155 | #img-showing01 { 156 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71TjuQMlodL._AC_UY395_.jpg"); 157 | } 158 | 159 | #img-showing02 { 160 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71fvfHBYduL._AC_UX675_.jpg"); 161 | } 162 | 163 | #img-showing03 { 164 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71wOW7nhK6L._AC_UY395_.jpg"); 165 | } 166 | 167 | #img-showing04 { 168 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71hWLGAV1LL._AC_UX569_.jpg"); 169 | } 170 | 171 | .title-info-results { 172 | width: 100%; 173 | display: flex; 174 | justify-content: space-between; 175 | } 176 | 177 | .title-info-results h4 { 178 | font-size: 20px; 179 | } 180 | 181 | .content-info-results { 182 | font-size: 14px; 183 | } 184 | 185 | .footer-info-results { 186 | display: flex; 187 | align-items: center; 188 | justify-content: space-between; 189 | } 190 | 191 | .buttons-info-results { 192 | display: flex; 193 | justify-content: right; 194 | } 195 | 196 | .buttons-result { 197 | margin-left: 15px; 198 | border-radius: 4px; 199 | } 200 | 201 | .pagination-search-results { 202 | padding-top: 20px; 203 | padding-bottom: 50px; 204 | } 205 | 206 | .pag-ul-search-results { 207 | display: flex; 208 | justify-content: center; 209 | list-style: none; 210 | } 211 | 212 | .pag-ul-item { 213 | padding: 1px 7px; 214 | margin: 0 5px; 215 | border-radius: 3px; 216 | border: 1px solid #888; 217 | } 218 | 219 | .pag-ul-item a { 220 | text-decoration: none; 221 | } 222 | 223 | .pag-ul-item:hover, 224 | .pag-ul-item:hover a { 225 | color: white; 226 | background-color: #d35266; 227 | border-color: #d35266; 228 | } 229 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Raleway-Light"; 3 | font-weight: 300; 4 | font-style: normal; 5 | src: url("../fonts/Raleway-Light.ttf"); 6 | } 7 | 8 | @font-face { 9 | font-family: "Raleway-ExtraBold"; 10 | font-weight: 800; 11 | font-style: normal; 12 | src: url("../fonts/Raleway-ExtraBold.ttf"); 13 | } 14 | 15 | @font-face { 16 | font-family: "HelveticaNeue-Light"; 17 | font-weight: 300; 18 | font-style: normal; 19 | src: url("../fonts/Helvetica45Light_22437.ttf"); 20 | } 21 | 22 | @font-face { 23 | font-family: "HelveticaNeue-Medium"; 24 | font-weight: 500; 25 | font-style: normal; 26 | src: url("../fonts/Helvetica65Medium_22443.ttf"); 27 | } 28 | 29 | @font-face { 30 | font-family: "HelveticaNeue-Bold"; 31 | font-weight: 700; 32 | font-style: normal; 33 | src: url("../fonts/Helvetica85Heavy_22449.ttf"); 34 | } 35 | 36 | .f-family-raleway-l { 37 | font-family: "Raleway-Light", sans-serif; 38 | } 39 | 40 | .f-family-raleway-eb { 41 | font-family: "Raleway-ExtraBold", sans-serif; 42 | } 43 | 44 | .f-family-helvetica-l { 45 | font-family: "HelveticaNeue-Light", sans-serif; 46 | } 47 | 48 | .f-family-helvetica-m { 49 | font-family: "HelveticaNeue-Medium", sans-serif; 50 | } 51 | 52 | .f-family-helvetica-b { 53 | font-family: "HelveticaNeue-Bold", sans-serif; 54 | } 55 | 56 | .color00 { 57 | color: white; 58 | } 59 | 60 | .bg-color00 { 61 | background-color: white; 62 | } 63 | 64 | .color01 { 65 | color: #d35266; 66 | } 67 | 68 | .bg-color01 { 69 | background-color: #d35266; 70 | } 71 | 72 | .color02 { 73 | color: #888; 74 | } 75 | 76 | .bg-color02 { 77 | background-color: #888; 78 | } 79 | 80 | .color03 { 81 | color: #383838; 82 | } 83 | 84 | .bg-color03 { 85 | background-color: #383838; 86 | } 87 | 88 | .white-space-nw { 89 | white-space: nowrap; 90 | } 91 | 92 | body { 93 | min-width: 330px; 94 | } 95 | 96 | h3 { 97 | font-size: 20px; 98 | } 99 | 100 | li, 101 | button { 102 | font-family: "HelveticaNeue-Medium", sans-serif; 103 | } 104 | 105 | /* NAVBAR */ 106 | nav { 107 | height: 70px; 108 | display: flex; 109 | flex-wrap: nowrap; 110 | justify-content: space-around; 111 | } 112 | 113 | .nav01-display-none { 114 | max-width: 1500px; 115 | margin: 0 30px; 116 | flex-grow: 1; 117 | flex-shrink: 1; 118 | display: flex; 119 | justify-content: space-between; 120 | } 121 | 122 | .nav02-display-none { 123 | display: none; 124 | justify-content: space-between; 125 | flex-grow: 1; 126 | } 127 | 128 | .nav-list { 129 | padding: 0; 130 | margin: 0; 131 | height: 100%; 132 | flex-grow: 1; 133 | flex-shrink: 1; 134 | display: flex; 135 | justify-content: space-between; 136 | text-align: center; 137 | align-items: center; 138 | list-style: none; 139 | font-size: 14px; 140 | } 141 | 142 | .nav-list li { 143 | padding: 0 5px; 144 | flex-grow: 1; 145 | flex-shrink: 1; 146 | } 147 | 148 | .nav-list a:hover { 149 | text-decoration: none; 150 | color: #d35266; 151 | } 152 | 153 | .header-list01 { 154 | max-width: 900px; 155 | margin-right: 80px; 156 | } 157 | 158 | .header-list02 { 159 | max-width: 250px; 160 | } 161 | 162 | .nav-icon { 163 | margin-right: 3px; 164 | } 165 | 166 | .nav-logo { 167 | height: 70px; 168 | } 169 | 170 | .nav-postad { 171 | height: 35px; 172 | padding: 0 15px 0 15px; 173 | display: inline-block; 174 | line-height: 35px; 175 | border: none; 176 | } 177 | 178 | .nav-postad:hover { 179 | color: #d35266; 180 | background-color: white; 181 | border: none; 182 | } 183 | 184 | .nav-postad:focus { 185 | outline: none; 186 | } 187 | 188 | .fa-user-circle { 189 | font-size: 40px; 190 | } 191 | 192 | /* NAVBAR */ 193 | 194 | /* SEARCH BAR */ 195 | 196 | #header-index { 197 | height: 350px; 198 | } 199 | 200 | .search-header { 201 | margin: auto; 202 | display: grid; 203 | grid-template-rows: 2fr 1fr; 204 | grid-template-columns: 1fr minmax(auto, 1100px) 1fr; 205 | background-image: url("../img/random-grey-variations.png"); 206 | } 207 | 208 | .search-header::before { 209 | background-image: url("../img/Logo-background.png"); 210 | } 211 | 212 | .logo-name { 213 | z-index: 1; 214 | margin: auto; 215 | grid-column: 2 / 3; 216 | } 217 | 218 | .form-header { 219 | z-index: 1; 220 | grid-row: 2 / 3; 221 | grid-column: 2 / 3; 222 | margin: 0 20px; 223 | display: flex; 224 | } 225 | 226 | .form-header label { 227 | margin: 0; 228 | } 229 | 230 | .form-header select, 231 | .form-header input[type=text] { 232 | height: 50px; 233 | padding: 0 15px; 234 | flex-grow: 2; 235 | border: none; 236 | border: 1px solid #d35266; 237 | } 238 | 239 | .form-header select { 240 | padding-left: 35px; 241 | -webkit-appearance: none; 242 | -moz-appearance: none; 243 | appearance: none; 244 | background-image: url("../img/icons8-sort-down-20.png"); 245 | background-repeat: no-repeat; 246 | background-position: 5px; 247 | } 248 | 249 | .form-header input[type=submit] { 250 | height: 50px; 251 | margin-left: 10px; 252 | flex-grow: 1; 253 | border: none; 254 | } 255 | 256 | .form-header input[type=submit]:hover { 257 | color: #d35266; 258 | background-color: white; 259 | } 260 | 261 | /* SEARCH BAR */ 262 | 263 | /* MAIN */ 264 | 265 | main { 266 | margin: auto; 267 | display: grid; 268 | grid-template-columns: 1fr minmax(auto, 1100px) 1fr; 269 | grid-template-rows: auto; 270 | } 271 | 272 | /* MAIN */ 273 | 274 | /* HOT ADS */ 275 | 276 | .section-hotads { 277 | grid-column: 1 / -1; 278 | padding: 0 15px; 279 | } 280 | 281 | .sales-hotads { 282 | position: relative; 283 | max-width: 1100px; 284 | margin: auto; 285 | } 286 | 287 | .c-inner-hotads { 288 | padding: 20px; 289 | } 290 | 291 | .c-inner-hotads h2 { 292 | font-size: 18px; 293 | margin-bottom: 20px; 294 | } 295 | 296 | .c-item-hotads { 297 | padding: 0 40px; 298 | } 299 | 300 | .product-hotads { 301 | max-width: 900px; 302 | min-height: 300px; 303 | margin: auto; 304 | display: flex; 305 | align-content: center; 306 | } 307 | 308 | .hotads-img-box { 309 | position: relative; 310 | margin: auto; 311 | height: 300px; 312 | width: 40%; 313 | display: flex; 314 | justify-content: flex-end; 315 | align-items: flex-end; 316 | background-repeat: no-repeat; 317 | background-position: 50% 50%; 318 | background-size: cover; 319 | } 320 | 321 | .hotads-img-box img { 322 | display: none; 323 | } 324 | 325 | #hotads01 { 326 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61mWiZdSDWL._AC_UX395_.jpg"); 327 | } 328 | 329 | #hotads02 { 330 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61klPQ1HVrL._AC_SY355_.jpg"); 331 | } 332 | 333 | #hotads03 { 334 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/81E3qFSU1ML._AC_SY355_.jpg"); 335 | } 336 | 337 | .slideshow-button-hotads { 338 | position: absolute; 339 | height: 30px; 340 | width: 30px; 341 | background-color: #383838; 342 | } 343 | 344 | .slideshow-button-hotads:hover { 345 | height: 30px; 346 | width: 30px; 347 | background-color: #888; 348 | } 349 | 350 | .backward-button { 351 | right: 30px; 352 | } 353 | 354 | .arrows-position-hotads { 355 | padding-top: 7px; 356 | padding-left: 9px; 357 | } 358 | 359 | .product-info-hotads { 360 | padding: 15px 0 15px 25px; 361 | width: 60%; 362 | display: flex; 363 | flex-direction: column; 364 | justify-content: space-between; 365 | } 366 | 367 | .product-info-hotads p { 368 | font-size: 14px; 369 | } 370 | 371 | .button-space-hotads { 372 | font-size: 0; 373 | } 374 | 375 | .buttons-hotads { 376 | min-height: 40px; 377 | padding-left: 25px; 378 | padding-right: 25px; 379 | margin: 0; 380 | font-size: 16px; 381 | border: none; 382 | } 383 | 384 | .buttons-hotads:hover { 385 | color: #d35266; 386 | background-color: white; 387 | border: none; 388 | } 389 | 390 | .buttons-hotads:focus { 391 | outline: none; 392 | } 393 | 394 | .price-hotads { 395 | border-top-left-radius: 4px; 396 | border-bottom-left-radius: 4px; 397 | border-right: 1px solid #38383880; 398 | } 399 | 400 | .purchase-hotads { 401 | border-top-right-radius: 4px; 402 | border-bottom-right-radius: 4px; 403 | } 404 | 405 | .prev-next-hotads { 406 | position: absolute; 407 | top: 50%; 408 | width: 40px; 409 | height: 40px; 410 | display: flex; 411 | justify-content: center; 412 | align-items: center; 413 | border: 1px solid rgba(136, 136, 136, 0.3); 414 | border-radius: 50%; 415 | background-color: rgba(255, 255, 255, 0.7); 416 | } 417 | 418 | .prev-next-hotads:hover { 419 | text-decoration: none; 420 | color: #d35266; 421 | background-color: rgba(136, 136, 136, 0.2); 422 | } 423 | 424 | #c-prev { 425 | left: 0; 426 | } 427 | 428 | #c-next { 429 | right: 0; 430 | } 431 | 432 | /* HOT ADS */ 433 | 434 | /* MAIN PART 2 */ 435 | 436 | .section-all { 437 | grid-column: 1 / -1; 438 | width: 100%; 439 | display: grid; 440 | grid-template-columns: 1fr minmax(auto, 1100px) 1fr; 441 | grid-template-rows: auto; 442 | border-top: 1px solid rgba(136, 136, 136, 0.3); 443 | background-color: #ffff; 444 | background-image: url("../img/45-degree-fabric-light.png"); 445 | } 446 | 447 | .part2 { 448 | height: 450px; 449 | position: relative; 450 | grid-column: 2 / 3; 451 | margin: auto; 452 | padding-bottom: 15px; 453 | } 454 | 455 | .title { 456 | margin: 30px 0 10px 0; 457 | display: flex; 458 | border-bottom: 1px solid rgba(136, 136, 136, 0.3); 459 | } 460 | 461 | .title img { 462 | padding-left: 5px; 463 | height: 100%; 464 | } 465 | 466 | .title h4 { 467 | padding-left: 15px; 468 | font-size: 18px; 469 | } 470 | 471 | .c-inner-part2 { 472 | overflow-x: hidden; 473 | } 474 | 475 | .row-part2 { 476 | padding: 0 35px 0 35px; 477 | flex-wrap: nowrap; 478 | overflow-x: hidden; 479 | justify-content: space-around; 480 | } 481 | 482 | .product-part2 { 483 | flex-basis: 20%; 484 | padding: 0; 485 | margin: 5px 12px; 486 | display: flex; 487 | flex-direction: column; 488 | border: 1px solid rgba(136, 136, 136, 0.5); 489 | box-shadow: 0 1px 3px rgba(136, 136, 136, 0.5); 490 | } 491 | 492 | .product-img-part2 { 493 | position: relative; 494 | height: 0; 495 | padding-top: 75%; 496 | background-repeat: no-repeat; 497 | background-size: cover; 498 | background-position: 50% 50%; 499 | } 500 | 501 | .product-info-part2 { 502 | position: relative; 503 | flex-grow: 1; 504 | display: flex; 505 | flex-direction: column; 506 | justify-content: space-between; 507 | padding: 0 15px 10px 15px; 508 | font-size: 14px; 509 | } 510 | 511 | .product-info-part2 h5 { 512 | padding-top: 15px; 513 | margin-bottom: 3px; 514 | font-size: 17px; 515 | } 516 | 517 | .product-info-part2 h5:hover { 518 | color: #d35266; 519 | } 520 | 521 | .product-info-part2 p, 522 | .p-info-usednew { 523 | font-size: 12px; 524 | } 525 | 526 | .product-info-part2 a:hover { 527 | text-decoration: none; 528 | } 529 | 530 | .product-more-details { 531 | position: relative; 532 | display: flex; 533 | justify-content: space-between; 534 | align-items: center; 535 | } 536 | 537 | .more-info-button { 538 | height: 25px; 539 | width: 25px; 540 | font-size: 11px; 541 | background-color: transparent; 542 | border: 1px solid rgba(136, 136, 136, 0.5); 543 | } 544 | 545 | .more-info-button:hover { 546 | color: #d35266; 547 | background-color: #383838; 548 | } 549 | 550 | .c-buttons-part2 { 551 | position: absolute; 552 | top: 55%; 553 | } 554 | 555 | .c-buttons-part2:hover { 556 | color: #d35266; 557 | } 558 | 559 | .c-btn-left-part2 { 560 | left: 10px; 561 | } 562 | 563 | .c-btn-right-part2 { 564 | right: 10px; 565 | } 566 | 567 | #row2-1-1 { 568 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/41%2B-FS1L58L._AC_UY395_.jpg"); 569 | } 570 | 571 | #row2-1-2 { 572 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71HWZzwN1-L._AC_SY450_.jpg"); 573 | } 574 | 575 | #row2-1-3 { 576 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61OUmiAou7L._AC_UX395_.jpg"); 577 | } 578 | 579 | #row2-1-4 { 580 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61jHaevIltL._AC_UY395_.jpg"); 581 | } 582 | 583 | #row2-1-5 { 584 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61NDq-n9AOL._AC_UY395_.jpg"); 585 | } 586 | 587 | #row2-2-1 { 588 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61X8KBO0EZL._AC_UY395_.jpg"); 589 | } 590 | 591 | #row2-2-2 { 592 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71S8cMeIYiL._AC_UX395_.jpg"); 593 | } 594 | 595 | #row2-2-3 { 596 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71RDY1wdPDL._AC_UY500_.jpg"); 597 | } 598 | 599 | #row2-2-4 { 600 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71RJ%2BylsFML._AC_UY395_.jpg"); 601 | } 602 | 603 | #row2-2-5 { 604 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61T1eNnuqdL._AC_UY395_.jpg"); 605 | } 606 | 607 | #row2-3-1 { 608 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/610jBM1Im0L._AC_UX535_.jpg"); 609 | } 610 | 611 | #row2-3-2 { 612 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/817T5hGgd1L._AC_UY395_.jpg"); 613 | } 614 | 615 | #row2-3-3 { 616 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/613tw-PBlZL._AC_UX575_.jpg"); 617 | } 618 | 619 | #row2-3-4 { 620 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/51jggcfbnnL._AC_UY395_.jpg"); 621 | } 622 | 623 | #row2-3-5 { 624 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61mfJblzDeL._AC_UY395_.jpg"); 625 | } 626 | 627 | #row3-1-1 { 628 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71p7FdNs-kL._AC_UY395_.jpg"); 629 | } 630 | 631 | #row3-1-2 { 632 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/712AlUGo-TL._AC_UY395_.jpg"); 633 | } 634 | 635 | #row3-1-3 { 636 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61AJKh3FQnL._AC_UY395_.jpg"); 637 | } 638 | 639 | #row3-1-4 { 640 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/8158HNx4CQL._AC_UY395_.jpg"); 641 | } 642 | 643 | #row3-1-5 { 644 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/41ZWgCBz8cL._AC_.jpg"); 645 | } 646 | 647 | #row3-2-1 { 648 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71wLH5pEkBL._AC_UY395_.jpg"); 649 | } 650 | 651 | #row3-2-2 { 652 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61nHVDb%2BIdL._AC_SY450_.jpg"); 653 | } 654 | 655 | #row3-2-3 { 656 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71-szaH-22L._AC_UY395_.jpg"); 657 | } 658 | 659 | #row3-2-4 { 660 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61CSc7xqfvL._AC_UY395_.jpg"); 661 | } 662 | 663 | #row3-2-5 { 664 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61wWef51XvL._AC_UY395_.jpg"); 665 | } 666 | 667 | #row3-3-1 { 668 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/711O3Cc5GnL._AC_UY395_.jpg"); 669 | } 670 | 671 | #row3-3-2 { 672 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71iDX28vwWL._AC_UY395_.jpg"); 673 | } 674 | 675 | #row3-3-3 { 676 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71Vl2Si1H9L._AC_UY395_.jpg"); 677 | } 678 | 679 | #row3-3-4 { 680 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/710GI0XfmzL._AC_UY395_.jpg"); 681 | } 682 | 683 | #row3-3-5 { 684 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/815ao7gH3qL._AC_UY395_.jpg"); 685 | } 686 | 687 | #row4-1-1 { 688 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61PchpKXUFL._AC_UY395_.jpg"); 689 | } 690 | 691 | #row4-1-2 { 692 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71PW4KVpqBL._AC_UX395_.jpg"); 693 | } 694 | 695 | #row4-1-3 { 696 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/81bEe5LrzbL._AC_UX395_.jpg"); 697 | } 698 | 699 | #row4-1-4 { 700 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61Qr%2BQtGdYL._AC_UY500_.jpg"); 701 | } 702 | 703 | #row4-1-5 { 704 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/714WVDxHm7L._AC_UX395_.jpg"); 705 | } 706 | 707 | #row4-2-1 { 708 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/81H8JOVlCxL._AC_UY395_.jpg"); 709 | } 710 | 711 | #row4-2-2 { 712 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/81FmGAStXvL._AC_UY395_.jpg"); 713 | } 714 | 715 | #row4-2-3 { 716 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/81I0FXqAuWL._AC_UY395_.jpg"); 717 | } 718 | 719 | #row4-2-4 { 720 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/81tkZG%2BgjIL._AC_UY395_.jpg"); 721 | } 722 | 723 | #row4-2-5 { 724 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/610Kx3dg3rL._AC_UX569_.jpg"); 725 | } 726 | 727 | #row4-3-1 { 728 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/71rCeYP5qCL._AC_UY395_.jpg"); 729 | } 730 | 731 | #row4-3-2 { 732 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61aqfs03eKL._AC_UX522_.jpg"); 733 | } 734 | 735 | #row4-3-3 { 736 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/815eN9ohD8L._AC_UY395_.jpg"); 737 | } 738 | 739 | #row4-3-4 { 740 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/710m7C5%2BfRL._AC_UY395_.jpg"); 741 | } 742 | 743 | #row4-3-5 { 744 | background-image: url("https://images-na.ssl-images-amazon.com/images/I/61yWPOFetsL._AC_UY395_.jpg"); 745 | } 746 | 747 | /* MAIN PART 2 */ 748 | 749 | /* FOOTER */ 750 | 751 | footer { 752 | margin: auto; 753 | display: grid; 754 | grid-template-columns: 1fr minmax(auto, 1100px) 1fr; 755 | grid-template-rows: auto; 756 | background-color: rgb(255, 255, 255); 757 | border-top: 1px solid rgba(136, 136, 136, 0.3); 758 | } 759 | 760 | footer ul { 761 | list-style: none; 762 | padding-left: 0; 763 | } 764 | 765 | .footer01 { 766 | grid-column: 2 / 3; 767 | margin: 20px 40px 0 40px; 768 | display: flex; 769 | justify-content: space-between; 770 | align-items: flex-start; 771 | } 772 | 773 | .footer01 > * { 774 | font-size: 13px; 775 | } 776 | 777 | .footer01 ul { 778 | padding-right: 50px; 779 | } 780 | 781 | .business-info-footer { 782 | max-width: 200px; 783 | margin-right: 10px; 784 | text-align: justify; 785 | } 786 | 787 | .categories-title-footer, 788 | .navigation-title-footer { 789 | border-bottom: 1px solid #d35266; 790 | } 791 | 792 | .categories-list-box { 793 | flex-shrink: 1; 794 | display: flex; 795 | } 796 | 797 | .navigation-list-footer a:hover, 798 | .categories-list-footer a:hover { 799 | color: #383838; 800 | text-decoration: none; 801 | } 802 | 803 | .op-titlebtn-footer { 804 | margin: 20px 0; 805 | display: flex; 806 | align-items: center; 807 | justify-content: flex-end; 808 | } 809 | 810 | .button-footer { 811 | padding: 6px 12px; 812 | margin-left: 15px; 813 | min-width: 100px; 814 | border: none; 815 | border: 1px solid rgba(136, 136, 136, 0.5); 816 | } 817 | 818 | .button-footer:hover { 819 | color: #d35266; 820 | background-color: #383838; 821 | } 822 | 823 | .button-footer:focus { 824 | outline: none; 825 | } 826 | 827 | .footer02 { 828 | grid-column: 2 / 3; 829 | border-top: 1px solid rgba(136, 136, 136, 0.3); 830 | } 831 | 832 | .items-footer02 { 833 | margin: 20px 40px 0 40px; 834 | display: flex; 835 | justify-content: space-between; 836 | align-items: center; 837 | font-size: 11px; 838 | } 839 | 840 | .social-media-footer02 { 841 | display: flex; 842 | } 843 | 844 | .social-media-footer02 li { 845 | margin-left: 20px; 846 | } 847 | 848 | /* FOOTER */ 849 | -------------------------------------------------------------------------------- /search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Online Shop 15 | 16 | 17 | 18 |
19 | 118 | 141 |
142 | 143 |
144 |
145 |
146 |
147 |
148 |

Condition

149 |
150 |
151 |
152 | 156 | 160 |
161 |
162 |
163 | 164 |
165 |
166 |

Department

167 |
168 | 169 |
170 |
171 | 175 | 179 | 183 | 187 |
188 |
189 |
190 | 191 |
192 |
193 |

Category

194 |
195 | 196 |
197 |
198 | 202 | 206 | 210 | 214 | 218 | 222 |
223 |
224 |
225 | 226 |
227 |
228 |

Price Range

229 |
230 | 231 |
232 |
233 | 237 | 241 | 245 | 249 | 253 |
254 |
255 |
256 |
257 | 258 |
259 |
260 |

261 | 138 262 | Results for 263 | "Flat" 264 | Search at 265 | San Francisco 266 | in Category 267 | Real State 268 |

269 |
270 | 271 |
272 |
273 |
274 |
275 | 276 |
277 |
278 | 279 |
280 | angel wing heart necklace 281 | angel wing heart necklace 282 | angel wing heart necklace 283 |
284 | 285 |
286 |
287 |

Angel Wing Heart Necklace

288 | 291 |
292 | 293 |
294 |

295 | New 296 |

297 | 298 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 299 | nisi ut aliquip ex ea commodo consequat.

300 | 301 |

302 | Location: 303 | 21 Start Street, Maine US 304 |

305 |
306 | 307 |
308 | 23 Nov, 2020 309 |
310 | 313 | 314 | 315 | 318 |
319 |
320 |
321 |
322 | 323 |
324 |
325 |
326 | 327 |
328 |
329 | 330 |
331 | millefiori and silver dangle earrings 332 | millefiori and silver dangle earrings 333 | millefiori and silver dangle earrings 334 |
335 | 336 |
337 |
338 |

Millefiori And Silver Dangle Earrings

339 | 342 |
343 | 344 |
345 |

346 | New 347 |

348 | 349 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 350 | nisi ut aliquip ex ea commodo consequat.

351 | 352 |

353 | Location: 354 | 21 Start Street, New Hampshire US 355 |

356 |
357 | 358 |
359 | 23 Nov, 2020 360 |
361 | 364 | 365 | 366 | 369 |
370 |
371 |
372 |
373 | 374 |
375 |
376 |
377 | 378 |
379 |
380 | 381 |
382 | handmade coastal stones jewelry set 383 | handmade coastal stones jewelry set 384 | handmade coastal stones jewelry set 385 |
386 | 387 |
388 |
389 |

Handmade Coastal Stones Jewelry Set

390 | 393 |
394 | 395 |
396 |

397 | Used 398 |

399 | 400 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 401 | nisi ut aliquip ex ea commodo consequat.

402 | 403 |

404 | Location: 405 | 21 Start Street, New Hampshire US 406 |

407 |
408 | 409 |
410 | 23 Nov, 2020 411 |
412 | 415 | 416 | 417 | 420 |
421 |
422 |
423 |
424 | 425 |
426 |
427 |
428 | 429 |
430 |
431 | 432 |
433 | rose gold with swarovski crystals bracelet 434 | rose gold with swarovski crystals bracelet 435 |
436 | 437 |
438 |
439 |

Rose Gold with Swarovski Crystals Bracelet

440 | 443 |
444 | 445 |
446 |

447 | New 448 |

449 | 450 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 451 | nisi ut aliquip ex ea commodo consequat.

452 | 453 |

454 | Location: 455 | 21 Start Street, New York US 456 |

457 |
458 | 459 |
460 | 23 Nov, 2020 461 |
462 | 465 | 466 | 467 | 470 |
471 |
472 |
473 |
474 |
475 |
    476 |
  • 477 | 1 478 |
    • 479 | 480 |
  • 481 | 2 482 |
    • 483 | 484 |
  • 485 | 3 486 |
    • 487 | 488 |
  • 489 | ... 490 |
    • 491 | 492 |
  • 493 | 7 494 |
    • 495 |
496 |
497 |
498 |
499 |
500 |
501 | 502 | 503 | 683 | 684 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Online Shop 16 | 17 | 18 | 19 |
20 | 119 |
120 |

121 | Anna Mitchell 122 |

123 |
124 | 125 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
141 |
142 |
143 | 144 |
145 |
146 | 271 |
272 | 273 |
274 |
275 |
276 | ring icon 277 |

Rings

278 |
279 | 280 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 |
662 | 663 |
664 |
665 | bracelet icon 666 |

Bracelets

667 |
668 | 669 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 |
1055 | 1056 |
1057 |
1058 | necklace icon 1059 |

Necklaces

1060 |
1061 | 1062 | 1441 | 1442 | 1443 | 1444 | 1445 | 1446 | 1447 | 1448 |
1449 |
1450 |
1451 | 1452 | 1632 | 1633 | 1662 | 1663 | 1664 | 1665 | 1666 | 1667 | 1668 | --------------------------------------------------------------------------------