"credit card concept"
Bootstrap 4.1.1 Snippet by gbdevteam

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Jackthomsonn/pen/xZNKzK?limit=all&page=4&q=app" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'> <style class="cp-pen-styles">* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Muli', sans-serif; } html, body { background: #EDF2F4; overflow: hidden; } .app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; } .app_inner { background: #FFF; width: 750px; height: 550px; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 9px; -webkit-box-shadow: 1px 5px 15px #CCC; box-shadow: 1px 5px 15px #CCC; } .app_inner aside { background: #4363a2; -webkit-box-flex: 1; -ms-flex: 1 0 220px; flex: 1 0 220px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } .app_inner aside .wallet { margin: 0 auto; } .app_inner aside .wallet .holder { height: 370px; overflow-y: auto; overflow-x: hidden; } .app_inner aside .wallet .card { background: rgba(0, 0, 0, 0.1); border-radius: 5px; width: 180px; height: 100px; margin: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 1em; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; cursor: pointer; z-index: 1; position: relative; -webkit-transition: all ease .45s; transition: all ease .45s; } .app_inner aside .wallet .card:last-of-type { background: #EF3E5C; } .app_inner aside .wallet .card:before { content: ''; background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg); opacity: 0.2; -webkit-transform: translateX(-16px); transform: translateX(-16px); border-radius: 5px; width: 100%; height: 100%; background-size: cover; position: absolute; z-index: 0; } .app_inner aside .wallet .card_number, .app_inner aside .wallet .card_holder > p { font-size: 10px; color: #FFF; } .app_inner aside .wallet .card_holder { width: 50%; } .app_inner aside .wallet .card_number { width: 100%; } .app_inner aside .wallet .card_icon { width: 20%; } .app_inner aside .wallet .card_icon > img { width: 35px; height: auto; } .app_inner .add_a_card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #FFF; margin: 4.5em auto; cursor: pointer; } .app_inner .add_a_card > i { font-size: 30px; } .app_inner .add_a_card > p { font-size: 17px; } .app_inner main { background: #4162a4; -webkit-box-flex: 1; -ms-flex: 1 1 480px; flex: 1 1 480px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; position: relative; } .app_inner main .list { overflow-y: auto; overflow-x: hidden; height: 440px; } .app_inner main .list .card { background-color: #EF3E5C; border-radius: 5px; width: 170px; height: 100px; margin: 3em auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 1em; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; z-index: 1; } .app_inner main .list .card:before { content: ''; background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg); opacity: 0.225; -webkit-transform: translateX(-16px); transform: translateX(-16px); border-radius: 5px; width: 100%; height: 100%; background-size: cover; position: absolute; z-index: -1; } .app_inner main .list .card_number, .app_inner main .list .card_holder, .app_inner main .list .card_expiration, .app_inner main .list .card_holder > p { font-size: 10px; color: #FFF; } .app_inner main .list .card_holder { width: 50%; } .app_inner main .list .card_number { width: 100%; } .app_inner main .list .card_icon { width: 20%; } .app_inner main .list .card_icon > img { width: 35px; height: auto; } .app_inner main .list .transactions table { width: 100%; text-align: left; color: #FFF; padding: 1em; border-spacing: 0; } .app_inner main .list .transactions table thead { border-bottom: 1px solid #232531; } .app_inner main .list .transactions table thead th { padding: 0.5em 0; color: #4363a2; } .app_inner main .list .transactions table td { border-top: 1px solid rgba(255, 255, 255, 0.015); padding: 0.75em 0; } .app_inner main .list .transactions h1 { background: #F03F5D; color: #FFF; cursor: pointer; text-align: center; margin: 2em auto; width: 80%; position: absolute; left: 0; right: 0; padding: 0.2em; border-radius: 7px; } .app_inner main .create { opacity: 0; -webkit-transition: opacity 0.45s cubic-bezier(0.39, 0.575, 0.565, 1); transition: opacity 0.45s cubic-bezier(0.39, 0.575, 0.565, 1); pointer-events: none; } .app_inner main .create .card { background: #EF3E5C; border-radius: 5px; width: 170px; height: 100px; margin: 2em auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 1em; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; z-index: 1; position: relative; } .app_inner main .create .card:before { content: ''; background: url(http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/10/world_map_06.jpg); opacity: 0.2; -webkit-transform: translateX(-16px); transform: translateX(-16px); border-radius: 5px; width: 100%; height: 100%; background-size: cover; position: absolute; z-index: 0; } .app_inner main .create .card_number, .app_inner main .create .card_holder, .app_inner main .create .card_expiration, .app_inner main .create .card_holder > p { font-size: 10px; color: #FFF; text-transform: capitalize; } .app_inner main .create .card_holder { width: 50%; } .app_inner main .create .card_number { width: 100%; } .app_inner main .create .card_icon { width: 20%; } .app_inner main .create .card_icon > img { width: 35px; height: auto; } .app_inner main form { background: #252734; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform: translateY(-430px); transform: translateY(-430px); border-top-right-radius: 7px; border-bottom-right-radius: 7px; z-index: 2; height: 525px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; -ms-flex-pack: distribute; justify-content: space-around; } .app_inner main form input[type="text"] { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.015); padding: 1em 0; border-top: none; border-left: none; border-right: none; width: 85%; font-size: 18px; outline: none; color: #FFF; } .app_inner main form input[type="submit"] { background: #1a1c25; color: #FFF; border: none; padding: 1em; width: 85%; font-size: 18px; outline: none; border-radius: 7px; cursor: pointer; -webkit-transition: all ease .15s; transition: all ease .15s; } .app_inner main form input[type="submit"]:hover { background: rgba(239, 62, 92, 0.9); } .app_inner main form i { color: rgba(255, 255, 255, 0.7); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 85%; margin: 1em 0; cursor: pointer; } .app_inner main form i:hover { color: white; } .app_inner main form .choose_a_card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .app_inner main form .choose_a_card > img { margin: 0 1em; width: 80px; height: auto; cursor: pointer; padding: 0.6em; border-radius: 7px; -webkit-transition: all ease .45s; transition: all ease .45s; } .app_inner main form .choose_a_card .selected { background: #1a1c25; } ::-webkit-input-placeholder { color: #FFF; } ::-webkit-scrollbar-thumb { background: #1e212b; border-radius: 50px; height: 50px; } </style></head><body> <div class='app' ng-app='wallet-app' ng-cloak='true'> <div class='app_inner'> <aside> <div class='wallet'> <div class='holder' ng-controller='walletController'> <div class='card' ng-click='index(card.id)' ng-repeat='card in cards | orderBy:"id":true'> <div class='card_number'> <p>{{card.cardNumber}}</p> </div> <div class='card_holder'> <p>{{card.cardHolder}}</p> <p>{{card.expiryDate}}</p> </div> <div class='card_icon'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{card.type}}.png'> </div> </div> </div> <div class='add_a_card'> <i class='fa fa-plus'></i> <p>Add a card</p> </div> </div> </aside> <main> <div class='list' ng-controller='walletController'> <ul ng-repeat='card in cards' ng-show='card.id == cardIndex'> <div class='card'> <div class='card_number'> <p>{{card.cardNumber}}</p> </div> <div class='card_holder'> <p>{{card.cardHolder}}</p> <p>{{card.expiryDate}}</p> </div> <div class='card_icon'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{card.type}}.png'> </div> </div> <div class='transactions'> <table> <thead> <th> Date </th> <th> Merchant </th> <th> Spend </th> </thead> <tr ng-repeat='transaction in card.transactions'> <td> {{transaction.date}} </td> <td> {{transaction.merchant}} </td> <td> {{transaction.price | currency:"£"}} </td> </tr> </table> </div> </ul> </div> <div class='create'> <form ng-controller='addCardController as card'> <i class='fa fa-times-circle'></i> <input class='number' ng-model='number' placeholder='Enter card number' type='text'> <input class='name' ng-model='name' placeholder='Enter your name' type='text'> <input class='expiry' ng-model='expiry' placeholder='MM / YY' type='text'> <div class='choose_a_card' ng-controller='addCardController'> <img ng-click='choose("mastercard-curved-64px")' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/mastercard-curved-64px.png'> <img ng-click='choose("discover-curved-64px")' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/discover-curved-64px.png'> <img class='selected' ng-click='choose("visa-curved-64px")' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/visa-curved-64px.png'> <div class='card'> <div class='card_number'> <p>{{number}}</p> </div> <div class='card_holder'> <p>{{name}}</p> <p>{{expiry}}</p> </div> <div class='card_icon'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{choice}}.png'> </div> </div> <input ng-click='addCard(number, name, expiry)' type='submit' value='Add card'> </div> </form> </div> </main> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >angular.module('wallet-app', []). controller('walletController', function($scope, $rootScope, $timeout) { $rootScope.cardIndex = 0; $scope.index = function(id) { $timeout(function() { $rootScope.cardIndex = id; }, 1000); console.log(id); } $rootScope.cards = [{ id: 0, cardNumber: '1234 5678 9876 5432', expiryDate: '07/19', cardHolder: 'J Thomson', type: 'visa-curved-64px', transactions: [{ date: '01/02/2016', merchant: 'Apple', price: '205.25' }, { date: '05/02/2016', merchant: 'Jack & Jones', price: '32.95' }, { date: '12/02/2016', merchant: 'F&B', price: '47.22' }, { date: '14/02/2016', merchant: 'Swarovski', price: '325' }] }, { id: 1, cardNumber: '5432 9876 5678 1234', expiryDate: '01/22', cardHolder: 'T Konten', type: 'mastercard-curved-64px', transactions: [{ date: '01/02/2016', merchant: 'Hugo Boss', price: '19.99' }, { date: '05/02/2016', merchant: 'Amazon UK', price: '59.95' }] }, { id: 2, cardNumber: '5678 5433 2254 3476', expiryDate: '01/22', cardHolder: 'C David', type: 'discover-curved-64px', transactions: [{ date: '01/02/2016', merchant: 'Steam', price: '19.99' }, { date: '05/02/2016', merchant: 'Tesco', price: '10' }, { date: '05/02/2016', merchant: 'Tesco', price: '122.50' }, { date: '05/02/2016', merchant: 'Game', price: '22.50' }, { date: '05/02/2016', merchant: 'Steam', price: '9' }, { date: '05/02/2016', merchant: 'IKEA', price: '12.17' }, { date: '05/02/2016', merchant: 'Apple', price: '1.50' }, { date: '05/02/2016', merchant: 'Tesco', price: '7.95' }] }] }). controller('addCardController', function($scope, $rootScope, $timeout) { $scope.choice = "visa-curved-64px"; $scope.choose = function(card) { $scope.choice = card; } $scope.number; $rootScope.name; $scope.expiry; $scope.addCard = function(number, name, expiry) { $timeout(function() { $rootScope.cards.push({ id: $rootScope.cards.length + 1, cardNumber: number, cardHolder: name, expiryDate: expiry, type: $scope.choice, transactions: [{ date: '10/02/2016', merchant: 'Jack & Jones', price: '79.87' }, { date: '12/02/2016', merchant: 'Cadwalders', price: '7.25' }, { date: '15/02/2016', merchant: 'Bella Italia', price: '62.70' }, { date: '15/02/2016', merchant: 'Odeon', price: '24.99' }] }); }, 700); console.log($rootScope.cards); } }); function changeCard() { setTimeout(function() { $("main").find(".list").css({ 'transform': 'scale(0.95)', 'transition': 'all ease-in-out .45s', 'opacity': '0', '-webkit-filter': 'blur(10px)' }); }); setTimeout(function() { $("main").find(".list").css({ 'transform': 'scale(1)', 'transition': 'all ease-in-out .45s', 'opacity': '1', '-webkit-filter': 'blur(0)' }); }, 1000); } function close() { $(".create").css({ 'opacity': '0', 'pointer-events': 'none' }); } function addCard() { $(".create").css({ 'opacity': '1', 'pointer-events': 'auto' }) } $(".choose_a_card").on("click", "img", function() { $(this).addClass("selected").siblings().removeClass("selected"); }); $(".wallet").on("click", ".card", function() { changeCard(); setTimeout(function() { close(); }, 600); $(this).css({ 'background': '#EF3E5C', 'transition': 'all ease .45s' }).siblings().css({ 'background': 'rgba(0, 0, 0, 0.2)', 'transition': 'all ease .45s' }) }); $(".add_a_card").click(function() { addCard(); }); $("form").find("i").click(function() { close(); }); $("input.number").keydown(function(e) { if (e.keyCode === 8) { $(this).val().length + 100; } else if ($(this).val().length === 19) { e.preventDefault(); } else { var $this = $(this); if ((($this.val().length + 1) % 5) === 0) { $this.val($this.val() + " "); } } }); $("input.expiry").keydown(function(e) { if (e.keyCode === 8) { $(this).val().length + 100; } else if (e.keyCode === 32) { return false; } else if (e.keyCode === 191) { return false } else if (e.keyCode === 189) { return false } else if ($(this).val().length > 6) { e.preventDefault(); } else { var $this = $(this); if ((($this.val().length + 1) % 3) === 0) { $this.val($this.val() + " / "); } } }); $("input[type='submit']").click(function() { setTimeout(function() { $(".wallet").find(".holder").css({ 'opacity': '0', 'padding-top': '100px', 'transition': 'all ease .45s', }); }, 0); setTimeout(function() { $(".wallet").find(".card").css({ 'transform': 'scale(0)' }); }, 700); setTimeout(function() { $(".wallet").find(".holder").css({ 'opacity': '1', 'padding-top': '0', 'transition': 'all ease .75s', }); }, 1000); setTimeout(function() { $(".wallet").find(".card").css({ 'transform': 'scale(1)' }); }, 1450); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: