├── .gitignore ├── .stylelintignore ├── assets ├── images │ ├── box-1.jpg │ ├── box-2.jpg │ ├── box-3.jpg │ ├── box-4.jpg │ ├── genesis-1.jpg │ ├── genesis-2.jpg │ ├── genesis-3.jpg │ ├── genesis-4.jpg │ ├── hero-image.jpg │ ├── main-small.jpg │ ├── generic-shoe1.jpg │ ├── generic-shoe2.jpg │ ├── generic-shoe3.jpg │ ├── generic-shoe4.jpg │ ├── hero-image.jpeg │ ├── main-page-1.png │ ├── main-page-2.png │ ├── main-page-3.png │ ├── product-page-1.png │ ├── product-page-2.png │ ├── product-page-3.png │ ├── catalogue-page-1.png │ ├── catalogue-page-2.png │ ├── catalogue-page-3.png │ ├── sharp_menu_black_18dp.png │ ├── baseline_search_black_18dp.png │ ├── outline_perm_identity_black_18dp.png │ ├── baseline_add_shopping_cart_black_18dp.png │ └── person-shoe-winter-road-white-leather-1134933-pxhere.com.jpg └── stylesheets │ ├── main.scss │ ├── _generic.scss │ ├── category.scss │ ├── main.css.map │ ├── product.scss │ ├── category.css.map │ ├── main.css │ ├── product.css.map │ ├── category.css │ └── product.css ├── .stickler.yml ├── README.md ├── pages ├── main.html ├── product.html └── category.html └── stylelint.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | !**.scss -------------------------------------------------------------------------------- /assets/images/box-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/box-1.jpg -------------------------------------------------------------------------------- /assets/images/box-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/box-2.jpg -------------------------------------------------------------------------------- /assets/images/box-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/box-3.jpg -------------------------------------------------------------------------------- /assets/images/box-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/box-4.jpg -------------------------------------------------------------------------------- /assets/images/genesis-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/genesis-1.jpg -------------------------------------------------------------------------------- /assets/images/genesis-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/genesis-2.jpg -------------------------------------------------------------------------------- /assets/images/genesis-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/genesis-3.jpg -------------------------------------------------------------------------------- /assets/images/genesis-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/genesis-4.jpg -------------------------------------------------------------------------------- /assets/images/hero-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/hero-image.jpg -------------------------------------------------------------------------------- /assets/images/main-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/main-small.jpg -------------------------------------------------------------------------------- /assets/images/generic-shoe1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/generic-shoe1.jpg -------------------------------------------------------------------------------- /assets/images/generic-shoe2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/generic-shoe2.jpg -------------------------------------------------------------------------------- /assets/images/generic-shoe3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/generic-shoe3.jpg -------------------------------------------------------------------------------- /assets/images/generic-shoe4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/generic-shoe4.jpg -------------------------------------------------------------------------------- /assets/images/hero-image.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/hero-image.jpeg -------------------------------------------------------------------------------- /assets/images/main-page-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/main-page-1.png -------------------------------------------------------------------------------- /assets/images/main-page-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/main-page-2.png -------------------------------------------------------------------------------- /assets/images/main-page-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/main-page-3.png -------------------------------------------------------------------------------- /assets/images/product-page-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/product-page-1.png -------------------------------------------------------------------------------- /assets/images/product-page-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/product-page-2.png -------------------------------------------------------------------------------- /assets/images/product-page-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/product-page-3.png -------------------------------------------------------------------------------- /assets/images/catalogue-page-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/catalogue-page-1.png -------------------------------------------------------------------------------- /assets/images/catalogue-page-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/catalogue-page-2.png -------------------------------------------------------------------------------- /assets/images/catalogue-page-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/catalogue-page-3.png -------------------------------------------------------------------------------- /assets/images/sharp_menu_black_18dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/sharp_menu_black_18dp.png -------------------------------------------------------------------------------- /assets/images/baseline_search_black_18dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/baseline_search_black_18dp.png -------------------------------------------------------------------------------- /assets/images/outline_perm_identity_black_18dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/outline_perm_identity_black_18dp.png -------------------------------------------------------------------------------- /assets/images/baseline_add_shopping_cart_black_18dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/baseline_add_shopping_cart_black_18dp.png -------------------------------------------------------------------------------- /assets/images/person-shoe-winter-road-white-leather-1134933-pxhere.com.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Psiale/sneakers-shop/HEAD/assets/images/person-shoe-winter-road-white-leather-1134933-pxhere.com.jpg -------------------------------------------------------------------------------- /.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 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sneakers-shop 2 | ### A recreation of a sneakers shop web design. 3 | 4 | * [The purpose of this webpage](#The-purpouse-of-this-webpage) 5 | * [Built With](#built-with) 6 | * [Credits](#contact) 7 | * [Live Demo](#Live-Version) 8 |
9 | 10 | # The purpose of this webpage: 11 | To recreate the web design by Axel Arigato and build a fully responsive webpage using Flexbox and SCSS. 12 |
13 | 14 | # Built With 15 | HTML5/CSS3 16 | SCSS 17 | 18 | # Credits 19 | ### [Psiale](https://www.linkedin.com/in/alexis-sanchez-dev/) 20 | ### [Axel Arigato](https://www.behance.net/gallery/80392909/AXEL-ARIGATO-Website) 21 | 22 |
23 | 24 | # Live Version 25 | [Live Demo](https://rawcdn.githack.com/Psiale/sneakers-shop/42827bf1d207e2bddbcf6225383811ef75e9e283/pages/main.html#) 26 | 27 | ### Main Page 28 | ![screenshot](assets/images/main-page-1.png) 29 | ![screenshot](assets/images/main-page-2.png) 30 | ![screenshot](assets/images/main-page-3.png) 31 | 32 | ### Catalogue Page 33 | ![screenshot](assets/images/catalogue-page-1.png) 34 | ![screenshot](assets/images/catalogue-page-2.png) 35 | ![screenshot](assets/images/catalogue-page-3.png) 36 | 37 | ### Product Page 38 | ![screenshot](assets/images/product-page-1.png) 39 | ![screenshot](assets/images/product-page-2.png) 40 | ![screenshot](assets/images/product-page-3.png) 41 | 42 | 43 | -------------------------------------------------------------------------------- /assets/stylesheets/main.scss: -------------------------------------------------------------------------------- 1 | @import '../stylesheets/generic'; 2 | 3 | .kanji { 4 | font-size: 6px; 5 | } 6 | 7 | .container { 8 | margin: 0 auto; 9 | max-width: 1200px; 10 | } 11 | 12 | .aside-menu { 13 | width: 15%; 14 | background-color: white; 15 | 16 | @media (min-width: 100px) and (max-width: 1023px) { 17 | display: none; 18 | } 19 | } 20 | 21 | main { 22 | background-color: $color-white; 23 | width: 100%; 24 | 25 | @media (min-width: 100px) and (max-width: 1023px) { 26 | width: 100%; 27 | } 28 | } 29 | 30 | .icon-container { 31 | @include link; 32 | 33 | padding: 20px 0 0 10px; 34 | 35 | span { 36 | @include title; 37 | @include smallest-font; 38 | } 39 | } 40 | 41 | .menu-icon { 42 | width: 12px; 43 | height: 12px; 44 | } 45 | 46 | #page { 47 | @include link; 48 | @include small-font; 49 | } 50 | 51 | .medium-link { 52 | @include link; 53 | @include medium-font; 54 | } 55 | 56 | .social-links { 57 | @include link; 58 | @include smallest-font; 59 | 60 | margin-bottom: 10px; 61 | } 62 | 63 | .m-child-1 { 64 | @media (min-width: 100px) and (max-width: 1023px) { 65 | width: 100%; 66 | } 67 | 68 | @media (max-width: 767px) { 69 | height: 70%; 70 | } 71 | } 72 | 73 | .m-child-2 { 74 | @media (min-width: 100px) and (max-width: 1023px) { 75 | width: 50%; 76 | height: 40%; 77 | background-color: white; 78 | position: absolute; 79 | bottom: 0; 80 | right: 0; 81 | } 82 | 83 | @media (max-width: 767px) { 84 | height: 30%; 85 | width: 100%; 86 | } 87 | 88 | div { 89 | @media (min-width: 100px) and (max-width: 1023px) { 90 | height: 100%; 91 | } 92 | } 93 | } 94 | 95 | .main-image { 96 | background: url(../images/hero-image.jpg) no-repeat; 97 | background-size: cover; 98 | background-position: 69%; 99 | 100 | @media (min-width: 100px) and (max-width: 1023px) { 101 | width: 100%; 102 | height: 100%; 103 | } 104 | } 105 | 106 | .main-small-image { 107 | @include border-left; 108 | 109 | background: url(../images/hero-image.jpeg) no-repeat; 110 | background-size: cover; 111 | background-position: 82%; 112 | 113 | @media (min-width: 100px) and (max-width: 1023px) { 114 | display: none; 115 | } 116 | } 117 | 118 | .rounded-icon { 119 | width: 14px; 120 | height: 14px; 121 | border-radius: $color-white 50%; 122 | } 123 | 124 | .rotate { 125 | transform: rotate(90deg); 126 | } 127 | 128 | header { 129 | display: none; 130 | 131 | @media (min-width: 100px) and (max-width: 1023px) { 132 | background-color: white; 133 | display: flex; 134 | position: absolute; 135 | z-index: 10; 136 | top: 0; 137 | width: 100%; 138 | height: 30px; 139 | 140 | .menu-container { 141 | padding: 5px 10px 0 0; 142 | 143 | .menu-icon { 144 | width: 14px; 145 | height: 14px; 146 | } 147 | } 148 | } 149 | } 150 | 151 | #aside-left, 152 | #aside-right { 153 | position: fixed; 154 | top: 0; 155 | } 156 | 157 | #aside-left { 158 | left: 0; 159 | } 160 | 161 | #aside-right { 162 | right: 0; 163 | } 164 | -------------------------------------------------------------------------------- /assets/stylesheets/_generic.scss: -------------------------------------------------------------------------------- 1 | /* color and font variables */ 2 | 3 | $color-black: #313131; 4 | $color-almostwhite: #f5f5f5; 5 | $color-white: #fff; 6 | $color-gray: #b9b9b9; 7 | $font: 'IBM Plex Sans Condensed', sans-serif; 8 | $border-values: solid 2px white; 9 | 10 | /* Layout, style,size classes and mixins */ 11 | 12 | html { 13 | height: 100%; 14 | 15 | body { 16 | height: 100%; 17 | } 18 | } 19 | 20 | * { 21 | padding: 0; 22 | margin: 0; 23 | } 24 | 25 | a { text-decoration: none; } 26 | 27 | @mixin smallest-font { 28 | font-family: $font; 29 | font-size: 12px; 30 | } 31 | 32 | @mixin small-font { 33 | font-family: $font; 34 | font-size: 14px; 35 | } 36 | 37 | @mixin medium-font { 38 | font-family: $font; 39 | font-size: 18px; 40 | } 41 | 42 | @mixin big-font { 43 | font-family: $font; 44 | font-size: 24px; 45 | } 46 | 47 | @mixin biggest-font { 48 | font-family: $font; 49 | font-size: 40px; 50 | } 51 | 52 | @mixin title { 53 | color: black; 54 | text-transform: uppercase; 55 | font-weight: bold; 56 | } 57 | 58 | @mixin link { 59 | color: black; 60 | text-decoration: none; 61 | } 62 | 63 | @mixin border-left { 64 | border-left: 2px solid white; 65 | } 66 | 67 | .box-title { 68 | background-color: $color-almostwhite; 69 | 70 | @include title; 71 | @include small-font; 72 | 73 | @media (min-width: 100px) and (max-width: 1023px) { 74 | background-color: unset; 75 | } 76 | 77 | @media (max-width: 364px) { 78 | background-color: $color-almostwhite; 79 | z-index: 6; 80 | } 81 | 82 | @media (min-width: 1024px) { 83 | background-color: #f5f5f5; 84 | z-index: 6; 85 | } 86 | } 87 | 88 | .box-title-lightblack { 89 | @include title; 90 | @include small-font; 91 | 92 | color: $color-black; 93 | z-index: 6; 94 | 95 | @media (max-width: 364px) { 96 | background-color: $color-almostwhite; 97 | } 98 | 99 | @media (min-width: 1024px) { 100 | background-color: #f5f5f5; 101 | } 102 | } 103 | 104 | .small-title { 105 | @include title; 106 | @include medium-font; 107 | 108 | line-height: 30px; 109 | } 110 | 111 | .medium-title { 112 | @include title; 113 | @include big-font; 114 | } 115 | 116 | .big-title { 117 | @include title; 118 | @include biggest-font; 119 | 120 | padding-left: 10px; 121 | } 122 | 123 | .link-text { 124 | @include medium-font; 125 | @include link; 126 | 127 | margin-bottom: 30px; 128 | } 129 | 130 | .flex { 131 | display: flex; 132 | } 133 | 134 | .row { 135 | flex-direction: row; 136 | } 137 | 138 | .column { 139 | flex-direction: column; 140 | } 141 | 142 | .wrap { 143 | flex-wrap: wrap; 144 | } 145 | 146 | .w-100 { 147 | width: 100%; 148 | } 149 | 150 | .h-100 { 151 | height: 100%; 152 | } 153 | 154 | .w-50 { 155 | width: 50%; 156 | } 157 | 158 | .h-75 { 159 | height: 75%; 160 | } 161 | 162 | .h-50 { 163 | height: 50%; 164 | } 165 | 166 | .h-25 { 167 | height: 25%; 168 | } 169 | 170 | .p-30 { 171 | padding: 30px; 172 | } 173 | 174 | .padding-aside { 175 | padding-right: 18%; 176 | } 177 | 178 | .pl-30 { 179 | padding-left: 30px; 180 | } 181 | 182 | .justify-content-center { 183 | justify-content: center; 184 | } 185 | 186 | .justify-content-between { 187 | justify-content: space-between; 188 | } 189 | 190 | .justify-content-around { 191 | justify-content: space-around; 192 | } 193 | 194 | .justify-content-evenly { 195 | justify-content: space-evenly; 196 | } 197 | 198 | .justify-content-start { 199 | justify-content: flex-start; 200 | } 201 | 202 | .justify-content-end { 203 | justify-content: flex-end; 204 | } 205 | 206 | .align-items-center { 207 | align-items: center; 208 | } 209 | 210 | .align-items-start { 211 | align-items: flex-start; 212 | } 213 | 214 | .align-items-end { 215 | align-items: flex-end; 216 | } 217 | 218 | @mixin box-image-position { 219 | background-repeat: no-repeat; 220 | background-size: cover; 221 | background-position: center; 222 | } 223 | -------------------------------------------------------------------------------- /pages/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | Axel 16 | 言目 17 | Arigato 18 |
19 |
20 | menu 21 |
22 |
23 | 24 |
25 | 51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |

