<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <title>Frontend Mentor | Social proof section</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <style> .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } </style> </head> <body> <main> <div class="top-area"> <header class="page-header"> <h1 class="page__heading"> 10,000+ of our users love our products. </h1> <div class="page__body"> <p> We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services. </p> </div> </header> <section class="ratings"> <div class="rating-box"> <div class="rating-box__ratings" aria-hidden="true"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> </div> <h2 class="rating-box__rated-by">Rated 5 Stars in Reviews</h2> </div> <div class="rating-box"> <div class="rating-box__ratings" aria-hidden="true"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> </div> <h2 class="rating-box__rated-by">Rated 5 Stars in Report Guru</h2> </div> <div class="rating-box"> <div class="rating-box__ratings" aria-hidden="true"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> <img src="images/icon-star.svg" alt="Star"> </div> <h2 class="rating-box__rated-by">Rated 5 Stars in BestTech</h2> </div> </section> </div> <div class="bottom-area"> <section class="reviews"> <div class="card-review"> <div class="reviewer"> <img class="reviewer__image" src="images/image-colton.jpg" alt="Picture of Colton" aria-hidden="true"> <div class="reviewer__block"> <h2 class="reviewer__name">Colton Smith</h2> <div class="reviewer__status">Verified Buyer</div> </div> </div> <blockquote> <p class="reviewer__quote"> We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent! </p> </blockquote> </div> <div class="card-review"> <div class="reviewer"> <img class="reviewer__image" src="images/image-irene.jpg" alt="Picture of Irene" aria-hidden="true"> <div class="reviewer__block"> <h2 class="reviewer__name">Irene Roberts</h2> <div class="reviewer__status">Verified Buyer</div> </div> </div> <blockquote> <p class="reviewer__quote"> Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery. </p> </blockquote> </div> <div class="card-review"> <div class="reviewer"> <img class="reviewer__image" src="images/image-anne.jpg" alt="Picture of Anne" aria-hidden="true"> <div class="reviewer__block"> <h2 class="reviewer__name">Anne Wallace </h2> <div class="reviewer__status">Verified Buyer</div> </div> </div> <blockquote> <p class="reviewer__quote"> Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone! </p> </blockquote> </div> </section> </div> </main> <!-- <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </div> --> </body> </html>