-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (143 loc) · 7.93 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
<!doctype html>
<html>
<head lang="en">
<title> MLH x Cloudflare | Everything You Need to Know </title>
<meta charset="UTF-8" />
<script src="https://use.fontawesome.com/2fb64d5743.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<nav id="navbar">
<div class="mlh-logo-container">
<a class="logo-link" href="https://hack.mlh.io/prizes" target="_blank"><img class="mlh-logo"
src="images/mlh-logo-white.svg" /></a>
</div>
<ul class="nav-ul">
<li class="nav-li">
<a class="nav-link" href="#about-section">About</a>
</li>
<li class="nav-li">
<a class="nav-link" href="#resources-section">Resources</a>
</li>
<li class="nav-li">
<a class="nav-link" href="#projects-section">Video</a>
</li>
</nav>
</header>
<section id="welcome-section">
<div class="hero-container">
<div class="hero-text-container">
<h1 class="hero-text">How can <span class="hero-span">Cloudflare</span> take your project to the next
level?</h1>
<a href="#about-section">
<button class="hero-button">Learn More</button>
</a>
</div>
<img class="hero-graphic" src="images/hero_graphic.png" />
<div class="header-square"></div>
</div>
</section>
<section id="about-section">
<div class="prize-category-container">
<a class="sponsor-logo-link" href="https://mlh.link/cloudflare-signup" target="_blank">
<img class="sponsor-logo-card" src="images/Cloudflare_Logo_Card.png">
</a>
<h2 class="prize-category-title">Best AI Application Built with Cloudflare</h2>
<p class="sponsor-prize-category-description">
Cloudflare is one of the world’s largest networks enabling hackers like you to build, deploy, and deliver trusted
applications, no matter where you are! With Cloudflare, you’ll have all the building blocks to create a full-stack
application; from C3 (create Cloudflare command line) instance deployment to object storage. You can even run GenAI
(LLMs, text to image, Voice to text etc..) in the cloud and leverage your AI functionality via API requests using
Cloudlfare’s Workers AI! Enjoy Cloudflare’s generous free tier to get started at no cost!
<br><br>
This weekend, we want you to build an AI Application utilizing Cloudflare’s numerous services for a chance to win Arduino Kits for you and your team!
<br><br>
<a class="special-link" href="#resources-section">Check out the resources below to get started with
Cloudflare.</a>
</p>
</div>
<div class="prize-container">
<a class="prize-link">
<img class="prize-image" src="images/cloudflare_arduino_image.png">
</a>
<h2 class="prize-name">Arduino Kit</h2>
<p class="prize-description">
Win an Arduino Kit for you and each of your teammates!
<br><br>
Get started with the basics of electronics, programming, and coding. No prior knowledge is necessary - the kit will help you learn concepts like current, voltage, resistance, and developing important 21st century skills, such as problem-solving and critical thinking. Each kit will include an arduino uno board and an assortment of components to get you started (components may vary based on your region).
</p>
</div>
</section>
<section id="resources-section">
<h2 class="resources-title">How to Get Started</h2>
<p class="resources-description">
Cloudflare AI features powerful tools that can help you take your hackathon project to the next
level.
<br>
</p>
<div class="list-container">
<ul class="resources-list">
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/cloudflare-signup" target="_blank">
<img class="resource-icon" src="images/quickstart_icon.png">
<h3 class="resource-name">Cloudflare Signup</h3>
</a>
<p class="resource-description">Get started with a Cloudflare account!</p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/cloudflare-devcenter" target="_blank">
<img class="resource-icon" src="images/website_icon.png">
<h3 class="resource-name">Cloudflare AI dev center</h3>
</a>
<p class="resource-description">Build and deploy ambitious AI applications to Cloudflare's global network.</p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/cloudflare-docs" target="_blank">
<img class="resource-icon" src="images/quickstart_icon.png">
<h3 class="resource-name">Cloudflare Documentation</h3>
</a>
<p class="resource-description">Explore guides and tutorials to start building on Cloudflare's platform.</p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/cloudflare-workers" target="_blank">
<img class="resource-icon" src="images/documentation_icon.png">
<h3 class="resource-name">Cloudflare Workers AI</h3>
</a>
<p class="resource-description">Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network.</p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/cloudflare-multimodal-ai" target="_blank">
<img class="resource-icon" src="images/project_icon.png">
<h3 class="resource-name">Cloudflare Multi-modal AI Playground</h3>
</a>
<p class="resource-description">Run example models directly in your browser using Cloudflare's Multi-modal AI Playground!</p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/cloudflare-c3" target="_blank">
<img class="resource-icon" src="images/tutorial_icon.png">
<h3 class="resource-name">Cloudflare C3 CLI</h3>
</a>
<p class="resource-description">Create full-stack applications that are instantly deployed to the Cloudflare global network.
</p>
</li>
</ul>
</div>
</section>
<section id="projects-section">
<h2 class="video-title">Learn More About Cloudflare</h2>
<p class="video-description">
Get started building AI apps on Cloudflare using Pages and the GitHub starter template for a Vanilla JavaScript Chat App.
</p>
<br>
<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5UTExUQ8Fwo?si=tjMio9kZMmWFfZyq"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<footer>
</footer>
</body>
</html>