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

Create Reviews section

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-03-22 13:06:39 +01:00
parent 0b708d6d42
commit c612966d83
5 changed files with 108 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/index.html
View File

@@ -184,43 +184,55 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="reviews__content col-10"> <div class="reviews__content col-10">
<div class="review"> <div class="review">
<div class="review__author"> <div class="author">
<img src="img/social/userpic.png" alt="Steven Strange"> <img class="avatar" src="http://i.pravatar.cc/100&img=1" alt="Steven Strange">
<span class="review__author-name">Steven Strange</span> <div class="author__details">
<span class="review__nickname">DoctorS</span> <p class="author__name">Steven Strange</p>
<p class="author__nickname nickname">DoctorS</p>
</div>
</div> </div>
<div class="review__content"><span class="review__nickname">Pixelbuddha</span> Suspendisse sodales <div class="row justify-content-center">
sem est, <div class="review__content col-10">
in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat eget <span class="nickname">Pixelbuddha</span> Suspendisse sodales sem est,
eros. in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat
eget
eros.
</div>
</div> </div>
<div class="review__date">2 hours ago</div> <div class="review__date">2 hours ago</div>
</div> </div>
<div class="review"> <div class="review">
<div class="review__author"> <div class="author">
<img src="img/social/userpic.png" alt="Steven Strange"> <img class="avatar" src="http://i.pravatar.cc/100&img=2" alt="Steven Strange">
<span class="review__author-name">Steven Strange</span> <div class="author__details">
<span class="review__nickname">DoctorS</span> <p class="author__name">Aemiliana Alejo</p>
<p class="author__nickname nickname">alejo</p>
</div>
</div> </div>
<div class="review__content"><span class="review__nickname">Pixelbuddha</span> Suspendisse sodales <div class="row justify-content-center">
sem est, <div class="review__content col-10">
in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat eget <span class="nickname">Pixelbuddha</span> Ut enim ad minima veniam, quis nostrum
eros. exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur.
</div>
</div> </div>
<div class="review__date">2 hours ago</div> <div class="review__date">3 hours ago</div>
</div> </div>
<div class="review"> <div class="review">
<div class="review__author"> <div class="author">
<img src="img/social/userpic.png" alt="Steven Strange"> <img class="avatar" src="http://i.pravatar.cc/100&img=3" alt="Steven Strange">
<span class="review__author-name">Steven Strange</span> <div class="author__details">
<span class="review__nickname">DoctorS</span> <p class="author__name">Melpomeni Étaín</p>
<p class="author__nickname nickname">etain</p>
</div>
</div> </div>
<div class="review__content"><span class="review__nickname">Pixelbuddha</span> Suspendisse sodales <div class="row justify-content-center">
sem est, <div class="review__content col-10">
in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat eget <span class="nickname">Pixelbuddha</span> Nor again is there anyone who loves or pursues or
eros. desires to obtain pain of itself.
</div>
</div> </div>
<div class="review__date">2 hours ago</div> <div class="review__date">4 hours ago</div>
</div> </div>
</div> </div>
</div> </div>

3
src/js/script.js
View File

@@ -14,6 +14,7 @@ $(document).ready(function () {
$('.reviews__content').slick({ $('.reviews__content').slick({
nextArrow: '<img class="slick-next" src="img/social/arrow-right.svg">', nextArrow: '<img class="slick-next" src="img/social/arrow-right.svg">',
prevArrow: '<img class="slick-prev" src="img/social/arrow-left.svg">', prevArrow: '<img class="slick-prev" src="img/social/arrow-left.svg">',
auto: true, autoplay: true,
autoplaySpeed: 4000,
}); });
}); });

41
src/scss/_author.scss Normal file
View File

@@ -0,0 +1,41 @@
.author {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.avatar {
width: 85px;
height: 85px;
border-radius: 50%;
}
.author__details {
margin-left: 23px;
}
.author__name {
margin: 0;
padding: 0;
font-family: Montserrat, sans-serif;
font-size: 24px;
font-weight: bold;
color: $primary-dark;
}
.author__nickname {
margin: 0;
padding: 0;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 16px;
}
.nickname {
color: $primary;
&:before {
content: '@';
}
}

24
src/scss/_reviews.scss Normal file
View File

@@ -0,0 +1,24 @@
.reviews {
margin-top: 85px;
}
.review {
padding-bottom: 50px;
}
.review__content {
margin-top: 40px;
font-family: Source Sans Pro, sans-serif;
font-size: 20px;
color: #333333;
text-align: center;
}
.review__date {
margin-top: 30px;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 500;
color: $regular-text;
text-align: center;
}

2
src/scss/style.scss
View File

@@ -1,8 +1,10 @@
@import "variables"; @import "variables";
@import "buttons"; @import "buttons";
@import "global"; @import "global";
@import "author";
@import "navbar"; @import "navbar";
@import "header"; @import "header";
@import "download"; @import "download";
@import "editor"; @import "editor";
@import "about"; @import "about";
@import "reviews";