Parallax Portfolio<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: Arial, sans-serif;\r\n line-height: 1.6;\r\n }\r\n\r\n .parallax-container {\r\n width: 100%;\r\n overflow-x: hidden;\r\n }\r\n\r\n .hero {\r\n height: 100vh;\r\n background-color: #1a1a1a;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero h1 {\r\n color: white;\r\n font-size: 4rem;\r\n text-align: center;\r\n z-index: 2;\r\n }\r\n\r\n .portfolio-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 2rem;\r\n padding: 4rem 2rem;\r\n background: #ffffff;\r\n }\r\n\r\n .portfolio-item {\r\n position: relative;\r\n overflow: hidden;\r\n aspect-ratio: 16\/9;\r\n cursor: pointer;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .portfolio-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .portfolio-item:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .portfolio-item:hover img {\r\n filter: brightness(0.7);\r\n }\r\n\r\n .portfolio-item:hover .overlay {\r\n opacity: 1;\r\n }\r\n\r\n .overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .overlay h3 {\r\n color: white;\r\n font-size: 1.5rem;\r\n text-align: center;\r\n padding: 1rem;\r\n }\r\n\r\n .parallax-section {\r\n height: 50vh;\r\n background-attachment: fixed;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .section-title {\r\n color: white;\r\n font-size: 3rem;\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero h1 {\r\n font-size: 2.5rem;\r\n }\r\n \r\n .section-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .parallax-section {\r\n background-attachment: scroll;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"parallax-container\">\r\n \r\n\r\n <div class=\"portfolio-grid\">\r\n <div class=\"portfolio-item\">\r\n\t\t\t\t<a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/bottle-openers\/\" >\r\n <img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/bottle-openers.jpg\" alt=\"BOTTLE OPENERS\">\t\r\n <div class=\"overlay\">\r\n <h3>BOTTLE OPENERS<\/h3>\r\n <\/div>\r\n\t\t\t\t\t<\/a>\r\n <\/div>\r\n <div class=\"portfolio-item\">\r\n\t\t\t\t<a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/drink-koozies\/\" >\r\n <img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/koozies-1.jpg\" alt=\"KOOZIES\">\r\n <div class=\"overlay\">\r\n <h3>KOOZIES<\/h3>\r\n <\/div>\r\n\t\t\t\t\t<\/a>\r\n <\/div>\r\n <div class=\"portfolio-item\">\r\n <a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/coolers\/\" >\r\n\t\t\t\t<img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/coolers-1.jpg\" alt=\"COOLERS\">\r\n <div class=\"overlay\">\r\n <h3>COOLERS<\/h3>\r\n <\/div>\r\n\t\t\t\t\t<\/a>\r\n <\/div>\r\n <div class=\"portfolio-item\">\r\n <a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/coasters\/\" >\r\n\t\t\t\t<img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/coasters-1.jpg\" alt=\"COASTERS\">\r\n <div class=\"overlay\">\r\n <h3>COASTERS<\/h3>\r\n <\/div>\r\n\t\t\t\t\t<\/a>\r\n <\/div>\r\n\t\t\t\r\n\t\t\t<div class=\"portfolio-item\">\r\n\t\t\t\t<a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/glasses\/\">\r\n <img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/glasses-1.jpg\" alt=\"GLASSES\">\r\n <div class=\"overlay\">\r\n <h3>GLASSES<\/h3>\r\n <\/div>\r\n\t\t\t\t\t<\/a>\r\n <\/div>\r\n <div class=\"portfolio-item\">\r\n\t\t\t <a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/tumblers\/\">\r\n <img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/tumblers-1.jpg\" alt=\"TUMBLERS\">\r\n <div class=\"overlay\">\r\n <h3>TUMBLERS<\/h3>\r\n <\/div>\r\n\t\t\t\t <\/a>\r\n <\/div>\r\n\t\t\t <div class=\"portfolio-item\">\r\n\t\t\t <a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/mugs\/\">\r\n <img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/mugs-1.jpg\" alt=\"MUGS\">\r\n <div class=\"overlay\">\r\n <h3>MUGS<\/h3>\r\n <\/div>\r\n\t\t\t\t <\/a>\r\n <\/div>\r\n\t\t\t <div class=\"portfolio-item\">\r\n\t\t\t <a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/bottles\/\">\r\n <img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/sports-bottles-1.jpg\" alt=\"BOTTLES\">\r\n <div class=\"overlay\">\r\n <h3>BOTTLES<\/h3>\r\n <\/div>\r\n\t\t\t\t <\/a>\r\n <\/div>\r\n\t\t\t <div class=\"portfolio-item\">\r\n\t\t\t <a href=\"http:\/\/69.48.168.187\/~stonewerxpromo\/stemware\/\">\r\n <img decoding=\"async\" src=\"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-content\/uploads\/2024\/12\/stemware-1.jpg\" alt=\"STEMWARE\">\r\n <div class=\"overlay\">\r\n <h3>STEMWARE<\/h3>\r\n <\/div>\r\n\t\t\t\t <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n let parallaxSections = document.querySelectorAll('.parallax-section');\r\n \r\n window.addEventListener('scroll', function() {\r\n parallaxSections.forEach(section => {\r\n let scrolled = window.pageYOffset;\r\n let rate = scrolled * 0.5;\r\n section.style.backgroundPositionY = `${-rate}px`;\r\n });\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>COASTERS DRINKWARE RELATED ITEMS Parallax Portfolio BOTTLE OPENERS KOOZIES COOLERS COASTERS GLASSES TUMBLERS MUGS BOTTLES STEMWARE<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-222508","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/pages\/222508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/comments?post=222508"}],"version-history":[{"count":13,"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/pages\/222508\/revisions"}],"predecessor-version":[{"id":222697,"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/pages\/222508\/revisions\/222697"}],"wp:attachment":[{"href":"http:\/\/69.48.168.187\/~stonewerxpromo\/wp-json\/wp\/v2\/media?parent=222508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}