mirror of https://github.com/status-im/consul.git
website - some button and section updates, add home hero start
This commit is contained in:
RJ Spiker
Jack Pearkes
parent
dc06877d8f
commit
9879835fd9
|
|
@ -1,5 +1,6 @@
|
|||
.g-btn {
|
||||
background-color: $consul-red;
|
||||
border: 2px solid $consul-red;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
|
|
@ -9,7 +10,7 @@
|
|||
letter-spacing: 0;
|
||||
line-height: 24px;
|
||||
outline: 0;
|
||||
padding: 12px 30px;
|
||||
padding: 10px 28px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: all 0.25s ease;
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
&:focus,
|
||||
&:hover {
|
||||
background-color: #ce4a86;
|
||||
border-color: #ce4a86;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
|
|
@ -30,7 +32,6 @@
|
|||
background: $white;
|
||||
border: 2px solid $white;
|
||||
color: $consul-black;
|
||||
padding: 10px 28px; /* subtracting the border, so sizes are even */
|
||||
|
||||
&:hover {
|
||||
background: $consul-black;
|
||||
|
|
@ -50,7 +51,6 @@
|
|||
&.dark-outline {
|
||||
background: none;
|
||||
border: 2px solid $consul-black;
|
||||
padding: 10px 28px; /* subtracting the border, so sizes are even */
|
||||
color: $consul-black;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -62,7 +62,6 @@
|
|||
&.white-outline {
|
||||
background: none;
|
||||
border: 2px solid $white;
|
||||
padding: 10px 28px; /* subtracting the border, so sizes are even */
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,12 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.g-btn + .g-btn {
|
||||
margin-left: 20px;
|
||||
.g-btn {
|
||||
min-width: 144px;
|
||||
padding: 10px;
|
||||
|
||||
& + .g-btn {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,6 @@
|
|||
overflow: hidden;
|
||||
padding: 96px 0;
|
||||
|
||||
& .intro {
|
||||
margin: 0 auto 64px;
|
||||
max-width: 784px;
|
||||
text-align: center;
|
||||
|
||||
& h2,
|
||||
& h3 {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
background: #f7f8fa !important; //TODO - !important is to override the `#page-home section` #fff background;
|
||||
}
|
||||
|
|
@ -26,6 +15,17 @@
|
|||
border-top: 1px solid #e5e6eb;
|
||||
}
|
||||
|
||||
& .intro {
|
||||
margin: 0 auto 64px;
|
||||
max-width: 784px;
|
||||
text-align: center;
|
||||
|
||||
& h2,
|
||||
& h3 {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin: 16px 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,73 @@
|
|||
#page-home {
|
||||
.home-hero {
|
||||
overflow: hidden;
|
||||
padding-top: 96px;
|
||||
|
||||
.g-container > div {
|
||||
display: flex;
|
||||
margin: 0 (-$site-gutter-padding);
|
||||
|
||||
& > div {
|
||||
padding: 0 ($site-gutter-padding);
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: #fce2ee;
|
||||
border-radius: 3px;
|
||||
color: #650d34;
|
||||
display: inline-block;
|
||||
font-size: 1.4rem;
|
||||
padding: 12px;
|
||||
|
||||
span {
|
||||
background: $consul-red;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700; // TODO - don't have access to this weight yet
|
||||
margin-right: 8px;
|
||||
padding: 2px 9px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.8rem;
|
||||
margin: 40px 0 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 100; // TODO - don't have access to this weight yet
|
||||
margin: 16px 0 40px;
|
||||
}
|
||||
|
||||
img {
|
||||
box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4);
|
||||
}
|
||||
|
||||
.g-btn {
|
||||
min-width: 144px;
|
||||
padding: 10px;
|
||||
|
||||
& + .g-btn {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-cta-section {
|
||||
color: $white;
|
||||
display: flex;
|
||||
|
|
@ -22,6 +91,7 @@
|
|||
max-width: 564px;
|
||||
padding: 96px 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
div:first-child {
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,32 @@ description: |-
|
|||
|
||||
<div class='consul-connect'>
|
||||
|
||||
<section class='home-hero'>
|
||||
<div class='g-container'>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a class='notification' href='#'>
|
||||
<span>New</span> Consul 1.0 release. Get the details <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><path fill="#650D34" d="M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></svg>
|
||||
</a>
|
||||
<h1>Service Mesh Made Easy</h1>
|
||||
<p>Connect, configure, and secure services in dynamic infrastructure.</p>
|
||||
<a href='#' class='g-btn download'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'>
|
||||
<path d='M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z'/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<a href='#' class='g-btn dark-outline'>Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section bg-light'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
|
|
@ -22,8 +48,8 @@ description: |-
|
|||
</div>
|
||||
<div>
|
||||
<span class='line'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
|
||||
<path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'>
|
||||
<path fill='#CA2171' d='M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z'/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class='dot'></span>
|
||||
|
|
@ -90,7 +116,7 @@ description: |-
|
|||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class="code">
|
||||
<div class='code'>
|
||||
<code>$ curl \
|
||||
--request POST \
|
||||
--data \
|
||||
|
|
@ -180,9 +206,9 @@ description: |-
|
|||
</div>
|
||||
<p>Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
|
||||
<div>
|
||||
<a href="#" class="g-btn white download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
|
||||
<path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
|
||||
<a href='#' class='g-btn white download'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'>
|
||||
<path d='M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z'/>
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
|
|
@ -196,7 +222,7 @@ description: |-
|
|||
</div>
|
||||
<p>Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.</p>
|
||||
<div>
|
||||
<a href="https://www.hashicorp.com/products/consul" class="g-btn white-outline">Learn More</a>
|
||||
<a href='https://www.hashicorp.com/products/consul' class='g-btn white-outline'>Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue