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:

<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 = "20220310-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>Styles</h3> <a href="/CapConfigurator?categoryName=Styles" 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>Active / Lightweight</h3> <a href="/CapConfigurator?categoryName=Active%2FLightweight" 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>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>Sideline</h3> <a href="/CapConfigurator?categoryName=Sideline" 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 class="col"> <div class="categoryBox"> <img src="https://static.augustasportswear.com/marketing/1-HomePageUpdates2021/Images/coolcore-bg-mobile.png" alt=""> <div class="categoryContent"> <h3>Features</h3> <a href="/CapConfigurator?categoryName=Features" 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>Flexfit</h3> <a href="/CapConfigurator?categoryName=Flexfit" 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>Snapback</h3> <a href="/CapConfigurator?categoryName=Snapback" 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>Structured</h3> <a href="/CapConfigurator?categoryName=Structured" 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>Unstructured</h3> <a href="/CapConfigurator?categoryName=Unstructured" 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: