From 935fc1e807647d4c736f06636b2a405332b393ef Mon Sep 17 00:00:00 2001 From: agata Date: Mon, 17 Jun 2024 14:56:47 +0200 Subject: [PATCH] correction --- src/index.html | 23 ++-- src/styles/blocks/card.scss | 2 +- src/styles/blocks/navigation.scss | 40 +++---- src/styles/index.css | 192 ------------------------------ src/styles/main.css | 45 +++++-- src/styles/main.css.map | 2 +- 6 files changed, 70 insertions(+), 234 deletions(-) delete mode 100644 src/styles/index.css diff --git a/src/index.html b/src/index.html index e2a9bb42c9..5cfe02b30d 100644 --- a/src/index.html +++ b/src/index.html @@ -39,6 +39,7 @@ Apple +
    • +
    • +
    • +
    • +
    • +
    • +
  • APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) @@ -142,7 +149,7 @@ product-foto
    APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) @@ -177,7 +184,7 @@ product-foto
    APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) @@ -212,7 +219,7 @@ product-foto
    APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) @@ -247,7 +254,7 @@ product-foto
    APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) @@ -282,7 +289,7 @@ product-foto
    APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) @@ -317,7 +324,7 @@ product-foto
    APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) @@ -352,7 +359,7 @@ product-foto
    APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index 7f9638d9e8..28d530ba13 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -11,7 +11,7 @@ text-align: center; flex-flow: column wrap; - &__imac { + &__foto { display: flex; justify-content: center; margin: 0 auto 40px; diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss index ba07fc2aba..841b4799b1 100644 --- a/src/styles/blocks/navigation.scss +++ b/src/styles/blocks/navigation.scss @@ -1,7 +1,5 @@ @use '../utils/variables' as *; - - .nav { height: 60px; @@ -32,26 +30,26 @@ height: 60px; line-height: 60px; transition: 0.3s; - } - - .is-active { - color: $blue; - } - .is-active::after { - content: ''; - display: block; - height: 4px; - width: 100%; - border-radius: 8px; - background-color: $blue; - bottom: 0; - text-align: center; - position: absolute; - left: 0; - } + &.is-active { + color: $blue; + + &::after { + content: ''; + display: block; + height: 4px; + width: 100%; + border-radius: 8px; + background-color: $blue; + bottom: 0; + text-align: center; + position: absolute; + left: 0; + } + } - &__link[data-qa='nav-hover']:hover { - color: $blue; + &[data-qa='nav-hover']:hover { + color: $blue; + } } } diff --git a/src/styles/index.css b/src/styles/index.css deleted file mode 100644 index a1388af41c..0000000000 --- a/src/styles/index.css +++ /dev/null @@ -1,192 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - font-family: Roboto, arial, sans-serif; - margin: 0; - font-size: 12px; -} - -.card { - display: grid; - - max-width: 200px; - padding: 32px 16px 16px; - border-radius: 5px; - border: 1px solid rgb(243, 243, 243); - background: rgb(255, 255, 255); - flex-direction: column; - text-align: center; -} - -.card__imac { - display: flex; - justify-content: center; - margin: 0 auto 40px; - width: 160px; - height: 134px; -} - -.card__info { - color: rgb(6, 11, 53); - margin-bottom: 4px; - font-size: 12px; - font-weight: 500; - line-height: 18px; - text-align: left; -} - -.card__code { - margin-bottom: 16px; - font-size: 10px; - font-weight: 400; - min-height: 14px; - text-align: left; - color: rgb(97, 96, 112); -} - -.card__button { - text-transform: uppercase; - justify-content: center; - align-items: center; - display: flex; - height: 40px; - width: 100%; - border: 1px solid rgb(0, 172, 220); - border-radius: 5px; - background-color: rgb(0, 172, 220); - color: rgb(255, 255, 255); - line-height: 16px; - font-size: 14px; - font-weight: 700; - text-decoration: none; -} - -.card__button:hover { - width: 100%; - cursor: pointer; - border: 1px solid rgb(0, 172, 220); - color: rgb(0, 172, 220); - background-color: rgb(255, 255, 255); -} - -.card__price { - margin-bottom: 16px; - display: flex; - justify-content: space-between; - align-items: center; -} - -.card__price-value { - font-size: 16px; - font-weight: 700; - text-align: right; - color: rgb(6, 11, 53); - line-height: 18px; -} - -.card__price-text { - text-align: left; - color: rgb(97, 96, 112); - font-size: 12px; - font-weight: 400; -} - -.card__reviews { - display: flex; - justify-content: space-between; - width: 100%; - margin-bottom: 24px; -} - -.card__reviews .stars { - display: flex; - flex-direction: row; -} - -.card__reviews .stars__star { - content: ''; - background-image: url('../images/star.svg'); - background-repeat: no-repeat; - background-position: center; - width: 16px; - height: 16px; - margin-right: 4px; -} - -.card__reviews .stars__star:nth-child(-n + 4) { - background-image: url('../images/star-active.svg'); -} - -.card__reviews .card__reviews-rating { - display: flex; - align-items: flex-end; - font-size: 10px; - font-weight: 400; - line-height: 14px; - color: rgb(6, 11, 53); -} - -.header { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 50px; -} - -.nav__list { - list-style-type: none; - display: flex; - padding-inline-start: 0; - margin: 0 -20px 0 0; -} - -.nav__item { - position: relative; - margin: 0 20px 0 0; -} - -.nav__link { - text-transform: uppercase; - text-decoration: none; - text-wrap: nowrap; - color: black; - font-style: normal; - font-weight: 500; - height: 60px; - line-height: 60px; - display: flex; - align-items: center; - position: relative; -} - -.is-active { - color: #00acdc; -} - -.is-active::after { - content: ''; - display: block; - height: 4px; - width: 100%; - border-radius: 8px; - background-color: #00acdc; - text-align: center; - bottom: 0; - position: absolute; - left: 0; -} - -.nav__link[data-qa='hover']:hover { - color: #00acdc; -} - -.img { - width: 40px; - height: 40px; - top: 10px; - left: 50px; - margin: 0 5px 0 0; -} diff --git a/src/styles/main.css b/src/styles/main.css index 97af2220f8..40bd6da82e 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -9,13 +9,15 @@ text-align: center; flex-flow: column wrap; } -.card__imac { + +.card__foto { display: flex; justify-content: center; margin: 0 auto 40px; width: 160px; height: 134px; } + .card__info { color: rgb(6, 11, 53); margin-bottom: 4px; @@ -24,6 +26,7 @@ line-height: 18px; text-align: left; } + .card__code { margin-bottom: 16px; font-size: 10px; @@ -32,6 +35,7 @@ color: rgb(97, 96, 112); min-height: 14px; } + .card__reviews-raiting { display: flex; align-items: flex-end; @@ -39,6 +43,7 @@ color: rgb(6, 11, 53); align-self: flex-end; } + .card__button { text-transform: uppercase; justify-content: center; @@ -55,6 +60,7 @@ font-weight: 700; text-decoration: none; } + .card__button:hover { width: 100%; cursor: pointer; @@ -62,12 +68,14 @@ color: rgb(0, 172, 220); background-color: rgb(255, 255, 255); } + .card__price { margin-bottom: 16px; display: flex; justify-content: space-between; width: 100%; } + .card__price-value { font-size: 16px; font-weight: 700; @@ -75,6 +83,7 @@ color: rgb(6, 11, 53); line-height: 18px; } + .card__price-text { text-align: left; color: rgb(97, 96, 112); @@ -88,22 +97,26 @@ width: 100%; margin-bottom: 24px; } + .card__reviews .stars { display: flex; flex-direction: row; } + .card__reviews .stars__star { - content: ""; - background-image: url("../images/star.svg"); + content: ''; + background-image: url('../images/star.svg'); background-repeat: no-repeat; background-position: center; width: 16px; height: 16px; margin-right: 4px; } -.card__reviews .stars__star:nth-child(-n+4) { - background-image: url("../images/star-active.svg"); + +.card__reviews .stars__star:nth-child(-n + 4) { + background-image: url('../images/star-active.svg'); } + .card__reviews .card__reviews-rating { display: flex; align-items: flex-end; @@ -136,36 +149,44 @@ body { grid-template-columns: repeat(1, 200px); } } + @media (min-width: 488px) and (max-width: 767px) { .main { grid-template-columns: repeat(2, 200px); } } + @media (min-width: 768px) and (max-width: 1023px) { .main { grid-template-columns: repeat(3, 200px); } } + @media (min-width: 1024px) { .main { grid-template-columns: repeat(4, 200px); } } + .nav { height: 60px; } + .nav__list { list-style-type: none; display: flex; padding: 0; margin: 0; } + .nav__item { margin-right: 20px; } + .nav__item:last-child { margin-right: 0; } + .nav__link { align-items: center; display: flex; @@ -179,11 +200,13 @@ body { line-height: 60px; transition: 0.3s; } -.nav .is-active { + +.nav__link.is-active { color: rgb(0, 172, 220); } -.nav .is-active::after { - content: ""; + +.nav__link.is-active::after { + content: ''; display: block; height: 4px; width: 100%; @@ -194,7 +217,8 @@ body { position: absolute; left: 0; } -.nav__link[data-qa=nav-hover]:hover { + +.nav__link[data-qa='nav-hover']:hover { color: rgb(0, 172, 220); } @@ -205,12 +229,11 @@ body { padding: 0 50px; background-color: rgb(255, 255, 255); } + .header__img { display: block; width: 40px; height: 40px; } - - /*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map index 2783570b29..2e4d108bef 100644 --- a/src/styles/main.css.map +++ b/src/styles/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["blocks/card.scss","utils/variables.scss","blocks/stars.scss","blocks/reset.scss","blocks/navigation.scss","blocks/header.scss","main.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA,OCCO;EDAP;EACA;EACA;EACA,YCNW;EDOX;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE,OCpBQ;EDqBR;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,aC7BU;ED8BV;EACA,OCnCG;EDoCH;;AAGF;EACE;EACA;EACA;EACA,OCzCQ;ED0CR;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,kBCzDG;ED0DH,OCxDS;ED0DT;EACA;EACA,aC1DO;ED2DP;;AAEA;EACE;EACA;EACA;EACA,OCrEC;EDsED,kBCpEO;;ADwEX;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,aC9EK;ED+EL;EACA,OCnFM;EDoFN;;AAGF;EACE;EACA,OC3FC;ED4FD;EACA,aCzFQ;;;ACFd;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA,aD3BU;EC4BV;EACA,OD/BQ;;;AEAZ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;ACpCJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,OH1BQ;EG2BR;EACA;EACA;EACA;EACA;;AAGF;EACE,OHpCG;;AGuCL;EACE;EACA;EACA;EACA;EACA;EACA,kBH7CG;EG8CH;EACA;EACA;EACA;;AAGF;EACE,OHrDG;;;AICP;EACE;EACA;EACA;EACA;EACA,kBJJW;;AIMX;EACE;EACA;EACA;;;ACNJ","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["blocks/card.scss","utils/variables.scss","blocks/stars.scss","blocks/reset.scss","blocks/navigation.scss","blocks/header.scss","main.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA,OCCO;EDAP;EACA;EACA;EACA,YCNW;EDOX;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE,OCpBQ;EDqBR;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,aC7BU;ED8BV;EACA,OCnCG;EDoCH;;AAGF;EACE;EACA;EACA;EACA,OCzCQ;ED0CR;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,kBCzDG;ED0DH,OCxDS;ED0DT;EACA;EACA,aC1DO;ED2DP;;AAEA;EACE;EACA;EACA;EACA,OCrEC;EDsED,kBCpEO;;ADwEX;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,aC9EK;ED+EL;EACA,OCnFM;EDoFN;;AAGF;EACE;EACA,OC3FC;ED4FD;EACA,aCzFQ;;;ACFd;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA,aD3BU;EC4BV;EACA,OD/BQ;;;AEAZ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;ACtCJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,OHxBQ;EGyBR;EACA;EACA;EACA;EACA;;AAEA;EACE,OHjCC;;AGmCD;EACE;EACA;EACA;EACA;EACA;EACA,kBHzCD;EG0CC;EACA;EACA;EACA;;AAIJ;EACE,OHlDC;;;AICP;EACE;EACA;EACA;EACA;EACA,kBJJW;;AIMX;EACE;EACA;EACA;;;ACNJ","file":"main.css"} \ No newline at end of file