Skip to content

Commit 9dbcd48

Browse files
Wagner3UBWagner3UB
committed
Sessàao testimonials responsiva
1 parent 04c1255 commit 9dbcd48

5 files changed

Lines changed: 77 additions & 46 deletions

File tree

‎css/style.css‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,11 @@ nav li a{
252252
overflow: hidden;
253253
background-color: rgba(86, 178, 128, 0.1);
254254
}
255+
.people-stars-container{
256+
overflow: scroll;
257+
}
255258
.people-stars-row{
259+
width: 1111px;
256260
display: flex;
257261
justify-content: space-between;
258262
margin-bottom: 89px;
@@ -410,6 +414,32 @@ nav li a{
410414
.learn-more button{
411415
margin: 50px auto 40px;
412416
}
413-
}
414-
415417

418+
/*TESTIMONIALS*/
419+
.people-stars-row{
420+
width: 850px;
421+
}
422+
.people-stars-row .people-stars{
423+
width: 267px;
424+
padding-top: 25px;
425+
}
426+
.people-stars blockquote{
427+
font-size: 19px;
428+
line-height: 25.39px;
429+
margin-top: 16px;
430+
}
431+
.people-stars cite{
432+
font-size: 15.86px;
433+
line-height: 28.24px;
434+
margin-top: 4px;
435+
margin-bottom: 22px;
436+
}
437+
.people-stars .foto img{
438+
display: block;
439+
width: 80%;
440+
margin: auto;
441+
}
442+
.people-stars .stars{
443+
margin-top: 10px;
444+
}
445+
}

‎img/people-left1.png‎

12.6 KB
Loading

‎img/people-middle1.png‎

16.2 KB
Loading

‎img/people-right1.png‎

12.4 KB
Loading

‎index.html‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -150,51 +150,52 @@ <h4>Made for your home and for your wellness</h4>
150150
<section class="container">
151151
<h2 class="main_product_title">Testimonials</h2>
152152
<h3 class="sub_product_title">Some quotes from our happy customers</h3>
153-
<article class="people-stars-row">
154-
<article class="people-stars people-stars-left">
155-
<figure>
156-
<img src="img/people-left.png" alt="Comentário da Luisa">
157-
</figure>
158-
<figure class="stars">
159-
<img src="img/star-full.png" alt="estrela completa">
160-
<img src="img/star-full.png" alt="estrela completa">
161-
<img src="img/star-full.png" alt="estrela completa">
162-
<img src="img/star-full.png" alt="estrela completa">
163-
<img src="img/star-half.png" alt="meia estrela">
164-
</figure>
165-
<blockquote>“I love it! No more air fresheners”</blockquote>
166-
<cite>Luisa</cite>
167-
</article>
168-
<article class="people-stars people-stars-middle">
169-
<figure>
170-
<img src="img/people-middle.png" alt="Comentário da Edoardo">
171-
</figure>
172-
<figure class="stars">
173-
<img src="img/star-full.png" alt="estrela completa">
174-
<img src="img/star-full.png" alt="estrela completa">
175-
<img src="img/star-full.png" alt="estrela completa">
176-
<img src="img/star-full.png" alt="estrela completa">
177-
<img src="img/star-full.png" alt="estrela completa">
178-
</figure>
179-
<blockquote>“Raccomended for everyone”</blockquote>
180-
<cite>Edoardo</cite>
181-
</article>
182-
<article class="people-stars people-stars-right">
183-
<figure>
184-
<img src="img/people-right.png" alt="Comentário da Mart">
185-
</figure>
186-
<figure class="stars">
187-
<img src="img/star-full.png" alt="estrela completa">
188-
<img src="img/star-full.png" alt="estrela completa">
189-
<img src="img/star-full.png" alt="estrela completa">
190-
<img src="img/star-full.png" alt="estrela completa">
191-
<img src="img/star-half.png" alt="meia estrela">
192-
</figure>
193-
<blockquote>“Looks very natural, the smell is awesome”</blockquote>
194-
<cite>Mart</cite>
153+
<section class="people-stars-container">
154+
<article class="people-stars-row">
155+
<article class="people-stars people-stars-left">
156+
<figure class="foto">
157+
<img src="img/people-left1.png" alt="Comentário da Luisa">
158+
</figure>
159+
<figure class="stars">
160+
<img src="img/star-full.png" alt="estrela completa">
161+
<img src="img/star-full.png" alt="estrela completa">
162+
<img src="img/star-full.png" alt="estrela completa">
163+
<img src="img/star-full.png" alt="estrela completa">
164+
<img src="img/star-half.png" alt="meia estrela">
165+
</figure>
166+
<blockquote>“I love it! No more air fresheners”</blockquote>
167+
<cite>Luisa</cite>
168+
</article>
169+
<article class="people-stars people-stars-middle">
170+
<figure class="foto">
171+
<img src="img/people-middle1.png" alt="Comentário da Edoardo">
172+
</figure>
173+
<figure class="stars">
174+
<img src="img/star-full.png" alt="estrela completa">
175+
<img src="img/star-full.png" alt="estrela completa">
176+
<img src="img/star-full.png" alt="estrela completa">
177+
<img src="img/star-full.png" alt="estrela completa">
178+
<img src="img/star-full.png" alt="estrela completa">
179+
</figure>
180+
<blockquote>“Raccomended for everyone”</blockquote>
181+
<cite>Edoardo</cite>
182+
</article>
183+
<article class="people-stars people-stars-right">
184+
<figure class="foto">
185+
<img src="img/people-right1.png" alt="Comentário da Mart">
186+
</figure>
187+
<figure class="stars">
188+
<img src="img/star-full.png" alt="estrela completa">
189+
<img src="img/star-full.png" alt="estrela completa">
190+
<img src="img/star-full.png" alt="estrela completa">
191+
<img src="img/star-full.png" alt="estrela completa">
192+
<img src="img/star-half.png" alt="meia estrela">
193+
</figure>
194+
<blockquote>“Looks very natural, the smell is awesome”</blockquote>
195+
<cite>Mart</cite>
196+
</article>
195197
</article>
196-
</article>
197-
198+
</section>
198199
</section>
199200
</section>
200201

0 commit comments

Comments
 (0)