-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
259 lines (246 loc) · 12.6 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dribble Replica</title>
<!-- icons source-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- font source-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div class="main-container">
<nav>
<div id="letter">
A.
</div>
<ul class="menu">
<li><a href="#">Fund</a></li>
<li><a href="#">Index</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Financial Professionals</a></li>
<li><a href="#" id="call">Schedule a call</a></li>
</ul>
<ul class="menu medium">
<li><a href="#">Fund</a></li>
<li><a href="#">Index</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Financial Professionals</a></li>
<div class="call-container">
<a href="#" id="call">Schedule a call</a>
</div>
</ul>
</nav>
<div class="header-container">
<header>
<div class="left">
<h1>The world's first Web designer index fund</h1>
<p class="p-left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum eveniet quisquam placeat, autem cupiditate repellat fugit eligendi.</p>
<div class="left-btn-container">
<button class="btn orange">Get Started</button>
<button class="btn blue">Get Fact Sheet</button>
</div>
</div>
<div class="right">
<table>
<tr>
<td class="indexType"><span class="circle" id="blue"> </span> Hold 10 <span class="percentage"> 1364.9%</span></td>
<td class="indexType"><span class="circle" id="orange"> </span> Bitcoin <span class="percentage"> 847.3%</span></td>
<td class="indexType"><span class="circle" id="red"></span> S&P 500 <span class="percentage"> 21.1%</span></td>
</tr>
<tr id="bottom">
<!-- empty td's to even the spance ans align number under percentages-->
<td class="bottomNumber">-5.98%</td>
<td class="bottomNumber">-6.14%</td>
<td class="bottomNumber">-0.10%</td>
</tr>
</table>
<img id="graph" src="img/graph.JPG" alt="index chart">
<p class="p-right"> * Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat veniam, ut magni itaque fuga facilis, doloribus eveniet cumque vero modi, natus eius.</p>
</div>
</header>
</div>
<div class="article-container">
<article class="leftRightContainer">
<div class="left-article">
<h1>HOLD 10 Index <br>Fund</h1>
</div>
<div class="right-article">
<table class="icon-table">
<tr>
<td class="icons"><i class="fas fa-file-invoice-dollar"></i></td>
<td class="icons"><i class="far fa-credit-card"></i></td>
<td class="icons"><i class="far fa-file"></i></td>
</tr>
<tr>
<td class="small">2.5% Lorem ipsum dolor sit amet.</td>
<td class="small"> Lorem ipsum dolor sit amet.</td>
<td class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
</tr>
</table>
</div>
</article>
</div>
<!-- icons below with circular background-->
<div class="magazines">
<ul class="mag-list">
<ul><i class="fab fa-aws"></i></ul>
<ul><i class="fab fa-hooli"></i></ul>
<ul><i class="fab fa-lyft"></i></ul>
<ul><i class="fab fa-cc-amex"></i></ul>
</ul>
</div>
<!-- split article with image and number to the left-->
<div class="split-container">
<article class="split">
<div class="splitLeft">
<h1>A smart way to invest</h1>
<p class="split-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quisquam, deserunt similique rem iste dolorem?</p>
<p class="split-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione fugiat, expedita accusantium adipisci. Eum, autem, non? Quam temporibus quibusdam libero minus laboriosam nulla.</p>
<p class="split-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia magni cumque, mollitia.</p>
<p class="split-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugiat rerum quos id repudiandae vel ut aut?</p>
<p class="split-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quod libero commodi odio adipisci! Quasi aliquam error assumenda eos, eligendi eius voluptatem!</p>
</div>
<div class="splitRight">
<h2>Percentage of Total Cryptocurrency Market</h2>
<img src="img/graph-2.JPG" alt="graph chart" id="graphTwo">
<table>
<tr>
<td><span class="circle" id="blue"></span> Bitcoin </td>
<td><span class="circle" id="orange"></span> Ethereum </td>
<td><span class="circle" id="red"></span> Others </td>
</tr>
</table>
<table id="twoColumn">
<tr>
<th><span class="circle" id="blue"></span>Hold 10</th>
<th><span class="circle" id="orange"></span>Bitcoin</th>
</tr>
<tr>
<td class="left-td"><i class="fas blueChevron fa-chevron-up"></i> 0.89% <br> <span class="light">Avg Daily Return</span></td>
<td class="right-td"><i class="fas orangeChevron R fa-chevron-up"></i> 0.89% <br> <span class="light">Avg Daily Return</span></td>
</tr>
<tr>
<td class="left-td"><i class="fas blueChevron fa-chevron-up"></i> 4.93% <br> <span class="light"> Std of Daily Return</span></td>
<td class="right-td"><i class="fas orangeChevron R fa-chevron-up"></i> 5.28% <br> <span class="light">Std of Daily Return</span></td>
</tr>
<tr>
<td class="left-td"><i class="fas blueChevron fa-chevron-up"></i> 3.44 <br> <span class="light">Annualized Sharpe Ratio</span></td>
<td class="right-td"><i class="fas orangeChevron R fa-chevron-up"></i> 2.64 <br> <span class="light">Annualized Sharpe Ratio</span></td>
</tr>
</table>
<p class="disclaimer"> * Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo molestias tenetur omnis, nostrum quis ex saepe necessitatibus asperiores?</p>
</div>
</article>
</div>
<div class="slogan-container-top">
<img id="server" src="img/servers.jpg" alt="">
<div class="slogan-content">
<i class="fas fa-lock"></i>
<h1>A secure way to own cryptocurrencies</h1>
<p class="slogan-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam fugiat animi nobis eius illum. Molestiae.</p>
<p class="slogan-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ratione, ex voluptatibus ea officiis esse ipsam quidem, iure debitis rem odio distinctio, veniam maxime iusto
ex voluptatibus ea officiis esse ipsam quidem, iure debitis rem odio distinctio, veniam maxime iusto fuga ut!</p>
</div>
</div>
<div class="slogan-container-bottom">
<i class="fas fa-file-invoice-dollar"></i>
<h1>A convenient way to invest</h1>
<p class="slogan-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus porro, laborum, perferendis molestiae saepe voluptatem ad quas eaque vitae illo dolorem eum!</p>
<p class="slogan-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum expedita, aliquid doloremque ad distinctio! Tempora voluptatem eveniet quaerat tenetur dicta a neque sequi nam praesentium cumque, similique! Enim in repellat ab ipsam similique.</p>
</div>
<!-- Cards and People-->
<div class="people">
<h1>Our People</h1>
<div class="card-container">
<div class="card">
<img src="img/prrofile-pic-1.jpg" alt="" class="profile-pic">
<div class="card-body">
<h2>Justin Brewer</h2>
<h3>position</h3>
<p class="summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nam, laboriosam soluta.</p>
</div>
</div>
<div class="card">
<img src="img/profile-pic-2.jpg" alt="" class="profile-pic">
<div class="card-body">
<h2>Ashley Reyes</h2>
<h3>position</h3>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ullam architecto veniam aspernatur error.</p>
</div>
</div>
<div class="card">
<img src="img/profile-pic-3.jpg" alt="" class="profile-pic">
<div class="card-body">
<h2>Timothy Douglas</h2>
<h3>position</h3>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eveniet omnis necessitatibus, beatae autem reiciendis!</p>
</div>
</div>
<div class="card">
<img src="img/profile-pic-4.jpg" alt="" class="profile-pic">
<div class="card-body">
<h2>Lauren Garza</h2>
<h3>position</h3>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, molestias, vel.</p>
</div>
</div>
<div class="card">
<img src="img/profile-pic-5.jpg" alt="" class="profile-pic">
<div class="card-body">
<h2>Deborah Ellis</h2>
<h3>position</h3>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse illum eveniet sapiente molestias?</p>
</div>
</div>
<div class="card">
<img src="img/profile-pic-6.jpg" alt="" class="profile-pic">
<div class="card-body">
<h2>Jerry Hansen</h2>
<h3>position</h3>
<p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum est maxime, in quos possimus sint!</p>
</div>
</div>
</div>
</div>
<div class="magazines magazine-bottom">
<ul class="mag-list">
<ul><i class="fab fa-digg"></i></ul>
<ul><i class="fab fa-pied-piper-alt"></i></ul>
<ul><i class="fab fa-amazon-pay"></i></ul>
<ul><i class="fab fa-audible"></i></ul>
</ul>
</div>
<div class="investor-container">
<div class="investor-left">
<h1>Become an investor in the Index Fund</h1>
<p class="investor-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod maxime corporis ducimus assumenda quis excepturi iusto culpa ab error, enim blanditiis in cupiditate delectus?</p>
<button>
Get Started
</button>
</div>
<div class="investor-right">
<img src="img/graph-3.JPG" alt="chart graph" id="graph3">
</div>
</div>
<div class="footer-container">
<footer>
<h1>Join our newsletter to get <br> analysis from our research team <span class="social-link"><i class="fab fa-facebook-f"></i> <i class="fab fa-twitter"></i></span></h1>
<p>A Fund © 2018</p>
<div class="bottomLine">
<input type="email" placeholder="Email Address">
<button>Suscribe</button>
<ul>
<li>Privacy Policy</li>
<li>Terms of Service</li>
<li>FAQ</li>
<li>Join us</li>
</ul>
</div>
</footer>
</div>
</div>
</body>
</html>
<!--https://dribbble.com/shots/4811301--A-Fund-Webdesign-->