mirror of https://github.com/istio/istio.io.git
Simplify landing page.
This commit is contained in:
Martin Taillefer
parent
38f0255b35
commit
560e418125
|
|
@ -1,19 +1,6 @@
|
|||
---
|
||||
layout: base
|
||||
layout: default
|
||||
---
|
||||
{% include home.html %}
|
||||
|
||||
<div class="nav-hero-container">
|
||||
{% include nav.html %}
|
||||
|
||||
<div class="hero">
|
||||
<div class="container">
|
||||
<img class="logo" src="{{home}}/img/logo.png" alt="Istio">
|
||||
<h1 class="hero-lead">An open platform to connect, manage, and secure microservices</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
|
|
|
|||
|
|
@ -5,49 +5,19 @@
|
|||
@media (min-width: $desktop-small) {
|
||||
padding: 10% 0;
|
||||
}
|
||||
}
|
||||
|
||||
#myCarousel {
|
||||
@media (min-width: $tablet) {
|
||||
margin: 50px;
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
z-index: 10;
|
||||
top: 2%;
|
||||
width: 30px;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.carousel-control.left,
|
||||
.carousel-control.right { background: none }
|
||||
.carousel-control.left { left: -10px; }
|
||||
.carousel-control.right { right: -10px; }
|
||||
|
||||
.carousel-indicators li {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
text-indent: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: $mainBrandColor;
|
||||
box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.carousel-indicators .active {
|
||||
margin: 10px;
|
||||
background-color: $popBrandColor;
|
||||
}
|
||||
|
||||
.landing-image {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@media (min-width: $desktop-small) {
|
||||
max-width: 55%;
|
||||
min-height: 400px;
|
||||
max-height: 400px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
|
|
@ -77,7 +47,7 @@
|
|||
}
|
||||
|
||||
#doc-call {
|
||||
margin-top: 0;
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
@media (min-width: $tablet) {
|
||||
}
|
||||
|
|
|
|||
136
true-index.html
136
true-index.html
|
|
@ -4,89 +4,66 @@ title: Istio
|
|||
---
|
||||
{% include home.html %}
|
||||
|
||||
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="3"></li>
|
||||
</ol>
|
||||
|
||||
<!-- Wrapper for slides -->
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron traffic">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-left" src="{{home}}/img/routing.svg" alt="Traffic Management">
|
||||
<div class="section-content">
|
||||
<h2>Rich Layer-7 Routing & Traffic Management</h2>
|
||||
<p>Control the flow of traffic and API calls between services using dynamic route configuration.</p>
|
||||
<a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron resilience">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-right" src="{{home}}/img/resilience.svg" alt="Timeouts, Retries, Circuit Breakers">
|
||||
<div class="section-content">
|
||||
<h2>Resilience Across Languages and Platforms</h2>
|
||||
<p>Increase reliability by shielding applications from flaky networks and cascading failures in adverse conditions.</p>
|
||||
<a href="{{home}}/about"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron policy">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-left" src="{{home}}/img/policy.svg" alt="Policy Enforcement">
|
||||
<div class="section-content">
|
||||
<h2>Fleet-wide Policy Enforcement</h2>
|
||||
<p>Apply organizational policy to the interaction between services, ensure access policies are enforced and resources are fairly distributed among consumers.</p>
|
||||
<a href="{{home}}/docs/concepts/policy-and-control/mixer.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron reporting">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-right" src="{{home}}/img/monitoring.svg" alt="Distributed tracing and telemetry">
|
||||
<div class="section-content">
|
||||
<h2>In-depth Telemetry and Reporting</h2>
|
||||
<p>Understand the dependencies between services, the nature and flow of traffic between them and quickly identify issues with distributed tracing.</p>
|
||||
<a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="nav-hero-container">
|
||||
<div class="hero">
|
||||
<div class="container">
|
||||
<h1 class="hero-lead">An open platform to connect, manage, and secure microservices</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left and right controls -->
|
||||
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#myCarousel" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron traffic">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-left" src="{{home}}/img/routing.svg" alt="Traffic Management">
|
||||
<div class="section-content">
|
||||
<h2>Rich Layer-7 Routing & Traffic Management</h2>
|
||||
<p>Control the flow of traffic and API calls between services using dynamic route configuration.</p>
|
||||
<a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron resilience">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-right" src="{{home}}/img/resilience.svg" alt="Timeouts, Retries, Circuit Breakers">
|
||||
<div class="section-content">
|
||||
<h2>Resilience Across Languages and Platforms</h2>
|
||||
<p>Increase reliability by shielding applications from flaky networks and cascading failures in adverse conditions.</p>
|
||||
<a href="{{home}}/about"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron policy">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-left" src="{{home}}/img/policy.svg" alt="Policy Enforcement">
|
||||
<div class="section-content">
|
||||
<h2>Fleet-wide Policy Enforcement</h2>
|
||||
<p>Apply organizational policy to the interaction between services, ensure access policies are enforced and resources are fairly distributed among consumers.</p>
|
||||
<a href="{{home}}/docs/concepts/policy-and-control/mixer.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero-wrapper">
|
||||
<div class="jumbotron reporting">
|
||||
<div class="container-fluid">
|
||||
<img class="landing-image pull-right" src="{{home}}/img/monitoring.svg" alt="Distributed tracing and telemetry">
|
||||
<div class="section-content">
|
||||
<h2>In-depth Telemetry and Reporting</h2>
|
||||
<p>Understand the dependencies between services, the nature and flow of traffic between them and quickly identify issues with distributed tracing.</p>
|
||||
<a href="{{home}}/docs/concepts/what-is-istio/architecture.html"><button class="btn btn-istio btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="doc-call" class="container-fluid doc-call-container ">
|
||||
<div class="row doc-call-row">
|
||||
<div class="col-md-10 nofloat center-block">
|
||||
|
|
@ -98,4 +75,3 @@ title: Istio
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue