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>
<div class="testimonials__content container">
<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">
<p class="testimonial__text">
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
@@ -279,14 +279,14 @@
Sed varius urna et pulvinar venenatis.
</p>
</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">
<p class="testimonial__text">
Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
mollis eleifend nibh.
</p>
</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">
<p class="testimonial__text">
In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
@@ -296,7 +296,7 @@
</div>
</div>
<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/2.png" alt="Smashing Magazine">
<p class="testimonial__text">
@@ -305,7 +305,7 @@
Sed varius urna et pulvinar venenatis.
</p>
</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">
<p class="testimonial__text">
Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
@@ -313,7 +313,7 @@
consequat faucibus.
</p>
</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">
<p class="testimonial__text">
Fusce pharetra erat id odio blandit, nec

16
src/scss/_testimonials.scss
View File

@@ -1,6 +1,6 @@
.testimonials {
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 {
@@ -15,12 +15,20 @@
.testimonials__row {
padding-bottom: 100px;
@media all and (max-width: $desktop) {
padding: 0 10px;
margin: 0;
}
}
.testimonial {
position: relative;
text-align: center;
min-height: 170px;
@media all and (max-width: $desktop) {
margin-bottom: 50px;
}
}
.testimonial__logo {
@@ -28,8 +36,10 @@
}
.testimonial__text {
position: absolute;
bottom: 0;
@media all and (min-width: $desktop-xl) {
position: absolute;
bottom: 0;
}
font-family: Source Sans Pro, sans-serif;
font-size: 16px;
font-weight: bold;