Social and Reviews

Social and Reviews merupakan grup yang memiliki sebanyak lima belas elemen di dalamnya, yang mana setiap elemennya memiliki kegunaanya masing - masing dalam proses pengembangan sebuah proyek website

1. Card profile large

Danny Alves

Art director and music producer

Follow

Card profile large digunakan untuk menampilkan profile dari user sebuah situs. Dalam card ini content yang terdapat di dalamnya dapat disesuaikan dengan kebutuhan penggunaan proyek anda. Untuk menggunakan card profile large, silahkan copy source code dibawah. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="cardprofilelarge-social">
        <img class="cardprofilelargebackgroundpic-social" src="assets/images/image.png" >
        <div class="cardprofilelargebody-social">
          <img src="assets/images/Profile.png" class="cardprofilelargeprofilepic-social" />
          <p class="cardprofilelargetitle-social">Danny Alves<p>
          <p class="cardprofilelargebio-social">Art director and music producer</p>
          <div class="cardprofilelargecol-social">
            <p class="cardprofilelargenumber-social">60</p>
            <p class="cardprofilelargenumbertext-social">Posts</p>
          </div>
          <div class="cardprofilelargecol-social">
            <p class="cardprofilelargenumber-social">830</p>
            <p class="cardprofilelargenumbertext-social">Following</p>
          </div>
          <div class="cardprofilelargecol-social">
            <p class="cardprofilelargenumber-social">1675</p>
            <p class="cardprofilelargenumbertext-social">Followers</p>
          </div>
          <a href="#" class="cardprofilelargebutton-social">Follow</a>
        </div>
      </div>
    </div>

2. Card single image preview

Danny Alves
thumb_up_alt thumb_down

Card single image preview digunakan untuk menampilkan preview gambar tunggal, gambar yang ditampilakn juga dapat disesuaikan dengan kebutuhan pengembangan anda. Silahkan gunakan source code dibawah ini. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="cardsingleimagepreview-social shadow">
        <img class="cardsingleimagepreviewbackgroundpic-social" src="assets/images/image2.png" alt="Card image cap">
          <div class="cardsingleimagepreviewbody-social">
            <div class="cardsingleimagepreviewcol8-social">
              <img  src="assets/images/Profile.png" class="cardsingleimagepreviewprofilepic-social">
              <span class="cardsingleimagepreviewtitle-social">Danny Alves</span>
            </div>
            <div class="cardsingleimagepreviewcol4-social">
              <span class="material-icons md-18 cardsingleimagepreviewlike-social">thumb_up_alt</span>
              <span class="material-icons md-18 cardsingleimagepreviewdislike-social">thumb_down</span>
            </div>
          </div>
      </div>
    </div>

3. Card review I

Danny Alves

@danlvs

Top Buyer
Top Services star4.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…

Card review I digunakan untuk menampilkan hasil review dari pengguna terhadap layanan dari website anda. Untuk menggunakan card review I silahkan copy source code dibawah. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
      <div class="cardreview1-social">
        <div class="cardreview1head-social">
          <div class="cardreview1col2-social">
            <img  src="assets/images/Profile.png" alt="Card image cap" class="cardreview1profilepic-social">
          </div>
          <div class="cardreview1col6-social">
            <div class="dim12">
              <p class="cardreview1title-social">Danny Alves</p>
            </div>
            <div class="dim12">
              <p class="cardreview1title1-social">@danlvs</p>
            </div>
          </div>
          <div class="cardreview1col4-social">
            <a href="#" class="cardreview1button-social">Top Buyer</a>
          </div>
        </div>
        <div class="cardreview1body-social">
          <div class="cardreview1bodytitle-social">
            <div class="cardreview1col12-social">
              <span class="cardreview1ratetitle-social">Top Services</span>
              <span><a href="#" class="cardreview1rate-social"><i class="material-icons" style="font-size: 13px; vertical-align: -2px; margin-right: 5px;">star</i>4.5</a></span>
            </div>
          </div>
          <p class="cardreview1bodycontent-social">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…
        </div>
      </div>
    </div>

4. Card review II

Danny Alves

@danlvs

A permanent solution to a temporary problem becomes a permanent problem

Spt 10, 2020 10 : 30 AM
favorite bookmark_border reply more_vert

Card review II digunakan untuk menampilkan hasil review dari pengguna terhadap layanan dari website anda. Untuk menggunakan card review II silahkan copy source code dibawah. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
        <div class="cardreview2-social">
          <div class="cardreview2head-social">
            <div class="cardreview2col2-social">
              <img  src="assets/images/Profile.png" alt="Card image cap" class="cardreview2profilepic-social">
            </div>
            <div class="cardreview2col6-social">
              <div class="dim12">
                <p class="cardreview2title-social">Danny Alves</p>
              </div>
              <div class="dim12">
                <p class="cardreview2title1-social">@danlvs</p>
              </div>
            </div>
            <div class="cardreview2col4-social">
            <a href="https://www.twitter.com"><i class="fab fa-twitter" style="font-size: 18px; vertical-align: -2; margin-right: 5; color: #3E3BEE;"></i></a>
            </div>
          </div>
          <div class="cardreview2body-social">
            <p class="cardreview2bodycontent-social">A permanent solution to a temporary problem becomes a permanent problem</p>
          </div>
          <div class="cardreview2footer-social">
            <div class="cardreview2col7-social">
              Spt 10, 2020 10 : 30 AM
            </div>
            <div class="cardreview2col5-social"> 
              <a href="#" ><span class="material-icons md-18 cardreview2favourite-social" id="btn">favorite</span></a>
              <a href="#" ><span class="material-icons md-18 cardreview2bookmark-social">bookmark_border</span></a>
              <a href="#" ><span class="material-icons md-18 cardreview2reply-social">reply</span></a>
              <a href="#" ><span class="material-icons md-18 cardreview2more-social">more_vert</span></a>
            </div>
          </div>
        </div>
    </div>

5. Card review III

Danny Alves

@danlvs

star star star star star

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…

300 people found this helpful
thumb_up_alt thumb_down

Card review III digunakan untuk menampilkan hasil review dari pengguna terhadap layanan dari website anda. Untuk menggunakan card review III silahkan copy source code dibawah. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
        <div class="cardreview3-social">
          <div class="cardreview3head-social">
            <div class="cardreview3col2-social">
              <img  src="assets/images/Profile.png" alt="Card image cap" class="cardreview3profilepic-social">
            </div>
            <div class="cardreview3col6-social">
              <div class="dim12">
                <p class="cardreview3title-social">Danny Alves</p>
              </div>
              <div class="dim12">
                <p class="cardreview3title1-social">@danlvs</p>
              </div>
            </div>
            <div class="cardreview3col4-social">
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#E9EAEF">star</i></span>
            </div>
          </div>
          <div class="cardreview3body-social">
            <p class="cardreview3bodycontent-social">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
          </div>
          <div class="cardreview3footer-social">
            <div class="cardreview3col7-social">
              300 people found this helpful
            </div>
            <div class="cardreview3col5-social"> 
              <span class="material-icons md-18 cardreview3like-social">thumb_up_alt</span>
              <span class="material-icons md-18 cardreview3dislike-social">thumb_down</span>
            </div>
          </div>
        </div>
    </div>

6. Cardreview IV

Danny Alves

star star star star star

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…

Card review IV digunakan untuk menampilkan hasil review dari pengguna terhadap layanan dari website anda. Untuk menggunakan card review IV silahkan copy source code dibawah. 


    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="cardreview4-social">
          <div class="cardreview4head-social">
            <div class="cardreview4col2-social">
              <img  src="assets/images/Profile.png" alt="Card image cap" class="cardreview4profilepic-social">
            </div>
            <div class="cardreview4col10-social">
              <div class="dim12">
                <p class="cardreview4title-social">Danny Alves</p>
              </div>
            </div>
          </div>
          <div class="cardreview4body-social">
            <div class="cardreview4bodytitle-social">
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2px;  color:#3E3BEE">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2px;  color:#3E3BEE">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2px;  color:#3E3BEE">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2px;  color:#3E3BEE">star</i></span>
              <span><i class="material-icons" style="font-size: 16px; vertical-align: -2px;  color:#E9EAEF">star</i></span>
            </div>
            <p class="cardreview4bodycontent-social">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
          </div>
        </div>
    </div>

7. Card profile small

Card profile small digunakan untuk menampilkan profile dari user, hampir mirip dengan card profile large namun dengan ukuran yang lebih kecil. Untuk menggunakan Card profile small silahkan copy source code dibawah. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
        <div class="cardprofilesmall-social">
          <div class="cardprofilesmallbody-social">
            <img src="assets/images/Profile.png" class="cardprofilesmallprofilepic-social" />
            <p class="cardprofilesmalltitle-social">Danny Alves<p>
            <p class="cardprofilesmallbio-social">Art director and music producer</p>
            <div class="cardprofilesmallcol-social">
              <p class="cardprofilesmallnumber-social">60</p>
              <p class="cardprofilesmallnumbertext-social">Posts</p>
            </div>
            <div class="cardprofilesmallcol-social">
              <p class="cardprofilesmallnumber-social">830</p>
              <p class="cardprofilesmallnumbertext-social">Following</p>
            </div>
            <div class="cardprofilesmallcol-social">
              <p class="cardprofilesmallnumber-social">1675</p>
              <p class="cardprofilesmallnumbertext-social">Followers</p>
            </div>
            <a href="#" class="cardprofilesmallbutton-social">Follow</a>
          </div>
        </div>
    </div>

8. Card post I

Danny Alves

@danlvs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Spt 10, 2020 10 : 30 AM

more_vert
favorite bookmark_border reply

Card post I digunakan untuk menampilakn post dari user, yang mana card ini pastinya dapat disesuaikan dengan kebutuhan pengembangan website anda. Untuk menggunakan card post I silahkan gunakan source code dibawah. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
        <div class="cardpost1-social">
          <div class="cardpost1head-social">
            <div class="cardpost1col2-social">
              <img  src="assets/images/Profile.png" alt="Card image cap" class="cardpost1profilepic-social">
            </div>
            <div class="cardpost1col6-social">
              <div class="dim12">
                <p class="cardpost1title-social">Danny Alves</p>
              </div>
              <div class="dim12">
                <p class="cardpost1title1-social">@danlvs</p>
              </div>
            </div>
          </div>
          <div class="cardpost1body-social">
            <p class="cardpost1bodycontent-social">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <p class="cardpost1bodycontentdate-social"> <a href="https://www.twitter.com"><i class="fab fa-twitter white cardpost1bodycontentdatetwitterlogo-social"></i></a>Spt 10, 2020 10 : 30 AM</p>
          </div>
          <div class="cardpost1footer-social">
            <div class="cardpost1col7-social">
              <a href="#" ><span class="material-icons md-18 cardpost1more-social">more_vert</span></a>
            </div>
            <div class="cardpost1col5-social"> 
              <a href="#" ><span class="material-icons md-18 cardpost1favourite-social">favorite</span></a>
              <a href="#" ><span class="material-icons md-18 cardpost1bookmark-social">bookmark_border</span></a>
              <a href="#" ><span class="material-icons md-18 cardpost1reply-social">reply</span></a>
            </div>
          </div>
        </div>
    </div>

9. Card post II

Danny Alves

@danlvs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Spt 10, 2020 10 : 30 AM

more_vert
favorite bookmark_border reply

