Credit Card Payment Modal

Developer
Ty Stelmach
Size
4,461 Kb
Views
10,120
  1. Credit Card Payment Modal Previews
  2. Credit Card Payment Modal HTML Codes
  3. Credit Card Payment Modal CSS Codes

How do I make an credit card payment modal?

A codepen of a dribbble, inspired by Paul Flavius Nechita's Dribbble "Day 004 Credit Card Payment" as a part of his 1 a day series. What is a credit card payment modal? How do you make a credit card payment modal? This script and codes were developed by Ty Stelmach on 09 December 2022, Friday.

Credit Card Payment Modal Previews
IQ Test

Credit Card Payment Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Credit Card Payment Modal</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="info"> <h1>Payment Modal</h1> <span> Made with <i class="fa fa-beer"></i> by <a href="http://www.idesignradthings.com">Ty Stelmach</a> <div class="spoilers"> Based off of the design by <a href="https://dribbble.com/NpaulFlavius">Paul Flavius Nechita</a> and his <a href="https://dribbble.com/shots/2131063-Day-004-Credit-Card-Payment">dribbble.</a> </div> </span>
</div>
<div class="card"> <div class="top"> <div class="payment">Payment Details</div> <div class="visa"> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="1000.000000pt" height="380.000000pt" viewBox="0 0 1000.000000 380.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,380.000000) scale(0.100000,-0.100000)" fill="#FFF" stroke="none">
<path d="M5960 3289 c-241 -23 -478 -105 -645 -224 -83 -58 -195 -179 -243 -261 -102 -172 -135 -390 -86 -564 40 -141 155 -290 310 -402 44 -31 163 -101 266 -157 220 -117 262 -145 316 -206 89 -101 70 -232 -46 -315 -187 -136 -611 -111 -969 55 l-92 43 -11 -67 c-6 -36 -28 -171 -49 -299 l-38 -233 28 -14 c47 -25 230 -74 355 -95 834 -143 1482 153 1589 725 35 184 8 361 -77 502 -75 127 -252 270 -463 375 -241 121 -362 204 -397 271 -25 49 -27 112 -4 155 23 44 92 99 153 122 178 67 498 41 735 -60 39 -17 73 -29 75 -26 4 4 93 539 93 562 0 16 -157 67 -275 88 -187 35 -347 42 -525 25z"/>
<path d="M2778 2778 c-97 -260 -249 -672 -339 -915 -90 -244 -166 -443 -169 -443 -3 0 -21 78 -39 173 -41 207 -62 271 -135 414 -171 334 -445 630 -783 847 -40 25 -73 41 -73 36 0 -5 132 -510 294 -1122 162 -612 300 -1134 306 -1161 l12 -47 371 2 371 3 463 1135 c254 624 500 1228 547 1343 l85 207 -368 0 -368 0 -175 -472z"/>
<path d="M3761 1928 c-117 -728 -216 -1335 -218 -1350 l-5 -28 346 0 346 0 5 23 c3 12 100 609 215 1327 116 718 212 1315 215 1328 l5 22 -348 0 -348 0 -213 -1322z"/>
<path d="M7892 3235 c-71 -16 -147 -59 -179 -103 -11 -15 -32 -50 -46 -77 -24 -50 -1047 -2490 -1047 -2500 0 -3 163 -5 363 -5 l362 0 74 205 73 205 448 0 448 0 10 -47 c6 -27 25 -119 43 -205 l33 -158 321 0 322 0 -44 213 c-24 116 -151 723 -281 1347 l-238 1135 -299 2 c-224 1 -316 -2 -363 -12z m278 -1215 c55 -266 100 -490 100 -497 0 -10 -59 -13 -289 -13 l-289 0 70 188 c38 103 121 331 185 506 65 175 118 315 120 310 1 -5 48 -227 103 -494z"/>
<path d="M9285 856 c-111 -49 -121 -200 -18 -267 39 -26 118 -25 161 1 43 27 76 99 68 149 -16 97 -122 156 -211 117z m116 -21 c87 -45 92 -179 9 -229 -78 -45 -177 5 -187 95 -12 106 87 180 178 134z"/>
</g>
</svg> </div> </div> <div class="card-body"> <form> <div class="one"> <label for=''>Name on card</label> <input placeholder='Johny Relative' type='text'> </div> <div class="two"> <label for=''>Card Number</label> <input maxlength='16' placeholder='4478 6632 9923 8890' type='number'> </div> <div class="three"> <label for=''>Expiry Date</label> <select> <option>January</option> <option>February</option> <option>March</option> <option>April</option><option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option><option>October</option> <option>November</option> <option>December</option> </select> </div> <div class="four"> <!-- blank character --> <label for=''>&#x200b;</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> <option>2019</option> <option>2020</option> </select> </div> <div class="five"> <label for=''>CVV</label> <input maxlength='3' placeholder='633' type='number'> </div> </form> </div>
</div>
</body>
</html>

