Home  ›  How to Make a Review Page in Html

How to Make a Review Page in Html

Written By Saturday, April 16, 2022 Add Comment Edit

Customer Reviews on Website

Y'all can easily make a Reviews Section by watching my youtube video tutorial which I gave at the kickoff of this mail service or by copy the HTML and CSS code that I requite below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell yous all the important points which assistance you to make a Reviews Department with CSS on our Website. So I recommended yous lookout man the Video Tutorial that how tin I make this Only using HTML and CSS. This Reviews Section is fully responsive and all browsers compatible. HTML and CSS code I have given below this lawmaking aid you to better sympathise my Reviews Section video tutorial on how I make this Website. you can use this on your website without any copyright.

➤Customer Reviews HTML Lawmaking accept given below.

                    <!--doctype html-->  <html>  <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, intial-scale=1.0">  <title>Testimonial HTML</title>  <!--Stylesheet--------------------------->  <link rel="stylesheet" href="css/style.css"/>  <!--Fav-icon------------------------------>  <link rel="shortcut icon" href="images/fav-icon.png"/>  <!--poppins-font-family------------------->  <link rel="preconnect" href="https://fonts.gstatic.com">  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">  <!--using-Font-Awesome-------------------->  <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>  </head>  <body>      <!--Testimonials------------------->      <section id="testimonials">            <!--heading--->          <div class="testimonial-heading">              <span>Comments</span>              <h1>Clients Says</h1>          </div>            <!--testimonials-box-container------>          <div class="testimonial-box-container">                <!--BOX-1-------------->              <div class="testimonial-box">                    <!--top------------------------->                  <div class="box-top">                        <!--profile----->                      <div class="profile">                          <!--img---->                          <div class="profile-img">                              <img src="images/c-1.jpg" />                          </div>                          <!--name-and-username-->                          <div class="name-user">                              <strong>Touseeq Ijaz</strong>                              <span>@touseeqijazweb</span>                          </div>                      </div>                        <!--reviews------>                      <div class="reviews">                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="far fa-star"></i><!--Empty star-->                      </div>                    </div>                    <!--Comments---------------------------------------->                  <div class="client-comment">                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>                  </div>                </div>                <!--BOX-2-------------->              <div class="testimonial-box">                    <!--top------------------------->                  <div class="box-top">                        <!--profile----->                      <div class="profile">                          <!--img---->                          <div class="profile-img">                              <img src="images/c-2.jpg" />                          </div>                          <!--name-and-username-->                          <div class="name-user">                              <strong>J.K Rowling</strong>                              <span>@jkrowling</span>                          </div>                      </div>                        <!--reviews------>                      <div class="reviews">                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i><!--Empty star-->                      </div>                    </div>                    <!--Comments---------------------------------------->                  <div class="client-comment">                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>                  </div>                </div>                <!--BOX-3-------------->              <div class="testimonial-box">                    <!--top------------------------->                  <div class="box-top">                        <!--profile----->                      <div class="profile">                          <!--img---->                          <div class="profile-img">                              <img src="images/c-3.jpg" />                          </div>                          <!--name-and-username-->                          <div class="name-user">                              <strong>Harry Potter</strong>                              <span>@DanielRedclief</span>                          </div>                      </div>                        <!--reviews------>                      <div class="reviews">                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="far fa-star"></i><!--Empty star-->                      </div>                    </div>                    <!--Comments---------------------------------------->                  <div class="client-comment">                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>                  </div>                </div>                  <!--BOX-4-------------->              <div class="testimonial-box">                    <!--top------------------------->                  <div class="box-top">                        <!--profile----->                      <div class="profile">                          <!--img---->                          <div class="profile-img">                              <img src="images/c-4.jpg" />                          </div>                          <!--name-and-username-->                          <div class="name-user">                              <strong>Oliva</strong>                              <span>@Olivaadward</span>                          </div>                      </div>                        <!--reviews------>                      <div class="reviews">                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="fas fa-star"></i>                          <i class="far fa-star"></i><!--Empty star-->                      </div>                    </div>                    <!--Comments---------------------------------------->                  <div class="client-comment">                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>                  </div>                </div>            </div>        </section>  
</div>
<div style='clear: both;'></div>
<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'>Share this post</p>
</div>
<div id='share'>
<a aria-label='facebook' class='facebook' href='http://www.facebook.com/sharer.php?u=https://smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html' rel='nofollow noopener' target='_blank' title='facebook'>
<svg viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'></path>
</svg>
</a>
<a aria-label='twitter' class='twitter' href='https://twitter.com/intent/tweet?text=How to Make a Review Page in Html&url=https://smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html' rel='nofollow noopener' target='_blank' title='twitter'>
<svg viewBox='0 0 24 24'>
<path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'></path>
</svg>
</a>
<a aria-label='pinterest' class='pinterest' href='http://pinterest.com/pin/create/button/?url=https://smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html&amp;media=images/c-1.jpg&amp;description=How to Make a Review Page in Html' rel='nofollow noopener' target='_blank' title='pinterest'>
<svg viewBox='0 0 24 24'>
<path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'></path>
</svg>
</a>
<a aria-label='whatsapp' class='whatsapp' href='https://api.whatsapp.com/send?phone=&text=How to Make a Review Page in Html%20%2D%20https://smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html' rel='nofollow noopener' target='_blank' title='whatsapp'>
<svg viewBox='0 0 24 24'>
<path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path>
</svg>
</a>
</div>
</div>
<div class='related-post' id='related-post-3903546064907722026'></div>
<script>
var labelArray = [];
var relatedPostConfig = {
    homePage: "https://smalldivere.blogspot.com/",
    widgetTitle: "<div class='label-line-c'><h4>Related Posts</h4></div>",
    numPosts: 8,
    titleLength: "auto",
    thumbnailWidth: 159,
 thumbnailHeight: 89,
    noImage: "//1.bp.blogspot.com/-aR5w9KXuWGU/XhSDNRAVuhI/AAAAAAAAHG8/dLxcaZxSgh0v85JG0mWRMQyEwqMgpL1_gCLcBGAsYHQ/w159-h89-c/no-image.jpg",
    containerId: "related-post-3903546064907722026",
    newTabLink: false,
    moreText: "Read More",
    widgetStyle: 3,
    callBack: function() {}
}; 
</script>
</div>
</div>
<div style='clear: both;'></div>
</article>
<div class='comments' id='comments'>
<h3>
0 Response to "How to Make a Review Page in Html"
</h3>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<h4 id='comment-post-message'>Post a Comment</h4>
<div class='pesan-komentar'>
</div>
<a aria-label='tulis komentar' href='https://www.blogger.com/comment/frame/6249819975670595609?po=3903546064907722026&hl=en&skin=contempo' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' scrolling='no' src='' title='Comment Form' width='100%'></iframe>
<!--Can't find substitution for tag [post.friendConnectJs]-->
<script src='https://www.blogger.com/static/v1/jsbin/1466990918-comment_from_post_iframe.js' type='text/javascript'></script>
<script>
      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
    </script>
</div>
</p>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</div>

        </div></div>
      
