-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
220 lines (208 loc) · 12 KB
/
index.html
File metadata and controls
220 lines (208 loc) · 12 KB
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Coconut Tech News</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-light" href="#">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#hot companies">Hot Companies</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#newsletter">Newsletter</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0 text-light" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron jumbotron-fluid bg-info text-light text-center">
<div class="container">
<h1 class="display-4">Coconut Tech News</h1>
<h4 class="display-10">Your Seed for Thought</h4>
<p class="lead">With an ever-changing tech landscape fueled by rapid advancement, we're your one-stop shop to stay in the know. Want to join the action? We can help with that too.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<img class="img-fluid" src="./Img/Blockchain2.jpg" alt=""/>
</div>
<div class="col">
<h3>On the Bleeding Edge: Decentralized Digital Currency</h3>
<p>One area of rapid development is cryptocurrency, which is enabled by blockchain technology. Cryptocurrency could have wide reaching, sizable effects on the global financial market in the not-so-distant future. And in some ways it already has.</p>
</div>
<div class="col">
<h3>Hot Companies:</h3>
<ul class="list-group">
<li class="list-group-item">
<a class="nav-link" href="#hot companies">Coinbase</a>
</li>
<li class="list-group-item">
<a class="nav-link" href="#hot companies">BlockFi</a>
</li>
<li class="list-group-item">
<a class="nav-link" href="#hot companies">TaxBit</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Companies in detail -->
<div id = "hot companies">
<div class="card-deck">
<div class="card mt-5" style="width: 18rem;">
<img class="card-img-top" src="./Img/Coinbase.png" alt="Coinbase image missing">
<div class="card-body">
<h5 class="card-title">Robust User Experience</h5>
<p class="card-text">Learn about and invest in a variety of cryptocurrencies with ease using this digital wallet, even if you're an outright beginner. Receive cryptocurrency rewards simply by watching video tutorials or using the Coinbase debit card.</p>
<span class="badge badge-pill badge-info">Digital Wallet</span>
<span class="badge badge-pill badge-info">Beginner</span>
<span class="badge badge-pill badge-info">Clean UI/UX</span>
<br> <br>
<a href="https://www.coinbase.com/" class="btn btn-primary" target="new">Visit site</a>
</div>
</div>
<div class="card mt-5" style="width: 18rem;">
<img class="card-img-top" src="./Img/BlockFi.png" alt="BlockFi image missing">
<div class="card-body">
<h5 class="card-title">A Longtime Player</h5>
<p class="card-text">Having gained the trust of cryptocurrency investors and hobbyists for several years, BlockFi is one of the leading digital wallet platforms. They also offer a credit card with cryptocurrency rewards.</p>
<span class="badge badge-pill badge-info">Digital Wallet</span>
<span class="badge badge-pill badge-info">Reputable</span>
<br> <br>
<a href="https://blockfi.com/" class="btn btn-primary" target="new">Visit site</a>
</div>
</div>
<div class="card mt-5" style="width: 18rem;">
<img class="card-img-top" src="./Img/TaxBit2.png" alt="TaxBit image missing">
<div class="card-body">
<h5 class="card-title">No Sweat Tax Filing</h5>
<p class="card-text">When it comes to filing your taxes for cryptocurrency investments, TaxBit has a compeling solution. Connect many of the most popular digital wallets to this SaaS and submit your 1099 tax statement/s directly to the IRS.</p>
<span class="badge badge-pill badge-info">Tax Filing</span>
<span class="badge badge-pill badge-info">Wide Compatibility</span>
<br> <br>
<a href="https://taxbit.com/" class="btn btn-primary" target="new">Visit site</a>
</div>
</div>
</div>
</div>
<!-- End companies in detail -->
<!-- discounts -->
<div class="jumbotron jumbotron-fluid bg-info mt-5 text-center">
<div class="container">
<h1 class="display-6 hidden-sm-down" style="color: #fff;font-family: roboto; font-weight: 900; text-transform: uppercase;">Sponsor Discounts</h1>
<p class="lead">Check out our wide array of tech discounts for members courtesy of our sponsors...</p>
<!-- button for more info on trial packages. Uses jQuery for the data-target -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#register">See Our Special Discounts</button>
</div>
</div>
<!-- end discounts -->
<!-- newsletter -->
<div id = "newsletter">
<div class="text-center">
<form>
<h1 class="text-primary mt-5 mb-3">Sign up for our Weekly Newsletter!</h1>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<!-- this old button has been replaced -->
<!-- <button type="submit" class="btn btn-primary mb-4">Submit</button> -->
<!-- this is the replacement button that inherits the attributes of the popover-dismiss class, which references jQuery to make the popover title appear or disappear -->
<button type="button" class="btn btn-secondary btn-info popover-dismiss" data-container="body" data-toggle="popover" data-placement="top" data-content="Submit your email to receive news on the latest tech trends.">
Sign up
</button>
</form>
</div>
</div>
<!-- end newsletter -->
<!-- form modal with jQuery syntax included-->
<div class="modal" tabindex="-1" id='register'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Register to receive tech deals on the latest products.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<fieldset class="form-group">
<label for="firstname">First Name: </label>
<input type="text" class="form-control" id="firstName" placeholder="First Name...">
</fieldset>
<fieldset class="form-group">
<label for="firstname">Last Name: </label>
<input type="text" class="form-control" id="lastName" placeholder="Last Name...">
</fieldset>
<fieldset class="form-group">
<label for="firstname">Email: </label>
<input type="text" class="form-control" id="email" placeholder="Email...">
</fieldset>
<fieldset class="form-group">
<label for="firstname">Password: </label>
<input type="text" class="form-control" id="password" placeholder="Password...">
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end form modal -->
<!-- media object for weekly quote -->
<div class="weeklyQuote">
<div class="media-body">
<h5 class="mt-0">Quote of the Week</h5>
<p>“It is important to view knowledge as sort of a semantic tree — make sure you understand the fundamental principles, i.e. the trunk and big branches, before you get into the leaves/details or there is nothing for them to hang on to.” — Elon Musk</p>
</div>
</div>
<!-- end media object -->
<!-- footer -->
<div class="container my-4">
<ul class="nav nav-inline">
<li class="nav-item">
<small><a class="nav-link active" href="#">Coconut Tech News</a></small>
</li>
<li class="nav-item">
<small><a class="nav-link" href="#">Inquiry@CoconutTechNews.com</a></small>
</li>
<li class="nav-item">
<small><a class="nav-link" href="#">Leads@CoconutTechNews.com</a></small>
</li>
<li class="nav-item">
<small class="nav-link">©2021 Coconut Technology News®</small>
</li>
</ul>
</div>
</div>
<!-- end footer -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<!-- this JavaScript references a jQuery command to bring up or remove a popover -->
<script>
$('.popover-dismiss').popover({
trigger: 'focus'
})
</script>
</body>
</html>