-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
executable file
·144 lines (139 loc) · 5.84 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
---
layout: landing
home: true
---
<section class="hero hero-home">
{% include masthead.html %}
<div class="hero-content">
<div class="grid-x">
<div class="cell small-12 medium-6 medium-offset-6 large-5 large-offset-7">
<div class="hero-title">
Welcome to Microclimate!
</div>
<div class="hero-subtitle">
Dive into a fast, incremental, intelligent, end-to-end development experience that puts developers in charge.
</div>
<!-- /.hero-subtitle -->
</div>
<!-- /.cell -->
</div>
<!-- /.grid-x -->
<div class="grid-x">
<div class="cell small-12 medium-8 medium-offset-4 large-6 large-offset-6 xlarge-5 xlarge-offset-7">
<div class="hero-cta-buttons">
<a href="about" class="button">Learn More</a>
<a href="installlocally#doc" class="button">Get Started Free</a>
</div>
<!-- /.cta-buttons -->
</div>
</div>
</div>
<!-- /.hero-content -->
</section>
<!-- /.hero-home -->
<section class="videos">
<div class="grid-container">
<div class="grid-x">
<div class="cell">
<div class="video_wrapper">
<div class="responsive-embed">
<video class="featured_video" src="{{site.baseurl}}/videos/MicroclimateOverview2019.mp4" controls poster="dist/images/video-poster-basic.jpg"></video>
</div>
</div>
</div>
</div>
</div>
<div class="videos_to_watch">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-shrink">
<a href="#" data-video="{{site.baseurl}}/videos/PipelineOverview_DuaneAppleby.mp4" class='showVideo'><img src="dist/images/icon-video.svg" alt="Pipeline overview video" /> Pipeline overview video (5:07)</a>
</div>
<div class="cell small-12 medium-shrink">
<a href="#" data-video="{{site.baseurl}}/videos/Microclimate_Install_18.12.mp4" class='showVideo'><img src="dist/images/icon-video.svg" alt="Microclimate install video" /> Install Microclimate (2:39)</a>
</div>
<div class="cell small-12 medium-shrink">
<a href="#" data-video="{{site.baseurl}}/videos/Microclimate_Create_18.12.mp4" class='showVideo'><img src="dist/images/icon-video.svg" alt="Microclimate create video" /> Project creation, logs and monitoring (4:46)</a>
</div>
</div>
</div>
</div>
</section>
<section class="value-props">
<div class="grid-container">
<div class="grid-x">
<div class="cell small-12">
<p class="text-cta"><a href="about">Microclimate</a> is an end-to-end development environment that lets you rapidly create, edit, and deploy applications. Applications are run in <a href="https://www.docker.com/what-container">containers</a> from day one and can be delivered into production on <a href="https://kubernetes.io">Kubernetes</a> through an automated DevOps pipeline using <a href="https://jenkins.io/">Jenkins</a>. Microclimate can be installed locally or on <a href="https://www.ibm.com/cloud-computing/products/ibm-cloud-private/">IBM Cloud Private</a>. It includes built-in template projects for Java, Node.js, and Swift web applications and can be extended to work with any language of your choice.</p>
</div>
</div>
</div>
</section>
<main class="features">
<div class="grid-container">
<div class="grid-x">
<div class="cell auto">
<div class="features_headline">Features</div>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-4">
<div class="feature">
<img src="dist/images/icon-containerized-development.svg" alt="icon-containerized-development" class="feature_icon">
<div class="feature_content">
<div class="feature_number">1</div>
<div class="feature_title">Containerized Development</div>
<p>Start from scratch using lightweight containers that are easily reproducible to match your production environment.</p>
</div>
</div>
</div>
<div class="cell medium-6 large-4">
<div class="feature second-child">
<img src="dist/images/icon-rapid-iteration.svg" alt="icon-rapid-iteration" class="feature_icon">
<div class="feature_content">
<div class="feature_number">2</div>
<div class="feature_title">Rapid Iteration</div>
<p>Lightning fast round-tripping through edit, build, and run allows real-time performance insights, regardless of what development phase you’re in.</p>
</div>
</div>
</div>
<div class="cell medium-6 large-4">
<div class="feature third-child">
<img src="dist/images/icon-integrated-devops-pipeline.svg" alt="icon-diagnostic-services" class="feature_icon">
<div class="feature_content">
<div class="feature_number">3</div>
<div class="feature_title">Integrated DevOps Pipeline</div>
<p>Get into production fast with a preconfigured DevOps pipeline that can be tailored to your needs.</p>
</div>
</div>
</div>
<div class="cell medium-6 large-4">
<div class="feature fourth-child">
<img src="dist/images/icon-diagnostic-services.svg" alt="icon-diagnostic-services" class="feature_icon">
<div class="feature_content">
<div class="feature_number">4</div>
<div class="feature_title">Diagnostic Services</div>
<p>Add capability at development time to improve problem determination in production.</p>
</div>
</div>
</div>
<div class="cell medium-6 large-4">
<div class="feature fifth-child">
<img src="dist/images/icon-intelligent-feedback.svg" alt="icon-intelligent-feedback" class="feature_icon">
<div class="feature_content">
<div class="feature_number">5</div>
<div class="feature_title">Intelligent Feedback</div>
<p>Best practices and immediate feedback to help improve your application.</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /.features -->
<section class="control-panel-man">
<div class="grid-x">
<div class="cell large-offset-4 large-8">
<img src="dist/images/control-panel-man.svg" alt="" class="">
</div>
</div>
</section>