FREESTYLE Category Landing Page :: Asiimages

Augusta Freestyle Category Landing Page Document

AUGUSTA FREESTYLE CATEGORY LANDING PAGE DOCUMENTATION


Purpose:

Provide instructions to embed category landing page code onto a website.

Step to Embed Landing Page:
  • Create a new page on your site Ex: /freestyle-categories
  • Copy the code below into your new page
Landing Page Code:
<script type="text/javascript"> var asbFSPluginVersion = "20211221-1103"; </script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" /> <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;max-height:580px} .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="http://asiimages.com/assets/images/Baseball.jpg" alt="Baseball"> <div class="categoryContent"> <h3>Baseball</h3> <a href="/configurator?categoryName=baseball" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Basketball.jpg" alt="Basketball"> <div class="categoryContent"> <h3>Basketball</h3> <a href="/configurator?categoryName=basketball" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/soccer.jpg" alt="Soccer"> <div class="categoryContent"> <h3>Soccer</h3> <a href="/configurator?categoryName=soccer" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Football.jpg" alt="Football"> <div class="categoryContent"> <h3>Football</h3> <a href="/configurator?categoryName=football" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Outerwear-and-Fleece.jpg" alt="Fleece"> <div class="categoryContent"> <h3>Fleece</h3> <a href="/configurator?categoryName=fleece" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/track.jpg" alt="Track"> <div class="categoryContent"> <h3>Track</h3> <a href="/configurator?categoryName=track" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/training.jpg" alt="Training"> <div class="categoryContent"> <h3>Training</h3> <a href="/configurator?categoryName=training" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/softball.jpg" alt="Softball"> <div class="categoryContent"> <h3>Softball</h3> <a href="/configurator?categoryName=softball" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/polo-logo.jpg" alt="Polos"> <div class="categoryContent"> <h3>Polos</h3> <a href="/configurator?categoryName=polo" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Turbo.jpg" alt="Turbo"> <div class="categoryContent"> <h3>Turbo</h3> <a href="/configurator?categoryName=5-day-turbo" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/volleyball.jpg" alt="Volleyball"> <div class="categoryContent"> <h3>Volleyball</h3> <a href="/configurator?categoryName=volleyball" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/baby-ruth.jpg" alt="Babe Ruth Turbo"> <div class="categoryContent"> <h3>Babe Ruth Turbo</h3> <a href="/configurator?categoryName=babe-ruth-turbo" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Masks-Gaiters-Sleeves.jpg" alt="Masks, Gaiters, & ACCS"> <div class="categoryContent"> <h3>Masks, Gaiters, & ACCS</h3> <a href="/configurator?categoryName=accessories" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/compression.jpg" alt="Compression"> <div class="categoryContent"> <h3>Compression</h3> <a href="/configurator?categoryName=compression" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Semi-Sub.jpg" alt="Semi Sublimated"> <div class="categoryContent"> <h3>Semi Sublimated</h3> <a href="/configurator?categoryName=semi-sublimated" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Fanwear.jpg" alt="Fanwear"> <div class="categoryContent"> <h3>Fanwear</h3> <a href="/configurator?categoryName=fanwear" class="btn" target="_blank">View More</a> </div> </div> </div> <div class="col"> <div class="categoryBox"> <img src="http://asiimages.com/assets/images/Lacrosse.jpg" alt="Lacrosse"> <div class="categoryContent"> <h3>Lacrosse</h3> <a href="/configurator?categoryName=lacrosse" 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: