<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/navbar-foot.css" />
<link rel="stylesheet" href="css/font_style.css" />
<link rel="stylesheet" href="css/feedback.css" />
<title>Sunshine i-land Resort | Feedback</title>
<link rel="icon" href="assets/sunshine_blue_icon.png" />
</head>
<body>
<div class="main-container">
<section id="nav">
<div class="topnav">
<div class="logo-nav">
<img src="assets/sunshine_white.png" alt="logo" />
</div>
<div id="burger-menu">
<span></span>
</div>
<div id="menu">
<ul>
<li>
<a href="index.html" class="navbar-item">Home</a>
</li>
<li>
<a href="about_us.html" class="navbar-item">About Us</a>
</li>
<li>
<a href="rooms.html" class="navbar-item">Rooms</a>
</li>
<li>
<a href="facilities.html" class="navbar-item">Facilities</a>
</li>
</ul>
</div>
</div>
</section>
<section id="feedback">
<div class="mainpic-feedback">
<img src="assets/images/feedback.png" alt="feedback" />
<div class="overlay"></div>
</div>
<div class="container">
<div class="container-feedback">
<h1 class="headings">Create Feedback</h1>
<form id="feedbackForm" autocomplete="on">
<div>
<label for="email">Email: </label>
<input type="email" name="email" id="email" required />
</div>
<div>
<label for="name_user">Name: </label>
<input type="text" name="name_user" id="name_user" required />
</div>
<div>
<label for="comments">Feedback: </label>
<textarea name="comments" id="comments" required></textarea>
</div>
<div class="rating-submit">
<label
>Kindly share your rating with us, your feedback is highly
valued!</label
>
<div class="rating-star" id="star-container">
<div class="star" data-value="1">★</div>
<div class="star" data-value="2">★</div>
<div class="star" data-value="3">★</div>
<div class="star" data-value="4">★</div>
<div class="star" data-value="5">★</div>
</div>
<button type="submit">Submit</button>
</div>
</form>
</div>
<div id="successPopup" class="popup">
<div class="popup-content">
<img src="assets/icons/check-mark.png" alt="Checkmark" />
<p>Feedback submitted successfully!</p>
</div>
</div>
</div>
</section>
<section id="customers-say">
<div class="container">
<div class="headings">
<h1>Our Customers Say</h1>
</div>
<div class="subheadings">
<p>
Here are some customers who are satisfied with the quality of our
service, maybe you will be one of them
</p>
</div>
<div class="card">
<div class="card-grid" id="customers"></div>
</div>
</div>
</section>
<section id="footer">
<div class="bottom-footer">
<div class="logo-social">
<div class="logo-container">
<img src="assets/sunshine_white.png" alt="sunshine i-land logo" />
<p>Enjoy holiday with us</p>
</div>
<div class="social-container">
<div class="contact-footer">
<h4>Contact Us</h4>
<div class="contact-img">
<a
class="contact"
href="https://maps.app.goo.gl/Ro9od683DTYt97N17"
>
<img
class="contact-loc"
src="assets/icons/map-pin.svg"
alt="Location"
/>
</a>
<a class="contact" href="https://wa.me/085156467819">
<img
class="contact-phon"
src="assets/icons/phone.svg"
alt="Phone"
/>
</a>
<a
class="contact"
href="mailto:sunshineilandresort@gmail.com"
>
<img
class="contact-mail"
src="assets/icons/mail.svg"
alt="Mail"
/>
</a>
</div>
</div>
<div class="follow-footer">
<h4>Follow Us</h4>
<div class="follow-img">
<a
class="follow"
href="https://www.facebook.com/profile.php?id=61554082070886&mibextid=ZbWKwL"
>
<img src="assets/icons/facebook.svg" alt="Facebook" />
</a>
<a
class="follow"
href="https://instagram.com/sunshine_iland_resort?igshid=OGQ5ZDc2ODk2ZA=="
>
<img src="assets/icons/instagram.svg" alt="Instagram" />
</a>
</div>
</div>
</div>
</div>
<h5>Copyright @2023 SESurabayaGrup16</h5>
</div>
</section>
</div>
<script src="javascript/page_style.js"></script>
<script type="module" src="javascript/feedback.js"></script>
</body>
</html>