-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (159 loc) · 6.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="CACAO, cloud analysis, cloud management, cloud resources">
<meta name="author" content="Cyverse">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Simplify and sweeten your cloud analysis with CACAO. Bring your own cloud allocations and manage it all from an attractive, informative dashboard.">
<title>CACAO | Unleashing Sweet Cloud Potential</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav">
<div class="nav-inner">
<a href="#home">
<div class="cacaoLogo">
<img src="images/cyverse_logo_2022.png" alt="Cacao Logo">
</div>
</a>
<nav class="navLinks">
<a class="navBtn" href="https://docs.jetstream-cloud.org/ui/cacao/intro/">Guide</a>
<a class="navBtn" href="https://docs.jetstream-cloud.org/ui/cacao/tutorials/">Tutorials</a>
</nav>
</div>
</nav>
</header>
<main>
<div class="row" id="home">
<div class="col-2 left-align">
<h1>Your Sweet Spot in the Cloud</h1>
<p>Empower your team to use any cloud without complexity or the crying. </p>
<div class="btnGroup">
<a href="#explore" class="btn-primary">Explore</a>
<a href="https://cacao.jetstream-cloud.org/" class="btn-secondary">Launch with Jetstream</a>
</div>
</div>
<div class="col-2 right-align hidden-md hidden-lg">
<img src="images/cacaologoHD2-01.png" alt="CACAO logo">
</div>
</div>
<section class="container">
<div class="col-container">
<div class="col-3">
<h2 class="col-3-title">Scientists</h2>
<img src="images/Scientist.png" alt="Science Flask" class="col-3-image">
</div>
<div class="col-3">
<h2 class="col-3-title">Developers</h2>
<img src="images/DeveloperIcon.png" alt="Computer Gear" class="col-3-image">
</div>
<div class="col-3">
<h2 class="col-3-title">Educators</h2>
<img src="images/Educator_icon.png" alt="Apple and Books" class="col-3-image">
</div>
</div>
<div class="center-align">
<div class="col-3-center">
<h3 class="question-title">Why choose CACAO?</h3>
<p class="text">
CACAO makes it easier to manage cloud resources by simplifying setup and deployment, so you can get
started quickly. This lets you spend more time on your development work and less on managing details.
</p>
</div>
</div>
<div class="center-align"></div>
<div class="col-3-center">
<h3 class="question-title">What is CACAO?</h3>
<p class="text">
CACAO (Cloud-Assisted Collaborative Analysis and Optimization) is an open-source platform that helps
scientists, developers, and educators easily deploy and manage cloud resources with customizable
templates.
</p>
</div>
</section>
<div class="col-container">
<div class="col-2">
<img src="images/Allocations.png" alt="Screenshot of Allocations in CACAO" loading="lazy">
</div>
<div class="col-2">
<h3 class="info-panel-title">Automate large cloud deployments and track resource</h3>
<p class="info-panel-subtitle">Saves you time, reduces errors, and speeds up application releases.</p>
</div>
</div>
<div class="col-container">
<div class="col-2">
<img src="images/templates.png" alt="Screenshot of cloud templates in CACAO" loading="lazy">
</div>
<div class="col-2">
<h3 class="info-panel-title">Customize, scale and manage cloud resources</h3>
<p class="info-panel-subtitle">Simplify cloud management with quick adjustments to meet your project needs,
boosting productivity.</p>
</div>
</div>
<div class="col-container">
<div class="col-2">
<img src="images/vms4workshop.png" alt="Screenshot of creating a workshop in CACAO" loading="lazy">
</div>
<div class="col-2">
<h3 class="info-panel-title">Collaborate and educate</h3>
<p class="info-panel-subtitle"> A platform where you, as a researcher, developer or educator, can share and
reuse cloud setups.</p>
</div>
</div>
<div class="card-grid" id="explore">
<div class="card" alt="Infomation card section">
<img src="/images/Recipes Vector.svg" alt="Recipe book icon" class="card-image">
<h3 class="card-title">Recipes</h3>
<p class="card-subtitle">CACAO uses simple, pre-made Terraform templates that are metadata-driven. You can
create your own from scratch and share your recipe with others.
</p>
</div>
<div class="card">
<img src="images/squares.svg" alt="Square tiles icon" class="card-image">
<h3 class="card-title">Workshops</h3>
<p class="card-subtitle"> Research or teaching by sharing multiple cloud programs with collaborators reducing
installation time.</p>
</div>
<div class="card">
<img src="images/eye.svg" alt="Eye icon" class="card-image">
<h3 class="card-title">Automation</h3>
<p class="card-subtitle">Track your resource usage, and set up multiple users account at once.</p>
</div>
<div class="card">
<img src="images/Cloud.svg" alt="Cloud icon" class="card-image">
<h3 class="card-title">Cloud Support</h3>
<p class="card-subtitle"> Supports OpenStack-based research clouds such as NSF Jetstream2, and Amazon Web
Services (AWS)</p>
</div>
<div class="card">
<img src="images/Collabration.svg" alt="Social exchange icon" class="card-image">
<h3 class="card-title">Collaborative</h3>
<p class="card-subtitle"> Includes collaboration platforms like Google Colab, powered by Jupyter Notebook.</p>
</div>
<div class="card">
<img src="images/Lock icons.svg" alt="Lock that is Unlocked icon" class="card-image">
<h3 class="card-title">Open-card</h3>
<p class="card-subtitle"> Open-sourced, break free from tier limits, time restrictions, preemption, and storage
quotas. </p>
</div>
</div>
</main>
<footer class="footer">
<div class="cyverse-logo-wrapper">
<img class="cyverse-logo" src="images/cyverse_logo_2022.png" alt="Cyverse logo">
</div>
<div class="jetstream2-logo-wrapper">
<img class="jetstream2-logo" src="images/Jetstream2.png" alt="Jetstream logo">
</div>
<div class="aiira-logo-wrapper">
<img class="aaira-logo" src="images/AIIRA.png" alt="AIIRA logo">
</div>
<div class="cyverse-logo-wrapper">
<img class="coalesce-logo" src="images/Coalesce.png" alt="Coalesce logo">
</div>
</footer>
</body>
</html>