bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable RWD for testimonials

Browse Source
This commit is contained in:
Bartłomiej Pluta
2018-04-16 12:17:14 +02:00
parent eb04cb6a08
commit 39f6316897
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/index.html
View File

@@ -271,7 +271,7 @@
<p class="testimonials__h1">People are talking about fork</p> <p class="testimonials__h1">People are talking about fork</p>
<div class="testimonials__content container"> <div class="testimonials__content container">
<div class="testimonials__row row"> <div class="testimonials__row row">
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
@@ -279,14 +279,14 @@
Sed varius urna et pulvinar venenatis. Sed varius urna et pulvinar venenatis.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac, Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
mollis eleifend nibh. mollis eleifend nibh.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
@@ -296,7 +296,7 @@
</div> </div>
</div> </div>
<div class="testimonials__row row"> <div class="testimonials__row row">
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
<img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
@@ -305,7 +305,7 @@
Sed varius urna et pulvinar venenatis. Sed varius urna et pulvinar venenatis.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
@@ -313,7 +313,7 @@
consequat faucibus. consequat faucibus.
</p> </p>
</div> </div>
<div class="testimonial col-4"> <div class="testimonial col-12 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine"> <img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
<p class="testimonial__text"> <p class="testimonial__text">
Fusce pharetra erat id odio blandit, nec Fusce pharetra erat id odio blandit, nec

12
src/scss/_testimonials.scss
View File

@@ -1,6 +1,6 @@
.testimonials { .testimonials {
position: relative; position: relative;
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain; background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 0;
} }
.testimonials__h1 { .testimonials__h1 {
@@ -15,12 +15,20 @@
.testimonials__row { .testimonials__row {
padding-bottom: 100px; padding-bottom: 100px;
@media all and (max-width: $desktop) {
padding: 0 10px;
margin: 0;
}
} }
.testimonial { .testimonial {
position: relative; position: relative;
text-align: center; text-align: center;
min-height: 170px; min-height: 170px;
@media all and (max-width: $desktop) {
margin-bottom: 50px;
}
} }
.testimonial__logo { .testimonial__logo {
@@ -28,8 +36,10 @@
} }
.testimonial__text { .testimonial__text {
@media all and (min-width: $desktop-xl) {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
}
font-family: Source Sans Pro, sans-serif; font-family: Source Sans Pro, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;