-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
238 lines (222 loc) · 11.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Atomist - Clone</title>
<link rel="icon" href="images/heart.png">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="bg-img">
<img src="images/atomist-starry-night.jpg"></img>
</div>
<!-- NAVBAR BUILT BY @juzQrios -->
<header>
<a href="https://atomist.com/" class="logo"><img src="images/logo.png" alt="Atomist Logo"></a>
<div class="hamburger hidden">☰</div>
<div class="nav">
<ul class="nav__menu">
<li class="nav__item"><a href="#">Product</a></li>
<li class="nav__item"><a href="#">Pricing</a></li>
<li class="nav__item"><a href="#">Docs</a></li>
<li class="nav__item"><a href="#">Blog</a></li>
</ul>
<ul class="nav__CTA">
<li class="nav__sign-in"><a href="#">Sign In</a></li>
<li class="nav__btn"><a href="#">Get started</a></li>
</ul>
</div>
</header>
<!-- BANNER SECTION BUILT BY @Suman -->
<section class="banner">
<div class="banner__left">
<h1>How Teams Deliver Software</h1>
<a class="button cta" href="#">Get Started for Free</a>
</div>
<div class="banner__right">
<img src="images/dashboard.png" alt="#">
</div>
</section>
<!-- PRODUCT DESCRIPTION SECTION BUILT BY @Suman -->
<div class="atomist-workflow">
<img src="images/Atomist-Team-Development.jpg" alt="Atomist Team Development">
<a href="#" class="button">Try Atomist Now!</a>
</div>
<section class="product-description">
<div class="description-col">
<img src="images/see-all-the-things.png" alt="See All The Things">
<h2>UNDERSTAND</h2>
<p class="description">Unlock information from all your development and delivery tools. See and control your entire flow.</p>
<ul>
<li><span>Always know the state of your software. See information in context, without the noise.</span></li>
<li><span>Take action right there, where you need to. No need to find the right place in four other tools.</span></li>
<li><span>Keep your team in sync and shipping with a shared view of your delivery.</span></li>
<li><span>See context in Slack, in atomist.com, or via our API.</span></li>
</ul>
</div>
<div class="description-col">
<img src="images/deploy-all-the-things.png" alt="Deploy All The Things">
<h2>CONTROL</h2>
<p class="description">Unblock delivery and let the shipping flow, be it a simple push or multi-step deployment.</p>
<ul>
<li><span>Take action directly in Atomist – create, merge, deploy, promote.</span></li>
<li><span>Deploy to Kubernetes, Pivotal Cloud Foundry, or your favorite cloud.</span></li>
<li><span>Deploy new code fast without risking production.</span></li>
<li><span>Built-in support for <a href="#">Spring</a> based microservices.</span></li>
<li><span>Built-in support for <a href="#">Kubernetes.</a></span></li>
</ul>
</div>
<div class="description-col">
<img src="images/product-automate.png" alt="Product Automate">
<h2>AUTOMATE</h2>
<p class="description">Integrate any step into your flow. Atomist’s extensible event model makes it a snap.</p>
<ul>
<li><span>Works with your existing toolset of source control, build tools, CI, deployment and security tools.</span></li>
<li><span>Automate what’s working, replace what isn’t. Atomist adapts to the way you work.</span></li>
<li><span>Add security scans to every project in one step, or as many as you need.</span></li>
<li><span>Customize and extend with a powerful open-source automation API.</span></li>
</ul>
</div>
</section>
<!--TESTIMONIALS SECTION BUILT BY @juzQrios-->
<section class="testimonials">
<!--Prev button-->
<div class="slider__change">
<span href="" class="slider__but slider__prev"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></span>
</div>
<!--Actual slider-->
<div class="slider__container">
<div class="slider__view">
<div class="slider__item">
<div class="content">Ensuring consistent provisioning and management of applications and infrastructure for a growing platform can be challenging. Atomist allows us to focus on what matters, writing valuable time saving automations that allow developers end to end visibility and control.</div>
<div class="author">– Donovan Muller, Lead Technical Partner, Barclays Africa</div>
</div>
<div class="slider__item">
<div class="content">Atomist has improved our globe-spanning team's daily workflow. It gives us a single interface to both monitor the change introduced by development as well a way to manage contributions from our community.</div>
<div class="author">– Ben Hale, Pivotal, Cloud Foundry</div>
</div>
<div class="slider__item">
<div class="content">Atomist has become a critical part (and member!) of our dev team. Allowing us to efficiently manage and monitor our development process.</div>
<div class="author">– Brian Conneen, Chief Technology Officer, Marlette Funding</div>
</div>
<div class="slider__item">
<div class="content">Atomist allows us to focus on improving our products instead of custom developer tools by making automation easy with actionable information available to all team members.</div>
<div class="author">– Tapani Moilanen, Chief Architect, Kyyti</div>
</div>
<div class="slider__item">
<div class="content">We are excited to use Atomist in our team. The bridge it forms between multiple tools is an incredible asset that will allow us to speed up development and have happier developers in the meantime.</div>
<div class="author">– Emma Wilson, nVidia</div>
</div>
<!--To clear float-->
<div style="clear:both"></div>
</div>
</div>
<!--Next button-->
<div class="slider__change">
<span href="" class="slider__but slider__next"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></span>
</div>
<!--Direct links to testimonials-->
<div class="slider__links">
<span class="slider__link__direct" style="--offset:0"> </span>
<span class="slider__link__direct" style="--offset:-900"> </span>
<span class="slider__link__direct" style="--offset:-1800"> </span>
<span class="slider__link__direct" style="--offset:-2700"> </span>
<span class="slider__link__direct" style="--offset:-3600"> </span>
</div>
</section>
<!--CODE SAMPLE SECTION BUILT BY @juzQrios-->
<section class="code">
<div class="code__header">
<div class="code__title">SIMPLE, POWERFUL, OPEN SOURCE AUTOMATION API</div>
<div class="code__subtitle">Automate your development process, increase visibility.</div>
</div>
<div class="code__selectors">
<div class="code__selector1 code__display" style="--ele:code1">Create Project</div>
<div class="code__selector2" style="--ele:code2">Update Dependencies</div>
<div class="code__selector3" style="--ele:code3">Bot Command</div>
</div>
<div class="code__samples">
<div class="code__sample code1">
<pre class="prettyprint lang-java">
@CommandHandler("Kotlin Spring 5 generator", "Generate a new spring Kotlin project")
export class KotlinSpring5 extends JavaSeed {
public projectEditor(ctx: HandlerContext, params: this): ProjectEditor {
return transformSeed;
}
}
</pre>
</div>
<div class="code__sample code2">
<pre class="prettyprint lang-java">
@CommandHandler("Upgrade versions of Spring Boot across an org", "upgrade spring boot version")
export class SpringBootVersionUpgrade extends EditorCommandSupport {
@Secret(Secrets.userToken(["repo", "user"]))
protected githubToken;
@Parameter({
displayName: "Desired Spring Boot version",
description: "The desired Spring Boot version across these repos",
pattern: /^.+$/,
validInput: "Semantic version",
required: false,
})
</pre>
</div>
<div class="code__sample code3">
<pre class="prettyprint lang-java">
@CommandHandler("Query Stack Overflow", "search so")
@Tags("stack-overflow")
export class SearchStackOverflow implements HandleCommand {
@Parameter({ description: "your search query", pattern: /^.*$/ })
public q: string;
public handle(ctx: HandlerContext): Promise {
return axios.get(`${apiSearchUrl}${encodeURIComponent(this.q)}`)
.then(res => this.handleResult(res, this.q))
.then(msg => return ctx.messageClient.respond(msg) });
}
}
</pre>
</div>
</div>
</section>
<!-- FOOTER BUILT BY @Suman -->
<footer>
<!-- footer navigation by @juzQrios -->
<div class="footer__nav">
<div class="footer__nav__container">
<div class="footer__nav__item"><a href="#">About us</a></div>
<div class="footer__nav__item"><a href="#">Terms</a></div>
<div class="footer__nav__item"><a href="#">Privacy</a></div>
<div class="footer__nav__item"><a href="#">The Composition</a></div>
<div class="footer__nav__item"><a href="#">Contact</a></div>
</div>
</div>
<!-- footer signup by @Suman -->
<div class="footer__signup">
<div>Stay In the know. Sign Up now!</div>
<input type="email" placeholder="email address">
<button type="submit">SUBSCRIBE</button>
</div>
<div class="footer__ender">
<div class="love">A clone created for learning purposes with <i class="fa fa-heart" aria-hidden="true"></i> and <i class="fa fa-music" aria-hidden="true"></i>
by <a href="https://github.com/juzQrios">@juzQrios</a> and <a href="https://github.com/SumanKisku">@suman</a> at <a href="https://chingu.io/">@Chingu Developers Network</a></div>
<div class="copyright">All copyright reversed</div>
<div class="twitter">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<div>Follow us on Twitter</div>
</div>
</div>
</footer>
</div>
<!--FOOTER BUILT BY @juzQrios-->
<div class="fixed">
<!--Let's figure out weather or not to make it interactable later-->
</div>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="js/main.js"></script>
</body>
</html>