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

Fix testimonials

Browse Source
This commit is contained in:
Bartłomiej Pluta (PGS Software)
2018-05-30 13:53:40 +02:00
parent b0d501c360
commit 146107b31a
3 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/index.html
View File

@@ -279,7 +279,9 @@
<div class="testimonials__content container">
<div class="testimonials__row row">
<div class="testimonial col-12 col-sm-6 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
<div class="testimonial__logo">
<img src="img/testimonials/1.png" alt="Smashing Magazine">
</div>
<p class="testimonial__text">
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
magna.
@@ -287,14 +289,18 @@
</p>
</div>
<div class="testimonial col-12 col-sm-6 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
<div class="testimonial__logo">
<img src="img/testimonials/2.png" alt="Smashing Magazine">
</div>
<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-12 col-sm-6 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
<div class="testimonial__logo">
<img src="img/testimonials/3.png" alt="Smashing Magazine">
</div>
<p class="testimonial__text">
In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
nibh.
@@ -302,8 +308,10 @@
</p>
</div>
<div class="testimonial col-12 col-sm-6 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">
<div class="testimonial__logo">
<img src="img/testimonials/4/1.png" alt="Smashing Magazine">
<img src="img/testimonials/4/2.png" alt="Smashing Magazine">
</div>
<p class="testimonial__text">
Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
magna.
@@ -311,7 +319,9 @@
</p>
</div>
<div class="testimonial col-12 col-sm-6 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
<div class="testimonial__logo">
<img src="img/testimonials/5.png" alt="Smashing Magazine">
</div>
<p class="testimonial__text">
Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
arcu
@@ -319,7 +329,9 @@
</p>
</div>
<div class="testimonial col-12 col-sm-6 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
<div class="testimonial__logo">
<img src="img/testimonials/6.png" alt="Smashing Magazine">
</div>
<p class="testimonial__text">
Fusce pharetra erat id odio blandit, nec
pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum.

2
src/scss/_pricing.scss Normal file → Executable file
View File

@@ -1,5 +1,5 @@
.pricing {
background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
background: $background-violet url(../img/testimonials/pricing.png) no-repeat center / cover;
padding-top: 90px;
padding-bottom: 75px;
}

28
src/scss/_testimonials.scss Normal file → Executable file
View File

@@ -1,22 +1,37 @@
.testimonials {
position: relative;
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 0;
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat center 100% / cover;
min-width: 320px;
@media all and (max-width: $tablet) {
background: $background-violet url(../img/testimonials/testimonials.png) no-repeat center top;
}
}
.testimonials__h1 {
padding: 100px 0;
padding: 100px 50px;
font-family: Montserrat, sans-serif;
font-size: 48px;
font-weight: bold;
color: white;
text-align: center;
text-transform: capitalize;
@media all and (max-width: $tablet) {
font-size: 38px;
}
@media all and (max-width: $phone) {
font-size: 30px;
}
}
.testimonial {
position: relative;
text-align: center;
min-height: 180px;
max-width: 300px;
margin: 0 auto;
@media all and (max-width: $phone) {
margin-bottom: 50px;
@@ -28,19 +43,18 @@
}
.testimonial__logo {
padding-bottom: 40px;
height: 80px;
}
.testimonial__text {
@media all and (min-width: $phone) {
position: absolute;
bottom: 0;
}
font-family: Source Sans Pro, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
color: white;
}
.testimonials__delimiter {