diff --git a/dist/imac.202c52ff.jpeg b/dist/imac.202c52ff.jpeg new file mode 100644 index 00000000000..c282f7c494d Binary files /dev/null and b/dist/imac.202c52ff.jpeg differ diff --git a/dist/index.fca3b25c.css b/dist/index.fca3b25c.css new file mode 100644 index 00000000000..978a3a29bc8 --- /dev/null +++ b/dist/index.fca3b25c.css @@ -0,0 +1,2 @@ +.container{grid-template-columns:repeat(1,200px);justify-content:center;gap:46px 48px;padding:50px 40px;display:grid}@media (width>=488px){.container{grid-template-columns:repeat(2,200px)}}@media (width>=768px){.container{grid-template-columns:repeat(3,200px)}}@media (width>=1024px){.container{grid-template-columns:repeat(4,200px)}}.card{border:1px solid #f3f3f3;border-radius:5px;width:200px;padding:32px 16px 16px;transition:transform .3s}.card__title{color:#060b35;margin:0 0 4px;font-size:12px;font-weight:500;line-height:18px;transition:color .3s}.card:hover{transform:scale(1.2)}.card:hover .card__title{color:#34568b}.card__image{object-fit:contain;width:160px;height:134px;margin:0 auto 40px;display:block}.card__content{flex-direction:column;display:flex}.card__code{color:#616070;margin:0 0 16px;font-size:10px;font-weight:400;line-height:14px}.card__rating{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.card__reviews{color:#060b35;margin:0;font-size:10px;font-weight:400;line-height:14px}.card__price{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.card__price-label{color:#616070;margin:0;font-size:12px;font-weight:400;line-height:18px}.card__price-value{color:#060b35;margin:0;font-size:16px;font-weight:700;line-height:18px}.card__button{color:#fff;text-transform:uppercase;background-color:#00acdc;border:1px solid #00acdc;border-radius:5px;justify-content:center;align-items:center;width:100%;height:40px;font-size:14px;font-weight:700;line-height:16px;text-decoration:none;transition:background-color .3s,color .3s;display:flex}.card__button:hover{color:#00acdc;background-color:#fff}.stars{display:flex}.stars__star{background-image:url(star.822d561e.svg);background-position:50%;background-repeat:no-repeat;width:16px;height:16px;margin-right:4px}.stars__star:last-child{margin-right:0}.stars--1 .stars__star:nth-child(-n+1),.stars--2 .stars__star:nth-child(-n+2),.stars--3 .stars__star:nth-child(-n+3),.stars--4 .stars__star:nth-child(-n+4),.stars--5 .stars__star:nth-child(-n+5){background-image:url(star-active.edda4c43.svg)}.header{justify-content:space-between;align-items:center;padding:0 50px;display:flex}.logo{display:flex}.logo__image{width:40px;height:40px;display:block}.nav__list{align-items:center;margin:0;padding:0;list-style:none;display:flex}.nav__item{margin-right:20px}.nav__item:last-child{margin-right:0}.nav__link{color:#060b35;text-transform:uppercase;align-items:center;height:60px;font-size:12px;font-weight:500;line-height:14px;text-decoration:none;transition:color .3s;display:flex;position:relative}.nav__link:hover,.nav__link.is-active{color:#00acdc}.nav__link.is-active:after{content:"";background-color:#00acdc;border-radius:8px;height:4px;position:absolute;bottom:0;left:0;right:0}*{box-sizing:border-box}body{margin:0;font-family:Roboto,sans-serif} +/*# sourceMappingURL=index.fca3b25c.css.map */ diff --git a/dist/index.fca3b25c.css.map b/dist/index.fca3b25c.css.map new file mode 100644 index 00000000000..f02e36ed156 --- /dev/null +++ b/dist/index.fca3b25c.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,qHAQA,sBACE,kDAKF,sBACE,kDAKF,uBACE,kDAKF,6GAOE,+GASA,iCAIA,uCAIA,0FAQA,kDAKA,0FAQA,+FAOA,sFAQA,8FAOA,0FAQA,0FAQA,mTAmBE,wDChIJ,oBAGE,kKAQE,uCAMA,mQCjBJ,qFAOA,mBAGE,kDAQA,8EAQA,6BAGE,qCAKF,0MAaE,oDAOE,sICjDN,wBAIA","sources":["index.fca3b25c.css","src/styles/_card.scss","src/styles/_stars.scss","src/styles/_header.scss","src/styles/index.scss"],"sourcesContent":[".container {\n grid-template-columns: repeat(1, 200px);\n justify-content: center;\n gap: 46px 48px;\n padding: 50px 40px;\n display: grid;\n}\n\n@media (width >= 488px) {\n .container {\n grid-template-columns: repeat(2, 200px);\n }\n}\n\n@media (width >= 768px) {\n .container {\n grid-template-columns: repeat(3, 200px);\n }\n}\n\n@media (width >= 1024px) {\n .container {\n grid-template-columns: repeat(4, 200px);\n }\n}\n\n.card {\n border: 1px solid #f3f3f3;\n border-radius: 5px;\n width: 200px;\n padding: 32px 16px 16px;\n transition: transform .3s;\n}\n\n.card__title {\n color: #060b35;\n margin: 0 0 4px;\n font-size: 12px;\n font-weight: 500;\n line-height: 18px;\n transition: color .3s;\n}\n\n.card:hover {\n transform: scale(1.2);\n}\n\n.card:hover .card__title {\n color: #34568b;\n}\n\n.card__image {\n object-fit: contain;\n width: 160px;\n height: 134px;\n margin: 0 auto 40px;\n display: block;\n}\n\n.card__content {\n flex-direction: column;\n display: flex;\n}\n\n.card__code {\n color: #616070;\n margin: 0 0 16px;\n font-size: 10px;\n font-weight: 400;\n line-height: 14px;\n}\n\n.card__rating {\n justify-content: space-between;\n align-items: center;\n margin-bottom: 24px;\n display: flex;\n}\n\n.card__reviews {\n color: #060b35;\n margin: 0;\n font-size: 10px;\n font-weight: 400;\n line-height: 14px;\n}\n\n.card__price {\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n display: flex;\n}\n\n.card__price-label {\n color: #616070;\n margin: 0;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n}\n\n.card__price-value {\n color: #060b35;\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n line-height: 18px;\n}\n\n.card__button {\n color: #fff;\n text-transform: uppercase;\n background-color: #00acdc;\n border: 1px solid #00acdc;\n border-radius: 5px;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 40px;\n font-size: 14px;\n font-weight: 700;\n line-height: 16px;\n text-decoration: none;\n transition: background-color .3s, color .3s;\n display: flex;\n}\n\n.card__button:hover {\n color: #00acdc;\n background-color: #fff;\n}\n\n.stars {\n display: flex;\n}\n\n.stars__star {\n background-image: url(\"star.822d561e.svg\");\n background-position: center;\n background-repeat: no-repeat;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n}\n\n.stars__star:last-child {\n margin-right: 0;\n}\n\n.stars--1 .stars__star:nth-child(-n+1), .stars--2 .stars__star:nth-child(-n+2), .stars--3 .stars__star:nth-child(-n+3), .stars--4 .stars__star:nth-child(-n+4), .stars--5 .stars__star:nth-child(-n+5) {\n background-image: url(\"star-active.edda4c43.svg\");\n}\n\n.header {\n justify-content: space-between;\n align-items: center;\n padding: 0 50px;\n display: flex;\n}\n\n.logo {\n display: flex;\n}\n\n.logo__image {\n width: 40px;\n height: 40px;\n display: block;\n}\n\n.nav__list {\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n}\n\n.nav__item {\n margin-right: 20px;\n}\n\n.nav__item:last-child {\n margin-right: 0;\n}\n\n.nav__link {\n color: #060b35;\n text-transform: uppercase;\n align-items: center;\n height: 60px;\n font-size: 12px;\n font-weight: 500;\n line-height: 14px;\n text-decoration: none;\n transition: color .3s;\n display: flex;\n position: relative;\n}\n\n.nav__link:hover, .nav__link.is-active {\n color: #00acdc;\n}\n\n.nav__link.is-active:after {\n content: \"\";\n background-color: #00acdc;\n border-radius: 8px;\n height: 4px;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family: Roboto, sans-serif;\n}\n/*# sourceMappingURL=index.fca3b25c.css.map */\n",".container {\n display: grid;\n grid-template-columns: repeat(1, $card-width);\n justify-content: center;\n gap: 46px 48px;\n padding: 50px 40px;\n}\n\n@media (min-width: 488px) {\n .container {\n grid-template-columns: repeat(2, $card-width);\n }\n}\n\n@media (min-width: 768px) {\n .container {\n grid-template-columns: repeat(3, $card-width);\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n grid-template-columns: repeat(4, $card-width);\n }\n}\n\n.card {\n width: $card-width;\n padding: 32px 16px 16px;\n border: 1px solid $card-border-color;\n border-radius: 5px;\n transition: transform $transition-duration;\n\n &__title {\n margin: 0 0 4px;\n color: $main-text-color;\n font-size: 12px;\n font-weight: 500;\n line-height: 18px;\n transition: color $transition-duration;\n }\n\n &:hover {\n transform: scale(1.2);\n }\n\n &:hover &__title {\n color: $title-hover-color;\n }\n\n &__image {\n display: block;\n width: 160px;\n height: 134px;\n margin: 0 auto 40px;\n object-fit: contain;\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n }\n\n &__code {\n margin: 0 0 16px;\n color: $secondary-text-color;\n font-size: 10px;\n font-weight: 400;\n line-height: 14px;\n }\n\n &__rating {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 24px;\n }\n\n &__reviews {\n margin: 0;\n color: $main-text-color;\n font-size: 10px;\n font-weight: 400;\n line-height: 14px;\n }\n\n &__price {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n }\n\n &__price-label {\n margin: 0;\n color: $secondary-text-color;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n\n &__price-value {\n margin: 0;\n color: $main-text-color;\n font-size: 16px;\n font-weight: 700;\n line-height: 18px;\n }\n\n &__button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 40px;\n border: 1px solid $accent-color;\n border-radius: 5px;\n background-color: $accent-color;\n color: $white-color;\n font-size: 14px;\n font-weight: 700;\n line-height: 16px;\n text-decoration: none;\n text-transform: uppercase;\n transition:\n background-color $transition-duration,\n color $transition-duration;\n\n &:hover {\n background-color: $white-color;\n color: $accent-color;\n }\n }\n}\n",".stars {\n display: flex;\n\n &__star {\n width: $star-size;\n height: $star-size;\n margin-right: 4px;\n background-image: url('../images/star.svg');\n background-repeat: no-repeat;\n background-position: center;\n\n &:last-child {\n margin-right: 0;\n }\n }\n\n @for $rating from 1 through 5 {\n &--#{$rating} &__star:nth-child(-n + #{$rating}) {\n background-image: url('../images/star-active.svg');\n }\n }\n}\n",".header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 50px;\n}\n\n.logo {\n display: flex;\n\n &__image {\n display: block;\n width: 40px;\n height: 40px;\n }\n}\n\n.nav {\n &__list {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n &__item {\n margin-right: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n }\n\n &__link {\n position: relative;\n display: flex;\n align-items: center;\n height: 60px;\n color: $main-text-color;\n font-size: 12px;\n font-weight: 500;\n line-height: 14px;\n text-transform: uppercase;\n text-decoration: none;\n transition: color $transition-duration;\n\n &:hover {\n color: $accent-color;\n }\n\n &.is-active {\n color: $accent-color;\n\n &::after {\n content: '';\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 4px;\n background-color: $accent-color;\n border-radius: 8px;\n }\n }\n }\n}\n","@import './utils/variables';\n@import './card';\n@import './stars';\n@import './header';\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family: $main-font;\n}\n"],"names":[],"version":3,"file":"index.fca3b25c.css.map"} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 00000000000..da28cbe82c8 --- /dev/null +++ b/dist/index.html @@ -0,0 +1 @@ +
="A"&&e<="Z"};function Un(e){for(var t="",n=0;n Product code: 195434 Price: $2,199 Product code: 195434 Price: $2,199 Product code: 195434 Price: $2,199 Product code: 195434 Price: $2,199 Product code: 195434 Price: $2,199 Product code: 195434 Price: $2,199 Product code: 195434 Price: $2,199 Product code: 195434 Price: $2,199Catalog
+
+
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+
+
+
+ APPLE A1419 iMac 27 Retina 5K Monoblock (MNED2UA/A)
+
+
+