Flat Payment Modal

Developer
Andy Tran
Size
5,009 Kb
Views
54,648
  1. Flat Payment Modal Previews
  2. Flat Payment Modal HTML Codes
  3. Flat Payment Modal CSS Codes
  4. Flat Payment Modal JS Codes

How do I make an flat payment modal?

Simple Flat Payment Modal with tab-like effect.Dribbble Shot https://dribbble.com/shots/2132348-Payment-Modal?list=likes&offset=4. What is a flat payment modal? How do you make a flat payment modal? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Flat Payment Modal Previews
IQ Test

Flat Payment Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Payment Modal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div class='info'> <h1>Payment Card</h1> <span> Made with <i class='fa fa-heart animated infinite pulse'></i> by <a href='http://andytran.me'>Andy Tran</a> </span> </div> <form class='modal'> <header class='header'> <h1>Payment of $145.00</h1> <div class='card-type'> <a class='card active' href='#'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Amex.png'> </a> <a class='card' href='#'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Discover.png'> </a> <a class='card' href='#'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Visa.png'> </a> <a class='card' href='#'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/MC.png'> </a> </div> </header> <div class='content'> <div class='form'> <div class='form-row'> <div class='input-group'> <label for=''>Name on card</label> <input placeholder='' type='text'> </div> </div> <div class='form-row'> <div class='input-group'> <label for=''>Card Number</label> <input maxlength='16' placeholder='' type='number'> </div> </div> <div class='form-row'> <div class='input-group'> <label for=''>Expiry Date</label> <input placeholder='' type='month'> </div> <div class='input-group'> <label for=''>CVS</label> <input maxlenght='4' placeholder='' type='number'> </div> </div> </div> </div> <footer class='footer'> <button class='button'>Complete Payment</button> </footer> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://codepen.io/andytran/pen/yYMobm.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat Payment Modal - Script Codes CSS Codes

body { background: #f2f2f2; font-size: 14px; font-family: 'Open Sans', sans-serif; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { display: block; max-width: 480px; min-width: 300px; margin: 0 auto; padding: 0 40px;
}
.modal { background: #FFF; -webkit-border-radius: 3px; -webkit-background-clip: padding-box; -moz-border-radius: 3px; -moz-background-clip: padding; border-radius: 3px; background-clip: padding-box; overflow: hidden;
}
.modal .form .form-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin: 0 0 30px;
}
.modal .form .form-row:last-child { margin: 0;
}
.modal .form .form-row:last-child .input-group { width: 75%; margin: 0 15px 0 0;
}
.modal .form .form-row:last-child .input-group:last-child { width: 25%; margin: 0 0 0 15px;
}
.modal .form .input-group { width: 100%;
}
.modal .form label { display: block; width: 100%; margin: 0 0 10px; color: #00A6EA; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.modal .form input { outline: none; display: block; background: rgba(0, 0, 0, 0.1); width: 100%; margin: 0; border: 0; -webkit-border-radius: 3px; -webkit-background-clip: padding-box; -moz-border-radius: 3px; -moz-background-clip: padding; border-radius: 3px; background-clip: padding-box; padding: 15px; color: #999; font-size: 12px; font-weight: 700; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.modal .header { background: #00A6EA; padding: 30px; text-align: center;
}
.modal .header h1 { margin: 0 0 15px; color: #FFF; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.modal .header .card-type { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.modal .header .card-type .card { position: relative; width: 25%; min-width: 54px; text-align: center; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%);
}
.modal .header .card-type .card.active { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); filter: grayscale(0);
}
.modal .header .card-type .card.active:after { display: block; bottom: -30px;
}
.modal .header .card-type .card:after { content: ''; position: absolute; bottom: -60px; left: 50%; margin: 0 0 0 -10px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #FFF; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease;
}
.modal .header .card-type .card img { display: inline-block;
}
.modal .header .card-type li { display: inline-block; margin: 0 10px;
}
.modal .content { padding: 30px;
}
.modal .footer .button { outline: none; display: block; background: #E39C14; width: 100%; border: 0; padding: 20px 30px; color: #FFF; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.info { width: 300px; margin: 50px auto; text-align: center;
}
.info h1 { margin: 0 0 15px; padding: 0; font-size: 24px; font-weight: 400; color: #333;
}
.info span { color: #666; font-size: 12px;
}
.info span a { color: #000; text-decoration: none;
}
.info span .fa { color: #00A6EA;
}
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
@-moz-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
@-o-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
@keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
[not-existing] { zoom: 1;
}

Flat Payment Modal - Script Codes JS Codes

$('.card').on('click', function(e) { e.preventDefault(); $('.card').removeClass('active'); $(this).addClass('active'); $('.form').stop().slideUp(); $('.form').delay(300).slideDown();
});
Flat Payment Modal - Script Codes
Flat Payment Modal - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 5,009 Kb
Views 54,648
Do you need developer help for Flat 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!

Andy Tran (andytran) Script Codes
Name
Macbook Pro Demo
Material Playing Cards
Sign Up Form
Login Form - Modal
Day 21 - Interactive Dribbble Invite Modal
Flat Pricing Table
Progress Bar
Article News Card
Flat Login Form
Flat Login Form
Create amazing sales emails 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!