 |
| Paytm gift card design |
Hello...guys today I'm going to show you how to create Paytm Gift Card Page by using bootstrap 4.
Actually, this task was given to me a few months ago by a company as an assignment in the interview process. They showed me the pages in the mobile version and asked me to create them in the desktop version. I will also show you the pdf given by them below. I completed the task quickly with small differences.
And also they mentioned when the user will give the input for the front-end pages that input will be going to store in any database.
So I created a server page using Advanced Java programming and provided a connection between the server page and the SQL Yog application. now I'm providing only the front-end page creation code for you. don't worry guys later in my next article, I will explain all about the back-end pages and how to create them neatly.
Note:
in this code, I've used Party Face Emoji.jpg, Paytm-design1.jpg, Paytm-design2.jpg, Paytm-Logo.jpg these are all called images in this code. I used and developed them, so put your own images and logos in the space and use them.
Question:
can you create an HTML-based project for this, the requirement is
1) It should be responsive (the current design is as per mobile, you can use your imagination for desktop layout)
2) when a user enters a valid Indian mobile number then only the "get my Paytm card" button should be activated.
3) once the user clicks on that button that number should be stored on local storage and thank you page will be shown
4) if the user lands on the page again (page refresh) and because he has already submitted his number he should only see the thank you screen
 |
| Paytm gift card pages |
also, check out:
Check the Below Code :
HTML File:
<!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="Style.css">
<script src="Script.js"></script>
<link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Alata' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Antic' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand bg-dark">
<div id="h1" class="navbar-brand">man</div>
<div id="h2" class="navbar-brand">matters</div>
<div id="h3">Congratulations</div>
<img id="emoji" src="Images/Party Face Emoji.png">
<div class="card">
<img id="Paytm-logo" class="card-img-top" src="Images/Paytm-Logo.png" alt="Paytm-logo">
<img id="Paytm-design1" class="card-img-top" src="Images/Paytm-design1.png" alt="Paytm- design1">
<div class="card-body">
<div class="card-title">Gift Card ₹200</div>
</div>
<img id="Paytm-design2" class="card-img-bottom" src="Images/Paytm-design2.png" alt="Paytm-design2">
</div>
</nav>
<div class="container">
<p id="p1">You have WON Paytm Gift Card of Rs 200 <b>placing the order on Man Matters</b> </p>
<form action="connect.jsp" method="post">
<div class="form-group">
<label for="exampleFormControlInput1"></label>
<input name="number" type="tel" class="form-control" id="phone" maxlength="10" onkeyup="isInputNumber(event)" onkeypress="isInputNumber(event)" placeholder="Enter Mobile Number">
</div>
<p id="p2"><b>Enter the same number used on Man Matters</b></p>
<input name="submit" class="btn" type="submit" id="submit" onClick="parent.open('Thankyou.html')" value="Wow! Get my Paytm Gift Card >" disabled>
</form>
</div>
</body>
</html>
CSS File:
nav {
height:250px;
}
#h1{
font-size:35px;
font-weight:bold;
font-family:Alata;
margin:500px;
margin-top:350px;
color: white;
user-select:none;
}
#h2{
font-size:35px;
font-weight:bold;
font-family:Alata;
margin-top:-98px;
margin-left:-549px;
color: white;
user-select:none;
}
#h3 {
font-family: Allerta;
font-size:35px;
font-weight:bold;
margin-top:40px;
margin-left:-255px;
/* Fallback: Set a background color. */
background-color: red;
/* Create the gradient. */
background-image: linear-gradient(45deg, #ac0aa4, #f6e607);
/* Set the background size and repeat properties. */
background-size: 100%;
background-repeat: repeat;
/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
user-select:none;
}
#emoji{
width:40px;
height:40px;
margin-left:10px;
margin-top:40px;
user-select:none;
}
div.card {
width:600px;
height:200px;
border-radius:30px;
margin-top:320px;
margin-left:-400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#Paytm-logo {
width:110px;
height:fit-content;
margin-left:250px;
margin-top:30px;
user-select:none;
}
#Paytm-design1 {
width:100px;
height:fit-content;
margin-left:497px;
margin-top:-65px;
user-select:none;
}
#Paytm-design2 {
width:100px;
height:fit-content;
margin-left:1px;
margin-top:-65px;
user-select:none;
}
div.card-title{
font-family:Courgette;
font-size:50px;
font-weight:bold;
margin-top:-15px;
margin-left:120px;
/* Fallback: Set a background color. */
background-color: red;
/* Create the gradient. */
background-image: linear-gradient(45deg, #ac0aa4, #f6e607);
/* Set the background size and repeat properties. */
background-size: 100%;
background-repeat: repeat;
/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
user-select:none;
}
#p1{
margin-top:170px;
font-family:Antic;
font-size:25px;
margin-left:105px;
user-select:none;
}
#phone {
width:350px;
height:55px;
border-color:gainsboro;
background-color:whitesmoke;
border-radius:30px;
margin-left:360px;
margin-top:-20px;
}
input[type=tel]{
font-size:24px;
padding-left:95px;
}
input::placeholder {
color:rgb(245, 241, 241);
font-size:20px;
padding-left:-100px;
user-select:none;
}
#p2{
font-family:Antic;
margin-left:380px;
user-select:none;
}
#submit {
width:350px;
height:55px;
font-family:Arial;
font-size:20px;
border-radius:30px;
background-color: rgb(10, 177, 243);
color:white;
margin-left:360px;
}
#submit:disabled {
background-color:gray;
color: white;
border-color:gainsboro;
}
#submit:enabled {
box-shadow: 4px 9px 17px lightskyblue;
}
#p3 {
color: rgb(10, 177, 243);
text-shadow:3px 3px 10px lightgreen;
font-family:Ebrima;
font-size:50px;
font-weight:540;
padding-top:200px;
padding-left:530px;
user-select:none;
}
Javascript File:
function isInputNumber(evt) {
var str = document.getElementById("phone").value;
var ch = String.fromCharCode(evt.which);
if(!(/[0-9]/.test(ch))) {
evt.preventDefault();
}
if (str.length==10) {
if(str.charAt(0)=="6" || str.charAt(0)=="7" || str.charAt(0)=="8" || str.charAt(0)=="9") {
document.getElementById("submit").disabled = false;
document.getElementById('p2').style.display = 'none';
}
}
else if(str.length>10) {
document.getElementById("submit").maxlength = "10";
}
else {
document.getElementById("submit").disabled = true;
document.getElementById('p2').style.display = 'block';
}
}
Result:
Screenshot 1
 |
| Paytm gift card result page |
 |
| Paytm gift card result page |
1 Comments
Wow really it's so nice bro
ReplyDelete