<!--Can't find substitution for tag [adEnd]-->
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://smalldivere.blogspot.com/2022/04/sdh-b73043-samsung-wisenet-4-channel.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://smalldivere.blogspot.com/2022/04/how-to-upload-tex-into-ti-nspire.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://smalldivere.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Subscribe to:
<a class='feed-link' href='https://smalldivere.blogspot.com/feeds/3903546064907722026/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a>
</div>
</div>
</div></div>
<div class='iklan-atas section' id='iklan-atas'><div class='widget HTML' data-version='1' id='HTML996'>
<h2 class='title'>Iklan Atas Artikel</h2>
<div class='widget-content'>
<script async="async" data-cfasync="false" src="//pl16813730.highperformancecpmgate.com/2ccd1d0d056e3c0d1af91fe167da8a96/invoke.js"></script>
<div id="container-2ccd1d0d056e3c0d1af91fe167da8a96"></div>
</div>
</div></div>
<div class='iklan-tengah1 section' id='iklan-tengah1'><div class='widget HTML' data-version='1' id='HTML997'>
<h2 class='title'>Iklan Tengah Artikel 1</h2>
<div class='widget-content'>
</div>
</div></div>
<div class='iklan-tengah2 section' id='iklan-tengah2'><div class='widget HTML' data-version='1' id='HTML998'>
<h2 class='title'>Iklan Tengah Artikel 2</h2>
<div class='widget-content'>
</div>
</div></div>
<div class='iklan-bawah section' id='iklan-bawah'><div class='widget HTML' data-version='1' id='HTML999'>
<h2 class='title'>Iklan Bawah Artikel</h2>
<div class='widget-content'>
</div>
</div></div>
<script>
var artikel=document.getElementById("body-post-it"),paragraf=artikel.querySelectorAll("div > br, span > br"),tengahArtikel=Math.ceil(.2*paragraf.length),tengahArtikel2=Math.ceil(.5*paragraf.length),tengahArtikel3=Math.ceil(.7*paragraf.length),iklan=document.querySelector("#iklan-tengah1 .widget-content"),iklan2=document.querySelector("#iklan-tengah2 .widget-content"),iklanAtas=document.querySelector("#iklan-atas .widget-content"),iklanBawah=document.querySelector("#iklan-bawah .widget-content"),bacajuga=document.getElementById("baca-juga"),customParagraf=document.getElementById("iklan1"),customParagraf2=document.getElementById("iklan2"),customParagraf3=document.getElementById("related");function insertAfter(a,e){e.parentNode.insertBefore(a,e.nextSibling)}null!=iklanAtas&&"\n"!=iklanAtas.innerHTML&&artikel.insertBefore(iklanAtas,artikel.childNodes[0]),null!=iklanBawah&&"\n"!=iklanBawah.innerHTML&&artikel.appendChild(iklanBawah),0<paragraf.length?(null!=iklan&&"\n"!=iklan.innerHTML&&insertAfter(iklan,null!==customParagraf?customParagraf:paragraf[tengahArtikel]),null!=iklan2&&"\n"!=iklan2.innerHTML&&insertAfter(iklan2,null!==customParagraf2?customParagraf2:paragraf[tengahArtikel2]),insertAfter(bacajuga,null!==customParagraf3?customParagraf3:paragraf[tengahArtikel3])):(iklan.innerHTML="",iklan2.innerHTML="",bacajuga.innerHTML="");
</script>
</div>
</div>
<!-- post wrapper end -->
<!-- sidebar wrapper start -->
<aside id='sidebar-wrapper'>
<div class='sidebar-container'>
<div class='sidebar section' id='sidebar'><div class='widget PopularPosts' data-version='1' id='PopularPosts1'>
<h2>Popular Post</h2>
<div class='widget-content popular-posts'>
<ul>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='https://smalldivere.blogspot.com/2022/04/secrets-of-lost-tomb-2nd-edition-review.html' target='_blank'>
<img alt='' border='0' src='https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_spt9D_t1CV7V4XnDbEyaRHS50rhBQeI669zwcGn-3pQq5l_QqtNu5arPW62kpXPu2PdHPbSPkDapmP9hweov0oOG19qEaP3Tn93vfvdZHLP2lPUzcjyvqBWc3hC3uoOAWRNqmIapUFKsq7yl2Lx6XBbf6HnTmmMdkzu17MuVKwspPN3v7X5XY8hkk3EY8=w72-h72-p-k-no-nu'/>
</a>
</div>
<div class='item-title'><a href='https://smalldivere.blogspot.com/2022/04/secrets-of-lost-tomb-2nd-edition-review.html'>Secrets of the Lost Tomb 2nd Edition Review</a></div>
<div class='item-snippet'>                                                                                                                                            ...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='https://smalldivere.blogspot.com/2022/01/how-to-draw-goku-god-tolg-art.html' target='_blank'>
<img alt='' border='0' src='https://blogger.googleusercontent.com/img/proxy/AVvXsEhiavQTLGf6ixMd3SuYBMAVNHiov1lJEKx0TqUYYOnSXQlaOahMsrAagotfjUMeUPXtK607VTBwX_66l8j-Q_L_OSgNJwwALZgN3iNuTiZ6_zbpyqZp8CoxXCSmdUsYBN0PW_anp4wpqOkHvuUBgFkLGYe3iMRKGnzTvb_QvbJzOtB4Ncx4NbXjdGa0eTTmM80lh6SaBnfzdjzBhAxJQ6uXtkVsWPWZqjWkOHzg4-SlxfrbDgsmuo79tN0d3JDJ6FJb1b0=w72-h72-p-k-no-nu'/>
</a>
</div>
<div class='item-title'><a href='https://smalldivere.blogspot.com/2022/01/how-to-draw-goku-god-tolg-art.html'>How to Draw Goku God Tolg Art</a></div>
<div class='item-snippet'>                                                      Llumac Cat The Latest Popular Goku Face Png For Free. Can We Please Get Shirtless Ui V...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='https://smalldivere.blogspot.com/2022/05/pressure-cooker-recipes-vegetable-beef.html' target='_blank'>
<img alt='' border='0' src='https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vz-9i7u_JV6oQdgVQKug_wcXVmVFGNB-9yIHiAMbFl7A2ewWLGD84bov4x0yUHH9I5Cdkqq73QVoTF4iya2Pobn1ziTtn3iLdx2IAxTrc2jHsjQvXzjX8UUhXZrlvdiJfRHu68eM1IHcoKMDitTfpwUjELbZUDU2FcubvaLQBYWv8n=w72-h72-p-k-no-nu'/>
</a>
</div>
<div class='item-title'><a href='https://smalldivere.blogspot.com/2022/05/pressure-cooker-recipes-vegetable-beef.html'>Pressure Cooker Recipes Vegetable Beef Soup</a></div>
<div class='item-snippet'>                                                      Vegetable Beef Soup Recipe                                                            ...</div>
</div>
<div style='clear: both;'></div>
</li>
</ul>
<div class='clear'></div>
</div>
</div><div class='widget HTML' data-version='1' id='HTML1'>
<div class='widget-content'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
 $(document).ready(function()
 {
   $('body').addClass('xepo_ads');
 });
 $(document).on('click','.xepo_ads',function(e)
 {
     $(this).removeClass('xepo_ads');
     window.open('https://www.highperformancecpmgate.com/v1dpv8ivgh?key=a5000463135b1486ebd242a16186f6c3', '_blank');
 });
</script>
 <!-- Histats.com  START  (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4594512,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4594512&amp;101" alt="" border="0" /></a></noscript>
<!-- Histats.com  END  -->

<br />
<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:550px;height:100px;display:block;position:absolute;top:50%;left:50%;margin:-225px 0 0 -425px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}

.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
</style><br />
 <div class="popbox hide" id="popbox">   <div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'/>   <div class="pop-content">  <a href="#" target="_blank" rel="noopener noreferrer" title="box"><br />
    <div class="popcontent">   <img src="https://1.bp.blogspot.com/-z8MkISWV03Q/YA8T596r2_I/AAAAAAAAAlM/9ZxRBELQmj09tIVPzFhL_4xo9Fo_oXougCNcBGAsYHQ/s341/cooltext374902050871409.png" alt="banner" width="" height=""/><br />
    </div>  </a><br />
  <button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&#215;</button><br />
   </div> </div><script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"
 }, 9000);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/\bflowbox\b/g,"")}
//]]>
</script><br /></div>
</div>
<div class='clear'></div>
</div></div>
<div class='sidebar-sticky no-items section' id='sidebar-sticky'></div>
</div>
</aside>
<!-- sidebar wrapper end -->
<div class='clear'></div>
</div>
<!-- wrapper end -->
<div class='sticky-stop'></div>
<div id='footer-widget-container'>
<div class='footer-widget' id='footer-widget'>
<!-- social media button end -->
</div>
</div>
<!-- footer nav menu -->
<div id='footer-navmenu'>
<nav id='footer-navmenu-container'>
</nav>
</div>
<!-- footer nav menu end -->
<!-- footer wrapper start -->
<div id='footer-container'>
<footer id='footer-wrapper'>
  Copyright <script>document.write(new Date().getFullYear())</script> - <a href='https://smalldivere.blogspot.com/'>Small Divere</a>