Credit Card Payment Modal - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100italic,100,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
body{ background:#E2E2E2;
}
.card{ width:600px; height:360px; background:#FFF; margin:0 auto; border-radius:20px; margin-top:20px;
}
.top{ width:100%; background:rgb(25, 146, 250); padding:57px 0; border-top-left-radius:20px; border-top-right-radius:20px; position:relative;
}
.payment{ position: absolute; width: 30px; font-size: 22px; color: #FFF; font-family: 'ubuntu', sans-serif; text-transform: uppercase; line-height: 25px; font-weight: 500; top:32px; left:35px;
}
.visa svg{ width: 120px; height: auto; position: absolute; right: 29px; top: -195px;
}
/*form styles*/
form{ width:550px; margin:0 auto;
}
.one{ width:225px;
}
.two{ width:245px;
}
.one, .two, .three, .four, .five{ float:left; margin:15px 40px 5px 0;
}
.three, .four, .five{ float:left; width:143px;
}
input, select{ clear:both; float:none; display:block; -webkit-appearance: none; border:1px solid rgb(197, 197, 197); padding:14px 15px; border-radius:3px; width:100%; font-size:15px; color: #000; text-align: left; font-weight: bold; background:#FFF;
}
input{ color: rgb(244, 195, 88); text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent;
}
select{ padding-left:15px;
}
::-webkit-input-placeholder { font-size: 15px; color: #000; text-align: left; font-weight: bold; padding-left:0px;
}
:-moz-placeholder { /* older Firefox*/
font-size: 15px; color: #000; text-align: left; font-weight: bold; padding-left:0px;
}
::-moz-placeholder { /* Firefox 19+ */
font-size: 15px; color: #000; text-align: left; font-weight: bold; padding-left:0px;
}
:-ms-input-placeholder { font-size: 15px; color: #000; text-align: left; font-weight: bold; padding-left:0px;
}
label{ color:rgb(151, 151, 151); font-size:12px; font-weight:500; letter-spacing:.-0px; font-family:'ubuntu', sans-serif; text-transform:uppercase; margin:15px 0; display:block;
}
input[type=text]:focus,input[type=number]:focus, textarea:focus, select:focus { box-shadow: none; outline:none; border: 1px solid rgb(25, 146, 250);
}
/*drop down arrow */
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) { select {padding-right:18px}
}
label {position:relative}
.three label:after, .four label:after { content:"\f078"; font-family: "FontAwesome"; font-size: 11px; color:rgb(140, 140, 140); right:10px; top:45px; padding:0 0 2px; position:absolute; pointer-events:none;
}
label:before { content:''; right:4px; top:0px; width:23px; height:18px; background:#fff; position:absolute; pointer-events:none; display:block;
}
/* Info */
.info { width: 300px; margin: 35px auto; text-align: center; font-family: 'roboto', sans-serif;
}
.info h1 { margin: 0; padding: 0; font-size: 28px; font-weight: 400; color: #333333; padding-bottom: 5px;
}
.info span { color:#666666; font-size: 13px; margin-top:20px;
}
.info span a { color: #666666; text-decoration: none;
}
.info span .fa { color: rgb(226, 168, 16); font-size: 19px; position: relative; left: -2px;
}
.info span .spoilers { color: #999999; margin-top: 5px; font-size: 10px;
}
Credit Card Payment Modal - Script Codes
Credit Card Payment Modal - Script Codes
Home Page Home
Developer Ty Stelmach
Username TyStelmach
Uploaded December 09, 2022
Rating 3
Size 4,461 Kb
Views 10,120
Do you need developer help for Credit Card Payment Modal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ty Stelmach (TyStelmach) Script Codes
Name
Spotify layout and UI
Simple jQuery Text Slider
Angular Deluxe Task List
Add a custom right-click menu using jQuery
Codepen recreation
Moonshot Countdown
Waffle-Ipsum
Adding content to an iframe with jQuery
Lazy Load and Filter Resource Library
Personal Celebration Module
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!