-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (167 loc) · 8.94 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
<!doctype html>
<html>
<head lang="en">
<title> MLH x Defang | 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-sponsor">Defang</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://defang.io" target="_blank">
<img class="sponsor-logo-card" src="images/Defang_Logo_Card.png">
</a>
<h2 class ="prize-category-title">From Idea to Cloud in 5 Minutes</h2>
<p class="sponsor-prize-category-description">Defang is a radically simpler way to Develop, Deploy, and Debug hackathon projects, letting you go from idea to a
cloud-deployed application in less than 5 minutes! Build your project in any language, deploy to the cloud with a single
command and iterate seamlessly.
<br><br>
The Defang CLI is compatible with Linux, MacOS, and Windows, making it a great solution
regardless of your operating system.
<section class="how-it-works">
<h2>How Defang Works</h2>
<div class="steps">
<div class="step">
<h3>1. Develop</h3>
<p>Use <code>defang generate</code> with AI to <strong>generate project skeleton</strong> ready to be deployed for free to our playground or to your own cloud.</p>
</div>
<div class="step">
<h3>2. Deploy</h3>
<p>Use <code>defang compose up</code> to deploy your project to cloud, and <code>defang cert gen</code> to have your project <strong>run on your own domain</strong>.</p>
</div>
<div class="step">
<h3>3. Debug</h3>
<p>Defang AI automatically kicks in for any deployment issues, offering quick and accurate fixes. <strong>Saves your debugging time</strong>.</p>
</div>
</div>
</section>
<p class="sponsor-prize-category-description"> Download it today for free and save countless stress-filled hours of trying to get your application up and running on
the cloud.</p>
</div>
<div class="prize-container">
<h2 class="prize-name">Best Use of Defang</h2>
<p class ="prize prize-description">Use Defang in your project this weekend and you'll qualify to win a Touch Screen IoT Sensor for you and each of your team members! </p>
<a class="prize-link" href="https://www.seeedstudio.com/SenseCAP-Indicator-D1-p-5643.html" target="_blank">
<img class="prize-image" src="images/sensecap_indicator_image.png">
</a>
<h2 class="prize-name">SenseCAP Indicator D1</h2>
<p class="prize-description">
The SenseCAP Indicator D1 is a 4-inch Touch SCreen IoT development platform.
<br><br>
Driven by ESP32 and RP2040 dual-MCU, it supports Wi-Fi/BLE/Lora communication. This is the perfect prize for any hardware enthusiast!
<br><br>
The board comes with Type-C and Grove interfaces, supports ADC and IIC transmission protocols, and can easily connect to
other peripherals with rich GPIOs. SenseCAP Indicator is a fully open-source powerful IoT development platform for developers.
</p>
</div>
</section>
<section id="resources-section">
<h2 class="resources-title">How to Get Started</h2>
<p class="resources-description">
With Defang, you can deploy your hackathon project using a single command!
<br><br>
New to cloud deployment with Defang? Checkout the resources below to get started.
</p>
<div class="list-container">
<ul class="resources-list">
<li class="resource-item">
<a class="resource-link" href="https://defang.io" target="_blank">
<img class="resource-icon" src="images/website_icon.png">
<h3 class="resource-name">Defang.io Website</h3>
</a>
<p class="resource-description">Visit the Defang website to get an in-depth overview of the produdct! </p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/defang-docs" target="_blank">
<img class="resource-icon" src="images/documentation_icon.png">
<h3 class="resource-name">Defang Documentation</h3>
</a>
<p class="resource-description">Find everything you need to know about Defang in their documentation page.</p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/defang-github" target="_blank">
<img class="resource-icon" src="images/github_icon.png">
<h3 class="resource-name">Defang GitHub Page</h3>
</a>
<p class="resource-description">A great resource for anyone that wants to take a deep dive into the Defang code.</p>
</li>
<li class="resource-item">
<a class="resource-link" href="https://mlh.link/defang-samples" target="_blank">
<img class="resource-icon" src="images/project_icon.png">
<h3 class="resource-name">Sample Projects</h3>
</a>
<p class="resource-description">A full gallery of sample projects written in a dozen languages and frameworks! </p>
</li>
</ul>
</div>
</section>
<section id="projects-section">
<h2 class="video-title">Video Tutorial</h2>
<p class="video-description">
Learn how to deploy a project in a few simple steps from Defang's very own co-founder Lio Lunesu.
<br><br>
Deploy with Defang is a practical workshop designed to empower participants with the skills to create, deploy, and
manage cloud applications using the Defang (defang.io) tool.
<br><br>
The Defang CLI (Command Line Interface) offers a robust platform for rapid project development and deployment.
Participants will learn how to use the Defang “generate” command to create new projects, and how to deploy these
projects efficiently using the Defang “compose up” command.
<br><br>
The workshop will also cover best practices for updating project files. By the end of this session, viewers will be
proficient in using the Defang CLI to create and deploy their hackathon projects to the cloud.
<br><br>
<em>Requirements:</em>
<ul class="requirements-ul">
<li>
Computer with Windows, Mac, or Linux
</li>
<li>
Defang CLI
</li>
<li>
GitHub account
</li>
</ul>
</p>
<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/IcdsVBF60yY?si=akwE1icj4h_rNzjY"
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>