Updating banner ad

This commit is contained in:
Dave Gandy 2016-08-10 16:01:26 -04:00
parent d0811abdc3
commit 43cd36da8d
4 changed files with 106 additions and 21 deletions

View File

@ -15,11 +15,17 @@
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
<a href="http://fortawesome.com/start?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
<i class="fa fa-fort-awesome fa-lg valign-baseline"></i>&nbsp;
Fort Awesome
</a>
</li>
<li>
<a href="http://symbolset.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Get the perfect icon set!">
<i class="fas fas-heart-ss"></i>&nbsp;
Symbolset
</a>
</li>
<li class="active">
<a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>&amp; CSS toolkit">
<i class="fa fa-font-awesome"></i>&nbsp;

View File

@ -3,31 +3,57 @@ $(function () {
var ads = [
{
quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
class: "fort-awesome",
url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.6_update",
quote: "<i class='fas fas-perfect fas-2x valign-middle margin-right'></i>Looking for the best icon sets? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.",
class: "symbolset",
url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_best_icons&utm_campaign=promo_4.6_update",
btn_text: "Gimme Some!"
},
{
quote: "Make your icons load 10x faster! Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
class: "fort-awesome",
url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.6_update",
btn_text: "Gimme Some!"
},
{
quote: "Looking for other great icon sets? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
class: "fort-awesome",
url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.6_update",
btn_text: "Gimme Some!"
},
{
quote: "Want to add your own icon? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
class: "fort-awesome",
url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.6_update",
quote: "<i class='fas fas-curate fas-2x valign-middle margin-right'></i>Need a different look for your icons? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.",
class: "symbolset",
url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_different_look&utm_campaign=promo_4.6_update",
btn_text: "Gimme Some!"
},
// {
// quote: "Fort Awesome <a href='#'>acquires</a> Symbolset!",
// class: "symbolset",
// url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_acquires&utm_campaign=promo_4.6_update",
// btn_text: "Check out Symbolset"
// },
// {
// quote: "<a href='#' class='no-underline'>Fort Awesome <i class='fa fa-plus fa-lg'></i> Symbolset = <i class='fa fa-heart fa-lg'></i></a>",
// class: "symbolset",
// url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_math&utm_campaign=promo_4.6_update",
// btn_text: "Check out Symbolset"
// },
// {
// quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
// class: "fort-awesome",
// url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.6_update",
// btn_text: "Gimme Some!"
// },
// {
// quote: "Make your icons load 10x faster! Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
// class: "fort-awesome",
// url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.6_update",
// btn_text: "Gimme Some!"
// },
// {
// quote: "Looking for other great icon sets? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
// class: "fort-awesome",
// url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.6_update",
// btn_text: "Gimme Some!"
// },
// {
// quote: "Want to add your own icon? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
// class: "fort-awesome",
// url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.6_update",
// btn_text: "Gimme Some!"
// },
//
//
// {
// quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
// class: "black-tie",

View File

@ -13,7 +13,7 @@
.tagline {
font-weight: 200;
font-size: 16px;
padding-right: 20px;
padding-right: 30px;
}
&.font-awesome-survey {
@ -159,4 +159,56 @@
}
}
}
&.symbolset {
@symbolset-bg: desaturate(#866cba,5%);
background-color: @symbolset-bg;
border-bottom: rgba(0,0,0,0.2);
a:not(.btn) {
text-decoration: underline;
color: #fff;
&:hover { color: rgba(255,255,255,.8); }
}
.btn-primary {
@color: @symbolset-bg;
@background: #fff;
@border: mix(#000,@symbolset-bg,10%);
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: rgba(0,0,0,0.2);
border-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(0,0,0,0.2);
}
&:active,
&.active,
.open > &.dropdown-toggle {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
}
}
}
}
}

View File

@ -76,7 +76,7 @@
.display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger
.no-underline:hover { text-decoration: none; }
.no-underline { text-decoration: none !important; }
.clickable { cursor: pointer; }
.strong { font-weight: bold; }
.em { font-style: italic; }
@ -110,3 +110,4 @@
}
.valign-baseline { vertical-align: baseline !important; }
.valign-middle { vertical-align: middle !important; }