mirror of https://github.com/istio/istio.io.git
Use a carousel on the landing page.
This commit is contained in:
Martin Taillefer
parent
0926db3664
commit
3dde957f88
|
|
@ -16,16 +16,4 @@ layout: base
|
|||
|
||||
{{ content }}
|
||||
|
||||
<div id="doc-call" class="container-fluid doc-call-container ">
|
||||
<div class="row doc-call-row">
|
||||
<div class="col-md-10 nofloat center-block">
|
||||
<div class="col-sm-9 text-center nofloat center-block">
|
||||
<h2 class="doc-call-title">Want to learn more?</h2>
|
||||
<p class="doc-call-text"> Get started by learning Istio concepts and doing our BookInfo sample.</p>
|
||||
<a href="{{home}}/docs"><button class="btn btn-istio btn-doc-call">GET STARTED</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,57 @@
|
|||
}
|
||||
}
|
||||
|
||||
#myCarousel {
|
||||
@media (min-width: $tablet) {
|
||||
margin: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
max-height: 500px;
|
||||
min-height: 400px;
|
||||
max-height: 400px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
}
|
||||
|
||||
.traffic, .policy {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ footer {
|
|||
}
|
||||
|
||||
.description {
|
||||
padding-top: 40px;
|
||||
padding-top: 20px;
|
||||
color: $light-gray;
|
||||
line-height: 1.6em;
|
||||
font-size: 0.7em;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,9 @@
|
|||
|
||||
// Landing page hero
|
||||
.hero {
|
||||
padding-bottom: 60px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: $tablet) {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-bottom: $spacing--l;
|
||||
}
|
||||
|
|
|
|||
142
true-index.html
142
true-index.html
|
|
@ -4,58 +4,98 @@ title: Istio
|
|||
---
|
||||
{% include home.html %}
|
||||
|
||||
<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-grpc waves-effect waves-light btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
<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>
|
||||
</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-grpc waves-effect waves-light 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-grpc waves-effect waves-light 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-grpc waves-effect waves-light btn-read-more">READ MORE</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<button class="btn btn-floating waves-effect down-caret" data-target="doc-call"><div class="icon-caret"></div></button>
|
||||
<!-- 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>
|
||||
|
||||
<div id="doc-call" class="container-fluid doc-call-container ">
|
||||
<div class="row doc-call-row">
|
||||
<div class="col-md-10 nofloat center-block">
|
||||
<div class="col-sm-9 text-center nofloat center-block">
|
||||
<h2 class="doc-call-title">Want to learn more?</h2>
|
||||
<p class="doc-call-text"> Get started by learning Istio concepts and doing our BookInfo sample.</p>
|
||||
<a href="{{home}}/docs"><button class="btn btn-istio btn-doc-call">GET STARTED</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue