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__content container">
<div class="testimonials__row row"> <div class="testimonials__row row">
<div class="testimonial col-12 col-sm-6 col-xl-4"> <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"> <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
magna. magna.
@@ -287,14 +289,18 @@
</p> </p>
</div> </div>
<div class="testimonial col-12 col-sm-6 col-xl-4"> <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"> <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-12 col-sm-6 col-xl-4"> <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"> <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
nibh. nibh.
@@ -302,8 +308,10 @@
</p> </p>
</div> </div>
<div class="testimonial col-12 col-sm-6 col-xl-4"> <div class="testimonial col-12 col-sm-6 col-xl-4">
<img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine"> <div class="testimonial__logo">
<img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine"> <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"> <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
magna. magna.
@@ -311,7 +319,9 @@
</p> </p>
</div> </div>
<div class="testimonial col-12 col-sm-6 col-xl-4"> <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"> <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
arcu arcu
@@ -319,7 +329,9 @@
</p> </p>
</div> </div>
<div class="testimonial col-12 col-sm-6 col-xl-4"> <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"> <p class="testimonial__text">
Fusce pharetra erat id odio blandit, nec Fusce pharetra erat id odio blandit, nec
pharetra eros venenatis. Pellentesque porttitor cursus massa et vestibulum. 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 { .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-top: 90px;
padding-bottom: 75px; padding-bottom: 75px;
} }

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

@@ -1,22 +1,37 @@
.testimonials { .testimonials {
position: relative; 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 { .testimonials__h1 {
padding: 100px 0; padding: 100px 50px;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
color: white; color: white;
text-align: center; text-align: center;
text-transform: capitalize; text-transform: capitalize;
@media all and (max-width: $tablet) {
font-size: 38px;
}
@media all and (max-width: $phone) {
font-size: 30px;
}
} }
.testimonial { .testimonial {
position: relative; position: relative;
text-align: center; text-align: center;
min-height: 180px; min-height: 180px;
max-width: 300px;
margin: 0 auto;
@media all and (max-width: $phone) { @media all and (max-width: $phone) {
margin-bottom: 50px; margin-bottom: 50px;
@@ -28,19 +43,18 @@
} }
.testimonial__logo { .testimonial__logo {
padding-bottom: 40px; height: 80px;
} }
.testimonial__text { .testimonial__text {
@media all and (min-width: $phone) {
position: absolute;
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;
font-style: italic; font-style: italic;
color: white; color: white;
} }
.testimonials__delimiter { .testimonials__delimiter {