<!DOCTYPE html>
<html style="font-size: 16px;" lang="en"><head>
<title>Comment</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="sign.css">
</head>
<body class="u-body u-overlap u-xl-mode" style="background: url(img/arcane.png);" data-lang="en">
<div class="container" style="text-align:left;margin-top: 10px;margin-bottom:30px; margin-left: auto;
margin-right: auto;background: #fff;" >
<div class="title">Registration</div>
<form action="#" enctype="multipart/form-data" method="POST" >
<div class="user-info">
<div class="input-box">
<span class="text">First name</span>
<input type="text" name="firstname" placeholder="Enter Your firstname">
</div>
<div class="input-box">
<span class="text">Last name</span>
<input type="text" name="lastname" placeholder="Enter Your lastname">
</div>
<div class="input-box">
<span class="text">PhoneNumber</span>
<input type="text" name="phone" placeholder="Enter Your phonenumber">
</div>
<div class="input-box">
<span class="text">Country</span>
<input type="text" name="city" placeholder="Enter Your city">
</div>
<div class="input-box">
<span class="text">Email</span>
<input type="text" name="country" placeholder="Enter Your country">
</div>
<div class="input-box">
<span class="text">Password</span>
<input type="text" name="emergencyperson" placeholder="Enter Your Respondent's name">
</div>
<div class="input-box">
<span class="text">Confirm Password</span>
<input type="text" name="grade" id="ge" placeholder="Enter Your grade">
</div>
<div class="input-box">
<span class="text">Username</span>
<input type="text" name="wereda" placeholder="Enter Your wereda">
</div>
<div class="input-box">
<span class="text">Age</span>
<input type="date" name="age" placeholder="Enter Your age">
</div>
<div class="input-box">
<span class="text">Image-Upload</span>
<input type="file" name="image">
</div>
</div>
<div class="gender-info">
<input type="radio" name="gender" id="dot-1" value="male">
<input type="radio" name="gender" id="dot-2" value="female">
<input type="radio" name="gender" id="dot-3" value="Not to say">
<span class="gender-info">Gender</span>
<div class="cat">
<label for="dot-1">
<span class="dot one"></span>
<span class="gender">Male</span>
</label>
<label for="dot-2">
<span class="dot two"></span>
<span class="gender">female</span>
</label>
<label for="dot-3">
<span class="dot three"></span>
<span class="gender">Prefer not to say</span>
</label>
</div>
</div>
<div class="payment">
<!-- div containing the popup -->
<div class="content" onsubmit="togglePopup()">
<div class="close-btn" onclick="togglePopup()">
×
</div>
<h3 style="color: black;" id="te"></h3>
<div class="input-box">
<input type="text" name="age" placeholder="Enter secret number of Berhan bank" style="margin-top: 40px;">
</div>
<div class="input-box">
<input type="text" name="image" placeholder="Enter Your account number(Berhan Bank) " >
</div>
<div class="input-box">
<input type="text" name="image" placeholder="Enter Your age" value="1234567">
</div>
<div class="input-box">
<input type="text" name="image" placeholder="Enter Your age" value="Payment">
</div>
<div class="input-box">
<input type="text" name="image" value="1100 birr" >
</div>
<div class="button">
<input type="submit" name="k" value="Register" style="background: rgb(5, 44, 92);height: 70px;text-align: center;font-size: 25px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
</div>
<center><img src="img/logo.png" style="height: 70px;"></center>
</div>
<script type="text/javascript">
// Function to show and hide the popup
function togglePopup() {
$(".content").toggle();
}
</script>
</div>
</form>
<div class="button">
<button type="submit" onclick="togglePopup()" style="background: #7399;border: 1px solid transparent;">Payment</button>
</div>
</div>
<style type="text/css">
.content {
position: absolute;
top: 50%;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
transition: 2s all ease-in;
width: 100%;
height: 100%;
text-align: center;
background-color: #0009;
box-shadow: 3px 10px 10px 0px rgba(0,0,0,0.9);
box-sizing: border-box;
border-top: 2px solid #0009;
padding: 10px;
z-index: 100;
display: none;
/*to hide popup initially*/
transition: 3s all ease;
/* cubic-bezier(0.175, 0.885, 0.32, 1.275) */
animation: 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) shadow-mercury ;
}
.payment .input-box input{
border: 1px solid transparent;
background: #fff9.4;
margin-top: 10px;
height: 50px;
width: 50%;
border-radius: 5px;
color: black;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
border-bottom: 2px solid #fff;
}
.payment .input-box input::placeholder{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
}
.close-btn {
position: absolute;
right: 20px;
top: 15px;
background-color: #ae4732fe;
font-size: 15px;
color: white;
border-radius: 50%;
padding: 7px 14px;
cursor:pointer;
font-style: arial;
font-weight: bold;
}
.image{
width: 100%;
}
.image img{
width: 100%;
}
@keyframes shadow-mercury {
0% {
transform: scale(1.2);
opacity: 0.2;
/* TOP */
}
25% {
opacity: 0.4;
/* LEFT */
}
50% {
opacity: 0.6;
/* BOTTOM */
}
50.01% {
opacity: 0.7;
/* BOTTOM */
}
75% {
opacity: 0.8;
/* RIGHT */
}
100% {
opacity: 1;
/* TOP */
}
}
</style>
</body>
</html>
Kirubel_2 15 Newbie Poster
Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member
I'm not exactly understanding your question. I see you have an HTML form here in this HTML code. What is not working about it? You need to specify the action="#" to be a URL that will process the form.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.