forked from CoderWised/techOS-Bell
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
306 lines (279 loc) · 15.2 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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" />
<link rel="stylesheet" href="style.css">
<body>
<div id="navBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#joinus">Join Us</a></li>
</ul>
</div>
<div class="cursor"></div>
<!-- Navigation
<div class="navbar">
<a href="#about" class="">About</a>
<a href="#events" class="">Events</a>
<a href="#testimonials" class="">Testimonials</a>
<a href="#team" class="">Team</a>
<a href="#contact" class="">Contact</a>
<a href="#joinus" class="right">Join Us</a>
</div>-->
<!-- Slide Show -->
<section>
<img class="mySlides"
src="https://cloud-fn342sml8-hack-club-bot.vercel.app/0screenshot_2022-08-30_at_11.42.24_pm.jpg"
style="width:100%; height:90vh">
<img class="mySlides"
src="https://cloud-cfwjwb01y-hack-club-bot.vercel.app/0screenshot_2022-09-13_at_2.01.52_pm.png"
style="width:100%; height:90vh">
<img class="mySlides" src="https://cloud-1pe4a62r6-hack-club-bot.vercel.app/0compressed-bg.jpg"
style="width:100%; height:90vh">
<img class="mySlides" src="https://cloud-1946czd4l-hack-club-bot.vercel.app/0hackpenn_1__1_.jpg"
style="width:100%; height:90vh">
<img class="mySlides" src="https://cloud-2flgrcltn-hack-club-bot.vercel.app/3hack_club_assemble_ltnj_01601.jpg"
style="width:100%; height:90vh">
<!-- <img class="mySlides" src="https://cloud-5ukt231zm-hack-club-bot.vercel.app/0hack_club_assemble_ltnj_00021_1.png" style="width:100%; height:90vh"> -->
<!-- <img class="mySlides" src="https://cloud-jsiqlycb5-hack-club-bot.vercel.app/0pexels-fauxels-3184433.jpg"
style="width:100%; height:90vh"> -->
<!-- <img class="mySlides" src="https://cloud-5i6wo8xw4-hack-club-bot.vercel.app/0compressed-reg-bg.jpg"
style="width:100%">
<img class="mySlides" src="https://cloud-5i6wo8xw4-hack-club-bot.vercel.app/0compressed-reg-bg.jpg"
style="width:100%"> -->
</section>
<!-- TechOS Bell Header -->
<div class="header">
<h1>Welcome to TechOS Bell!</h1>
<p>Not just that tech Community</p>
</div>
<!-- About & Description -->
<section class="w3-container w3-center w3-content" style="max-width:600px" id="about">
<h2 class="w3-wide">About Us</h2>
<p class="w3-opacity"><i>We love communities</i></p>
<p class="w3-justify">Why just that tech community, when you love no-code too! Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<!-- Vision -->
<!-- <div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco.</p>
</div>
</div> -->
<!-- Team -->
<section class="w3-row-padding w3-center" id="team">
<h2>Meet Our Team </h2>
<p>The people behind TechOS Bell</p>
<article class="team w3-third">
<p>John</p>
<img src="https://forkast.news/wp-content/uploads/2022/03/NFT-Avatar.png" alt="Random Name"
style="width:100%">
<p>John is the smartest.</p>
</article>
<article class="team w3-third">
<p>Paula</p>
<img src="https://www.playtoearn.online/wp-content/uploads/2021/10/Clone-X-NFT-avatar.png" alt="Random Name"
style="width:100%">
<p>Paula is the prettiest.</p>
</article>
<article class="team w3-third">
<p>Ringo</p>
<img src="https://cdn.dribbble.com/users/947596/screenshots/17686273/goatverse_4x.gif?compress=1&resize=400x300"
alt="Random Name" style="width:100%">
<p>Ringo is the funniest.</p>
</article>
</section>
<!-- Testimonials -->
<div id="testimonials" class="testimonials">
<div class="inner">
<h1>Testimonials</h1>
<!-- <div class="border"></div> -->
<div class="row">
<!-- Testimonial 1 -->
<div class="col">
<div class="testimonial">
<img src="./assets/1.jpg" alt="Adele Eye Profile image">
<div class="name">Adele Eye</div>
<div class="stars">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</div>
<p class="text">I am a frequent visitor of the TechOS Bell website and it has been one of my
favorite destinations for tech news and updates. The posts are fresh, engaging, and give me
a sense of being in the know. I love how they cover all aspects of tech--products, industry
news, opinion pieces, etc.--and don't get caught up in trivialities like some other sites
do!</p>
</div>
</div>
<!-- Testimonial 2 -->
<div class="col">
<div class="testimonial" id="testimonials">
<img src="./assets/2.jpg" alt="Joaquin Tesoriero Profile image">
<div class="name">Joaquin Tesoriero</div>
<div class="stars">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p class="text">The TechOS Bell has the best tech community webpage by far. Their content is
very engaging and informative. I find myself reading their articles before anything else
these days, because it's just that good!</p>
</div>
</div>
<!-- Testimonial 3 -->
<div class="col">
<div class="testimonial">
<img src="./assets/3.jpg" alt="Verdie Laumann Profile image">
<div class="name">Verdie Laumann</div>
<div class="stars">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p class="text">I am a fan of TechOS Bell website and I really like their new blog. The articles
are always very well-written with clear & concise information. It's been very difficult to
find a tech community page that provides this quality of content, but this is the best one
out there!</p>
</div>
</div>
</div>
</div>
</div>
<!--FAQ's-->
<section id="faqs">
<h1>FAQ's</h1>
<button class="accordion">01. Question one?</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex veritatis doloremque cum, ut temporibus,
voluptates dolores blanditiis vitae ad facilis voluptatem est. Illum sapiente a voluptatum. Totam eum
maxime similique?Quae eligendi, dolorem sed libero illum ducimus repellendus non recusandae enim magni,
id inventore facilis perferendis nihil delectus unde corporis iure qui voluptatum alias. Ducimus
praesentium aperiam voluptatum accusantium corrupti.</p>
</div>
<button class="accordion">02. Question two?</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, reprehenderit impedit veniam suscipit
repellendus, eius autem tempora molestiae reiciendis illo culpa aliquid provident beatae a molestias?
Ullam, sequi? Non, dolorem.Blanditiis accusamus aut quo iure sapiente molestias vitae repudiandae
voluptas assumenda, beatae laboriosam ipsa? Distinctio reprehenderit ullam voluptatem corrupti, placeat
quae iure quam blanditiis expedita laborum ut quisquam vero nisi?</p>
</div>
<button class="accordion">03. Question three?</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas non aspernatur, laborum, qui ratione
voluptate impedit veniam, molestiae quo quidem unde magni nulla voluptatibus officiis quis magnam
laboriosam. Ipsum, quasi?Modi, laudantium, tempora ipsam, quos obcaecati fuga consequuntur fugit sit
distinctio nihil error magni dicta repellat porro aliquid mollitia harum possimus cumque! Quae optio sed
ipsum aspernatur recusandae odio ad.</p>
</div>
<button class="accordion">04. Question four?</button>
<div class="panel">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium soluta sequi excepturi? Ratione
facilis a quas quae unde, est cum reprehenderit magnam officiis fuga sed, temporibus eligendi ipsum nemo
ut.Tenetur soluta laboriosam velit commodi officiis dolorum, minus quam debitis at voluptas ad, cum
suscipit laborum natus harum illo nihil! Voluptatum ducimus a tenetur exercitationem cumque porro nulla
quibusdam obcaecati.</p>
</div>
<button class="accordion">05. Question five?</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis obcaecati iste hic temporibus
cupiditate nam quia similique, porro laboriosam expedita impedit tempore voluptas, aut reiciendis,
facere nesciunt reprehenderit neque laborum.Eos, vitae dignissimos aut provident quisquam recusandae
alias excepturi laborum officia velit autem animi quaerat explicabo, quae, obcaecati eaque quam.
Voluptatibus iste praesentium, impedit tempora consectetur perspiciatis quae maiores explicabo.</p>
</div>
</section>
<!-- Contributors -->
<section class="w3-container w3-center w3-content contributor-section"
style="max-width:720px; margin-top: 42px; margin-bottom: 52px;" id="about">
<h2 class="w3-wide">Thanks to all Contributors 🏆</h2>
<hr>
<a href="https://github.com/fykaa/Sample-Portfolio-for-Learners/graphs/contributors" target="_blank">
<img src="https://contrib.rocks/image?repo=fykaa/Sample-Portfolio-for-Learners" />
</a>
<a href="https://github.com/fykaa/techOS-Bell/graphs/contributors" target="_blank">
<img src="https://contrib.rocks/image?repo=fykaa/techOS-Bell" />
</a>
</section>
<footer>
<div>
Handcrafted by
<a href="https://www.linkedin.com/in" target="_blank">
Open Source ♥ |</a>
2022 All rights reserved
<div class="footer-wrapper">
<div class="icons">
<ul>
<li>
<a title="linkedin" target="_blank" href="https://www.linkedin.com/in/"
class="ml-3 text-gray-400">
<i class="fab fa-linkedin-in icon"></i>
</a>
</li>
<li>
<a title="github" target="_blank" href="https://github.com/" class="ml-3 text-gray-400">
<i class="fab fa-github icon"></i>
</a>
</li>
<li>
<a title="twitter" target="_blank" href="https://twitter.com/" class="ml-3 text-gray-400">
<i class="fab fa-twitter icon"></i>
</a>
</li>
<li>
<a title="youtube" target="_blank" href="#" class="ml-3 text-gray-400">
<i class="fab fa-instagram icon"></i>
</a>
</li>
</ul>
</div>
</div>
<span class="floating-footer">
Copyright © | MIT License
</span>
</footer>
<script src="./script.js"></script>
</body>
</html>