Card post II digunakan untuk menampilakn post dari user, yang mana card ini pastinya dapat disesuaikan dengan kebutuhan pengembangan website anda. Untuk menggunakan card post II silahkan gunakan source code dibawah. 


    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
        <div class="cardpost2-social">
          <div class="cardpost2head-social">
            <div class="cardpost2col2-social">
              <img  src="assets/images/Profile.png" alt="Card image cap" class="cardpost2profilepic-social">
            </div>
            <div class="cardpost2col6-social">
              <div class="dim12">
                <p class="cardpost2title-social">Danny Alves</p>
              </div>
              <div class="dim12">
                <p class="cardpost2title1-social">@danlvs</p>
              </div>
            </div>
          </div>
          <div class="cardpost2body-social">
            <p class="cardpost2bodycontent-social">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <p class="cardpost2bodycontentdate-social"> <a href="https://www.twitter.com"><i class="fab fa-twitter  cardpost2bodycontentdatetwitterlogo-social"></i></a>Spt 10, 2020 10 : 30 AM</p>
          </div>
          <div class="cardpost2footer-social">
            <div class="cardpost2col7-social">
              <a href="#" ><span class="material-icons md-18 cardpost2more-social">more_vert</span></a>
            </div>
            <div class="cardpost2col5-social"> 
              <a href="#" ><span class="material-icons md-18 cardpost2favourite-social">favorite</span></a>
              <a href="#" ><span class="material-icons md-18 cardpost2bookmark-social">bookmark_border</span></a>
              <a href="#" ><span class="material-icons md-18 cardpost2reply-social">reply</span></a>
            </div>
          </div>
        </div>
    </div>

10. Card tweet

945

talking about this

Tweet this

Card tweet berfungsi untuk menampilkan jumlah postingan dari user website anda, logo dalam card ini pastinya dapat disesuaikan dengan kebutuhan anda. 


    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="cardtweet-social">
          <div class="cardtweetbody-social">
            <img src="assets/images/twitterlogo.png" class="cardtweetprofilepic-social" />
            <p class="cardtweettitle-social">945<p>
            <p class="cardtweetbio-social">talking about this</p>
            <a href="#" class="cardtweetbutton-social">Tweet this</a>
          </div>
        </div>
    </div>

11. Card impression

10.4 K

Profile Impressions

Card impression berfungsi untuk menampilkan jumlah impresi dari user website anda, logo dalam card ini pastinya dapat disesuaikan dengan kebutuhan anda. 


    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="cardimpression-social">
          <div class="cardimpressionbody-social">
            <img src="assets/images/impressionlogo.png" class="cardimpressionprofilepic-social" />
            <p class="cardimpressiontitle-social">10.4 K <p>
            <p class="cardimpressionbio-social">Profile Impressions</p>
          </div>
        </div>
    </div>

12. Card multiple image preview

Card image cap
Card image cap
Card image cap
Danny Alves
favorite bookmark_border reply more_vert

Card multiple image preview digunakan untuk menampilkan preview gambar yang lebih dari satu, gambar yang ditampilakn juga dapat disesuaikan dengan kebutuhan pengem-bangan anda. Silahkan gunakan source code dibawah ini. 


    <div class="col-lg-5 col-md-6 col-sm-10 col-12">
        <div class="cardmultipleimagepreview-social">
          <div class="cardmultipleimagepreviewpiccontainer-social">
            <div class="cardmultipleimagepreviewimage1container-social">
              <a href="assets/images/image3.png"><img src="assets/images/image3.png" style="width: 100%; height: 100%;" alt="Card image cap"></a>
            </div>
            <div class="cardmultipleimagepreviewimage2container-social">
              <div class="cardmultipleimagepreviewimage2-social">
                <a href="assets/images/image4.png"><img src="assets/images/image4.png" style="width: 100%; height: 100%;" alt="Card image cap"></a>
              </div>
              <div class="cardmultipleimagepreviewimage2-social">
                <a href="assets/images/image5.png"><img src="assets/images/image5.png" style="width: 100%; height: 100%;" alt="Card image cap"></a>
              </div>
            </div>
          </div>
            <div class="cardmultipleimagepreviewbody-social">
              <div class="cardmultipleimagepreviewcol7-social">
                <img  src="assets/images/Profile.png" class="cardmultipleimagepreviewprofilepic-social">
                <span class="cardmultipleimagepreviewtitle-social">Danny Alves</span>
              </div>
              <div class="cardmultipleimagepreviewcol5-social">
                <a href="#" ><span class="material-icons md-18 cardmultipleimagepreviewfavourite-social" id="btn">favorite</span></a>
                <a href="#" ><span class="material-icons md-18 cardmultipleimagepreviewbookmark-social">bookmark_border</span></a>
                <a href="#" ><span class="material-icons md-18 cardmultipleimagepreviewreply-social">reply</span></a>
                <a href="#" ><span class="material-icons md-18 cardmultipleimagepreviewmore-social">more_vert</span></a>
              </div>
            </div>
        </div>
    </div>

13. Card rating medium

Card rating medium, digunakan untuk menampilkan jumlah rating dari user website anda. Untuk menggunakan card rating medium silahkan copy source code dibawah. 


    <div class="col-lg-6 col-md-6 col-sm-10 col-12">
        <div class="cardratingmedium-social">
          <div class="cardratingmediumhead-social">
            <div class="cardratingmediumcol8-social">
              <div class="ratingmediumvaluecontainer-social">
                <div class="cardratingmediumvaluetitle-social">
                  <p class="cardratingmediumvaluetext-social">Excelent</p>
                </div>
                <div class="cardratingmediumbarcontainer-social" style="height:24px;width:60%;">
                  <div class="cardratingmediumprogressbar-social"> 
                    <div class="cardratingmediumrunningprogress-social" style="width: 40%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="ratingmediumvaluecontainer-social">
                <div class="cardratingmediumvaluetitle-social">
                  <p class="cardratingmediumvaluetext-social">Very Good</p>
                </div>
                <div class="cardratingmediumbarcontainer-social" style="height:24px;width:60%;">
                  <div class="cardratingmediumprogressbar-social"> 
                    <div class="cardratingmediumrunningprogress-social" style="width: 50%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="ratingmediumvaluecontainer-social">
                <div class="cardratingmediumvaluetitle-social">
                  <p class="cardratingmediumvaluetext-social">Average</p>
                </div>
                <div class="cardratingmediumbarcontainer-social" style="height:24px;width:60%;">
                  <div class="cardratingmediumprogressbar-social"> 
                    <div class="cardratingmediumrunningprogress-social" style="width: 30%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="ratingmediumvaluecontainer-social">
                <div class="cardratingmediumvaluetitle-social">
                  <p class="cardratingmediumvaluetext-social">Below</p>
                </div>
                <div class="cardratingmediumbarcontainer-social" style="height:24px;width:60%;">
                  <div class="cardratingmediumprogressbar-social"> 
                    <div class="cardratingmediumrunningprogress-social" style="width: 50%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="ratingmediumvaluecontainer-social">
                <div class="cardratingmediumvaluetitle-social">
                  <p class="cardratingmediumvaluetext-social">Poor</p>
                </div>
                <div class="cardratingmediumbarcontainer-social" style="height:24px;width:60%;">
                  <div class="cardratingmediumprogressbar-social"> 
                    <div class="cardratingmediumrunningprogress-social" style="width: 70%;">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="cardratingmediumcol1-social">
              <div class="cardratingmediumvaluenumbercontainer-social">
                <p class="cardratingmediumvaluetext-social">15.000</p>
              </div>
              <div class="cardratingmediumvaluenumbercontainer-social">
                <p class="cardratingmediumvaluetext-social">30.000</p>
              </div>
              <div class="cardratingmediumvaluenumbercontainer-social">
                <p class="cardratingmediumvaluetext-social">4.000</p>
              </div>
              <div class="cardratingmediumvaluenumbercontainer-social">
                <p class="cardratingmediumvaluetext-social">2.000</p>
              </div>
              <div class="cardratingmediumvaluenumbercontainer-social">
                <p class="cardratingmediumvaluetext-social">760</p>
              </div>
            </div>
            <div class="cardratingmediumcol3-social">
              <div>                
                <p class="cardratingmediumvaluenumber-social">4.3/5</p>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#E9EAEF">star</i></span>
                <p class="cardratingmediumvaluetext1-social">100 ratings</p>
              </div>
            </div>
          </div>
        </div>
    </div>

