Updating nav and modals for FA5 launch

This commit is contained in:
Dave Gandy 2017-12-07 11:07:36 -06:00
parent 7d567844c8
commit b05de6e79c
6 changed files with 65 additions and 41 deletions

View File

@ -4,7 +4,7 @@
Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites,
created and maintained by [Dave Gandy](https://twitter.com/davegandy).
Stay up to date with the latest release and announcements on Twitter:
[@fontawesome](http://twitter.com/fontawesome).
[@fontawesome](https://twitter.com/fontawesome).
Get started at http://fontawesome.io!
@ -14,7 +14,7 @@ Get started at http://fontawesome.io!
- Font Awesome CSS, LESS, and Sass files are licensed under the MIT License:
- https://opensource.org/licenses/mit-license.html
- The Font Awesome documentation is licensed under the CC BY 3.0 License:
- http://creativecommons.org/licenses/by/3.0/
- https://creativecommons.org/licenses/by/3.0/
- Attribution is no longer required as of Font Awesome 3.0, but much appreciated:
- `Font Awesome by Dave Gandy - http://fontawesome.io`
- Full details: http://fontawesome.io/license/

View File

@ -10,22 +10,18 @@
</h2>
</div>
<h3 class="bg-fa5 margin-none padding-lg text-center">
Get 2,000+ icons with Font Awesome Pro and <strong>ALL</strong> KS rewards for just $60!
Font Awesome 5 Released!
</h3>
<div class="modal-body">
<div class="text-lg margin-bottom-lg padding-bottom">
Before you download, check out <b>Font Awesome Pro&mdash;</b>
</div>
<div class="row margin-bottom-lg">
<div class="row margin-bottom-lg margin-top">
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More Icons</h4>
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Icons</h4>
<p>
Get 2,148 icons right now with Pro, plus another 2,000 from 46 icon category packs as we finish them!
Get 893 icons right now with FA Free, plus another 1,283 icons with Pro, which also gets you another 46 icon category packs as we finish them!
</p>
</div>
</div>
@ -35,29 +31,28 @@
<i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">SVG Framework &amp; More</h4>
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">All-New SVG</h4>
<p>
Get the latest tech upgrades, easy upgrades from v4, icons in 3 styles,
<a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=download_modal#schedule-info">&amp; tons more as we finish</a>.
Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.
</p>
</div>
</div>
<div class="row margin-bottom-lg">
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<i class="fas fas-stopwatch fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-stopwatch fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
<i class="fas fas-rocket fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-rocket fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Early Access</h4>
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More</h4>
<p>
Get early access and input into new icons, categories, and frameworks with our private GitHub repo!
Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.
</p>
</div>
</div>
<a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=download_modal" class="btn btn-fa5 btn-lg btn-block">
<a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=download_modal" class="btn btn-fa5 btn-lg btn-block">
<h3 class="margin-top margin-bottom strong">
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>
Font Awesome 5 &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
</h3>
</a>
<div class="text-center margin-top margin-bottom">or</div>

View File

@ -1,23 +1,51 @@
<div class="modal" id="modal-fa5" tabindex="-1" role="dialog" aria-labelledby="modal-fa5-label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-header bg-fa5">
<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 5 Released!</h3>
</div>
<h3 class="bg-fa5 margin-none padding-lg text-center">
Get 2,000+ icons with Font Awesome Pro and <strong>ALL</strong> KS rewards for $60!
</h3>
<div class="modal-body">
<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">
<iframe id="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
<div class="row margin-bottom-lg margin-top">
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Icons</h4>
<p>
Get 893 icons right now with FA Free, plus another 1,283 icons with Pro, which also gets you another 46 icon category packs as we finish them!
</p>
</div>
</div>
<div class="row margin-bottom-lg">
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<i class="fas fas-flask fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">All-New SVG</h4>
<p>
Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.
</p>
</div>
</div>
<div class="row margin-bottom-lg">
<div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<i class="fas fas-rocket fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-rocket fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More</h4>
<p>
Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.
</p>
</div>
</div>
<a class="btn btn-fa5 btn-lg btn-block padding-left-sm padding-right-sm margin-top-lg" href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=kickstarter_modal" target="_blank"
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Pre-Order']);">
<a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=auto_modal" class="btn btn-fa5 btn-lg btn-block">
<h3 class="margin-top margin-bottom strong">
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>
Font Awesome 5 &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
</h3>
</a>

View File

@ -1,14 +1,13 @@
<div class="collapse hidden-print" id="banner">
<div class="hidden-print fa5" id="banner">
<div class="container">
<div class="message-container">
<div class="tagline">
<span id="rotating-message"></span>
<div class="time-left">
<span id="time-left-message"></span>
</div>
<strong>Font Awesome 5 released!</strong> New icons, SVG, ligatures, &amp; tons more.
</div>
<div class="action">
<a id="rotating-url" class="btn btn-primary btn-lg btn-block" href="" target="_blank"></a>
<a id="rotating-url" class="btn btn-primary btn-lg btn-block" href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=banner" target="_blank">
Font Awesome 5 &nbsp;<i class='fas fas-external-link'></i>
</a>
</div>
</div>
</div>

View File

@ -5,12 +5,12 @@ $(function () {
{
quote: "Get 2,000+ icons with Font Awesome Pro and <strong>ALL</strong> KS rewards for just $60!",
class: "fa5",
url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=two_thousand_60&utm_content=banner",
url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=fa5_released&utm_content=banner",
btn_text: "Check out FA Pro &nbsp;<i class='fas fas-external-link'></i>",
},
];
selectAd();
// selectAd();
// start the icon carousel
$('#icon-carousel').carousel({
@ -20,7 +20,7 @@ $(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
if (storageAvailable('localStorage') && !localStorage.seenFA5Modal3) {
if (storageAvailable('localStorage') && !localStorage.seenFA5ReleasedModal) {
$('#modal-fa5')
.modal('toggle')
.on('hidden.bs.modal', function (e) {
@ -30,7 +30,7 @@ $(function () {
}
if (storageAvailable('localStorage')) {
localStorage.seenFA5Modal3 = true;
localStorage.seenFA5ReleasedModal = true;
// Yippee! We can use localStorage awesomeness
}

View File

@ -14,3 +14,5 @@
background-color: @fa5-color;
color: #fff;
}
.modal-content { overflow: hidden; }