%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/ugotscom/public_html/backwater-old2/
Upload File :
Create Path :
Current File : /home/ugotscom/public_html/backwater-old2/feedback copy.html

<!DOCTYPE html>
<!---Coding By CodingLab | www.codinglabweb.com--->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Registration Form in HTML CSS</title>
    <title>40th KMA National Manangement Convention</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
  
    <!-- Favicons -->
    <link href="assets/img/favicon.png" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  
    
    <!-- Vendor CSS Files -->
    <link href="assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Template Main CSS File -->
    <link href="assets/css/style.css" rel="stylesheet">
    <!---Custom CSS File--->
<style>
    /* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  position: relative;
  max-width: 700px;
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.container header {
  font-size: 1.5rem;
  color: #333;
  font-weight: 500;
  text-align: center;
}
.container .form {
  margin-top: 30px;
}
.form .input-box {
  width: 100%;
  margin-top: 20px;
}
.input-box label {
  color: #333;
}
.form :where(.input-box input, .select-box) {
  position: relative;
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 15px;
}
.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.form .column {
  display: flex;
  column-gap: 15px;
}
.form .gender-box {
  margin-top: 20px;
}
.gender-box h3 {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
}
.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}
.form .gender {
  column-gap: 5px;
}
.gender input {
  accent-color: rgb(130, 106, 251);
}
.form :where(.gender input, .gender label) {
  cursor: pointer;
}
.gender label {
  color: #707070;
}
.address :where(input, .select-box) {
  margin-top: 15px;
}
.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #707070;
  font-size: 1rem;
}
.form button {
  height: 55px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgb(130, 106, 251);
}
.form button:hover {
  background: rgb(88, 56, 250);
}
.wrapper{
  height: 39px;
width: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  border-radius: 12px;
  border: 1px solid #cecece;
  margin-top: 12px;
}
.wrapper span{
  width: 100%;
  text-align: center;
  font-size: 27px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.wrapper span.num{
  font-size: 15px;
  border-right: 2px solid rgba(0,0,0,0.2);
  border-left: 2px solid rgba(0,0,0,0.2);
  pointer-events: none;
}
/*Responsive*/
@media screen and (max-width: 500px) {
  .form .column {
    flex-wrap: wrap;
  }
  .form :where(.gender-option, .gender) {
    row-gap: 15px;
  }
}

.rate-area {
  float: left;
  border-style: none;
}
.rate-area:not(:checked) > input {
  position: absolute;
  top: -9999px;
  clip: rect(0,0,0,0);
}
.rate-area:not(:checked) > label {
  float: right;
  width: 1em;
  padding: 0 .1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 400%;
  line-height: 1.2;
  color: lightgrey;
  text-shadow: 1px 1px #bbb;
}
.rate-area:not(:checked) > label:before { content: '★ '; }
.rate-area > input:checked ~ label {
  color: gold;
  text-shadow: 1px 1px #c60;
  font-size: 450% !important;
}
.rate-area:not(:checked) > label:hover, .rate-area:not(:checked) > label:hover ~ label { color: gold; }
.rate-area > input:checked + label:hover, .rate-area > input:checked + label:hover ~ label, .rate-area > input:checked ~ label:hover, .rate-area > input:checked ~ label:hover ~ label, .rate-area > label:hover ~ input:checked ~ label {
  color: gold;
  text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
  position: relative;
  top: 2px;
  left: 2px;
}

</style>
  </head>
  <body>
      <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center ">
    <div class="container-fluid d-flex align-items-center justify-content-between">

      <div class="logo">
     
        <!-- Uncomment below if you prefer to use an image logo -->
   <a href="index.html"><img src="assets/img/logo.jpg " alt="" class="img-fluid"></a>
      </div>

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto" href="#team">Speakers</a></li>
                  <li><a class="nav-link scrollto" href="#gallery">Gallery</a></li>
        
          <li><a class="nav-link scrollto" href="#pricing">Pricing</a></li>

          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->
    <section class="container">
      <header>KMA Annual Management Convention 2023 Registration Form</header>
      <form action="#" class="form">
        <div class="bx">
        <h3>Speaker Rating</h3>
        <ul class="rate-area">
          <input type="radio" id="5-star" name="rating1" value="5" /><label for="5-star" title="Amazing">5 stars</label>
          <input type="radio" id="4-star" name="rating1" value="4" /><label for="4-star" title="Good">4 stars</label>
          <input type="radio" id="3-star" name="rating1" value="3" /><label for="3-star" title="Average">3 stars</label>
          <input type="radio" id="2-star" name="rating1" value="2" /><label for="2-star" title="Not Good">2 stars</label>
          <input type="radio" id="1-star" name="rating1" value="1" /><label for="1-star" title="Bad">1 star</label>
        </ul>


      </div>
  
      <div class="bx">
        <h3>Content Rating</h3>
        <ul class="rate-area">
          <input type="radio" id="5q-star" name="rating" value="5" /><label for="5q-star" title="Amazing">5 stars</label>
          <input type="radio" id="4q-star" name="rating" value="4" /><label for="4q-star" title="Good">4 stars</label>
          <input type="radio" id="3q-star" name="rating" value="3" /><label for="3q-star" title="Average">3 stars</label>
          <input type="radio" id="2q-star" name="rating" value="2" /><label for="2q-star" title="Not Good">2 stars</label>
          <input type="radio" id="1q-star" name="rating" value="1" /><label for="1q-star" title="Bad">1 star</label>
        </ul>


      </div>
  

      
      <div class="bx">
        <h3>Feedback</h3>
        <textarea rows="5" cols="33"></textarea>


      </div>
  
 
       
        <button>Submit</button>
      </form>
    </section>
    <script>
 var value;
  function rates(){
  value = document.querySelector('input[name="gender"]:checked').value;
   if(value==1){
    document.getElementById("amount").value = "3500";
   }
   else if(value==2){
    document.getElementById("amount").value = "4500";
   }
   else if(value==3){
    document.getElementById("amount").value = "1500";
   }
   else{
    document.getElementById("amount").value = "2500";
   }
  }
      const plus = document.querySelector(".plus"),
       minus = document.querySelector(".minus"),
       num = document.querySelector(".num");
       let a = 1;
       plus.addEventListener("click", ()=>{
         a++;
         a = (a < 10) ? "0" + a : a;
         num.innerText = a;

         if ((value==2) && (a>10)) {
        document.getElementById("amount").value = "3000";
}
else if ((value==2) && (a==10)) {
        document.getElementById("amount").value = "3500";
}



       });
   
       minus.addEventListener("click", ()=>{
         if(a > 1){
           a--;
           a = (a < 10) ? "0" + a : a;
           num.innerText = a;
         }
         if ((value==2) && (a<10)) {
        document.getElementById("amount").value = "4500";
}
       });

     </script>
  </body>

</html>

Zerion Mini Shell 1.0