Latest Section (#12151)
* enhance latest web section * final cleanup * lowercase w
This commit is contained in:
Jonathan Thomas
Paul Stack
parent
229a1343b4
commit
9f826dcdab
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -30,6 +30,13 @@
|
||||||
border: 2px solid $purple;
|
border: 2px solid $purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.small-outline-btn{
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0px 15px 3px 10px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
border: 2px solid rgba(255, 255, 255, .7);
|
||||||
|
}
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: rgba(255, 255, 255, .2);
|
background-color: rgba(255, 255, 255, .2);
|
||||||
|
|
@ -41,6 +48,31 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.simple-btn{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
// Extra 3px of bottom padding compensates for ::after content
|
||||||
|
background-color: transparent;
|
||||||
|
color: $white;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none !important;
|
||||||
|
@include transition(color .3s ease-in-out);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
font-size: 1.2em;
|
||||||
|
content: "»";
|
||||||
|
position: relative;
|
||||||
|
left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: rgba(255, 255, 255, .4);
|
||||||
|
@include transition(color .3s ease-in-out);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.terra-btn{
|
.terra-btn{
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
||||||
|
|
@ -434,13 +434,69 @@ body.page-home {
|
||||||
#latest-announcement{
|
#latest-announcement{
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: -80px;
|
margin-top: -80px;
|
||||||
padding: 240px 0 160px;
|
padding: 160px 0 200px;
|
||||||
color: $white;
|
color: $white;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
|
|
||||||
>.container{
|
>.container{
|
||||||
z-index: 51;
|
z-index: 51;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.latest-col-right{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 60px;
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 30px;
|
||||||
|
top: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(255, 255, 255, .15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.latest-item{
|
||||||
|
&.latest-item-text{
|
||||||
|
border-bottom: 2px solid rgba(255, 255, 255, .15);
|
||||||
|
|
||||||
|
&:first-child{
|
||||||
|
h3{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
box-shadow: 8px 8px 8px rgba(0,0,0,.25);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3{
|
||||||
|
line-height: 1.2;
|
||||||
|
font-family: $font-family-open-sans;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#latest-announcement-bg{
|
#latest-announcement-bg{
|
||||||
|
|
@ -552,7 +608,7 @@ body.page-home {
|
||||||
|
|
||||||
#latest-announcement{
|
#latest-announcement{
|
||||||
margin-top: -140px;
|
margin-top: -140px;
|
||||||
padding: 320px 0 180px;
|
padding: 180px 0 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#enterprise-intro{
|
#enterprise-intro{
|
||||||
|
|
@ -563,7 +619,6 @@ body.page-home {
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
|
|
||||||
|
|
||||||
#demos{
|
#demos{
|
||||||
.terminals{
|
.terminals{
|
||||||
.terminal-item{
|
.terminal-item{
|
||||||
|
|
@ -580,6 +635,37 @@ body.page-home {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#latest-announcement{
|
||||||
|
.latest-col-left{
|
||||||
|
.latest-item{
|
||||||
|
border-bottom: 2px solid rgba(255, 255, 255, .15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.latest-col-right{
|
||||||
|
padding-left: 15px;
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.latest-item{
|
||||||
|
padding-bottom: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
&.latest-item-text{
|
||||||
|
border-bottom: 2px solid rgba(255, 255, 255, .15);
|
||||||
|
|
||||||
|
&:first-child{
|
||||||
|
h3{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
|
||||||
|
|
@ -156,6 +156,46 @@
|
||||||
<div class="feature-skew" id="feature-create-bg"></div>
|
<div class="feature-skew" id="feature-create-bg"></div>
|
||||||
</div> <!-- /feature -->
|
</div> <!-- /feature -->
|
||||||
|
|
||||||
|
<div class="skew-item" id="latest-announcement">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-offset-1 col-md-11 col-sm-12">
|
||||||
|
<h2>Latest</h2>
|
||||||
|
</div>
|
||||||
|
<div class="latest-col latest-col-left col-md-4 col-md-offset-1 col-sm-12">
|
||||||
|
<div class="latest-item">
|
||||||
|
<img src="<%= image_path('webinar-image.jpg') %>" srcset="<%= image_path('webinar-image@2x.jpg') %> 2x, <%= image_path('webinar-image.jpg') %> 1x">
|
||||||
|
<h3 class="latest-title">Join the live webinar to learn about provisioning Microsoft Azure with HashiCorp Terraform and see a demo</h3>
|
||||||
|
<p>
|
||||||
|
<a class="outline-btn small-outline-btn" href="http://hashi.co/2lJIzDl">Register Now</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="latest-col latest-col-right col-md-6 col-sm-12">
|
||||||
|
<div class="latest-item latest-item-text">
|
||||||
|
<h3 class="latest-title">Terraform 0.8 Released</h3>
|
||||||
|
<p class="lower-opacity">
|
||||||
|
Terraform continues to be HashiCorp's fastest growing project. Read the highlights from the 0.8 release
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a class="outline-btn small-outline-btn" href="https://www.hashicorp.com/blog/terraform-0-8.html">Read more</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="latest-item latest-item-text">
|
||||||
|
<h3 class="">Applying Graph Theory to Infrastructure As Code</h3>
|
||||||
|
<p class="lower-opacity">
|
||||||
|
Watch this talk from HashiConf 2016 where we explore the graph theory at the heart of Terraform's orchestration engine.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a class="outline-btn small-outline-btn" href="https://www.youtube.com/watch?v=4Pd9NrZSbGU">Watch Video</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.container -->
|
||||||
|
<div class="feature-skew" id="latest-announcement-bg"></div>
|
||||||
|
</div><!-- /#latest-announcement -->
|
||||||
|
|
||||||
<div class="skew-item" id="demos">
|
<div class="skew-item" id="demos">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="terminals row">
|
<div class="terminals row">
|
||||||
|
|
@ -248,20 +288,6 @@
|
||||||
<div class="feature-skew" id="demo-bg"></div>
|
<div class="feature-skew" id="demo-bg"></div>
|
||||||
</div><!-- /#demos -->
|
</div><!-- /#demos -->
|
||||||
|
|
||||||
<div class="skew-item" id="latest-announcement">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-12">
|
|
||||||
<p class="lead"><strong>Latest:</strong> We’ve released Terraform 0.8!</p>
|
|
||||||
<p>
|
|
||||||
<a class="outline-btn" href="https://www.hashicorp.com/blog/terraform-0-8.html">Read more</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!-- /.container -->
|
|
||||||
<div class="feature-skew" id="latest-announcement-bg"></div>
|
|
||||||
</div><!-- /#latest-announcement -->
|
|
||||||
|
|
||||||
<div class="skew-item" id="enterprise-intro">
|
<div class="skew-item" id="enterprise-intro">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -276,4 +302,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div><!-- / .container -->
|
</div><!-- / .container -->
|
||||||
<div class="feature-skew" id="enterprise-intro-bg"></div>
|
<div class="feature-skew" id="enterprise-intro-bg"></div>
|
||||||
</div><!-- / #latest-announcement -->
|
</div><!-- / #enterprise-intro -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue