Design comparison
SolutionDesign
Community feedback
- @code-nickPosted over 1 year ago<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Frontend Mentor | Interactive rating component</title> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div class="box-container"> <div class="img-container"> <img src="./images/icon-star.svg" alt="" class="star-icon"> </div> <h1> How did we do?</h1> <p> Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p> <div class="rating" id="rating-again"> <button class="rating-btn" id="1">1</button> <button class="rating-btn" id="2">2</button> <button class="rating-btn" id="3">3</button> <button class="rating-btn" id="4">4</button> <button class="rating-btn" id="5">5</button> </div> <button class="Submit-btn submitBtn" id="submit-btn">SUBMIT</button> </div> <div class="thanks-container hidden"> <div class="thanks-you-img"> <img src="./images/illustration-thank-you.svg" alt="img"> </div> <div class="thanks-btn"> <p class="button-selected">You Selected <span id="rate"></span> out of 5</p> </div> <div class="headding-thanks"> <h1>Thanks You !</h1> </div> <div class="paragraph-container"> <p class="paragraph-thanks">we appreciate you taking the time to give a rating. if you ever need more support, don't hesitate to get in touch</p> </div>
</main> </body> </html></div>0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord