How to Make a Review Page in Html
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&media=images/c-1.jpg&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/1839367302-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_tDNzg3KNiKTFoKjnblBHC6b6HsYlyvD89vviYlhweO_k6Uu52gHayCIaPUPFX4XV7A-C0rO-Wmg7wRLZBH6rkGmVAxtpYW-5qmIQjGgXZ3s1l50k7i14fsiXuNQxwl3f3VNRLBZxt2Gmq7pCixBMM01nG_JZW3wsNcdAVyj59kSZiaYKi1se_p-wy5b6c=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/10/setup-cannot-find-end-user-license.html' target='_blank'> <img alt='' border='0' src='https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tcaU5KToFb9CgejpVYelKIhyK8aCg01zgEtGMAoBW0caC5KjYc9CrT92l_gffAy7pEvZUuMp_QyZVgMaBmp4F_XmxbEsL7zdgZsV62awr7=w72-h72-p-k-no-nu'/> </a> </div> <div class='item-title'><a href='https://smalldivere.blogspot.com/2022/10/setup-cannot-find-end-user-license.html'>Setup Cannot Find the End user License Agreement Eula Setup Will Not Continue</a></div> <div class='item-snippet'> XP fresh install EULA error XP fresh install EULA error fenris ...</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> </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&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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3P0W4El3hL3lbee5tmM_6QpBuEOjci4MqCPAAN5HMtpuE06X1sRXiNXB7A8sVuIc42ktTk9HFaEuuGOs_6et-2tDWDXvHZmwGZsFkWqDoo44AU2Hfv0RmA82MZfzZn2NS14mV8pFnVw/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();'>×</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)+"…":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/1799749036-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY6-Ep56ddo08TxzgChkDpCHWcl8YQ:1744660612515';_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/b06af935920febda', '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': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', '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_t89cwNud2taajiveT8Hh4g8ZNMbKWEQPAA_et_AHFn3qj4bQLWCuAEis3CdTQ9rzDvdWiXl5c', '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/595142192-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/3681588378-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>