Skip to content

Commit

Permalink
Latest Section (#12151)
Browse files Browse the repository at this point in the history 
* enhance latest web section

* final cleanup

* lowercase w
  • Loading branch information
@captainill @stack72
captainill authored and stack72 committed Feb 23, 2017
1 parent 229a134 commit 9f826dc
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 19 deletions.
Binary file added website/source/assets/images/webinar-image.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/source/assets/images/webinar-image@2x.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions website/source/assets/stylesheets/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@
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{
color: $white;
background-color: rgba(255, 255, 255, .2);
Expand All @@ -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{
position: relative;
display: inline-block;
Expand Down
94 changes: 90 additions & 4 deletions website/source/assets/stylesheets/_home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,13 +434,69 @@ body.page-home {
#latest-announcement{
position: relative;
margin-top: -80px;
padding: 240px 0 160px;
padding: 160px 0 200px;
color: $white;
text-align: center;
text-align: left;

>.container{
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{
Expand Down Expand Up @@ -552,7 +608,7 @@ body.page-home {

#latest-announcement{
margin-top: -140px;
padding: 320px 0 180px;
padding: 180px 0 240px;
}

#enterprise-intro{
Expand All @@ -563,7 +619,6 @@ body.page-home {

@media (max-width: 992px) {


#demos{
.terminals{
.terminal-item{
Expand All @@ -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) {
Expand Down
56 changes: 41 additions & 15 deletions website/source/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,46 @@
<div class="feature-skew" id="feature-create-bg"></div>
</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="container">
<div class="terminals row">
Expand Down Expand Up @@ -248,20 +288,6 @@
<div class="feature-skew" id="demo-bg"></div>
</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="container">
<div class="row">
Expand All @@ -276,4 +302,4 @@
</div>
</div><!-- / .container -->
<div class="feature-skew" id="enterprise-intro-bg"></div>
</div><!-- / #latest-announcement -->
</div><!-- / #enterprise-intro -->

0 comments on commit 9f826dc

Please sign in to comment.