Axel Arigato x cat

59 |

Collection

60 |
61 | Shop Now 62 |
63 |
64 | 87 |
88 |
89 | 90 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | module.exports = { 4 | "extends": "stylelint-config-recommended", 5 | "ignore-files": [ 6 | "!*.scss", 7 | "**/.scss" 8 | ], 9 | "rules": { 10 | 'at-rule-no-unknown': null, 11 | "at-rule-empty-line-before": [ "always", { 12 | except: [ 13 | "blockless-after-same-name-blockless", 14 | "first-nested", 15 | ], 16 | ignore: ["after-comment"], 17 | } ], 18 | "at-rule-name-case": "lower", 19 | "at-rule-name-space-after": "always-single-line", 20 | "at-rule-semicolon-newline-after": "always", 21 | "block-closing-brace-empty-line-before": "never", 22 | "block-closing-brace-newline-after": "always", 23 | "block-closing-brace-newline-before": "always-multi-line", 24 | "block-closing-brace-space-before": "always-single-line", 25 | "block-opening-brace-newline-after": "always-multi-line", 26 | "block-opening-brace-space-after": "always-single-line", 27 | "block-opening-brace-space-before": "always", 28 | "color-hex-case": "lower", 29 | "color-hex-length": "short", 30 | "comment-empty-line-before": [ "always", { 31 | except: ["first-nested"], 32 | ignore: ["stylelint-commands"], 33 | } ], 34 | "comment-whitespace-inside": "always", 35 | "custom-property-empty-line-before": [ "always", { 36 | except: [ 37 | "after-custom-property", 38 | "first-nested", 39 | ], 40 | ignore: [ 41 | "after-comment", 42 | "inside-single-line-block", 43 | ], 44 | } ], 45 | "declaration-bang-space-after": "never", 46 | "declaration-bang-space-before": "always", 47 | "declaration-block-semicolon-newline-after": "always-multi-line", 48 | "declaration-block-semicolon-space-after": "always-single-line", 49 | "declaration-block-semicolon-space-before": "never", 50 | "declaration-block-single-line-max-declarations": 1, 51 | "declaration-block-trailing-semicolon": "always", 52 | "declaration-colon-newline-after": "always-multi-line", 53 | "declaration-colon-space-after": "always-single-line", 54 | "declaration-colon-space-before": "never", 55 | "declaration-empty-line-before": [ "always", { 56 | except: [ 57 | "after-declaration", 58 | "first-nested", 59 | ], 60 | ignore: [ 61 | "after-comment", 62 | "inside-single-line-block", 63 | ], 64 | } ], 65 | "function-comma-newline-after": "always-multi-line", 66 | "function-comma-space-after": "always-single-line", 67 | "function-comma-space-before": "never", 68 | "function-max-empty-lines": 0, 69 | "function-name-case": "lower", 70 | "function-parentheses-newline-inside": "always-multi-line", 71 | "function-parentheses-space-inside": "never-single-line", 72 | "function-whitespace-after": "always", 73 | "indentation": 2, 74 | "length-zero-no-unit": true, 75 | "max-empty-lines": 1, 76 | "media-feature-colon-space-after": "always", 77 | "media-feature-colon-space-before": "never", 78 | "media-feature-name-case": "lower", 79 | "media-feature-parentheses-space-inside": "never", 80 | "media-feature-range-operator-space-after": "always", 81 | "media-feature-range-operator-space-before": "always", 82 | "media-query-list-comma-newline-after": "always-multi-line", 83 | "media-query-list-comma-space-after": "always-single-line", 84 | "media-query-list-comma-space-before": "never", 85 | "no-eol-whitespace": true, 86 | "no-missing-end-of-source-newline": true, 87 | "number-leading-zero": "always", 88 | "number-no-trailing-zeros": true, 89 | "property-case": "lower", 90 | "rule-empty-line-before": [ "always-multi-line", { 91 | except: ["first-nested"], 92 | ignore: ["after-comment"], 93 | } ], 94 | "selector-attribute-brackets-space-inside": "never", 95 | "selector-attribute-operator-space-after": "never", 96 | "selector-attribute-operator-space-before": "never", 97 | "selector-combinator-space-after": "always", 98 | "selector-combinator-space-before": "always", 99 | "selector-descendant-combinator-no-non-space": true, 100 | "selector-list-comma-newline-after": "always", 101 | "selector-list-comma-space-before": "never", 102 | "selector-max-empty-lines": 0, 103 | "selector-pseudo-class-case": "lower", 104 | "selector-pseudo-class-parentheses-space-inside": "never", 105 | "selector-pseudo-element-case": "lower", 106 | "selector-pseudo-element-colon-notation": "double", 107 | "selector-type-case": "lower", 108 | "unit-case": "lower", 109 | "value-list-comma-newline-after": "always-multi-line", 110 | "value-list-comma-space-after": "always-single-line", 111 | "value-list-comma-space-before": "never", 112 | "value-list-max-empty-lines": 0, 113 | }, 114 | } 115 | -------------------------------------------------------------------------------- /assets/stylesheets/category.scss: -------------------------------------------------------------------------------- 1 | @import '../stylesheets/_generic.scss'; 2 | 3 | .kanji { 4 | font-size: 6px; 5 | } 6 | 7 | .aside-menu { 8 | position: sticky; 9 | top: 0; 10 | width: 15%; 11 | background-color: white; 12 | 13 | @media (min-width: 100px) and (max-width: 1023px) { 14 | display: none; 15 | } 16 | } 17 | 18 | main { 19 | margin: 0 auto; 20 | z-index: 1; 21 | width: 70%; 22 | 23 | @media (min-width: 100px) and (max-width: 1023px) { 24 | width: 100%; 25 | } 26 | } 27 | 28 | .category-container { 29 | height: 20%; 30 | 31 | @media (min-width: 100px) and (max-width: 1023px) { 32 | display: none; 33 | } 34 | } 35 | 36 | .catalogue-container { 37 | height: 80%; 38 | 39 | @media (min-width: 100px) and (max-width: 1023px) { 40 | margin-top: 30px; 41 | height: 100%; 42 | } 43 | } 44 | 45 | .catalogue-child { 46 | width: calc(33.33% - 8px); 47 | position: relative; 48 | background-color: $color-almostwhite; 49 | background-position: 100%; 50 | border: $color-white 2px solid; 51 | 52 | @media (min-width: 100px) and (max-width: 1023px) { 53 | width: 100%; 54 | height: 50%; 55 | } 56 | } 57 | 58 | .background-top-cover { 59 | position: absolute; 60 | background-color: $color-almostwhite; 61 | width: 100%; 62 | height: 50px; 63 | top: 0; 64 | left: 0; 65 | z-index: 2; 66 | } 67 | 68 | .background-bottom-cover { 69 | position: absolute; 70 | background-color: $color-almostwhite; 71 | width: 100%; 72 | height: 30px; 73 | bottom: 0; 74 | left: 0; 75 | z-index: 2; 76 | 77 | @media (min-width: 812px) { 78 | height: 50px; 79 | } 80 | 81 | @media (max-width: 427px) { 82 | height: 50px; 83 | } 84 | 85 | @media (min-width: 428px) and (max-width: 811px) { 86 | height: 30px; 87 | } 88 | } 89 | 90 | .cc-1, 91 | .cc-2, 92 | .cc-3, 93 | .cc-4 { 94 | @include box-image-position; 95 | } 96 | 97 | .cc-1 { 98 | background-image: url(../images/box-1.jpg); 99 | } 100 | 101 | .cc-2 { 102 | background-image: url(../images/box-2.jpg); 103 | } 104 | 105 | .cc-3 { 106 | background-image: url(../images/box-3.jpg); 107 | } 108 | 109 | .cc-4 { 110 | background-image: url(../images/box-4.jpg); 111 | background-size: contain; 112 | 113 | @media (min-width: 100px) and (max-width: 1023px) { 114 | background-size: cover; 115 | } 116 | 117 | @media (max-width: 463px) { 118 | background-size: contain; 119 | } 120 | } 121 | 122 | .icon-container { 123 | @include link; 124 | 125 | padding: 20px 0 0 10px; 126 | 127 | span { 128 | @include title; 129 | @include smallest-font; 130 | } 131 | 132 | @media (min-width: 100px) and (max-width: 1023px) { 133 | padding: 0 0 0 10px; 134 | } 135 | } 136 | 137 | .menu-icon { 138 | width: 12px; 139 | height: 12px; 140 | } 141 | 142 | #page { 143 | @include link; 144 | @include small-font; 145 | } 146 | 147 | .medium-link { 148 | @include link; 149 | @include medium-font; 150 | } 151 | 152 | .social-links { 153 | @include link; 154 | @include smallest-font; 155 | 156 | margin-bottom: 10px; 157 | } 158 | 159 | .m-child-1 { 160 | @media (min-width: 100px) and (max-width: 1023px) { 161 | width: 100%; 162 | } 163 | 164 | @media (max-width: 767px) { 165 | height: 70%; 166 | } 167 | } 168 | 169 | .m-child-2 { 170 | @media (min-width: 100px) and (max-width: 1023px) { 171 | width: 50%; 172 | height: 40%; 173 | background-color: white; 174 | position: absolute; 175 | bottom: 0; 176 | right: 0; 177 | } 178 | 179 | @media (max-width: 767px) { 180 | height: 30%; 181 | width: 100%; 182 | } 183 | 184 | div { 185 | @media (min-width: 100px) and (max-width: 1023px) { 186 | height: 100%; 187 | } 188 | } 189 | } 190 | 191 | .main-image { 192 | background: url(../images/hero-image.jpg) no-repeat; 193 | background-size: cover; 194 | background-position: 69%; 195 | 196 | @media (min-width: 100px) and (max-width: 1023px) { 197 | width: 100%; 198 | height: 100%; 199 | } 200 | } 201 | 202 | .main-small-image { 203 | @include border-left; 204 | 205 | background: url(../images/hero-image.jpeg) no-repeat; 206 | background-size: cover; 207 | background-position: 82%; 208 | 209 | @media (min-width: 100px) and (max-width: 1023px) { 210 | display: none; 211 | } 212 | } 213 | 214 | .rounded-icon { 215 | width: 14px; 216 | height: 14px; 217 | border-radius: $color-white 50%; 218 | } 219 | 220 | .rotate { 221 | transform: rotate(90deg); 222 | } 223 | 224 | header { 225 | display: none; 226 | 227 | @media (min-width: 100px) and (max-width: 1023px) { 228 | background-color: white; 229 | display: flex; 230 | position: absolute; 231 | z-index: 10; 232 | top: 0; 233 | width: 100%; 234 | height: 30px; 235 | 236 | .menu-container { 237 | padding: 5px 10px 0 0; 238 | 239 | .menu-icon { 240 | width: 14px; 241 | height: 14px; 242 | } 243 | } 244 | } 245 | } 246 | 247 | .box-corner-tl { 248 | padding: 12% 0 0 12%; 249 | } 250 | 251 | .box-corner-bl { 252 | padding: 0 0 12% 12%; 253 | 254 | @media (max-width: 428px) { 255 | padding: 0 0 28% 12%; 256 | } 257 | } 258 | 259 | .box-corner-br { 260 | padding: 0 12% 12% 0; 261 | 262 | @media (max-width: 428px) { 263 | padding: 0 12% 28% 0; 264 | } 265 | } 266 | 267 | #aside-left, 268 | #aside-right { 269 | position: fixed; 270 | top: 0; 271 | } 272 | 273 | #aside-left { 274 | left: 0; 275 | } 276 | 277 | #aside-right { 278 | right: 0; 279 | } 280 | -------------------------------------------------------------------------------- /assets/stylesheets/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "main.scss", 6 | "_generic.scss" 7 | ], 8 | "names": [], 9 | "file": "main.css" 10 | } -------------------------------------------------------------------------------- /assets/stylesheets/product.scss: -------------------------------------------------------------------------------- 1 | @import '../stylesheets/generic'; 2 | 3 | #display-tablet-none { 4 | @media (min-width: 100px) and (max-width: 1023px) { 5 | display: none; 6 | } 7 | } 8 | 9 | #display-desktop-none { 10 | @media (min-width: 1024px) { 11 | display: none; 12 | } 13 | } 14 | 15 | .kanji { 16 | font-size: 6px; 17 | } 18 | 19 | .aside-menu { 20 | position: sticky; 21 | top: 0; 22 | width: calc(15% - 16px); 23 | background-color: white; 24 | 25 | @media (min-width: 100px) and (max-width: 1023px) { 26 | display: none; 27 | } 28 | } 29 | 30 | main { 31 | margin: 0 auto; 32 | width: calc(70% - 60px); 33 | 34 | @media (min-width: 100px) and (max-width: 1023px) { 35 | width: 100%; 36 | } 37 | } 38 | 39 | .category-container { 40 | height: 20%; 41 | 42 | @media (min-width: 100px) and (max-width: 1023px) { 43 | display: none; 44 | } 45 | } 46 | 47 | .shoe-1, 48 | .shoe-2, 49 | .shoe-3, 50 | .shoe-4 { 51 | border-top: $border-values; 52 | border-bottom: $border-values; 53 | width: 100%; 54 | height: 100%; 55 | object-fit: cover; 56 | 57 | @media (min-width: 100px) and (max-width: 1023px) { 58 | border-bottom: 0; 59 | border-top: 0; 60 | border-left: $border-values; 61 | border-right: $border-values; 62 | } 63 | } 64 | 65 | .icon-container { 66 | @include link; 67 | 68 | padding: 20px 0 0 10px; 69 | 70 | span { 71 | @include title; 72 | @include smallest-font; 73 | } 74 | 75 | @media (min-width: 100px) and (max-width: 1023px) { 76 | padding: 0 0 0 10px; 77 | } 78 | } 79 | 80 | .menu-icon { 81 | width: 12px; 82 | height: 12px; 83 | } 84 | 85 | #page { 86 | @include link; 87 | @include small-font; 88 | } 89 | 90 | .social-links { 91 | @include link; 92 | @include smallest-font; 93 | 94 | margin-bottom: 10px; 95 | } 96 | 97 | .rounded-icon { 98 | width: 14px; 99 | height: 14px; 100 | border-radius: $color-white 50%; 101 | } 102 | 103 | .rotate { 104 | transform: rotate(90deg); 105 | } 106 | 107 | header { 108 | display: none; 109 | 110 | @media (min-width: 100px) and (max-width: 1023px) { 111 | background-color: white; 112 | display: flex; 113 | position: absolute; 114 | z-index: 10; 115 | top: 0; 116 | width: 100%; 117 | height: 30px; 118 | 119 | .menu-container { 120 | padding: 5px 10px 0 0; 121 | 122 | .menu-icon { 123 | width: 14px; 124 | height: 14px; 125 | } 126 | } 127 | } 128 | } 129 | 130 | #aside-left, 131 | #aside-right { 132 | position: fixed; 133 | top: 0; 134 | } 135 | 136 | .main-container { 137 | @media (min-width: 100px) and (max-width: 1023px) { 138 | margin-top: 32px; 139 | width: 100%; 140 | height: 100%; 141 | flex-direction: row; 142 | } 143 | 144 | .product-images-container { 145 | @media (max-width: 767px) { 146 | display: none; 147 | } 148 | 149 | .product-images-container { 150 | height: 33%; 151 | } 152 | 153 | @media (min-width: 100px) and (max-width: 1023px) { 154 | width: 25%; 155 | height: 100%; 156 | flex-direction: column; 157 | } 158 | 159 | .product-image-child { 160 | @media (min-width: 100px) and (max-width: 1023px) { 161 | width: 100%; 162 | height: 25%; 163 | } 164 | } 165 | } 166 | 167 | .product-description-child-1 { 168 | background-color: $color-almostwhite; 169 | width: 35%; 170 | 171 | @media (min-width: 100px) and (max-width: 1023px) { 172 | width: 75%; 173 | height: 100%; 174 | } 175 | 176 | @media (max-width: 768px) { 177 | width: 100%; 178 | } 179 | 180 | .pd-1 { 181 | display: none; 182 | 183 | @media (min-width: 100px) and (max-width: 1023px) { 184 | background: url(../images/generic-shoe2.jpg) no-repeat 100%; 185 | background-size: cover; 186 | display: initial; 187 | position: relative; 188 | width: 100%; 189 | height: 45%; 190 | 191 | .product-cost { 192 | position: absolute; 193 | top: 10px; 194 | right: 15px; 195 | } 196 | 197 | .number-image-page { 198 | position: absolute; 199 | bottom: 10px; 200 | left: 45%; 201 | } 202 | } 203 | } 204 | 205 | .pd-2 { 206 | height: 25%; 207 | 208 | @media (min-width: 100px) and (max-width: 1023px) { 209 | height: 15%; 210 | } 211 | } 212 | 213 | .pd-3 { 214 | height: 10%; 215 | } 216 | 217 | .pd-4 { 218 | height: 50%; 219 | 220 | @media (min-width: 100px) and (max-width: 1023px) { 221 | height: 20%; 222 | } 223 | } 224 | 225 | .pd-5 { 226 | height: 10%; 227 | } 228 | } 229 | } 230 | 231 | #aside-left { 232 | left: 0; 233 | } 234 | 235 | #aside-right { 236 | right: 0; 237 | } 238 | 239 | .pd, 240 | .cart-child { 241 | border: $border-values; 242 | } 243 | 244 | .pd { 245 | @media (min-width: 100px) and (max-width: 1023px) { 246 | padding: 0; 247 | } 248 | } 249 | 250 | .add-cart-child-1 { 251 | width: 10%; 252 | } 253 | 254 | .add-cart-child-2 { 255 | width: 90%; 256 | } 257 | 258 | .pd, 259 | .details-child { 260 | padding: 10px; 261 | } 262 | 263 | .padding-lr-text { 264 | padding: 0 10px; 265 | } 266 | 267 | .product-description-child-2 { 268 | position: relative; 269 | width: 65%; 270 | background: url(../images/generic-shoe2.jpg) no-repeat 100%; 271 | background-size: cover; 272 | 273 | .product-cost { 274 | position: absolute; 275 | top: 15px; 276 | right: 30px; 277 | } 278 | 279 | .images-counter-container { 280 | height: 10%; 281 | 282 | .counter-container-1 { 283 | width: 65%; 284 | } 285 | 286 | .counter-container-2 { 287 | background-color: white; 288 | width: 35%; 289 | margin-left: 20px; 290 | } 291 | } 292 | 293 | @media (min-width: 100px) and (max-width: 1023px) { 294 | display: none; 295 | } 296 | } 297 | -------------------------------------------------------------------------------- /assets/stylesheets/category.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "category.scss", 6 | "_generic.scss" 7 | ], 8 | "names": [], 9 | "file": "category.css" 10 | } -------------------------------------------------------------------------------- /assets/stylesheets/main.css: -------------------------------------------------------------------------------- 1 | /* color and font variables */ 2 | /* Layout, style,size classes and mixins */html { 3 | height: 100%; 4 | } 5 | 6 | html body { 7 | height: 100%; 8 | } 9 | 10 | * { 11 | padding: 0; 12 | margin: 0; 13 | } 14 | 15 | a { 16 | text-decoration: none; 17 | } 18 | 19 | .box-title { 20 | background-color: #f5f5f5; 21 | color: black; 22 | text-transform: uppercase; 23 | font-weight: bold; 24 | font-family: "IBM Plex Sans Condensed", sans-serif; 25 | font-size: 14px; 26 | } 27 | 28 | @media (min-width: 100px) and (max-width: 1023px) { 29 | .box-title { 30 | background-color: unset; 31 | } 32 | } 33 | 34 | @media (max-width: 364px) { 35 | .box-title { 36 | background-color: #f5f5f5; 37 | z-index: 6; 38 | } 39 | } 40 | 41 | @media (min-width: 1024px) { 42 | .box-title { 43 | background-color: #f5f5f5; 44 | z-index: 6; 45 | } 46 | } 47 | 48 | .box-title-lightblack { 49 | text-transform: uppercase; 50 | font-weight: bold; 51 | font-family: "IBM Plex Sans Condensed", sans-serif; 52 | font-size: 14px; 53 | color: #313131; 54 | z-index: 6; 55 | } 56 | 57 | @media (max-width: 364px) { 58 | .box-title-lightblack { 59 | background-color: #f5f5f5; 60 | } 61 | } 62 | 63 | @media (min-width: 1024px) { 64 | .box-title-lightblack { 65 | background-color: #f5f5f5; 66 | } 67 | } 68 | 69 | .small-title { 70 | color: black; 71 | text-transform: uppercase; 72 | font-weight: bold; 73 | font-family: "IBM Plex Sans Condensed", sans-serif; 74 | font-size: 18px; 75 | line-height: 30px; 76 | } 77 | 78 | .medium-title { 79 | color: black; 80 | text-transform: uppercase; 81 | font-weight: bold; 82 | font-family: "IBM Plex Sans Condensed", sans-serif; 83 | font-size: 24px; 84 | } 85 | 86 | .big-title { 87 | color: black; 88 | text-transform: uppercase; 89 | font-weight: bold; 90 | font-family: "IBM Plex Sans Condensed", sans-serif; 91 | font-size: 40px; 92 | padding-left: 10px; 93 | } 94 | 95 | .link-text { 96 | font-family: "IBM Plex Sans Condensed", sans-serif; 97 | font-size: 18px; 98 | color: black; 99 | text-decoration: none; 100 | margin-bottom: 30px; 101 | } 102 | 103 | .flex { 104 | display: -webkit-box; 105 | display: -ms-flexbox; 106 | display: flex; 107 | } 108 | 109 | .row { 110 | -webkit-box-orient: horizontal; 111 | -webkit-box-direction: normal; 112 | -ms-flex-direction: row; 113 | flex-direction: row; 114 | } 115 | 116 | .column { 117 | -webkit-box-orient: vertical; 118 | -webkit-box-direction: normal; 119 | -ms-flex-direction: column; 120 | flex-direction: column; 121 | } 122 | 123 | .wrap { 124 | -ms-flex-wrap: wrap; 125 | flex-wrap: wrap; 126 | } 127 | 128 | .w-100 { 129 | width: 100%; 130 | } 131 | 132 | .h-100 { 133 | height: 100%; 134 | } 135 | 136 | .w-50 { 137 | width: 50%; 138 | } 139 | 140 | .h-75 { 141 | height: 75%; 142 | } 143 | 144 | .h-50 { 145 | height: 50%; 146 | } 147 | 148 | .h-25 { 149 | height: 25%; 150 | } 151 | 152 | .p-30 { 153 | padding: 30px; 154 | } 155 | 156 | .padding-aside { 157 | padding-right: 18%; 158 | } 159 | 160 | .pl-30 { 161 | padding-left: 30px; 162 | } 163 | 164 | .justify-content-center { 165 | -webkit-box-pack: center; 166 | -ms-flex-pack: center; 167 | justify-content: center; 168 | } 169 | 170 | .justify-content-between { 171 | -webkit-box-pack: justify; 172 | -ms-flex-pack: justify; 173 | justify-content: space-between; 174 | } 175 | 176 | .justify-content-around { 177 | -ms-flex-pack: distribute; 178 | justify-content: space-around; 179 | } 180 | 181 | .justify-content-evenly { 182 | -webkit-box-pack: space-evenly; 183 | -ms-flex-pack: space-evenly; 184 | justify-content: space-evenly; 185 | } 186 | 187 | .justify-content-start { 188 | -webkit-box-pack: start; 189 | -ms-flex-pack: start; 190 | justify-content: flex-start; 191 | } 192 | 193 | .justify-content-end { 194 | -webkit-box-pack: end; 195 | -ms-flex-pack: end; 196 | justify-content: flex-end; 197 | } 198 | 199 | .align-items-center { 200 | -webkit-box-align: center; 201 | -ms-flex-align: center; 202 | align-items: center; 203 | } 204 | 205 | .align-items-start { 206 | -webkit-box-align: start; 207 | -ms-flex-align: start; 208 | align-items: flex-start; 209 | } 210 | 211 | .align-items-end { 212 | -webkit-box-align: end; 213 | -ms-flex-align: end; 214 | align-items: flex-end; 215 | } 216 | 217 | .kanji { 218 | font-size: 6px; 219 | } 220 | 221 | .container { 222 | margin: 0 auto; 223 | max-width: 1200px; 224 | } 225 | 226 | .aside-menu { 227 | width: 15%; 228 | background-color: white; 229 | } 230 | 231 | @media (min-width: 100px) and (max-width: 1023px) { 232 | .aside-menu { 233 | display: none; 234 | } 235 | } 236 | 237 | main { 238 | background-color: #fff; 239 | width: 100%; 240 | } 241 | 242 | @media (min-width: 100px) and (max-width: 1023px) { 243 | main { 244 | width: 100%; 245 | } 246 | } 247 | 248 | .icon-container { 249 | color: black; 250 | text-decoration: none; 251 | padding: 20px 0 0 10px; 252 | } 253 | 254 | .icon-container span { 255 | color: black; 256 | text-transform: uppercase; 257 | font-weight: bold; 258 | font-family: "IBM Plex Sans Condensed", sans-serif; 259 | font-size: 12px; 260 | } 261 | 262 | .menu-icon { 263 | width: 12px; 264 | height: 12px; 265 | } 266 | 267 | #page { 268 | color: black; 269 | text-decoration: none; 270 | font-family: "IBM Plex Sans Condensed", sans-serif; 271 | font-size: 14px; 272 | } 273 | 274 | .medium-link { 275 | color: black; 276 | text-decoration: none; 277 | font-family: "IBM Plex Sans Condensed", sans-serif; 278 | font-size: 18px; 279 | } 280 | 281 | .social-links { 282 | color: black; 283 | text-decoration: none; 284 | font-family: "IBM Plex Sans Condensed", sans-serif; 285 | font-size: 12px; 286 | margin-bottom: 10px; 287 | } 288 | 289 | @media (min-width: 100px) and (max-width: 1023px) { 290 | .m-child-1 { 291 | width: 100%; 292 | } 293 | } 294 | 295 | @media (max-width: 767px) { 296 | .m-child-1 { 297 | height: 70%; 298 | } 299 | } 300 | 301 | @media (min-width: 100px) and (max-width: 1023px) { 302 | .m-child-2 { 303 | width: 50%; 304 | height: 40%; 305 | background-color: white; 306 | position: absolute; 307 | bottom: 0; 308 | right: 0; 309 | } 310 | } 311 | 312 | @media (max-width: 767px) { 313 | .m-child-2 { 314 | height: 30%; 315 | width: 100%; 316 | } 317 | } 318 | 319 | @media (min-width: 100px) and (max-width: 1023px) { 320 | .m-child-2 div { 321 | height: 100%; 322 | } 323 | } 324 | 325 | .main-image { 326 | background: url(../images/hero-image.jpg) no-repeat; 327 | background-size: cover; 328 | background-position: 69%; 329 | } 330 | 331 | @media (min-width: 100px) and (max-width: 1023px) { 332 | .main-image { 333 | width: 100%; 334 | height: 100%; 335 | } 336 | } 337 | 338 | .main-small-image { 339 | border-left: 2px solid white; 340 | background: url(../images/hero-image.jpeg) no-repeat; 341 | background-size: cover; 342 | background-position: 82%; 343 | } 344 | 345 | @media (min-width: 100px) and (max-width: 1023px) { 346 | .main-small-image { 347 | display: none; 348 | } 349 | } 350 | 351 | .rounded-icon { 352 | width: 14px; 353 | height: 14px; 354 | border-radius: #fff 50%; 355 | } 356 | 357 | .rotate { 358 | -webkit-transform: rotate(90deg); 359 | transform: rotate(90deg); 360 | } 361 | 362 | header { 363 | display: none; 364 | } 365 | 366 | @media (min-width: 100px) and (max-width: 1023px) { 367 | header { 368 | background-color: white; 369 | display: -webkit-box; 370 | display: -ms-flexbox; 371 | display: flex; 372 | position: absolute; 373 | z-index: 10; 374 | top: 0; 375 | width: 100%; 376 | height: 30px; 377 | } 378 | 379 | header .menu-container { 380 | padding: 5px 10px 0 0; 381 | } 382 | 383 | header .menu-container .menu-icon { 384 | width: 14px; 385 | height: 14px; 386 | } 387 | } 388 | 389 | #aside-left, 390 | #aside-right { 391 | position: fixed; 392 | top: 0; 393 | } 394 | 395 | #aside-left { 396 | left: 0; 397 | } 398 | 399 | #aside-right { 400 | right: 0; 401 | } 402 | /*# sourceMappingURL=main.css.map */ 403 | -------------------------------------------------------------------------------- /assets/stylesheets/product.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "product.scss", 6 | "_generic.scss" 7 | ], 8 | "names": [], 9 | "file": "product.css" 10 | } -------------------------------------------------------------------------------- /pages/product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 | Axel 15 | 言目 16 | Arigato 17 | 18 |
19 | menu 20 |
21 |
22 |
23 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | 3880 58 | 04/05 59 |
60 |
61 | 63 |
Tech Runner
64 |
380 USD
65 |
Multicolored Leather
66 |
67 |
68 | 40 69 | 41 70 | 42 71 | 43 72 | 44 73 | 45 74 | 46 75 |
76 |
77 |
78 | 79 |
80 |
81 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, eveniet nemo, autem maiores nostrum cupiditate omnis. 82 |
83 |
84 |
85 |
+
86 |
Add To Cart
87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 |
95 | 97 |
Tech Runner
98 |
380 USD
99 |
Multicolored Leather
100 |
101 |
102 | 40 103 | 41 104 | 42 105 | 43 106 | 44 107 | 45 108 | 46 109 |
110 |
111 |
112 | 113 |
114 |
115 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, eveniet nemo, autem maiores nostrum cupiditate omnis. 116 |
117 |
118 |
119 |
+
120 |
Add To Cart
121 |
122 |
123 |
124 | 3880 125 |
126 |
127 | 04/05 128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | 159 |
160 |
161 | 162 | -------------------------------------------------------------------------------- /pages/category.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | Axel 17 | 言目 18 | Arigato 19 | 20 |
21 | menu 22 |
23 |
24 | 50 |
51 |
52 |

