mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-05-10 02:16:35 +02:00
Updating nav and modals for FA5 launch
This commit is contained in:
Dave Gandy
parent
7d567844c8
commit
b05de6e79c
|
|
@ -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/
|
||||
|
|
|
|||
|
|
@ -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—</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 & 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">& 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! <i class="fas fas-external-link" aria-hidden="true"></i>
|
||||
Font Awesome 5 <i class="fas fas-external-link" aria-hidden="true"></i>
|
||||
</h3>
|
||||
</a>
|
||||
<div class="text-center margin-top margin-bottom">or</div>
|
||||
|
|
|
|||
|
|
@ -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! <i class="fas fas-external-link" aria-hidden="true"></i>
|
||||
Font Awesome 5 <i class="fas fas-external-link" aria-hidden="true"></i>
|
||||
</h3>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -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, & 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 <i class='fas fas-external-link'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 <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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,3 +14,5 @@
|
|||
background-color: @fa5-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-content { overflow: hidden; }
|
||||
Loading…
Reference in a new issue