Create Wonderful Payment Form By Codes
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAY</title>
<link href="style.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<h2>
Online Payment Form</h2>
<form method="POST">
<h4>
Account Details</h4>
<div class="input-group">
<div class="input-box">
<input type="text" placeholder="Full Name" required class="name">
<i class="fa fa-user icon"></i>
</div>
<div class="input-box">
<input type="text" placeholder="Nick Name" required class="name">
<i class="fa fa-user icon"></i>
</div>
</div>
<div class="input-group">
<div class="input-box">
<input type="email" placeholder="Email Adress" required class="name">
<i class="fa fa-envelope icon"></i>
</div>
</div>
<div class="input-group">
<div class="input-box">
<h4>
Date of Birth</h4>
<input type="text" placeholder="DD" class="dob">
<input type="text" placeholder="MM" class="dob">
<input type="text" placeholder="YYYY" class="dob">
</div>
<div class="input-box">
<h4>
Gender</h4>
<input type="radio" id="b1" name="gendar" checked class="radio">
<label for="b1">Male</label>
<input type="radio" id="b2" name="gendar" class="radio">
<label for="b2">Female</label>
</div>
</div>
<div class="input-group">
<div class="input-box">
<h4>
Payment Details</h4>
<input type="radio" name="pay" id="bc1" checked class="radio">
<label for="bc1"><span><i class="fa fa-cc-visa"></i> Credit Card</span></label>
<input type="radio" name="pay" id="bc2" class="radio">
<label for="bc2"><span><i class="fa fa-cc-mastercard"></i> Debit Card</span></label>
<input type="radio" name="pay" id="bc3" class="radio">
<label for="bc3"><span><i class="fa fa-sbi"></i> Net Banking</span></label>
<input type="radio" name="pay" id="bc4" class="radio">
<label for="bc4"><span><i class="fa fa-google wallet"></i> UPI</span></label>
</div>
</div>
<div class="input-group">
<div class="input-box">
<input type="tel" placeholder="Card Number" required class="name">
<i class="fa fa-credit-card icon"></i>
</div>
</div>
<div class="input-group">
<div class="input-box">
<input type="tel" placeholder="Name on card" required class="name">
<i class="fa fa-id-card icon"></i>
</div>
</div>
<div class="input-group">
<div class="input-box">
<input type="tel" placeholder="Card CVV" required class="name">
<i class="fa fa-user icon"></i>
</div>
<div class="input-box">
<select>
<option>01 </option>
<option>02 </option>
<option>03 </option>
<option>04 </option>
<option>05 </option>
<option>06 </option>
<option>07 </option>
<option>08 </option>
<option>09 </option>
<option>10 </option>
<option>11 </option>
<option>12 </option>
</select>
<select>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
<option>2028</option>
<option>2029</option>
<option>2030</option>
</select>
</div>
</div>
<div class="input-group">
<div class="input-box">
<button type="submit">PAY NOW</button>
</div>
</div>
</form>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background : url(https://inspirationfeed.com/wp-content/uploads/2019/01/dominik-schroder-14534-unsplash-800x533.jpg);
font-family: monotype corsiva, Sitka Display, Sitka Display;
}
.wrapper{
background-color: transparent;
width: 500px;
padding: 20px;
margin: 20px auto 0;
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
.wrapper h2{
background-color: #fcfcfc;
color: #DA70D6;
font-size: 25px;
padding: 10px;
margin-bottom: 10px;
text-align: center;
border: 1px #333;
}
h4{
padding-bottom: 5px;
color: orange;
}
.input-group{
margin-bottom: 8px;
width: 100%;
position: relative;
display: flex;
flex-direction: row;
padding: 5px 0;
}
.input-box{
width: 100%;
margin-right: 12px;
position: relative;
}
.input-box:last-child{
margin-right: 0;
}
.name{
padding: 14px 10px 14px 50px;
width: 100%;
background-color: #orange;
border: 1px solid #00000033;
outline: none;
letter-spacing: 1px;
transition: 0.3s;
border-radius: 3px;
color: #333;
}
.name:focus, .dob:focus{
-webkit-box-shadow:0 0 2px 1px #FFA500;
-moz-box-shadow:0 0 2px 1px #FFA500;
box-shadow: 0 0 2px 1px #FFA500;
border: 1px solid #FFA500;
}
.input-box .icon{
width: 48px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
color: #333;
background-color: #f1f1f1;
border-radius: 2px 0 0 2px;
transition: 0.3s;
font-size: 20px;
pointer-events: none;
border: 1px solid #00000033;
border-right: none;
}
.name:focus + .icon{
background-color: #FFA500;
color: #fff;
border-right: 1px solid #FFA500;
border: none;
transition: 1s;
}
.dob{
width: 30%;
padding: 14px;
text-align: center;
background-color: #fcfcfc;
transition: 0.3s;
outline: none;
border: 1px solid #c0bfbf;
border-radius: 3px;
}
.radio{
display: none;
}
.input-box label{
width: 50%;
padding: 13px;
background-color: #fcfcfc;
display: inline-block;
float: left;
text-align: center;
border: 1px solid #c0bfbf;
}
.input-box label:first-of-type{
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-right: none;
}
.input-box label:last-of-type{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.radio:checked + label{
background-color: #FFA500;
color: #fff;
transition: 0.5s;
}
.input-box select{
display: inline-block;
width: 50%;
padding: 12px;
background-color: #fcfcfc;
float: left;
text-align: center;
font-size: 16px;
outline: none;
border: 1px solid #c0bfbf;
cursor: pointer;
transition: all 0.2s ease;
}
.input-box select:focus{
background-color: #FFA500;
color: #fff;
text-align: center;
}
button{
width: 100%;
background: transparent;
border: none;
background: #DA70D6;
color: #fff;
padding: 15px;
border-radius: 4px;
font-size: 16px;
transition: all 0.35s ease;
}
button:hover{
cursor: pointer;
background: #FF7F50;
}
Form Output
Posts
30 Comments
Awesome work
ReplyDeletePerfect 👌 👌 👌 👌
ReplyDeletePerfect 👌 👌 👌 👌
ReplyDeletePerfect 👌 👌 👌 👌
ReplyDeletePerfect 👌 👌 👌 👌
ReplyDeletePerfect 👌 👌 👌 👌
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteSuperb
ReplyDeleteSuperb
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteBrilliant
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeletewonderful
ReplyDeleteAwesome
ReplyDeleteExcellent
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteKallu fantastic
ReplyDeleteFabulous
ReplyDelete