mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-05-17 22:06:36 +02:00
adjusting store-based UI and content
* adding suggestion-based call-to-action * adding a11y-friendly labels * adding product-based transitions * adding extra padding to colorway controls * converting color toggles to visual swatches * adding titles to sizes * copy updates
This commit is contained in:
Brian Talbot
parent
d6ec821786
commit
66136a0606
4
css/font-awesome.css
vendored
4
css/font-awesome.css
vendored
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
.fa-border {
|
||||
padding: .2em .25em .15em;
|
||||
border: solid 0.08em #eeeeee;
|
||||
border: solid 0.08em #eee;
|
||||
border-radius: .1em;
|
||||
}
|
||||
.fa-pull-left {
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
font-size: 2em;
|
||||
}
|
||||
.fa-inverse {
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
}
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
|
|
|
|||
2
css/font-awesome.min.css
vendored
2
css/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,9 @@
|
|||
<a class="product" href="http://www.amazon.com/Camera-Retro-T-shirt-Small-Asphalt/dp/B01ELWGV14">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
<i class="fa fa-female" title="Women"></i>
|
||||
<i class="fa fa-child" title="Kids"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="camera-asphalt">
|
||||
|
|
@ -13,16 +14,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#camera-asphalt" data-toggle="tab">Asphalt</span></li>
|
||||
<li><span data-target="#camera-kelly-green" data-toggle="tab">Kelly Green</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#camera-asphalt" data-toggle="tab"><span class="swatch swatch-asphalt" title="Asphalt"></span><span class="sr-only"> Asphalt</span></span></li>
|
||||
<li><span data-target="#camera-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">Camera Retro Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Camera Retro Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<a class="product" href="http://www.amazon.com/Mens-Classics-T-shirt-Small-Navy/dp/B01ELY5MT4">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
<i class="fa fa-female" title="Women"></i>
|
||||
<i class="fa fa-child" title="Kids"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="classics-kelly-green">
|
||||
|
|
@ -13,16 +14,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#classics-kelly-green" data-toggle="tab">Kelly Green</span></li>
|
||||
<li><span data-target="#classics-navy" data-toggle="tab">Navy</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#classics-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
|
||||
<li><span data-target="#classics-navy" data-toggle="tab"><span class="swatch swatch-navy"></span><span class="sr-only" title="Navy"> Navy</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">Classics Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Classics Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
20
src/_includes/products/cta-suggestions.html
Normal file
20
src/_includes/products/cta-suggestions.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="product-cta">
|
||||
<h3 class="cta-title">Have Ideas or Requests?</h3>
|
||||
|
||||
<div class="cta-content">
|
||||
<p>
|
||||
Got a great idea for a Font Awesome goodie or shirt? Don't see your favorite icon in a wear-able or share-able format?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We're all ears! Spend a few minutes and let us know what you'd want. If we end up using your idea, we'll send you a free copy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-success btn-block btn-lg" href="mailto:suggestions@fortawesome.com?subject=I have a store idea!">Make a Store Suggestion!</a>
|
||||
|
||||
|
||||
<p class="text-muted cta-fine-print">
|
||||
Please note: While we appreciate all suggestions, not every idea might be right for Font Awesome nor could we physically make every idea.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<a class="product" href="http://www.amazon.com/Father-T-shirt-Small-Kelly-Green/dp/B01ELXTKW0">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="father-kelly-green">
|
||||
|
|
@ -11,16 +12,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#father-kelly-green" data-toggle="tab">Kelly Green</span></li>
|
||||
<li><span data-target="#father-navy" data-toggle="tab">Navy</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#father-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
|
||||
<li><span data-target="#father-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">Fa-ther Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Fa-ther Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<a class="product" href="http://www.amazon.com/Mens-Schmancy-Green-Small-Black/dp/B01ELYOYY8">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
<i class="fa fa-female" title="Women"></i>
|
||||
<i class="fa fa-child" title="Kids"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="green-logo-black">
|
||||
|
|
@ -13,16 +14,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#green-logo-black" data-toggle="tab">Black</span></li>
|
||||
<li><span data-target="#green-logo-kelly-green" data-toggle="tab">Kelly Green</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#green-logo-black" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
|
||||
<li><span data-target="#green-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">Green Logo Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Green Logo Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<a class="product" href="http://www.amazon.com/Mens-Skool-T-shirt-Small-Navy/dp/B01ELWVHJ0">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
<i class="fa fa-female" title="Women"></i>
|
||||
<i class="fa fa-child" title="Kids"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="old-skool-kelly-green">
|
||||
|
|
@ -13,16 +14,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#old-skool-kelly-green" data-toggle="tab">Kelly Green</span></li>
|
||||
<li><span data-target="#old-skool-navy" data-toggle="tab">Navy</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#old-skool-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
|
||||
<li><span data-target="#old-skool-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">Old Skool Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Old Skool Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<a class="product" href="http://www.amazon.com/Paper-Scissors-Lizard-Spock-T-shirt/dp/B01ELX6N7U">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
<i class="fa fa-female" title="Women"></i>
|
||||
<i class="fa fa-child" title="Kids"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rpsls-blue">
|
||||
|
|
@ -10,15 +11,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#rpsls-blue" data-toggle="tab">Royal Blue</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#rpsls-blue" data-toggle="tab"><span class="swatch swatch-royalblue" title="Royal Blue"></span><span class="sr-only"> Royal Blue</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">Rock Paper Scissors Lizard Spock Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Rock Paper Scissors Lizard Spock Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<a class="product" href="http://www.amazon.com/Space-Shuttle-T-shirt-Small-Black/dp/B01ELRXO14">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
<i class="fa fa-female" title="Women"></i>
|
||||
<i class="fa fa-child" title="Kids"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="shuttle-black">
|
||||
|
|
@ -13,16 +14,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#shuttle-black" data-toggle="tab">Black</span></li>
|
||||
<li><span data-target="#shuttle-navy" data-toggle="tab">Navy</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#shuttle-black" data-toggle="tab"><span class="swatch swatch-black" title="Black"></span><span class="sr-only"> Black</span></span></li>
|
||||
<li><span data-target="#shuttle-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">Space Shuttle Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Space Shuttle Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<a class="product" href="http://www.amazon.com/Mens-Schmancy-White-T-shirt-Small/dp/B01ELYG428">
|
||||
<div class="product-sizes">
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<span class="sr-only">Available in the following sizes: </span>
|
||||
<i class="fa fa-male" title="Men"></i>
|
||||
<i class="fa fa-female" title="Women"></i>
|
||||
<i class="fa fa-child" title="Kids"></i>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="white-logo-kelly-green">
|
||||
|
|
@ -16,17 +17,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-inline text-center margin-bottom-lg">
|
||||
<li class="active"><span data-target="#white-logo-kelly-green" data-toggle="tab">Kelly Green</span></li>
|
||||
<li><span data-target="#white-logo-navy" data-toggle="tab">Navy</span></li>
|
||||
<li><span data-target="#white-logo-silver" data-toggle="tab">Silver</span></li>
|
||||
<ul class="list-inline text-center margin-bottom-0">
|
||||
<li class="active"><span data-target="#white-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
|
||||
<li><span data-target="#white-logo-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
|
||||
<li><span data-target="#white-logo-silver" data-toggle="tab"><span class="swatch swatch-silver" title="Silver"></span><span class="sr-only"> Silver</span></span></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="gg margin-bottom">
|
||||
<h3 class="gg-col product-title">White Logo Tee</h3>
|
||||
<h3 class="gg-col text-right text-success">$28</h3>
|
||||
<div class="gg margin-bottom-sm">
|
||||
<h3 class="gg-col product-title margin-top-0 margin-bottom-0">White Logo Tee</h3>
|
||||
<h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
American Apparel Fine Jersey Short Sleeve T-Shirt
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
// product vars
|
||||
@shirt-kellygreen: #249265;
|
||||
@shirt-black: #151010;
|
||||
@shirt-royalblue: #2A4DB3;
|
||||
@shirt-navy: #2E2737;
|
||||
@shirt-silver: #D4D2D3;
|
||||
@shirt-asphalt: #535059;
|
||||
|
||||
.content-underlay {
|
||||
margin-bottom: -180px;
|
||||
border-bottom: 1px solid @jumbotron-border;
|
||||
|
|
@ -7,6 +15,8 @@
|
|||
|
||||
|
||||
.product {
|
||||
transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
|
||||
transform: scale(0.99);
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -14,32 +24,62 @@
|
|||
color: @text-color;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @border-radius-small;
|
||||
padding: @buffer-lg;
|
||||
.box-shadow(0 4px 2px 0 rgba(127,127,127,.2));
|
||||
|
||||
&:hover, &:focus {
|
||||
transform: scale(1.0);
|
||||
.box-shadow(0 4px 2px 0 rgba(127,127,127,.4));
|
||||
text-decoration: none;
|
||||
color: @text-color;
|
||||
}
|
||||
&:hover {
|
||||
.box-shadow(0 4px 2px 0 rgba(127,127,127,.6));
|
||||
|
||||
.product-sizes {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
img { max-width: 100%; }
|
||||
li {
|
||||
color: @link-color;
|
||||
&:hover, &:focus {
|
||||
color: @link-hover-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
padding: @buffer-sm;
|
||||
}
|
||||
li.active {
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
&.swatch-kellygreen {
|
||||
background-color: @shirt-kellygreen;
|
||||
}
|
||||
|
||||
&.swatch-black {
|
||||
background-color: @shirt-black;
|
||||
}
|
||||
|
||||
&.swatch-navy {
|
||||
background-color: @shirt-navy;
|
||||
}
|
||||
|
||||
&.swatch-silver {
|
||||
background-color: @shirt-silver;
|
||||
}
|
||||
|
||||
&.swatch-asphalt {
|
||||
background-color: @shirt-asphalt;
|
||||
}
|
||||
|
||||
&.swatch-royalblue {
|
||||
background-color: @shirt-royalblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-sizes {
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
|
|
@ -48,7 +88,28 @@
|
|||
font-size: 21px;
|
||||
line-height: 21px;
|
||||
padding: @buffer-sm @buffer-md;
|
||||
color: @text-muted;
|
||||
color: @fa-green;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.product-title { height: 52px; }
|
||||
.product-title {
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
// calls-to-action
|
||||
.product-cta {
|
||||
display: block;
|
||||
margin-top: @buffer-xl;
|
||||
color: @text-color;
|
||||
text-decoration: none;
|
||||
border-radius: @border-radius-base;
|
||||
padding: @buffer-lg;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
margin-bottom: @buffer-lg;
|
||||
}
|
||||
|
||||
.cta-fine-print {
|
||||
margin-top: @buffer-lg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ view_class: v-store
|
|||
relative_path: ../
|
||||
---
|
||||
{% capture jumbotron_h1 %}<i class="fa fa-shopping-cart fa-lg valign-baseline" aria-hidden="true"></i> Awesome Swag{% endcapture %}
|
||||
{% capture jumbotron_p %}Support Font Awesome with some official merchandise!{% endcapture %}
|
||||
{% capture jumbotron_p %}Show your love & support of Font Awesome with official merchandise!{% endcapture %}
|
||||
|
||||
{% include jumbotron.html %}
|
||||
|
||||
|
|
@ -38,5 +38,26 @@ relative_path: ../
|
|||
<div class="col-sm-6 col-lg-4">
|
||||
{% include products/green-logo-tee.html %}
|
||||
</div>
|
||||
<div class="col-sm-12 col-lg-4">
|
||||
{% include products/cta-suggestions.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h4>About Font Awesome Products</h4>
|
||||
<p>
|
||||
There might be times where you want to insert a bit of Font Awesome in the real world. That's why we're trying out some schwag. We hope you enjoy our icons and their fun spirit out in the wild and appreciate the support you're showing and giving by doing so. <strong>You're putting the Awesome in Font Awesome!</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h4>Shipping, Tracking, & Refunding Orders</h4>
|
||||
<p>
|
||||
All of our products are managed through <a href="http://www.amazon.com/s/ref=w_bl_sl_s_ap_web_7141123011?ie=UTF8&node=7141123011&field-brandtextbin=Font+Awesome"><i class="fas fas-amazon"></i> Amazon</a>. Shipping rates and schedules are managed through their storefront. You'll be able to track your placed orders and contact Amazon's responsive support about refunds, issues, or questions. Ratings and feedback are always welcome either on the product page or <a href="mailto:suggestions@fortawesome.com">directly to us</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue