Trader Phone APP UI

Developer
Jeff Scott Ward
Size
6,799 Kb
Views
30,360
  1. Trader Phone APP UI Previews
  2. Trader Phone APP UI HTML Codes
  3. Trader Phone APP UI CSS Codes
  4. Trader Phone APP UI JS Codes

How do I make an trader phone app ui?

HTML5 Forex mobile trading app interface in pure CSS3. What is a trader phone app ui? How do you make a trader phone app ui? This script and codes were developed by Jeff Scott Ward on 28 August 2022, Sunday.

Trader Phone APP UI Previews
IQ Test

Trader Phone APP UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Trader Phone APP UI</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html class="no-js"> <head> <meta charset="utf-8"> <title>Lab49 Test - Jeff Ward</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="//www.google-analytics.com" rel="dns-prefetch"> <link href="//ajax.googleapis.com" rel="dns-prefetch"> <link href="assets/css/style.css" rel="stylesheet"> <script src="assets/js/vendor/modernizr-2.6.2.min.js"></script> </head> <body> <section class="company-module"> <header class="header" role="banner"> <div class="buy-sell-module"> <div class="buy-sell-header">GBPUSD</div> <table> <tr> <td class="buy"><a href="#"> <table> <tr> <td>BUY</td> </tr> <tr> <td class="numbers"><span class="base">1.23</span><span class="important up">45</span></td> </tr> <tr> <td class="against">(USD 1,000,000,000)</td> </tr> </table></a></td> <td class="sell"><a href="#"> <table> <tr> <td>SELL</td> </tr> <tr> <td><span class="base">1.23</span><span class="important down">42</span></td> </tr> <tr> <td class="against">(USD 1,000,000,000)</td> </tr> </table></a></td> </tr> </table> </div> <form class="re-calculator" name="re-calculator"> <button class="btn">USD:</button> <input type="number" placeholder="1,000,000,000" min="1" max="1000000000"> </form> </header> <hr class="divider"> <div class="related-news"> <h2>RELATED NEWS</h2> <ul class="related-news-list"> <li><a href="#"> <p class="article-title">GBP related news article link to go here and here and wrap as required.</p></a> <p class="article-datetime"> <span class="date">01 OCT 2012 </span><span class="time">12:28 CET</span><span class="time-passed">(2hrs 10min ago)</span></p> </li> <li><a href="#"> <p class="article-title">GBP related news article link to go here and here and wrap as required.</p></a> <p class="article-datetime"> <span class="date">01 OCT 2012 </span><span class="time">12:28 CET</span><span class="time-passed">(2hrs 10min ago)</span></p> </li> <li><a href="#"> <p class="article-title">GBP related news article link to go here and here and wrap as required.</p></a> <p class="article-datetime"> <span class="date">01 OCT 2012 </span><span class="time">12:28 CET</span><span class="time-passed">(2hrs 10min ago)</span></p> </li> </ul> </div> <hr class="divider"> <footer class="footer" role="contentinfo"> <h3>YOUR SALES REPRESENTATIVE:</h3> <div class="bio"><img class="bio-pic" src="http://www.placekitten.com/50/50"> <div class="name"> <div class="names"><span class="first-name">Firstname</span><span>&nbsp;</span><span class="last-name">Lastname</span></div><a class="contact-link" href="#">CONTACT NOW</a> </div> </div> </footer> </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-1.10.2.min.js"><\\/script>');</script> <script src="assets/js/scripts.min.js"></script> <script> (function(f,i,r,e,s,h,l){i['GoogleAnalyticsObject']=s;f[s]=f[s]||function(){ (f[s].q=f[s].q||[]).push(arguments)},f[s].l=1*new Date();h=i.createElement(r), l=i.getElementsByTagName(r)[0];h.async=1;h.src=e;l.parentNode.insertBefore(h,l) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-XX'); ga('send', 'pageview'); </script> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Trader Phone APP UI - Script Codes CSS Codes

