A material design style online banking app interface.
A Pen by Fabio José on CodePen.
Created
September 3, 2020 19:30
-
-
Save fabiojose/f280dee6e81b133d25893f1135d81ee8 to your computer and use it in GitHub Desktop.
Online Banking Interface
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="header"> | |
| <ul class="icon_nav"> | |
| <li><i class="fa fa-arrow-left"></i></li> | |
| <li><i class="fa fa-bars"></i></li> | |
| </ul> | |
| <h1>Checking</h1> | |
| <span class="total pos">430.23</span> | |
| </div> | |
| <div class="content"> | |
| <ul class="list"> | |
| <li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/15/15</span><span class="amount pos">150.00</span></li> | |
| <ul class="info"> | |
| <li><h3>Description</h3></li> | |
| <li>Transfer from account: XXXXXXXX1234</li> | |
| </ul> | |
| <li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/04/15</span><span class="amount neg">13.99</span></li> | |
| <ul class="info"> | |
| <li><h3>Description</h3></li> | |
| <li>Transfer from account: XXXXXXXX1234</li> | |
| </ul> | |
| <li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
| <ul class="info"> | |
| <li><h3>Description</h3></li> | |
| <li>Transfer from account: XXXXXXXX1234</li> | |
| </ul> | |
| <li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
| <ul class="info"> | |
| <li><h3>Description</h3></li> | |
| <li>Transfer from account: XXXXXXXX1234</li> | |
| </ul> | |
| <li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
| <ul class="info"> | |
| <li><h3>Description</h3></li> | |
| <li>Transfer from account: XXXXXXXX1234</li> | |
| </ul> | |
| <li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
| <ul class="info"> | |
| <li><h3>Description</h3></li> | |
| <li>Transfer from account: XXXXXXXX1234</li> | |
| </ul> | |
| </ul> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $('.list li').hover(function() { | |
| $(this).find('i').css('opacity','0.75'); | |
| }, function() { | |
| $(this).find('i').css('opacity','0.25'); | |
| }) | |
| var tl = new TimelineMax({paused:false}); | |
| $('.list li').each(function() { | |
| var open = false; | |
| $(this).click(function() { | |
| var i = $(this).find('i'); | |
| var li = $(this); | |
| var desc = $(this).next(); | |
| if (open === true) { | |
| tl.to(i, .3, {rotation: 0}) | |
| .to(li, .3, {borderBottom: 'none'}, '-=.3') | |
| .to(desc, .3, {height: '0', padding: '0', ease:Power4.easeOut}, '-=.3'); | |
| open = false; | |
| } else { | |
| tl.to(i, .4, {rotation: 90}) | |
| .to(li, .4, {borderBottom: '2px solid #95a5a6'}, '-=.4') | |
| .to(desc, .4, {height: '55px', padding: '5px', ease:Bounce.easeOut}, '-=.4'); | |
| open = true; | |
| } | |
| }); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| -webkit-user-select: none; | |
| } | |
| html { | |
| background-color: #34495e; | |
| } | |
| .container { | |
| background-color: #ecf0f1; | |
| width: 250px; | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| .header { | |
| cursor: default; | |
| width: 100%; | |
| background-color: #1abc9c; | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 300; | |
| font-size: 13px; | |
| text-align: center; | |
| padding-top: 20px; | |
| box-sizing: border-box; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid #16a085; | |
| } | |
| .total { | |
| display: block; | |
| padding: 10px; | |
| font-size: 20px; | |
| font-weight: 700; | |
| background-color: #ecf0f1; | |
| width: 100px; | |
| margin: 0 auto; | |
| border-radius: 50px; | |
| margin-top: 10px; | |
| } | |
| .icon_nav { | |
| display: flex; | |
| justify-content: space-between; | |
| list-style-type: none; | |
| color: #ecf0f1; | |
| font-size: 20px; | |
| width: 100%; | |
| padding: 0 20px 20px 20px; | |
| box-sizing: border-box; | |
| border-bottom: 2px solid #16a085; | |
| } | |
| .icon_nav i { | |
| cursor: pointer; | |
| display: block; | |
| padding: 10px; | |
| border-radius: 50%; | |
| } | |
| .icon_nav i:hover { | |
| background-color: #16a085; | |
| } | |
| h1 { | |
| margin-top: 10px; | |
| font-weight: normal; | |
| color: #ecf0f1; | |
| } | |
| .content { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .list { | |
| width: 100%; | |
| list-style-type: none; | |
| font-family: 'Roboto', sans-serif; | |
| color: #2c3e50; | |
| } | |
| .list li { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 5px 10px 5px 10px; | |
| box-sizing: border-box; | |
| -webkit-user-select: none; | |
| cursor: pointer; | |
| } | |
| .list li i { | |
| margin-right: 5px; | |
| opacity: 0.25; | |
| } | |
| .amount { | |
| font-weight: 300; | |
| } | |
| .pos { | |
| color: #27ae60; | |
| } | |
| .pos:before { | |
| content: '+$'; | |
| } | |
| .neg { | |
| color: #c0392b; | |
| } | |
| .neg:before { | |
| content:'-$'; | |
| } | |
| .info { | |
| list-style-type: none; | |
| font-size: 12px; | |
| background-color: #bdc3c7; | |
| padding: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| height: 0; | |
| } | |
| .info ul li { | |
| background-color: #bdc3c7; | |
| width: 100%; | |
| height: 100px; | |
| border-top: 1px solid #7f8c8d; | |
| margin-top: -72px; | |
| } | |
| .info li h3 { | |
| font-weight: normal; | |
| font-weight: 700; | |
| font-size: 13px; | |
| margin-bottom: -5px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment