diff --git a/src/css/reviews.css b/src/css/reviews.css index d7d2236..143675f 100644 --- a/src/css/reviews.css +++ b/src/css/reviews.css @@ -1 +1,124 @@ -/* Styles for Reviews section */ +.reviews { + background-color: #fbfbfb; + padding-top: 80px; + padding-bottom: 80px; +} +.reviews-title { + font-size: 48px; + line-height: 1.04; + letter-spacing: -0.01em; + text-transform: uppercase; + color: #141414; + margin-bottom: 20px; +} +.reviews-title-part { + color: #576f35; +} +.reviews-text { + font-weight: 500; + line-height: 1.3; + color: #141414; + margin-bottom: 40px; +} +.reviews-item { + border: 1px solid rgba(122, 49, 69, 0.3); + border-radius: 24px; + padding: 20px 16px 38px 16px; + width: 100%; + height: 238px; +} + +.reviews-img { + display: block; + margin: auto; + margin-bottom: 24px; + border-radius: 100%; +} +.reviews-subtitle { + font-size: 16px; + line-height: 1.25; + letter-spacing: -0.02em; + text-align: center; + color: #040306; + margin-bottom: 8px; +} +.reviews-describe-text { + font-weight: 500; + line-height: 1.3; + text-align: center; + color: rgba(4, 3, 6, 0.4); + max-width: 288px; +} +.reviews-item { + display: none; +} + +.reviews-item:nth-child(1) { + display: block; +} + +@media screen and (min-width: 768px) { + .reviews { + background-color: #fbfbfb; + padding-top: 100px; + padding-bottom: 100px; + } + .reviews-title { + max-width: 553px; + font-weight: 400; + font-size: 64px; + line-height: 1; + letter-spacing: -0.01em; + text-transform: uppercase; + color: #141414; + margin-bottom: 25px; + } + .reviews-text { + max-width: 553px; + font-weight: 500; + line-height: 1.25; + color: #141414; + margin-bottom: 50px; + } + .reviews-subtitle { + font-size: 18px; + line-height: 1.1; + } + + .reviews-item:nth-child(-n + 2) { + display: block; + } + .reviews-describe-text { + font-weight: 500; + line-height: 1.4; + text-align: center; + color: rgba(20, 20, 20, 0.4); + } + .reviews-list { + display: flex; + gap: 18px; + } + .reviews-item { + width: 343px; + height: 258px; + padding: 20px; + } + + :root { + font-size: 16px; + } +} + +@media screen and (min-width: 1280px) { + .reviews { + padding-top: 100px; + padding-bottom: 100px; + } + .reviews-item { + display: block; + } + .reviews-list { + display: flex; + gap: 25px; + } +} diff --git a/src/partials/reviews.html b/src/partials/reviews.html index be1a2c6..596247e 100644 --- a/src/partials/reviews.html +++ b/src/partials/reviews.html @@ -1,3 +1,76 @@
- +
+

+ Reviews from our customers +

+

+ Words of our customers: impressions and opinions about the quality of our + services and the freshness of our products. +

+ +