mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-28 06:21:32 +08:00
Adding Black Tie banners
This commit is contained in:
parent
3f9e231133
commit
53eafe0464
@ -1,17 +1,17 @@
|
|||||||
<div class="fonticons">
|
<div class="collapse" id="banner">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="message-container">
|
<div class="message-container">
|
||||||
<div class="tagline">
|
<div class="tagline">
|
||||||
<span id="rotating-message">Take your icon game to the next level.</span>
|
<span id="rotating-message"></span>
|
||||||
Check out <strong>Fonticons</strong>, from the maker of Font Awesome.
|
|
||||||
</div>
|
</div>
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<a id="rotating-url" class="btn btn-primary btn-block" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update">Gimme Some!</a>
|
<a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-static-top hidden-print">
|
<div class="navbar navbar-inverse navbar-static-top hidden-print">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
|
@ -1,10 +1,68 @@
|
|||||||
$(function() {
|
$(function() {
|
||||||
var ads = [
|
var ads = [
|
||||||
{ quote: "Take your icon game to the next level.", content: "ad_1_next_level"},
|
{
|
||||||
{ quote: "Subset your icons, add your own, and serve up from a CDN.", content: "ad_2_all_value_add"},
|
quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
|
||||||
{ quote: "Make your icons load 10x faster!", content: "ad_3_faster_loading"},
|
class: "fonticons",
|
||||||
{ quote: "Looking for other great icon sets?", content: "ad_4_more_icons"},
|
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update",
|
||||||
{ quote: "Need a custom icon in Font Awesome?", content: "ad_5_custom_icons"}
|
btn_text: "Gimme Some!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Subset your icons, add your own, and serve up from a CDN. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
|
||||||
|
class: "fonticons",
|
||||||
|
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_all_value_add&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Gimme Some!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
|
||||||
|
class: "fonticons",
|
||||||
|
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Gimme Some!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
|
||||||
|
class: "fonticons",
|
||||||
|
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Gimme Some!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Need a custom icon in Font Awesome? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
|
||||||
|
class: "fonticons",
|
||||||
|
url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_custom_icons&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Gimme Some!"
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{
|
||||||
|
quote: "So hot right now: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
|
||||||
|
class: "black-tie",
|
||||||
|
url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_so_hot&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Buy it Now!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
|
||||||
|
class: "black-tie",
|
||||||
|
url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Buy it Now!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Get more Awesome: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
|
||||||
|
class: "black-tie",
|
||||||
|
url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_more_awesome&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Buy it Now!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "The new hotness from the maker of Font Awesome: <strong>Black Tie</strong>, the multi-weight icon font.",
|
||||||
|
class: "black-tie",
|
||||||
|
url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_new_hotness&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Buy it Now!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
|
||||||
|
class: "black-tie",
|
||||||
|
url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.3_update",
|
||||||
|
btn_text: "Buy it Now!"
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
selectFonticonsAd();
|
selectFonticonsAd();
|
||||||
@ -96,7 +154,10 @@ $(function() {
|
|||||||
random_number = Math.floor( Math.random() * ads.length );
|
random_number = Math.floor( Math.random() * ads.length );
|
||||||
random_ad = ads[random_number];
|
random_ad = ads[random_number];
|
||||||
|
|
||||||
|
$('#banner').addClass(random_ad.class);
|
||||||
$('#rotating-message').html(random_ad.quote);
|
$('#rotating-message').html(random_ad.quote);
|
||||||
$('#rotating-url').attr("href", "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=" + random_ad.content + "&utm_campaign=promo_4.3_update");
|
$('#rotating-url').attr("href", random_ad.url);
|
||||||
|
$('#rotating-url').html(random_ad.btn_text);
|
||||||
|
$('#banner').collapse('show');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
@import "site/footer";
|
@import "site/footer";
|
||||||
@import "site/lazy";
|
@import "site/lazy";
|
||||||
@import "site/textured-bg";
|
@import "site/textured-bg";
|
||||||
@import "site/fonticons";
|
@import "site/banner-ad";
|
||||||
@import "site/fusion-ad";
|
@import "site/fusion-ad";
|
||||||
@import "site/bsap-ad";
|
@import "site/bsap-ad";
|
||||||
|
|
||||||
|
112
src/assets/less/site/banner-ad.less
Normal file
112
src/assets/less/site/banner-ad.less
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
#banner {
|
||||||
|
color: #fff;
|
||||||
|
.message-container {
|
||||||
|
display: table;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.tagline, .action {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.tagline {
|
||||||
|
font-weight: 200;
|
||||||
|
font-size: 16px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.black-tie {
|
||||||
|
@black-tie-bg: #222222;
|
||||||
|
background-color: @black-tie-bg;
|
||||||
|
border-bottom: solid 1px mix(@black-tie-bg, #fff, 95%);
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@color: @black-tie-bg;
|
||||||
|
@background: mix(#fff,@black-tie-bg,90%);
|
||||||
|
@border: mix(#fff,@black-tie-bg,60%);
|
||||||
|
font-weight: bold;
|
||||||
|
color: @color;
|
||||||
|
background-color: @background;
|
||||||
|
border-color: @border;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
text-shadow: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active,
|
||||||
|
.open > &.dropdown-toggle {
|
||||||
|
color: #fff;
|
||||||
|
background-color: darken(@border, 3%);
|
||||||
|
border-color: darken(@border, 12%);
|
||||||
|
border-bottom-color: darken(@border, 18%);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active,
|
||||||
|
.open > &.dropdown-toggle {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
&.disabled,
|
||||||
|
&[disabled],
|
||||||
|
fieldset[disabled] & {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background-color: @background;
|
||||||
|
border-color: @border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fonticons {
|
||||||
|
@fonticons-bg: #1c1e29;
|
||||||
|
@fonticons-orange: desaturate(#ff7f3f, 5%);
|
||||||
|
background-color: @fonticons-orange;
|
||||||
|
border-bottom: solid 1px mix(@fonticons-bg, @fonticons-orange, 15%);
|
||||||
|
.btn-primary {
|
||||||
|
@color: #fff;
|
||||||
|
@background: mix(#fff,@fonticons-bg,10%);
|
||||||
|
@border: @fonticons-bg;
|
||||||
|
font-weight: bold;
|
||||||
|
color: @color;
|
||||||
|
background-color: @background;
|
||||||
|
border-color: @border;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
text-shadow: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active,
|
||||||
|
.open > &.dropdown-toggle {
|
||||||
|
color: #fff;
|
||||||
|
background-color: darken(@border, 3%);
|
||||||
|
border-color: darken(@border, 12%);
|
||||||
|
border-bottom-color: darken(@border, 18%);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active,
|
||||||
|
.open > &.dropdown-toggle {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
&.disabled,
|
||||||
|
&[disabled],
|
||||||
|
fieldset[disabled] & {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background-color: @background;
|
||||||
|
border-color: @border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,62 +0,0 @@
|
|||||||
.fonticons {
|
|
||||||
@fonticons-bg: #1c1e29;
|
|
||||||
@fonticons-orange: desaturate(#ff7f3f, 5%);
|
|
||||||
background-color: @fonticons-orange;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 0;
|
|
||||||
border-bottom: solid 1px mix(@fonticons-bg, @fonticons-orange, 15%);
|
|
||||||
.message-container {
|
|
||||||
display: table;
|
|
||||||
width: auto;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.tagline, .action {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.tagline {
|
|
||||||
font-weight: 200;
|
|
||||||
font-size: 16px;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
@color: #fff;
|
|
||||||
@background: mix(#fff,@fonticons-bg,10%);
|
|
||||||
@border: @fonticons-bg;
|
|
||||||
font-weight: bold;
|
|
||||||
color: @color;
|
|
||||||
background-color: @background;
|
|
||||||
border-color: @border;
|
|
||||||
border-bottom-width: 2px;
|
|
||||||
text-shadow: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
.open > &.dropdown-toggle {
|
|
||||||
color: #fff;
|
|
||||||
background-color: darken(@border, 3%);
|
|
||||||
border-color: darken(@border, 12%);
|
|
||||||
border-bottom-color: darken(@border, 18%);
|
|
||||||
}
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
.open > &.dropdown-toggle {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
&.disabled,
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] & {
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background-color: @background;
|
|
||||||
border-color: @border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user