Updating FA Pro banners & modals

This commit is contained in:
Dave Gandy 2017-09-08 22:41:59 -04:00
parent 976f659c9c
commit 9a5db2d886
4 changed files with 20 additions and 11 deletions

View File

@ -9,6 +9,9 @@
Download Download
</h2> </h2>
</div> </div>
<h3 class="bg-fa5 margin-none padding-lg text-center">
September is your last chance to get Font Awesome Pro for just $40.
</h3>
<div class="modal-body"> <div class="modal-body">
<div class="text-lg margin-bottom-lg padding-bottom"> <div class="text-lg margin-bottom-lg padding-bottom">
Before you download, check out <b>Font Awesome Pro&mdash;</b> Before you download, check out <b>Font Awesome Pro&mdash;</b>
@ -52,10 +55,10 @@
</div> </div>
</div> </div>
<a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=september_last_chance&utm_content=download_modal" class="btn btn-success btn-lg btn-block"> <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=september_last_chance&utm_content=download_modal" class="btn btn-fa5 btn-lg btn-block">
<div>Pre-order now &amp; save big!</div> <h3 class="margin-top margin-bottom strong">
<h2 class="margin-top-sm text-sans-serif margin-bottom-sm hidden-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h2> Check out <span class="hidden-xs">Font Awesome</span><span class="hidden-sm hidden-md hidden-lg">FA</span> Pro! &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
<h3 class="margin-top-sm text-sans-serif margin-bottom-sm visible-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h3> </h3>
</a> </a>
<div class="text-center margin-top margin-bottom">or</div> <div class="text-center margin-top margin-bottom">or</div>
<a class="btn btn-default btn-lg btn-block" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip" <a class="btn btn-default btn-lg btn-block" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"

View File

@ -3,13 +3,12 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
<h3 class="modal-title" id="modal-fa5-label">Font Awesome Pro!</h3> <h3 class="modal-title" id="modal-fa5-label">Font Awesome Pro</h3>
</div> </div>
<h3 class="bg-fa5 margin-none padding-lg text-center">
September is your last chance to get Font Awesome Pro for just $40.
</h3>
<div class="modal-body"> <div class="modal-body">
<p class="lead">
September is your last chance to get FA Pro and <strong>ALL</strong> KS rewards for just $40!
</p>
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class="embed-container"> <div class="embed-container">
<iframe id="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe> <iframe id="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>

View File

@ -212,7 +212,7 @@
} }
&.fa5 { &.fa5 {
@fa5-bg: #489fdf; @fa5-bg: #488dd8;
background-color: @fa5-bg; background-color: @fa5-bg;
border-bottom: rgba(0,0,0,0.2); border-bottom: rgba(0,0,0,0.2);
.message-container { padding: 40px 0; } .message-container { padding: 40px 0; }

View File

@ -1,5 +1,7 @@
@fa5-color: #488dd8;
.btn-fa5 { .btn-fa5 {
.button-variant(#fff, #489fdf, mix(#000,#489fdf,10%)); .button-variant(#fff, @fa5-color, mix(#000,@fa5-color,10%));
font-size: 21px; font-size: 21px;
} }
@ -7,3 +9,8 @@
background-color: rgba(255,255,255,.3); background-color: rgba(255,255,255,.3);
border-color: rgba(255,255,255,.15); border-color: rgba(255,255,255,.15);
} }
.bg-fa5 {
background-color: @fa5-color;
color: #fff;
}