/*! * fireshell * Fiercely quick and opinionated front-ends * http://getfireshell.com * @author Todd Motto * @version 1.0.0 * Copyright 2013. MIT licensed. */
/*! * fireshell * Fiercely quick and opinionated front-ends * http://getfireshell.com * @author Todd Motto * @version 1.0.0 * Copyright 2013. MIT licensed. */
/* line 1, ../../../src/scss/modules/_clearfix.scss */
.clear:before, .clear:after { content: ' '; display: table;
}
/* line 5, ../../../src/scss/modules/_clearfix.scss */
.clear { *zoom: 1;
}
/* line 10, ../../../src/scss/modules/_clearfix.scss */
.clear:after { clear: both;
}
/* line 1, ../../../src/scss/modules/_defaults.scss */
* { box-sizing: border-box; font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* line 7, ../../../src/scss/modules/_defaults.scss */
html { font-size: 62.5%;
}
/* line 11, ../../../src/scss/modules/_defaults.scss */
body { font: 300 13px/1.6 'Helvetica Neue', Helvetica, Arial; background: #fff; color: #444;
}
/* line 18, ../../../src/scss/modules/_defaults.scss */
table,
tbody { width: 100%;
}
/* line 23, ../../../src/scss/modules/_defaults.scss */
table,
table * { border-collapse: collapse; text-align: center;
}
/* line 29, ../../../src/scss/modules/_defaults.scss */
table,
tbody { width: 100%;
}
/* line 34, ../../../src/scss/modules/_defaults.scss */
table,
table * { border-collapse: collapse; text-align: center;
}
/* line 39, ../../../src/scss/modules/_defaults.scss */
button, input { font-size: 14px; height: 30px;
}
/* line 4, ../../../src/scss/modules/_buttons.scss */
button { width: 17%; height: 30px; border: none; padding: 0; text-align: center; background-color: #333333; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM0ZDRkNGQiLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-linear-gradient(top, #4d4d4d 50%, #1a1a1a 99%); background-image: -moz-linear-gradient(top, #4d4d4d 50%, #1a1a1a 99%); background-image: -o-linear-gradient(top, #4d4d4d 50%, #1a1a1a 99%); background-image: linear-gradient(to bottom, #4d4d4d 50%, #1a1a1a 99%);
}
/* line 13, ../../../src/scss/modules/_buttons.scss */
button:hover, button:active { background-color: #333333; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-linear-gradient(top, #1a1a1a 50%, #4d4d4d 99%); background-image: -moz-linear-gradient(top, #1a1a1a 50%, #4d4d4d 99%); background-image: -o-linear-gradient(top, #1a1a1a 50%, #4d4d4d 99%); background-image: linear-gradient(to bottom, #1a1a1a 50%, #4d4d4d 99%);
}
/* line 1, ../../../src/scss/modules/_inputs.scss */
input { padding-left: 5px; border: 1px solid #474747; background-color: #333333; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMyNzI3MjciLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-linear-gradient(top, #272727 10%, #333333 99%); background-image: -moz-linear-gradient(top, #272727 10%, #333333 99%); background-image: -o-linear-gradient(top, #272727 10%, #333333 99%); background-image: linear-gradient(to bottom, #272727 10%, #333333 99%);
}
@font-face { font-family: 'Font-Name'; src: url("../fonts/font-name.eot"); src: url("../fonts/font-name.eot?#iefix") format("embedded-opentype"), url("../fonts/font-name.woff") format("woff"), url("../fonts/font-name.ttf") format("truetype"), url("../fonts/font-name.svg#font-name") format("svg"); font-weight: normal; font-style: normal;
}
/* line 12, ../../../src/scss/modules/_typography.scss */
* { color: #baabbe; text-decoration: none; font-family: sans-serif !important;
}
/* line 18, ../../../src/scss/modules/_typography.scss */
h1, h2, h3 { margin-top: 0; margin-bottom: 5px; font-weight: 200;
}
/* line 23, ../../../src/scss/modules/_typography.scss */
h1 { font-size: 16px;
}
/* line 26, ../../../src/scss/modules/_typography.scss */
h2 { font-size: 14px;
}
/* line 29, ../../../src/scss/modules/_typography.scss */
h3 { font-size: 12px;
}
/* line 32, ../../../src/scss/modules/_typography.scss */
p { margin-top: 0;
}
/* line 35, ../../../src/scss/modules/_typography.scss */
a { display: block;
}
/* line 38, ../../../src/scss/modules/_typography.scss */
a, button { cursor: pointer;
}
/* line 1, ../../../src/scss/modules/_misc.scss */
::selection { background: #333; color: #fff; text-shadow: none;
}
/* line 7, ../../../src/scss/modules/_misc.scss */
::-moz-selection { background: #333; color: #fff; text-shadow: none;
}
/* line 13, ../../../src/scss/modules/_misc.scss */
::-webkit-selection { background: #333; color: #fff; text-shadow: none;
}
/* line 19, ../../../src/scss/modules/_misc.scss */
.divider { height: 2px; background: #474747; border: none; margin: 5px 0;
}
/* line 25, ../../../src/scss/modules/_misc.scss */
.divider::after { display: block; content: ''; height: 1px; width: 100%; background: #292929;
}
/* line 8, ../../../src/scss/modules/_app.scss */
.company-module { max-width: 320px; min-width: 210px; padding: 10px; margin: auto; border-radius: 5px; background-color: #333333; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-linear-gradient(top, #333333 70%, #1a1a1a 99%); background-image: -moz-linear-gradient(top, #333333 70%, #1a1a1a 99%); background-image: -o-linear-gradient(top, #333333 70%, #1a1a1a 99%); background-image: linear-gradient(to bottom, #333333 70%, #1a1a1a 99%);
}
/* line 22, ../../../src/scss/modules/_app.scss */
.buy-sell-header { background: #5A2b74; border-bottom: 1px solid #6C4387; text-align: center; padding: 5px;
}
/* line 29, ../../../src/scss/modules/_app.scss */
.buy-sell-module { background: #5A2b74; border: 1px solid black; border-bottom: 1px solid #494651;
}
/* line 34, ../../../src/scss/modules/_app.scss */
.buy-sell-module .buy, .buy-sell-module .sell { background-color: #5a2b74; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVhMmI3NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNTYyZjZmIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiM0ZDIzNjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MTJhNTgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-linear-gradient(top, #5a2b74 0%, #562f6f 50%, #4d2367 51%, #412a58 100%); background-image: -moz-linear-gradient(top, #5a2b74 0%, #562f6f 50%, #4d2367 51%, #412a58 100%); background-image: -o-linear-gradient(top, #5a2b74 0%, #562f6f 50%, #4d2367 51%, #412a58 100%); background-image: linear-gradient(to bottom, #5a2b74 0%, #562f6f 50%, #4d2367 51%, #412a58 100%);
}
/* line 38, ../../../src/scss/modules/_app.scss */
.buy-sell-module .buy table, .buy-sell-module .sell table { min-height: 130px;
}
/* line 42, ../../../src/scss/modules/_app.scss */
.buy-sell-module .buy:hover, .buy-sell-module .sell:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQxMmE1OCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNGQyMzY3Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiM1NjJmNmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YTJiNzQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-linear-gradient(top, #412a58 0%, #4d2367 50%, #562f6f 51%, #5a2b74 100%); background-image: -moz-linear-gradient(top, #412a58 0%, #4d2367 50%, #562f6f 51%, #5a2b74 100%); background-image: -o-linear-gradient(top, #412a58 0%, #4d2367 50%, #562f6f 51%, #5a2b74 100%); background-image: linear-gradient(to bottom, #412a58 0%, #4d2367 50%, #562f6f 51%, #5a2b74 100%);
}
/* line 48, ../../../src/scss/modules/_app.scss */
.buy-sell-module .numbers span { color: #c6b9c9;
}
/* line 53, ../../../src/scss/modules/_app.scss */
.buy-sell-module .base { font-size: 16px; vertical-align: bottom; position: relative; top: -11px;
}
/* line 60, ../../../src/scss/modules/_app.scss */
.buy-sell-module .important { font-size: 35px;
}
/* line 64, ../../../src/scss/modules/_app.scss */
.buy-sell-module .important:after { display: inline-block; top: 0px; left: 5%; content: '▾'; color: red; position: relative;
}
/* line 74, ../../../src/scss/modules/_app.scss */
.buy-sell-module .important.up:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); color: lime;
}
/* line 81, ../../../src/scss/modules/_app.scss */
.buy-sell-module .buy { border-right: 1px solid black;
}
/* line 85, ../../../src/scss/modules/_app.scss */
.buy-sell-module .against { color: #937CAA;
}
/* line 90, ../../../src/scss/modules/_app.scss */
.re-calculator { margin-top: 5px;
}
/* line 93, ../../../src/scss/modules/_app.scss */
.re-calculator input { width: 80%; float: right;
}
/* line 103, ../../../src/scss/modules/_app.scss */
.related-news { padding: 0 5px; min-height: 300px;
}
/* line 107, ../../../src/scss/modules/_app.scss */
.related-news h2 { color: #d5d5d5;
}
/* line 113, ../../../src/scss/modules/_app.scss */
.related-news-list,
.related-news-list li { margin: 0; padding: 0; list-style: none;
}
/* line 119, ../../../src/scss/modules/_app.scss */
.article-title { margin-bottom: 0; font-size: 14px; color: #b7b7b7;
}
/* line 125, ../../../src/scss/modules/_app.scss */
.article-datetime * { color: #767676; font-style: italic; font-size: 12px;
}
/* line 137, ../../../src/scss/modules/_app.scss */
.bio .bio-pic, .bio .name { display: inline-block; vertical-align: top; font-style: italic;
}
/* line 143, ../../../src/scss/modules/_app.scss */
.bio .bio-pic { margin-right: 10px;
}
/* line 147, ../../../src/scss/modules/_app.scss */
.bio .name * { color: #767676;
}
/* line 151, ../../../src/scss/modules/_app.scss */
.bio .contact-link { display: inline-block; color: #8540ac; border-bottom: 1px dashed #8540ac; font-style: italic; height: 20px;
}
/* line 158, ../../../src/scss/modules/_app.scss */
.bio .contact-link:after { display: block; content: ''; border-bottom: 1px dashed #8540ac; width: 100%; height: 1px; position: relative; top: -2px; right: 2px;
}

Trader Phone APP UI - Script Codes JS Codes

(function() {
}).call(this);
Trader Phone APP UI - Script Codes
Trader Phone APP UI - Script Codes
Home Page Home
Developer Jeff Scott Ward
Username jeffscottward
Uploaded August 28, 2022
Rating 3
Size 6,799 Kb
Views 30,360
Do you need developer help for Trader Phone APP UI?

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!

Jeff Scott Ward (jeffscottward) Script Codes
Name
Impress JS Algorhytmic Generator
Iso-Metric Snake
A Pen by Jeff Scott Ward
Object Oriented SASS Framework
Lab 49 Logo Animated
3D Hexagon Text Roller
Brick Breaker
Pure CSS Responsive Slider
Panning Wall Tiles
Sprite Animation
Create amazing love letters 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!