Amazing Reviews
How do I make an amazing reviews?
What is a amazing reviews? How do you make a amazing reviews? This script and codes were developed by Tommy Hodgins on 22 July 2022, Friday.
Amazing Reviews - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Amazing Reviews</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<script> document.documentElement.setAttribute('data-theme','')
</script>
<style>
html {background: white !important;}
</style> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900'>
<link rel='stylesheet prefetch' href='http://staticresource.s3.amazonaws.com/template/css/basic.css'>
<link rel='stylesheet prefetch' href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Amazing Reviews</h1>
<h2>Online Retail Testimonial Style</h2>
<div class=amazing-reviews> <blockquote> <header> <span data-rating=5> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> </span> <strong>Ullamco laboris!</strong> <span>, June 2</span> <span>By <em>Wolfman</em></span> <span>Verified Purchase</span> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </blockquote> <blockquote> <header> <span data-rating=4> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> </span> <strong>Voluptate velit cillum essunt</strong> <span>, May 17</span> <span>By <em>Theo K</em></span> <span>Verified Purchase</span> </header> <p>Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p> </blockquote> <blockquote> <header> <span data-rating=0> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> </span> <strong>Occaecat? No deserunt!!</strong> <span>, May 8</span> <span>By <em>Jeff Thomas</em> (Bent River, AB)</span> <span>Verified Purchase</span> </header> <p>Sint occaecat cupidatat NON proident, sunt in culpa qui officia deserunt mollit!</p> </blockquote> <blockquote> <header> <span data-rating=5> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> </span> <strong>Ullamco ut aliquip</strong> <span>, April 28</span> <span>By <em>Linda</em></span> <span></span> </header> <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </blockquote> <blockquote> <header> <span data-rating=3> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> </span> <strong>Reprehenderit in eu fugiat nulla!</strong> <span>, April 3</span> <span>By <em>Michael "Mikko"</em> (California, USA)</span> <span>Verified Purchase</span> </header> </blockquote> <blockquote> <header> <span data-rating=4> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> </span> <strong>Laboris ni si laborum.</strong> <span>, February 16</span> <span>By <em>Paul</em> (Perth, Ontario)</span> <span>Verified Purchase</span> </header> <p>Pretosund us velit esse cillum dolore eu fugiat nulla pariatur noparatur sint coleomusa.</p> </blockquote> <blockquote> <header> <span data-rating=5> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> <i class=ion-star></i> </span> <strong>PROIDENT! Sunt in culpa qui officia :)</strong> <span>, January 30</span> <span>By <em>FastestCowboy</em></span> <span>Verified Purchase</span> </header> </blockquote>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS-polyfills.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Amazing Reviews - Script Codes CSS Codes
.amazing-reviews { font-size: 12pt;
}
.amazing-reviews blockquote { font-family: Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; padding: 0; background: white; margin: 30px 0 0 0; border: 1px solid #ddd; border-radius: 3px; padding: 15px 15px 10px 15px; position: relative; box-shadow: rgba(0,0,0,.025) 0 3px 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: default;
}
.amazing-reviews blockquote:before { content: ''; display: block; border: 20px solid transparent; border-top-color: #ccc; position: absolute; top: 100%; left: 20px; z-index: 250; background: transparent; height: 0; opacity: 1;
}
.amazing-reviews blockquote:nth-of-type(even):before { left: auto; right: 20px;
}
.amazing-reviews blockquote:after { content: ''; display: block; border: 19px solid transparent; border-top-color: white; position: absolute; top: 100%; left: 21px; z-index: 500;
}
.amazing-reviews blockquote:nth-of-type(even):after { left: auto; right: 21px;
}
.amazing-reviews blockquote:last-of-type { margin-bottom: 45px;
}
.amazing-reviews blockquote header span i { color: white; text-shadow: #aaa 1px 0 0, #aaa 0 1px 0, #aaa -1px 0 0, #aaa 0 -1px 0;
}
.amazing-reviews blockquote header span[data-rating="1"] i:nth-child(-n+1),
.amazing-reviews blockquote header span[data-rating="2"] i:nth-child(-n+2),
.amazing-reviews blockquote header span[data-rating="3"] i:nth-child(-n+3),
.amazing-reviews blockquote header span[data-rating="4"] i:nth-child(-n+4),
.amazing-reviews blockquote header span[data-rating="5"] i:nth-child(-n+5) { color: #f0c96a; text-shadow: #c08036 1px 0 0, #c08036 0 1px 0, #c08036 -1px 0 0, #c08036 0 -1px 0;
}
.amazing-reviews blockquote strong { color: black; display: inline;
}
.amazing-reviews strong + span { margin-left: -3px;
}
.amazing-reviews blockquote strong + span + span { display: block; margin: 5px 0;
}
.amazing-reviews blockquote span em { font-style: normal; font-weight: bold; color: #155096; text-decoration: underline;
}
.amazing-reviews blockquote span:last-of-type { color: #e47d21; font-size: 10pt; font-weight: bold; display: block;
}
.amazing-reviews blockquote p { font-size: 12pt; font-style: normal; margin: 5px 0 0 0; color: black;
}
.amazing-reviews h2:last-of-type { background: #eee; text-align: center; font-weight: 400; padding: 15px; margin: 0; border: 1px solid #ccc; position: relative;
}
.amazing-reviews h2 q,
.amazing-reviews h2 strong { font-weight: 600;
}
@media (min-width: 400px) { .amazing-reviews h2:last-of-type { font-size: 24pt; }
}
@media (min-width: 700px) { .amazing-reviews blockquote { width: 75%; margin: 30px 15px 0 15px; } .amazing-reviews blockquote:nth-of-type(even) { margin-left: calc(25% - 15px); } .amazing-reviews h2:last-of-type { font-size: 28pt; }
}
@media (min-width: 700px) { .amazing-reviews .quote-container { width: 100%; padding: 0 75px; }
}
Amazing Reviews - Script Codes JS Codes
1
Developer | Tommy Hodgins |
Username | tomhodgins |
Uploaded | July 22, 2022 |
Rating | 4 |
Size | 3,475 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Alternating Blockquotes | 2,845 Kb |
Self-Responsive Social Buttons | 2,016 Kb |
10 CSS Text Shadows | 2,623 Kb |
My CSS Wishlist | 4,039 Kb |
CSS Parent Selector | 2,143 Kb |
Element Query Demo with EQCSS | 4,286 Kb |
Basic HTML Slideshow | 3,386 Kb |
A Parent Selector for CSS | 2,369 Kb |
Responsive Pagination | 2,446 Kb |
Responsive Scrolling Sticky Header | 4,143 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Click handler test | Snapson | 2,329 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!