generated from goitacademy/vanilla-app-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #15 from ReshetS/dmytruk-rewiews
Dmytruk rewiews
- Loading branch information
Showing
2 changed files
with
198 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,76 @@ | ||
| <section class="reviews" id="reviews"> | ||
|
|
||
| <div class="container"> | ||
| <h2 class="reviews-title"> | ||
| Reviews from our <span class="reviews-title-part">customers</span> | ||
| </h2> | ||
| <p class="reviews-text"> | ||
| Words of our customers: impressions and opinions about the quality of our | ||
| services and the freshness of our products. | ||
| </p> | ||
| <ul class="reviews-list"> | ||
| <li class="reviews-item"> | ||
| <img | ||
| srcset=" | ||
| ./img/john-1x-min.png 1x, | ||
| ./img/john-2x-min.png 2x, | ||
| ./img/john-3x-min.png 3x | ||
| " | ||
| class="reviews-img" | ||
| src="./img/john-1x-min.png" | ||
| width="56" | ||
| height="56" | ||
| alt="John Wax" | ||
| /> | ||
|
|
||
| <h3 class="reviews-subtitle">John Wax</h3> | ||
| <p class="reviews-describe-text"> | ||
| These vegetables are my secret to delicious and healthy meals. The | ||
| quality is always at the highest level, the aroma and taste are | ||
| enchanting. I advise every fan of real products! | ||
| </p> | ||
| </li> | ||
| <li class="reviews-item"> | ||
| <img | ||
| srcset=" | ||
| ./img/victoria-1x-min.png 1x, | ||
| ./img/victoria-2x-min.png 2x, | ||
| ./img/victoria-3x-min.png 3x | ||
| " | ||
| class="reviews-img" | ||
| src="./img/victoria-1x-min.png" | ||
| width="56" | ||
| height="56" | ||
| alt="Victoria Romashenko" | ||
| /> | ||
|
|
||
| <h3 class="reviews-subtitle">Victoria Romashenko</h3> | ||
| <p class="reviews-describe-text"> | ||
| I love how fast and fresh the vegetables are delivered. Salads always | ||
| turn out so appetizing, and soups are real masterpieces. The quality | ||
| is impeccable! | ||
| </p> | ||
| </li> | ||
| <li class="reviews-item"> | ||
| <img | ||
| srcset=" | ||
| ./img/ihor-3x-min.png 3x, | ||
| ./img/ihor-2x-min.png 2x, | ||
| ./img/ihor-1x-min.png 1x | ||
| " | ||
| class="reviews-img" | ||
| src="./img/ihor-1x-min.png" | ||
| width="56" | ||
| height="56" | ||
| alt="Ihor Trachuk" | ||
| /> | ||
|
|
||
| <h3 class="reviews-subtitle">Ihor Trachuk</h3> | ||
| <p class="reviews-describe-text"> | ||
| Recently tried my fresh tomatoes and peppers - amazing! The | ||
| authenticity of the taste, as if from the garden directly to my table. | ||
| It is now my main vegetable supplier. | ||
| </p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </section> |