Sneakers

53 |
54 |
55 | 56 |
57 |
58 |
59 |
30089
60 |
multi
61 |
62 |
63 |
380 USD
64 |
65 | 66 | 67 |
68 |
69 |
70 |
30097
71 |
System Runner
72 |
73 |
74 |
360 USD
75 |
76 | 77 | 78 |
79 |
27126
80 |
Dunk Sneaker
81 |
82 |
83 |
84 |
85 |
240 USD
86 |
87 | 88 | 89 |
90 |
28162
91 |
Clean Sneaker
92 |
93 |
94 |
95 |
96 |
240 USD
97 |
98 | 99 | 100 | 101 |
102 |
103 |
104 |
30089
105 |
multi
106 |
107 |
108 |
380 USD
109 |
110 | 111 | 112 |
113 |
114 |
115 |
30097
116 |
System Runner
117 |
118 |
119 |
360 USD
120 |
121 | 122 | 123 |
124 |
27126
125 |
Dunk Sneaker
126 |
127 |
128 |
129 |
130 |
240 USD
131 |
132 | 133 | 134 |
135 |
28162
136 |
Clean Sneaker
137 |
138 |
139 |
140 |
141 |
240 USD
142 |
143 | 144 | 145 |
146 |
147 |
148 |
30089
149 |
multi
150 |
151 |
152 |
380 USD
153 |
154 | 155 | 156 |
157 | 158 |
159 | 182 |
183 | 184 | -------------------------------------------------------------------------------- /assets/stylesheets/category.css: -------------------------------------------------------------------------------- 1 | /* color and font variables */ 2 | /* Layout, style,size classes and mixins */html { 3 | height: 100%; 4 | } 5 | 6 | html body { 7 | height: 100%; 8 | } 9 | 10 | * { 11 | padding: 0; 12 | margin: 0; 13 | } 14 | 15 | a { 16 | text-decoration: none; 17 | } 18 | 19 | .box-title { 20 | background-color: #f5f5f5; 21 | color: black; 22 | text-transform: uppercase; 23 | font-weight: bold; 24 | font-family: "IBM Plex Sans Condensed", sans-serif; 25 | font-size: 14px; 26 | } 27 | 28 | @media (min-width: 100px) and (max-width: 1023px) { 29 | .box-title { 30 | background-color: unset; 31 | } 32 | } 33 | 34 | @media (max-width: 364px) { 35 | .box-title { 36 | background-color: #f5f5f5; 37 | z-index: 6; 38 | } 39 | } 40 | 41 | @media (min-width: 1024px) { 42 | .box-title { 43 | background-color: #f5f5f5; 44 | z-index: 6; 45 | } 46 | } 47 | 48 | .box-title-lightblack { 49 | text-transform: uppercase; 50 | font-weight: bold; 51 | font-family: "IBM Plex Sans Condensed", sans-serif; 52 | font-size: 14px; 53 | color: #313131; 54 | z-index: 6; 55 | } 56 | 57 | @media (max-width: 364px) { 58 | .box-title-lightblack { 59 | background-color: #f5f5f5; 60 | } 61 | } 62 | 63 | @media (min-width: 1024px) { 64 | .box-title-lightblack { 65 | background-color: #f5f5f5; 66 | } 67 | } 68 | 69 | .small-title { 70 | color: black; 71 | text-transform: uppercase; 72 | font-weight: bold; 73 | font-family: "IBM Plex Sans Condensed", sans-serif; 74 | font-size: 18px; 75 | line-height: 30px; 76 | } 77 | 78 | .medium-title { 79 | color: black; 80 | text-transform: uppercase; 81 | font-weight: bold; 82 | font-family: "IBM Plex Sans Condensed", sans-serif; 83 | font-size: 24px; 84 | } 85 | 86 | .big-title { 87 | color: black; 88 | text-transform: uppercase; 89 | font-weight: bold; 90 | font-family: "IBM Plex Sans Condensed", sans-serif; 91 | font-size: 40px; 92 | padding-left: 10px; 93 | } 94 | 95 | .link-text { 96 | font-family: "IBM Plex Sans Condensed", sans-serif; 97 | font-size: 18px; 98 | color: black; 99 | text-decoration: none; 100 | margin-bottom: 30px; 101 | } 102 | 103 | .flex { 104 | display: -webkit-box; 105 | display: -ms-flexbox; 106 | display: flex; 107 | } 108 | 109 | .row { 110 | -webkit-box-orient: horizontal; 111 | -webkit-box-direction: normal; 112 | -ms-flex-direction: row; 113 | flex-direction: row; 114 | } 115 | 116 | .column { 117 | -webkit-box-orient: vertical; 118 | -webkit-box-direction: normal; 119 | -ms-flex-direction: column; 120 | flex-direction: column; 121 | } 122 | 123 | .wrap { 124 | -ms-flex-wrap: wrap; 125 | flex-wrap: wrap; 126 | } 127 | 128 | .w-100 { 129 | width: 100%; 130 | } 131 | 132 | .h-100 { 133 | height: 100%; 134 | } 135 | 136 | .w-50 { 137 | width: 50%; 138 | } 139 | 140 | .h-75 { 141 | height: 75%; 142 | } 143 | 144 | .h-50 { 145 | height: 50%; 146 | } 147 | 148 | .h-25 { 149 | height: 25%; 150 | } 151 | 152 | .p-30 { 153 | padding: 30px; 154 | } 155 | 156 | .padding-aside { 157 | padding-right: 18%; 158 | } 159 | 160 | .pl-30 { 161 | padding-left: 30px; 162 | } 163 | 164 | .justify-content-center { 165 | -webkit-box-pack: center; 166 | -ms-flex-pack: center; 167 | justify-content: center; 168 | } 169 | 170 | .justify-content-between { 171 | -webkit-box-pack: justify; 172 | -ms-flex-pack: justify; 173 | justify-content: space-between; 174 | } 175 | 176 | .justify-content-around { 177 | -ms-flex-pack: distribute; 178 | justify-content: space-around; 179 | } 180 | 181 | .justify-content-evenly { 182 | -webkit-box-pack: space-evenly; 183 | -ms-flex-pack: space-evenly; 184 | justify-content: space-evenly; 185 | } 186 | 187 | .justify-content-start { 188 | -webkit-box-pack: start; 189 | -ms-flex-pack: start; 190 | justify-content: flex-start; 191 | } 192 | 193 | .justify-content-end { 194 | -webkit-box-pack: end; 195 | -ms-flex-pack: end; 196 | justify-content: flex-end; 197 | } 198 | 199 | .align-items-center { 200 | -webkit-box-align: center; 201 | -ms-flex-align: center; 202 | align-items: center; 203 | } 204 | 205 | .align-items-start { 206 | -webkit-box-align: start; 207 | -ms-flex-align: start; 208 | align-items: flex-start; 209 | } 210 | 211 | .align-items-end { 212 | -webkit-box-align: end; 213 | -ms-flex-align: end; 214 | align-items: flex-end; 215 | } 216 | 217 | /* HTML element classes */ 218 | .kanji { 219 | font-size: 6px; 220 | } 221 | 222 | .aside-menu { 223 | position: -webkit-sticky; 224 | position: sticky; 225 | top: 0; 226 | width: 15%; 227 | background-color: white; 228 | } 229 | 230 | @media (min-width: 100px) and (max-width: 1023px) { 231 | .aside-menu { 232 | display: none; 233 | } 234 | } 235 | 236 | main { 237 | margin: 0 auto; 238 | z-index: 1; 239 | width: 70%; 240 | } 241 | 242 | @media (min-width: 100px) and (max-width: 1023px) { 243 | main { 244 | width: 100%; 245 | } 246 | } 247 | 248 | .category-container { 249 | height: 20%; 250 | } 251 | 252 | @media (min-width: 100px) and (max-width: 1023px) { 253 | .category-container { 254 | display: none; 255 | } 256 | } 257 | 258 | .catalogue-container { 259 | height: 80%; 260 | } 261 | 262 | @media (min-width: 100px) and (max-width: 1023px) { 263 | .catalogue-container { 264 | margin-top: 30px; 265 | height: 100%; 266 | } 267 | } 268 | 269 | .catalogue-child { 270 | width: calc(33.33% - 8px); 271 | position: relative; 272 | background-color: #f5f5f5; 273 | background-position: 100%; 274 | border: #fff 2px solid; 275 | } 276 | 277 | @media (min-width: 100px) and (max-width: 1023px) { 278 | .catalogue-child { 279 | width: 100%; 280 | height: 50%; 281 | } 282 | } 283 | 284 | .background-top-cover { 285 | position: absolute; 286 | background-color: #f5f5f5; 287 | width: 100%; 288 | height: 50px; 289 | top: 0; 290 | left: 0; 291 | z-index: 2; 292 | } 293 | 294 | .background-bottom-cover { 295 | position: absolute; 296 | background-color: #f5f5f5; 297 | width: 100%; 298 | height: 30px; 299 | bottom: 0; 300 | left: 0; 301 | z-index: 2; 302 | } 303 | 304 | @media (min-width: 812px) { 305 | .background-bottom-cover { 306 | height: 50px; 307 | } 308 | } 309 | 310 | @media (max-width: 427px) { 311 | .background-bottom-cover { 312 | height: 50px; 313 | } 314 | } 315 | 316 | @media (min-width: 428px) and (max-width: 811px) { 317 | .background-bottom-cover { 318 | height: 30px; 319 | } 320 | } 321 | 322 | .cc-1, 323 | .cc-2, 324 | .cc-3, 325 | .cc-4 { 326 | background-repeat: no-repeat; 327 | background-size: cover; 328 | background-position: center; 329 | } 330 | 331 | .cc-1 { 332 | background-image: url(../images/box-1.jpg); 333 | } 334 | 335 | .cc-2 { 336 | background-image: url(../images/box-2.jpg); 337 | } 338 | 339 | .cc-3 { 340 | background-image: url(../images/box-3.jpg); 341 | } 342 | 343 | .cc-4 { 344 | background-image: url(../images/box-4.jpg); 345 | background-size: contain; 346 | } 347 | 348 | @media (min-width: 100px) and (max-width: 1023px) { 349 | .cc-4 { 350 | background-size: cover; 351 | } 352 | } 353 | 354 | @media (max-width: 463px) { 355 | .cc-4 { 356 | background-size: contain; 357 | } 358 | } 359 | 360 | .icon-container { 361 | color: black; 362 | text-decoration: none; 363 | padding: 20px 0 0 10px; 364 | } 365 | 366 | .icon-container span { 367 | color: black; 368 | text-transform: uppercase; 369 | font-weight: bold; 370 | font-family: "IBM Plex Sans Condensed", sans-serif; 371 | font-size: 12px; 372 | } 373 | 374 | @media (min-width: 100px) and (max-width: 1023px) { 375 | .icon-container { 376 | padding: 0 0 0 10px; 377 | } 378 | } 379 | 380 | .menu-icon { 381 | width: 12px; 382 | height: 12px; 383 | } 384 | 385 | #page { 386 | color: black; 387 | text-decoration: none; 388 | font-family: "IBM Plex Sans Condensed", sans-serif; 389 | font-size: 14px; 390 | } 391 | 392 | .medium-link { 393 | color: black; 394 | text-decoration: none; 395 | font-family: "IBM Plex Sans Condensed", sans-serif; 396 | font-size: 18px; 397 | } 398 | 399 | .social-links { 400 | color: black; 401 | text-decoration: none; 402 | font-family: "IBM Plex Sans Condensed", sans-serif; 403 | font-size: 12px; 404 | margin-bottom: 10px; 405 | } 406 | 407 | @media (min-width: 100px) and (max-width: 1023px) { 408 | .m-child-1 { 409 | width: 100%; 410 | } 411 | } 412 | 413 | @media (max-width: 767px) { 414 | .m-child-1 { 415 | height: 70%; 416 | } 417 | } 418 | 419 | @media (min-width: 100px) and (max-width: 1023px) { 420 | .m-child-2 { 421 | width: 50%; 422 | height: 40%; 423 | background-color: white; 424 | position: absolute; 425 | bottom: 0; 426 | right: 0; 427 | } 428 | } 429 | 430 | @media (max-width: 767px) { 431 | .m-child-2 { 432 | height: 30%; 433 | width: 100%; 434 | } 435 | } 436 | 437 | @media (min-width: 100px) and (max-width: 1023px) { 438 | .m-child-2 div { 439 | height: 100%; 440 | } 441 | } 442 | 443 | .main-image { 444 | background: url(../images/hero-image.jpg) no-repeat; 445 | background-size: cover; 446 | background-position: 69%; 447 | } 448 | 449 | @media (min-width: 100px) and (max-width: 1023px) { 450 | .main-image { 451 | width: 100%; 452 | height: 100%; 453 | } 454 | } 455 | 456 | .main-small-image { 457 | border-left: 2px solid white; 458 | background: url(../images/hero-image.jpeg) no-repeat; 459 | background-size: cover; 460 | background-position: 82%; 461 | } 462 | 463 | @media (min-width: 100px) and (max-width: 1023px) { 464 | .main-small-image { 465 | display: none; 466 | } 467 | } 468 | 469 | .rounded-icon { 470 | width: 14px; 471 | height: 14px; 472 | border-radius: #fff 50%; 473 | } 474 | 475 | .rotate { 476 | -webkit-transform: rotate(90deg); 477 | transform: rotate(90deg); 478 | } 479 | 480 | header { 481 | display: none; 482 | } 483 | 484 | @media (min-width: 100px) and (max-width: 1023px) { 485 | header { 486 | background-color: white; 487 | display: -webkit-box; 488 | display: -ms-flexbox; 489 | display: flex; 490 | position: absolute; 491 | z-index: 10; 492 | top: 0; 493 | width: 100%; 494 | height: 30px; 495 | } 496 | 497 | header .menu-container { 498 | padding: 5px 10px 0 0; 499 | } 500 | 501 | header .menu-container .menu-icon { 502 | width: 14px; 503 | height: 14px; 504 | } 505 | } 506 | 507 | .box-corner-tl { 508 | padding: 12% 0 0 12%; 509 | } 510 | 511 | .box-corner-bl { 512 | padding: 0 0 12% 12%; 513 | } 514 | 515 | @media (max-width: 428px) { 516 | .box-corner-bl { 517 | padding: 0 0 28% 12%; 518 | } 519 | } 520 | 521 | .box-corner-br { 522 | padding: 0 12% 12% 0; 523 | } 524 | 525 | @media (max-width: 428px) { 526 | .box-corner-br { 527 | padding: 0 12% 28% 0; 528 | } 529 | } 530 | 531 | #aside-left, 532 | #aside-right { 533 | position: fixed; 534 | top: 0; 535 | } 536 | 537 | #aside-left { 538 | left: 0; 539 | } 540 | 541 | #aside-right { 542 | right: 0; 543 | } 544 | /*# sourceMappingURL=category.css.map */ 545 | -------------------------------------------------------------------------------- /assets/stylesheets/product.css: -------------------------------------------------------------------------------- 1 | /* color and font variables */ 2 | html { 3 | height: 100%; 4 | } 5 | 6 | html body { 7 | height: 100%; 8 | } 9 | 10 | * { 11 | padding: 0; 12 | margin: 0; 13 | } 14 | 15 | a { 16 | text-decoration: none; 17 | } 18 | 19 | .box-title { 20 | background-color: #f5f5f5; 21 | color: black; 22 | text-transform: uppercase; 23 | font-weight: bold; 24 | font-family: "IBM Plex Sans Condensed", sans-serif; 25 | font-size: 14px; 26 | } 27 | 28 | @media (min-width: 100px) and (max-width: 1023px) { 29 | .box-title { 30 | background-color: unset; 31 | } 32 | } 33 | 34 | @media (max-width: 364px) { 35 | .box-title { 36 | background-color: #f5f5f5; 37 | z-index: 6; 38 | } 39 | } 40 | 41 | @media (min-width: 1024px) { 42 | .box-title { 43 | background-color: #f5f5f5; 44 | z-index: 6; 45 | } 46 | } 47 | 48 | .box-title-lightblack { 49 | text-transform: uppercase; 50 | font-weight: bold; 51 | font-family: "IBM Plex Sans Condensed", sans-serif; 52 | font-size: 14px; 53 | color: #313131; 54 | z-index: 6; 55 | } 56 | 57 | @media (max-width: 364px) { 58 | .box-title-lightblack { 59 | background-color: #f5f5f5; 60 | } 61 | } 62 | 63 | @media (min-width: 1024px) { 64 | .box-title-lightblack { 65 | background-color: #f5f5f5; 66 | } 67 | } 68 | 69 | .small-title { 70 | color: black; 71 | text-transform: uppercase; 72 | font-weight: bold; 73 | font-family: "IBM Plex Sans Condensed", sans-serif; 74 | font-size: 18px; 75 | line-height: 30px; 76 | } 77 | 78 | .medium-title { 79 | color: black; 80 | text-transform: uppercase; 81 | font-weight: bold; 82 | font-family: "IBM Plex Sans Condensed", sans-serif; 83 | font-size: 24px; 84 | } 85 | 86 | .big-title { 87 | color: black; 88 | text-transform: uppercase; 89 | font-weight: bold; 90 | font-family: "IBM Plex Sans Condensed", sans-serif; 91 | font-size: 40px; 92 | padding-left: 10px; 93 | } 94 | 95 | .link-text { 96 | font-family: "IBM Plex Sans Condensed", sans-serif; 97 | font-size: 18px; 98 | color: black; 99 | text-decoration: none; 100 | margin-bottom: 30px; 101 | } 102 | 103 | .flex { 104 | display: -webkit-box; 105 | display: -ms-flexbox; 106 | display: flex; 107 | } 108 | 109 | .row { 110 | -webkit-box-orient: horizontal; 111 | -webkit-box-direction: normal; 112 | -ms-flex-direction: row; 113 | flex-direction: row; 114 | } 115 | 116 | .column { 117 | -webkit-box-orient: vertical; 118 | -webkit-box-direction: normal; 119 | -ms-flex-direction: column; 120 | flex-direction: column; 121 | } 122 | 123 | .wrap { 124 | -ms-flex-wrap: wrap; 125 | flex-wrap: wrap; 126 | } 127 | 128 | .w-100 { 129 | width: 100%; 130 | } 131 | 132 | .h-100 { 133 | height: 100%; 134 | } 135 | 136 | .w-50 { 137 | width: 50%; 138 | } 139 | 140 | .h-75 { 141 | height: 75%; 142 | } 143 | 144 | .h-50 { 145 | height: 50%; 146 | } 147 | 148 | .h-25 { 149 | height: 25%; 150 | } 151 | 152 | .p-30 { 153 | padding: 30px; 154 | } 155 | 156 | .padding-aside { 157 | padding-right: 18%; 158 | } 159 | 160 | .pl-30 { 161 | padding-left: 30px; 162 | } 163 | 164 | .justify-content-center { 165 | -webkit-box-pack: center; 166 | -ms-flex-pack: center; 167 | justify-content: center; 168 | } 169 | 170 | .justify-content-between { 171 | -webkit-box-pack: justify; 172 | -ms-flex-pack: justify; 173 | justify-content: space-between; 174 | } 175 | 176 | .justify-content-around { 177 | -ms-flex-pack: distribute; 178 | justify-content: space-around; 179 | } 180 | 181 | .justify-content-evenly { 182 | -webkit-box-pack: space-evenly; 183 | -ms-flex-pack: space-evenly; 184 | justify-content: space-evenly; 185 | } 186 | 187 | .justify-content-start { 188 | -webkit-box-pack: start; 189 | -ms-flex-pack: start; 190 | justify-content: flex-start; 191 | } 192 | 193 | .justify-content-end { 194 | -webkit-box-pack: end; 195 | -ms-flex-pack: end; 196 | justify-content: flex-end; 197 | } 198 | 199 | .align-items-center { 200 | -webkit-box-align: center; 201 | -ms-flex-align: center; 202 | align-items: center; 203 | } 204 | 205 | .align-items-start { 206 | -webkit-box-align: start; 207 | -ms-flex-align: start; 208 | align-items: flex-start; 209 | } 210 | 211 | .align-items-end { 212 | -webkit-box-align: end; 213 | -ms-flex-align: end; 214 | align-items: flex-end; 215 | } 216 | 217 | @media (min-width: 100px) and (max-width: 1023px) { 218 | #display-tablet-none { 219 | display: none; 220 | } 221 | } 222 | 223 | @media (min-width: 1024px) { 224 | #display-desktop-none { 225 | display: none; 226 | } 227 | } 228 | 229 | .kanji { 230 | font-size: 6px; 231 | } 232 | 233 | .aside-menu { 234 | position: -webkit-sticky; 235 | position: sticky; 236 | top: 0; 237 | width: calc(15% - 16px); 238 | background-color: white; 239 | } 240 | 241 | @media (min-width: 100px) and (max-width: 1023px) { 242 | .aside-menu { 243 | display: none; 244 | } 245 | } 246 | 247 | main { 248 | margin: 0 auto; 249 | width: calc(70% - 60px); 250 | } 251 | 252 | @media (min-width: 100px) and (max-width: 1023px) { 253 | main { 254 | width: 100%; 255 | } 256 | } 257 | 258 | .category-container { 259 | height: 20%; 260 | } 261 | 262 | @media (min-width: 100px) and (max-width: 1023px) { 263 | .category-container { 264 | display: none; 265 | } 266 | } 267 | 268 | .shoe-1, 269 | .shoe-2, 270 | .shoe-3, 271 | .shoe-4 { 272 | border-top: solid 2px white; 273 | border-bottom: solid 2px white; 274 | width: 100%; 275 | height: 100%; 276 | -o-object-fit: cover; 277 | object-fit: cover; 278 | } 279 | 280 | @media (min-width: 100px) and (max-width: 1023px) { 281 | .shoe-1, 282 | .shoe-2, 283 | .shoe-3, 284 | .shoe-4 { 285 | border-bottom: 0; 286 | border-top: 0; 287 | border-left: solid 2px white; 288 | border-right: solid 2px white; 289 | } 290 | } 291 | 292 | .icon-container { 293 | color: black; 294 | text-decoration: none; 295 | padding: 20px 0 0 10px; 296 | } 297 | 298 | .icon-container span { 299 | color: black; 300 | text-transform: uppercase; 301 | font-weight: bold; 302 | font-family: "IBM Plex Sans Condensed", sans-serif; 303 | font-size: 12px; 304 | } 305 | 306 | @media (min-width: 100px) and (max-width: 1023px) { 307 | .icon-container { 308 | padding: 0 0 0 10px; 309 | } 310 | } 311 | 312 | .menu-icon { 313 | width: 12px; 314 | height: 12px; 315 | } 316 | 317 | #page { 318 | color: black; 319 | text-decoration: none; 320 | font-family: "IBM Plex Sans Condensed", sans-serif; 321 | font-size: 14px; 322 | } 323 | 324 | .social-links { 325 | color: black; 326 | text-decoration: none; 327 | font-family: "IBM Plex Sans Condensed", sans-serif; 328 | font-size: 12px; 329 | margin-bottom: 10px; 330 | } 331 | 332 | .rounded-icon { 333 | width: 14px; 334 | height: 14px; 335 | border-radius: #fff 50%; 336 | } 337 | 338 | .rotate { 339 | -webkit-transform: rotate(90deg); 340 | transform: rotate(90deg); 341 | } 342 | 343 | header { 344 | display: none; 345 | } 346 | 347 | @media (min-width: 100px) and (max-width: 1023px) { 348 | header { 349 | background-color: white; 350 | display: -webkit-box; 351 | display: -ms-flexbox; 352 | display: flex; 353 | position: absolute; 354 | z-index: 10; 355 | top: 0; 356 | width: 100%; 357 | height: 30px; 358 | } 359 | 360 | header .menu-container { 361 | padding: 5px 10px 0 0; 362 | } 363 | 364 | header .menu-container .menu-icon { 365 | width: 14px; 366 | height: 14px; 367 | } 368 | } 369 | 370 | #aside-left, 371 | #aside-right { 372 | position: fixed; 373 | top: 0; 374 | } 375 | 376 | @media (min-width: 100px) and (max-width: 1023px) { 377 | .main-container { 378 | margin-top: 32px; 379 | width: 100%; 380 | height: 100%; 381 | -webkit-box-orient: horizontal; 382 | -webkit-box-direction: normal; 383 | -ms-flex-direction: row; 384 | flex-direction: row; 385 | } 386 | } 387 | 388 | @media (max-width: 767px) { 389 | .main-container .product-images-container { 390 | display: none; 391 | } 392 | } 393 | 394 | .main-container .product-images-container .product-images-container { 395 | height: 33%; 396 | } 397 | 398 | @media (min-width: 100px) and (max-width: 1023px) { 399 | .main-container .product-images-container { 400 | width: 25%; 401 | height: 100%; 402 | -webkit-box-orient: vertical; 403 | -webkit-box-direction: normal; 404 | -ms-flex-direction: column; 405 | flex-direction: column; 406 | } 407 | } 408 | 409 | @media (min-width: 100px) and (max-width: 1023px) { 410 | .main-container .product-images-container .product-image-child { 411 | width: 100%; 412 | height: 25%; 413 | } 414 | } 415 | 416 | .main-container .product-description-child-1 { 417 | background-color: #f5f5f5; 418 | width: 35%; 419 | } 420 | 421 | @media (min-width: 100px) and (max-width: 1023px) { 422 | .main-container .product-description-child-1 { 423 | width: 75%; 424 | height: 100%; 425 | } 426 | } 427 | 428 | @media (max-width: 768px) { 429 | .main-container .product-description-child-1 { 430 | width: 100%; 431 | } 432 | } 433 | 434 | .main-container .product-description-child-1 .pd-1 { 435 | display: none; 436 | } 437 | 438 | @media (min-width: 100px) and (max-width: 1023px) { 439 | .main-container .product-description-child-1 .pd-1 { 440 | background: url(../images/generic-shoe2.jpg) no-repeat 100%; 441 | background-size: cover; 442 | display: initial; 443 | position: relative; 444 | width: 100%; 445 | height: 45%; 446 | } 447 | 448 | .main-container .product-description-child-1 .pd-1 .product-cost { 449 | position: absolute; 450 | top: 10px; 451 | right: 15px; 452 | } 453 | 454 | .main-container .product-description-child-1 .pd-1 .number-image-page { 455 | position: absolute; 456 | bottom: 10px; 457 | left: 45%; 458 | } 459 | } 460 | 461 | .main-container .product-description-child-1 .pd-2 { 462 | height: 25%; 463 | } 464 | 465 | @media (min-width: 100px) and (max-width: 1023px) { 466 | .main-container .product-description-child-1 .pd-2 { 467 | height: 15%; 468 | } 469 | } 470 | 471 | .main-container .product-description-child-1 .pd-3 { 472 | height: 10%; 473 | } 474 | 475 | .main-container .product-description-child-1 .pd-4 { 476 | height: 50%; 477 | } 478 | 479 | @media (min-width: 100px) and (max-width: 1023px) { 480 | .main-container .product-description-child-1 .pd-4 { 481 | height: 20%; 482 | } 483 | } 484 | 485 | .main-container .product-description-child-1 .pd-5 { 486 | height: 10%; 487 | } 488 | 489 | #aside-left { 490 | left: 0; 491 | } 492 | 493 | #aside-right { 494 | right: 0; 495 | } 496 | 497 | .pd, 498 | .cart-child { 499 | border: solid 2px white; 500 | } 501 | 502 | @media (min-width: 100px) and (max-width: 1023px) { 503 | .pd { 504 | padding: 0; 505 | } 506 | } 507 | 508 | .add-cart-child-1 { 509 | width: 10%; 510 | } 511 | 512 | .add-cart-child-2 { 513 | width: 90%; 514 | } 515 | 516 | .pd, 517 | .details-child { 518 | padding: 10px; 519 | } 520 | 521 | .padding-lr-text { 522 | padding: 0 10px; 523 | } 524 | 525 | .product-description-child-2 { 526 | position: relative; 527 | width: 65%; 528 | background: url(../images/generic-shoe2.jpg) no-repeat 100%; 529 | background-size: cover; 530 | } 531 | 532 | .product-description-child-2 .product-cost { 533 | position: absolute; 534 | top: 15px; 535 | right: 30px; 536 | } 537 | 538 | .product-description-child-2 .images-counter-container { 539 | height: 10%; 540 | } 541 | 542 | .product-description-child-2 .images-counter-container .counter-container-1 { 543 | width: 65%; 544 | } 545 | 546 | .product-description-child-2 .images-counter-container .counter-container-2 { 547 | background-color: white; 548 | width: 35%; 549 | margin-left: 20px; 550 | } 551 | 552 | @media (min-width: 100px) and (max-width: 1023px) { 553 | .product-description-child-2 { 554 | display: none; 555 | } 556 | } 557 | /*# sourceMappingURL=product.css.map */ 558 | --------------------------------------------------------------------------------