-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
124 lines (112 loc) · 4.71 KB
/
index.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
meta(name="viewport" content="width=device-width, initial-scale=1")
title Cryptex Portfolio Guide
meta(name="description" content="")
link(href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm", crossorigin="anonymous")
link(rel="stylesheet" href="css/main.min.css")
script(defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js")
script(defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js")
//[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]
link(rel="shortcut icon" href="img/favicon.ico" type="image/x-icon")
link(rel="icon" href="img/favicon.ico" type="image/x-icon")
// Global site tag (gtag.js) - Google Analytics
script(async='', src='https://www.googletagmanager.com/gtag/js?id=UA-117564827-1')
script.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-117564827-1');
body.body-container.text-center
//- Section 1 - Text intro
section.slider#home
input.slider__nav(type='radio', name='slider', title='slide1', checked='checked')
input.slider__nav(type='radio', name='slider', title='slide2')
input.slider__nav(type='radio', name='slider', title='slide3')
input.slider__nav(type='radio', name='slider', title='slide4')
.slider__inner
.slider__contents
i.slider__image.far.fa-question-circle
h2.slider__caption What is Cryptex?
p.slider__txt
| We offer a free investment planner that operates like an index fund, suggesting investments in the current top 20 cryptocurrencies.
.slider__contents
i.slider__image.fas.fa-desktop
h2.slider__caption How do I Use Cryptex?
p.slider__txt
| Invest smarter by entering your starting amount into the input field below. The table will tell you the amount to invest in each of the top coins. Go to your site of choice and start investing!
.slider__contents
i.slider__image.fab.fa-bitcoin
h2.slider__caption What is Crypto?
p.slider__txt
| A digital currency which uses encryption to regulate the generation of currency and verify transfers, operating independently of a central bank.
.slider__contents
i.slider__image.fas.fa-chart-line
h2.slider__caption What is an Index Fund?
p.slider__txt
| An investment fund that replicates the performance of a given index of stocks, such as the NASDAQ.
//- Section 2 - nav
section
nav#nav-main
ul
li.logo
a(href="#home") Cryptex.
li
a(href="#index") Index
li
a(href="#charts") Charts
li
a(href="#news") News
//- Section 3 - User input
section
.container
.row
.col-md-6.pt-5.mx-auto
form.invest-form
.input-group
.input-group-prepend
span.input-group-text.font-weight-bold $
input(type="number" class='form-control invest-input' min='500' placeholder="Amount to invest" step=".01")
.input-group-append
button.btn(type="submit") Submit
//- Section 4 - table
section#index
.container
.row
.col-12.pt-5.table-responsive
table.table.table-hover.table-bordered.currency-table.table-sm
thead.thead-grey
tr
th Rank
th Coin Name
th Market Cap
span.fiat
th Price
span.fiat
th %
th Amount to Buy
//- Section 5 - chart
section#charts
.container
.row
.col-12.pt-5.curr-chart
canvas#currency-chart
//- Section 6 - news
section#news
.container
.row
.col-12.pt-5
h2#latest-news.d-flex.justify-content-center.align-items-center Latest News
span.refresh-icon
i.fas.fa-sync-alt.fa-sm
table.table.table-borderless.news-table
//- Section 7 - footer
section
p.footer Copyright © All rights reserved. <br>2018 Made By
a(href='https://github.com/chingu-voyage4/Toucans-Team-3') Toucon-Team-3
script(src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous")
script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js", integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl", crossorigin="anonymous")
script(src="js/bundle.min.js")