%PDF-
%PDF-
Mini Shell
Mini Shell
<!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;
}
}
</style>
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center ">
<div class="container 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="input-box">
<label>Name of Organization / Institution</label>
<input type="text" placeholder="Enter full name" required />
</div>
<div class="input-box">
<label>Name of Participant</label>
<input type="text" placeholder="Enter full name" required />
</div>
<div class="column">
<div class="input-box">
<label>Phone Number</label>
<input type="number" placeholder="Enter phone number" required />
</div>
<div class="input-box">
<label>Email </label>
<input type="text" placeholder="Enter email " required />
</div>
</div>
<div class="input-box address">
<label>Address</label>
<input type="text" placeholder="Enter street address" required />
</div>
<div class="gender-box">
<h3>Delegate Type</h3>
<div class="gender-option">
<div class="gender">
<input type="radio" id="kma-member" name="gender" value="1" checked onclick="rates('');"/>
<label for="check-male">KMA Member</label>
</div>
<div class="gender">
<input type="radio" id="non-kma-member" name="gender" value="2" onclick="rates('');" />
<label for="check-female">Non-KMA Member</label>
</div>
<div class="gender">
<input type="radio" id="check-other" name="gender" value="3" onclick="rates('');"/>
<label for="check-other">KMA Student Members</label>
</div>
<div class="gender">
<input type="radio" id="check-other" name="gender" value="4" onclick="rates('');"/>
<label for="check-other">Non-KMA Student Members</label>
</div>
</div>
</div>
<div class="input-box">
<label>No. of Participants</label>
<div class="wrapper">
<span class="minus">-</span>
<span class="num" id="span_Id">01</span>
<span class="plus">+</span>
</div>
</div>
<div class="input-box">
<label>Payment Amount</label>
<input type="text" id="amount" value="3500"/>
</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