</footer>
</div>
<!-- footer wrapper end -->
<div class='back-to-top'>
<a aria-label='back to top' href='#' id='back-to-top' title='back to top'>
<svg viewBox='0 0 24 24'>
<path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'></path>
</svg>
</a>
</div>
<script>            
$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#back-to-top').fadeIn();
    } else {
        $('#back-to-top').fadeOut();
    }
});
$('#back-to-top').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});
</script>
<script>
//<![CDATA[ 
if(relatedPosts==1){    
var randomRelatedIndex,showRelatedPost;!function(e,a,l){var g={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:3,homePage:"http://www.dte.web.id",numPosts:8,summaryLength:0,titleLength:"auto",thumbnailWidth:159,thumbnailHeight:89,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};for(var t in relatedPostConfig)g[t]="undefined"==relatedPostConfig[t]?g[t]:relatedPostConfig[t];var r=function(e){var t=a.createElement("script");t.type="text/javascript",t.src=e,l.appendChild(t)},A=function(e){var t,a,l=e.length;if(0===l)return!1;for(;--l;)t=Math.floor(Math.random()*(l+1)),a=e[l],e[l]=e[t],e[t]=a;return e},i="object"==typeof labelArray&&0<labelArray.length?"/-/"+A(labelArray)[0]:"";randomRelatedIndex=function(e){var t,a,l=e.feed.openSearch$totalResults.$t-g.numPosts,n=(t=1,a=0<l?l:1,Math.floor(Math.random()*(a-t+1))+t);r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+g.numPosts+"&callback=showRelatedPost")},showRelatedPost=function(e){var t,a,l,n,r=document.getElementById(g.containerId),i=A(e.feed.entry),s=g.widgetStyle,o=g.widgetTitle+'<ul class="related-post-style-'+s+'">',d=g.newTabLink?' target="_blank"':"",m='<span style="display:block;clear:both;"></span>';if(r){for(var h=0;h<g.numPosts&&h!=i.length;h++){a=i[h].title.$t,l="auto"!==g.titleLength&&g.titleLength<a.length?a.substring(0,g.titleLength)+"&hellip;":a,n="media$thumbnail"in i[h]&&!1!==g.thumbnailWidth?i[h].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+(\-c)?/,"/w"+g.thumbnailWidth+"-h"+g.thumbnailHeight+"-c"):g.noImage,"summary"in i[h]&&0<g.summaryLength&&i[h].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.summaryLength);for(var c=0,u=i[h].link.length;c<u;c++)t="alternate"==i[h].link[c].rel?i[h].link[c].href:"#";3==s&&(o+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" aria-label="related post" href="'+t+'"'+d+'><img alt="'+a+'" class="lazyload related-post-item-thumbnail" data-src="'+n+'" width="'+g.thumbnailWidth+'" height="'+g.thumbnailHeight+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+a+'" href="'+t+'"'+d+">"+l+"</a></div>"+m+"</li>")}r.innerHTML=o+="</ul>"+m,g.callBack()}},r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
};
//]]>    
</script>
<script>
//<![CDATA[
/*
 Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);
// search form
$(function(){$('a[href="#searchfs"]').on("click",function(e){e.preventDefault(),$("#searchfs").addClass("open"),$('#searchfs > form > input[type="search"]').focus()}),$("#searchfs, #searchfs button.close").on("click keyup",function(e){e.target!=this&&"close"!=e.target.className&&27!=e.keyCode||$(this).removeClass("open")})});
// nav menu
!function(s){s.fn.menumaker=function(n){var e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function(){s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var n=s(this).next("ul");n.hasClass("open")?n.slideToggle(150).removeClass("open"):(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").addClass("open").slideToggle(150)})},"multitoggle"===o.format?multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
//]]>
</script>
<script>
//<![CDATA[
jQuery(document).ready(function(){var i=jQuery(window).width();function e(){jQuery("#sidebar-sticky").stick_in_parent({parent:"#wrapper",offset_top:70})}i<768?jQuery("#sidebar-sticky").trigger("sticky_kit:detach"):e(),jQuery(window).resize(function(){(i=jQuery(window).width())<768?jQuery("#sidebar-sticky").trigger("sticky_kit:detach"):e()})});
//]]>
</script>
<script>
var elems = document.querySelectorAll(".widget-item-control");
[].forEach.call(elems, function(el) {
  el.remove();
});
</script>
<style>
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-display: block;
  font-style: normal;
  font-weight: 700;
  src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-display: block;
  font-style: normal;
  font-weight: 700;
  src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-display: block;
  font-style: normal;
  font-weight: 700;
  src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<script src='//pl16703290.highperformancecpmgate.com/3a/4c/fd/3a4cfd40376178507c11172e320bba2d.js' type='text/javascript'></script>

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3138155095-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY67c2b0JfvKnUQPSEErcIcXp4PXiQ:1727652413786';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6249819975670595609','//smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html','6249819975670595609');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6249819975670595609', 'title': 'Small Divere', 'url': 'https://smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html', 'canonicalUrl': 'https://smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html', 'homepageUrl': 'https://smalldivere.blogspot.com/', 'searchUrl': 'https://smalldivere.blogspot.com/search', 'canonicalHomepageUrl': 'https://smalldivere.blogspot.com/', 'blogspotFaviconUrl': 'https://smalldivere.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Small Divere - Atom\x22 href\x3d\x22https://smalldivere.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Small Divere - RSS\x22 href\x3d\x22https://smalldivere.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Small Divere - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6249819975670595609/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Small Divere - Atom\x22 href\x3d\x22https://smalldivere.blogspot.com/feeds/3903546064907722026/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d9db63b9119a00a5', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '3903546064907722026', 'postImageUrl': 'images/c-1.jpg', 'pageName': 'How to Make a Review Page in Html', 'pageTitle': 'Small Divere: How to Make a Review Page in Html'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to Make a Review Page in Html', 'description': '                                                Customer Reviews on Website                       Y\x27all can easily make a Reviews Section by...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uKFL8BelbDrgXkcOugJxJRBvKvD9XVzaM5rRzK-aXy-hk20SWuce-wOdbtzi1VJZp1x7nQPHo', 'url': 'https://smalldivere.blogspot.com/2022/04/how-to-make-review-page-in-html.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3903546064907722026}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3155624978-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML996', 'iklan-atas', document.getElementById('HTML996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML997', 'iklan-tengah1', document.getElementById('HTML997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'iklan-tengah2', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'iklan-bawah', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar', document.getElementById('HTML1'), {}, 'displayModeFull'));
</script>
</body>
</html>