14. Card rating small

Card rating small, digunakan untuk menampilkan jumlah rating dari user website anda. Ukuran rating small lebih kecil daripada card rating medium. Untuk menggunakan card rating small silahkan copy source code dibawah. 

                        
    <div class="col-lg-4 col-md-6 col-sm-10 col-12">
        <div class="cardratingsmall-social">
          <div class="cardratingsmallhead-social">
            <p class="cardratingsmallheadtitle">Customer Ratings</p>
          </div>
          <div class="cardratingsmallratevalue-social">
            <p class="cardratingsmallnumbervalue">4.3/5<span class="cardratingsmalltextvalue">Based on 100 ratings</span></p>
            <div style="margin-top: 8px;">
            <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
            <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
            <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
            <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
            <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#E9EAEF">star</i></span>
            </div>
          </div>
          <div class="cardratingsmallbarcontainer-social">
            <div class="cardratingsmallvaluecontainer-social">
              <div class="cardratingsmallvaluetitle-social">
                <p class="cardratingsmallvaluetext-social">5 Stars</p>
              </div>
              <div class="cardratingsmallprogressbarcontainer-social" style="height:24px;width:75.66%;">
                <div class="cardratingsmallprogressbar-social"> 
                  <div class="cardratingsmallrunningprogress-social" style="width: 100%;">
                  </div>
                </div>
              </div>
            </div>
            <div class="cardratingsmallvaluecontainer-social">
              <div class="cardratingsmallvaluetitle-social">
                <p class="cardratingsmallvaluetext-social">4 Stars</p>
              </div>
              <div class="cardratingsmallprogressbarcontainer-social" style="height:24px;width:75.66%;">
                <div class="cardratingsmallprogressbar-social"> 
                  <div class="cardratingsmallrunningprogress-social" style="width: 80%;">
                  </div>
                </div>
              </div>
            </div>
            <div class="cardratingsmallvaluecontainer-social">
              <div class="cardratingsmallvaluetitle-social">
                <p class="cardratingsmallvaluetext-social">3 Stars</p>
              </div>
              <div class="cardratingsmallprogressbarcontainer-social" style="height:24px;width:75.66%;">
                <div class="cardratingsmallprogressbar-social"> 
                  <div class="cardratingsmallrunningprogress-social" style="width: 60%;">
                  </div>
                </div>
              </div>
            </div>
            <div class="cardratingsmallvaluecontainer-social">
              <div class="cardratingsmallvaluetitle-social">
                <p class="cardratingsmallvaluetext-social">2 Stars</p>
              </div>
              <div class="cardratingsmallprogressbarcontainer-social" style="height:24px;width:75.66%;">
                <div class="cardratingsmallprogressbar-social"> 
                  <div class="cardratingsmallrunningprogress-social" style="width: 40%;">
                  </div>
                </div>
              </div>
            </div>
            <div class="cardratingsmallvaluecontainer-social">
              <div class="cardratingsmallvaluetitle-social">
                <p class="cardratingsmallvaluetext-social">1 Stars</p>
              </div>
              <div class="cardratingsmallprogressbarcontainer-social" style="height:24px;width:75.66%;">
                <div class="cardratingsmallprogressbar-social"> 
                  <div class="cardratingsmallrunningprogress-social" style="width: 20%;">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cardratingsmallcommentcontainer-social">
            <div class="cardratingsmallbody-social">
              <div class="cardratingsmallbodyhead-social">
                <div class="cardratingsmallcol2-social">
                  <img  src="assets/images/Profile.png" alt="Card image cap" class="cardratingsmallprofilepic-social">
                </div>
                <div class="cardratingsmallcol6-social">
                  <div class="dim12">
                    <p class="cardreview3title-social">Danny Alves</p>
                  </div>
                </div>
                <div class="cardratingsmallcol4-social">
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#E9EAEF">star</i></span>
                </div>
              </div>
              <div class="cardratingsmallcommenttext-social">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…
              </div>
            </div>
            <div class="cardratingsmallbody-social">
              <div class="cardratingsmallbodyhead-social">
                <div class="cardratingsmallcol2-social">
                  <img  src="assets/images/Profile.png" alt="Card image cap" class="cardratingsmallprofilepic-social">
                </div>
                <div class="cardratingsmallcol6-social">
                  <div class="dim12">
                    <p class="cardreview3title-social">Danny Alves</p>
                  </div>
                </div>
                <div class="cardratingsmallcol4-social">
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#E9EAEF">star</i></span>
                </div>
              </div>
              <div class="cardratingsmallcommenttext-social">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…
              </div>
            </div>
            <div class="cardratingsmallbody-social">
              <div class="cardratingsmallbodyhead-social">
                <div class="cardratingsmallcol2-social">
                  <img  src="assets/images/Profile.png" alt="Card image cap" class="cardratingsmallprofilepic-social">
                </div>
                <div class="cardratingsmallcol6-social">
                  <div class="dim12">
                    <p class="cardreview3title-social">Danny Alves</p>
                  </div>
                </div>
                <div class="cardratingsmallcol4-social">
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#FED568">star</i></span>
                  <span><i class="material-icons" style="font-size: 14px; vertical-align: -2;  color:#E9EAEF">star</i></span>
                </div>
              </div>
              <div class="cardratingsmallcommenttext-social">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…
              </div>
            </div>
          </div>
          <div class="cardratingsmallfooter-social">
            <a href="#" class="cardratingsmallbutton-social">Read All Reviews</a>  
          </div>     
        </div>
    </div>

15. Card rating large

Customer Ratings

star5

star4

star3

star2

star1

4.3/5

star star star star star

100 ratings

Danny Alves

star star star star star

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Read More…

Danny Alves

star star star star star

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Read More…

Read All Reviews

Card rating large, digunakan untuk menampilkan jumlah rating dari user website anda. Ukuran rating large paling besar daripada dua card ratingsebelumnya. Untuk menggunakan card rating large silahkan copy source code dibawah. 

                        
    <div class="col-lg-6 col-md-6 col-sm-10 col-12">
        <div class="cardratinglarge-social">
          <div class="cardratinglargehead-social">
            <p class="cardratinglargeheadtitle">Customer Ratings</p>
          </div>
          <div class="cardratinglargebody-social">
            <div class="cardratinglargecol6">
              <div class="cardratinglargevaluecontainer-social">
                <div class="cardratinglargevaluetitle-social">
                  <p class="cardratinglargevaluetext-social"><i class="material-icons" style="font-size: 16px; vertical-align: -2; margin-right: 8px; color:#3E3BEE">star</i>5</p>
                </div>
                <div class="cardratinglargeprogressbarcontainer-social" style="height:24px;width:75.66%;">
                  <div class="cardratinglargeprogressbar-social"> 
                    <div class="cardratinglargerunningprogress-social" style="width: 100%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="cardratinglargevaluecontainer-social">
                <div class="cardratinglargevaluetitle-social">
                  <p class="cardratinglargevaluetext-social"><i class="material-icons" style="font-size: 16px; vertical-align: -2; margin-right: 8px; color:#3E3BEE">star</i>4</p>
                </div>
                <div class="cardratinglargeprogressbarcontainer-social" style="height:24px;width:75.66%;">
                  <div class="cardratinglargeprogressbar-social"> 
                    <div class="cardratinglargerunningprogress-social" style="width: 100%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="cardratinglargevaluecontainer-social">
                <div class="cardratinglargevaluetitle-social">
                  <p class="cardratinglargevaluetext-social"><i class="material-icons" style="font-size: 16px; vertical-align: -2; margin-right: 8px; color:#3E3BEE">star</i>3</p>
                </div>
                <div class="cardratinglargeprogressbarcontainer-social" style="height:24px;width:75.66%;">
                  <div class="cardratinglargeprogressbar-social"> 
                    <div class="cardratinglargerunningprogress-social" style="width: 100%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="cardratinglargevaluecontainer-social">
                <div class="cardratinglargevaluetitle-social">
                  <p class="cardratinglargevaluetext-social"><i class="material-icons" style="font-size: 16px; vertical-align: -2; margin-right: 8px;  color:#3E3BEE">star</i>2</p>
                </div>
                <div class="cardratinglargeprogressbarcontainer-social" style="height:24px;width:75.66%;">
                  <div class="cardratinglargeprogressbar-social"> 
                    <div class="cardratinglargerunningprogress-social" style="width: 100%;">
                    </div>
                  </div>
                </div>
              </div>
              <div class="cardratinglargevaluecontainer-social">
                <div class="cardratinglargevaluetitle-social">
                  <p class="cardratinglargevaluetext-social"><i class="material-icons" style="font-size: 16px; vertical-align: -2; margin-right: 8px;  color:#3E3BEE">star</i>1</p>
                </div>
                <div class="cardratinglargeprogressbarcontainer-social" style="height:24px;width:75.66%;">
                  <div class="cardratinglargeprogressbar-social"> 
                    <div class="cardratinglargerunningprogress-social" style="width: 100%;">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="cardratinglargecol61">
              <div style="width:100%; margin-top: 18px;">                
                <p class="cardratinglargevaluenumber-social">4.3/5</p>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#FED568">star</i></span>
                <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#E9EAEF">star</i></span>
                <p class="cardratinglargevaluetext1-social">100 ratings</p>
              </div>
            </div>
          </div>
          <div class="cardratinglargecommentbody-social">
            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
              <div class="cardratinglargecommentsection-social">
                <div class="cardratinglargecommentsectionhead-social">
                  <div class="cardratinglargecommentsectioncol2-social">
                    <img  src="assets/images/Profile.png" alt="Card image cap" class="cardratinglargeprofilepic-social">
                  </div>
                  <div class="cardratinglargecommentsectioncol10-social">
                    <div class="dim12">
                      <p class="cardratinglargecommentsectiontitle-social">Danny Alves</p>
                    </div>
                  </div>
                </div>
                <div class="cardratinglargecommentsectionbody-social">
                  <div class="cardratinglargecommentsectionbodytitle-social">
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#E9EAEF">star</i></span>
                  </div>
                  <p class="cardratinglargecommentsectionbodycontent-social">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
              <div class="cardratinglargecommentsection-social">
                <div class="cardratinglargecommentsectionhead-social">
                  <div class="cardratinglargecommentsectioncol2-social">
                    <img  src="assets/images/Profile.png" alt="Card image cap" class="cardratinglargeprofilepic-social">
                  </div>
                  <div class="cardratinglargecommentsectioncol10-social">
                    <div class="dim12">
                      <p class="cardratinglargecommentsectiontitle-social">Danny Alves</p>
                    </div>
                  </div>
                </div>
                <div class="cardratinglargecommentsectionbody-social">
                  <div class="cardratinglargecommentsectionbodytitle-social">
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#3E3BEE">star</i></span>
                    <span><i class="material-icons" style="font-size: 16px; vertical-align: -2;  color:#E9EAEF">star</i></span>
                  </div>
                  <p class="cardratinglargecommentsectionbodycontent-social">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Read More…</p>
                </div>
              </div>
            </div>
          </div>
          <div class="cardratinglargefooter-social">
            <div class="cardratinglargecol12-social">
              Read All Reviews
            </div>
          </div>
        </div>
    </div>

Made On Earth By Human. All rights reserved © 2022.