Augusta Headwear Category Landing Page Document
AUGUSTA HEADWEAR CATEGORY LANDING PAGE DOCUMENTATION
Purpose:
Provide instructions to embed category landing page code onto a website.
Step to Embed Landing Page:
- Update category link path /CapConfigurator?categoryName=baseball
- Want to open in same page, remove target="_blank"
Landing Page Code:
<![CDATA[
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<script type="text/javascript">
var asbFSPluginVersion = "20240510-1300";
</script>
<style>
@import url('//img1.wsimg.com/blobby/go/font/Helsinki/helsinki.css');
@font-face {font-family: 'Cinzel';font-style: normal;font-weight: 400;font-display: swap;src: url(https://img1.wsimg.com/gfonts/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfYPlDX5Z.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Cinzel';font-style: normal;font-weight: 400;font-display: swap;src: url(https://img1.wsimg.com/gfonts/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfY3lDQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
*, ::after, ::before {box-sizing: border-box;}
.categoryContainer{margin: auto;padding: 16px;}
.categoryContainer .row {display: flex;flex-wrap: wrap;margin-left: -15px;margin-right: -15px;}
.categoryContainer .col {position: relative;width: 100%;padding-left: 15px;padding-right: 15px;flex-basis: 0;flex-grow: 1;max-width: 100%;}
.categoryContainer .categoryBox {margin: 16px 0;position: relative;text-align: center;overflow: hidden;}
.categoryContainer .categoryBox::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #222222;transition: 0.5s;opacity: .45;z-index: 2;}
.categoryContainer .categoryBox img { width:100%;vertical-align: middle;border-style: none;transition: 0.5s;}
.categoryContainer .categoryBox .categoryContent {position: absolute;top: 50%;transform: translateY(-50%);left: 0;right: 0;margin: 0 auto;padding: 0 8px;z-index: 3;}
.categoryContainer .categoryBox .categoryContent h3,.categoryContainer .categoryBox .categoryContent .btn{font-family: 'Helsinki', arial, helvetica, sans-serif;}
.categoryContainer .categoryBox:hover img, .categoryContainer .categoryBox:focus img {transform: scale(1.1);}
.categoryContainer .categoryBox .categoryContent h3 {color: #FFFFFF;font-size: 36px;font-weight: 700;margin-top: 0;margin-bottom: .5rem;font-weight: 500;line-height: 1.2;}
.categoryContainer .categoryBox .categoryContent .btn {display: inline-block;font-weight: 400;color: #212529;text-align: center;vertical-align: middle;user-select: none;background-color: transparent;border: 1px solid transparent;padding: .375rem .75rem;margin-top: 25px;font-size: 20px;line-height: 1.5;border-radius: .25rem;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color: #f8f9fa;border-color: #f8f9fa;}
.categoryContainer .categoryBox .categoryContent a {color: #007bff;text-decoration: none;background-color: transparent;}
@media (min-width:576px){.categoryContainer{max-width:540px}}
@media (min-width:768px){.categoryContainer{max-width:720px}}
@media (min-width:992px){.categoryContainer{max-width:960px}}
@media (min-width:1200px){.categoryContainer{max-width:1140px}}
@media (min-width:1300px){.categoryContainer{max-width:1280px}}
@media (min-width:1400px){.categoryContainer{max-width:1360px}}
@media (min-width:1500px){.categoryContainer{max-width:1460px}}
@media (min-width:1600px){.categoryContainer{max-width:1560px}}
@media (min-width:1700px){.categoryContainer{max-width:1660px}}
@media (min-width:1800px){.categoryContainer{max-width:1760px}}
@media (min-width:1900px){.categoryContainer{max-width:1860px}}
@media (min-width:2000px){.categoryContainer{max-width:1960px}}
@media (min-width: 768px){.categoryContainer .col {flex: 0 0 33.333333%;max-width: 33.333333%;}}
@media (max-width:767.98px){.categoryContainer .col {flex: 0 0 100%;max-width: 100%;}.categoryContainer{width:100%;}}
@media screen and (min-width: 768px) and (max-width:991.98px){.categoryContainer .categoryBox .categoryContent h3 {font-size: 25px;}.categoryContainer .categoryBox .categoryContent .btn {margin-top: 15px;font-size: 15px;}}
</style>
<div class="categoryContainer">
<div class="row">
<div class="col">
<div class="categoryBox">
<img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
<div class="categoryContent">
<h3>Beanies</h3>
<a href="/CapConfigurator?categoryName=Beanies%20" class="btn" target="_blank">View More</a>
</div>
</div>
</div>
<div class="col">
<div class="categoryBox">
<img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
<div class="categoryContent">
<h3>Camo</h3>
<a href="/CapConfigurator?categoryName=Camo" class="btn" target="_blank">View More</a>
</div>
</div>
</div>
<div class="col">
<div class="categoryBox">
<img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
<div class="categoryContent">
<h3>On-Field</h3>
<a href="/CapConfigurator?categoryName=On-Field" class="btn" target="_blank">View More</a>
</div>
</div>
</div>
<div class="col">
<div class="categoryBox">
<img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
<div class="categoryContent">
<h3>Outdoor</h3>
<a href="/CapConfigurator?categoryName=Outdoor%20" class="btn" target="_blank">View More</a>
</div>
</div>
</div>
<div class="col">
<div class="categoryBox">
<img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt="">
<div class="categoryContent">
<h3>Truckers / Mesh Back</h3>
<a href="/CapConfigurator?categoryName=Truckers%20%2F%20Mesh%20Back" class="btn" target="_blank">View More</a>
</div>
</div>
</div>
</div>
</div>
]]>
Note:
Here is an example page hosting the landing categories page for reference: