{"title":"Land Shop (TEST)","description":"\u003cbody\u003e\n\n\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eCodePen - Responsive News Card Slider\u003c\/title\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/4.3.5\/css\/swiper.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\".\/style.css\"\u003e\n\u003cstyle type=\"text\/css\"\u003e@import url(\"https:\/\/fonts.googleapis.com\/css?family=Quicksand:400,500,700\u0026subset=latin-ext\");\nhtml {\n  position: relative;\n  overflow-x: hidden !important;\n}\n\nbody {\n  font-family: \"Quicksand\", sans-serif;\n}\n\na, a:hover {\n  text-decoration: none;\n}\n\n.icon {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  stroke-width: 0;\n  stroke: currentColor;\n  fill: currentColor;\n}\n\n.background {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n.background:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.9;\n}\n.background img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  pointer-events: none;\n  user-select: none;\n}\n\n.item-bg {\n  width: 300px;\n  height: 500px;\n  position: absolute;\n  top: 30px;\n  background: transparent;\n  border-radius: 10px;\n  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);\n  opacity: 0;\n  transition: all 0.3s;\n  left: -30px;\n}\n.item-bg.active {\n  left: 0;\n  top: 0;\n  opacity: 1;\n}\n\n.news-slider {\n  z-index: 2;\n  max-width: 1300px;\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: 60px;\n}\n@media screen and (max-width: 1300px) {\n  .news-slider {\n    max-width: 1000px;\n  }\n}\n@media screen and (max-width: 576px) {\n  .news-slider {\n    margin-top: 45px;\n  }\n}\n.news-slider__wrp {\n  display: flex;\n  align-items: flex-start;\n  position: relative;\n  z-index: 2;\n}\n.news-slider__item {\n  width: 400px;\n  flex-shrink: 0;\n}\n@media screen and (max-width: 992px) {\n  .news-slider__item {\n    width: 340px;\n  }\n}\n.news-slider__item.swiper-slide {\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s;\n}\n.news-slider__item.swiper-slide-active, .news-slider__item.swiper-slide-prev, .news-slider__item.swiper-slide-next {\n  opacity: 1;\n  pointer-events: auto;\n}\n.news-slider__ctr {\n  position: absolute;\n  z-index: 12;\n  width: 100%;\n  top: 50%;\n}\n.news-slider__arrow {\n  background: #fff;\n  border: none;\n  display: inline-flex;\n  width: 50px;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  z-index: 12;\n  cursor: pointer;\n  outline: none !important;\n}\n.news-slider__arrow:focus {\n  outline: none !important;\n}\n.news-slider__arrow .icon-font {\n  display: inline-flex;\n}\n.news-slider__arrow.news-slider-prev {\n  left: 15px;\n  transform: translateY(-50%);\n}\n.news-slider__arrow.news-slider-next {\n  right: 15px;\n  transform: translateY(-50%);\n}\n.news-slider__pagination {\n  text-align: center;\n  margin-top: 50px;\n}\n.news-slider__pagination .swiper-pagination-bullet {\n  width: 13px;\n  height: 10px;\n  display: inline-block;\n  background: #fff;\n  opacity: 0.2;\n  margin: 0 5px;\n  border-radius: 20px;\n  transition: opacity 0.5s, background-color 0.5s, width 0.5s;\n  transition-delay: 0.5s, 0.5s, 0s;\n}\n.news-slider__pagination .swiper-pagination-bullet-active {\n  opacity: 1;\n  background: #ffffff;\n  width: 100px;\n  transition-delay: 0s;\n}\n@media screen and (max-width: 576px) {\n  .news-slider__pagination .swiper-pagination-bullet-active {\n    width: 70px;\n  }\n}\n.news__item {\n  padding: 40px;\n  color: #000;\n  border-radius: 10px;\n  display: block;\n  transition: all 0.3s;\n}\n@media screen and (min-width: 800px) {\n  .news__item:hover {\n    color: #222222;\n    transition-delay: 0.1s;\n  }\n  .news__item:hover .news-date, .news__item:hover .news__title, .news__item:hover .news__txt {\n    opacity: 1;\n    transition-delay: 0.1s;\n  }\n  .news__item:hover .news__img {\n    box-shadow: none;\n  }\n}\n.news__item.active {\n  color: #222222;\n}\n.news__item.active .news-date, .news__item.active .news__title, .news__item.active .news__txt {\n  opacity: 1;\n}\n.news__item.active .news__img {\n  box-shadow: none;\n}\n@media screen and (max-width: 992px) {\n  .news__item {\n    padding: 30px;\n  }\n}\n@media screen and (max-width: 576px) {\n  .news__item {\n    padding: 20px;\n  }\n}\n.news-date {\n  padding-bottom: 20px;\n  margin-bottom: 20px;\n  border-bottom: 2px solid;\n  display: inline-block;\n  opacity: 0.7;\n  transition: opacity 0.3s;\n}\n@media screen and (max-width: 576px) {\n  .news-date {\n    margin-bottom: 10px;\n    display: inline-flex;\n    align-items: center;\n    padding-bottom: 0;\n  }\n}\n.news-date__title {\n  display: block;\n  font-size: 32px;\n  margin-bottom: 10px;\n  font-weight: 500;\n}\n@media screen and (max-width: 576px) {\n  .news-date__title {\n    margin-right: 10px;\n  }\n}\n.news-date__txt {\n  font-size: 16px;\n}\n.news__title {\n  font-size: 25px;\n  font-weight: 500;\n  opacity: 0.7;\n  margin-top: 10px;\n  margin-bottom: 15px;\n  transition: opacity 0.3s;\n}\n@media screen and (max-width: 576px) {\n  .news__title {\n    font-size: 22px;\n    margin-bottom: 10px;\n  }\n}\n.news__txt {\n  margin: 10px 0;\n  line-height: 1.6em;\n  font-size: 15px;\n  opacity: 0.7;\n  transition: opacity 0.3s;\n}\n.news__img {\n  border-radius: 10px;\n  box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);\n  height: 200px;\n  margin-top: 30px;\n  width: 100%;\n  transition: all 0.3s;\n  transform-origin: 0% 0%;\n}\n@media screen and (max-width: 576px) {\n  .news__img {\n    height: 180px;\n    margin-top: 20px;\n  }\n}\n.news__img img {\n  max-width: 100%;\n  border-radius: 10px;\n  height: 100%;\n  width: 100%;\n}\n\n.auto-style8 {\n  background-color: #FFFFFF;\n}\n\n.auto-style12 {\n  line-height: 1.38;\n  font-family: \"Arial Black\";\n  color: rgb(112, 146, 191);\n  font-weight: 400;\n  font-style: normal;\n  font-variant: normal;\n  text-decoration: none;\n  vertical-align: baseline;\n  white-space: pre-wrap;\n  margin-top: 0pt;\n  margin-bottom: 0pt;\n  text-align: left;\n}\n\n\n\n\n\u003c\/style\u003e\n\n\n\n\n\u003c!-- partial:index.partial.html --\u003e\n\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cdiv class=\"background\"\u003e\n\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"item-bg\"\u003e\u003c\/div\u003e\n\n  \u003cdiv class=\"news-slider\"\u003e\n\n    \u003cp dir=\"ltr\" class=\"auto-style12\"\u003e\n  \u003cspan class=\"auto-style7\" style=\"font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;\"\u003e\n  \u003cstrong\u003e\u003cspan class=\"auto-style8\"\u003eGreat ways to FIND your Land\u003c\/span\u003e\u003c\/strong\u003e\u003c\/span\u003e\n\u003c\/p\u003e\n\n    \u003cdiv class=\"news-slider__wrp swiper-wrapper\"\u003e\n      \u003cdiv class=\"news-slider__item swiper-slide\"\u003e\n        \u003ca href=\"https:\/\/store.onlinelandsales.com\/Top_New_Subdivisions_s\/2478.htm\" class=\"news__item\"\u003e\n          \u003cdiv class=\"news-date\"\u003e\n\n          \u003c\/div\u003e\n          \u003cdiv class=\"news__title\"\u003e\n            New\n          \u003c\/div\u003e\n\n          \u003cp class=\"news__txt\"\u003e\n            (Subdivisions Just Released)\n          \u003c\/p\u003e\n\n          \u003cdiv class=\"news__img\"\u003e\n            \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0624\/8179\/3103\/files\/OK_Pittsburg_ParadiseValley20-2.jpg?v=1745768177\" alt=\"news\"\u003e\n          \u003c\/div\u003e\n        \u003c\/a\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"news-slider__item swiper-slide\"\u003e\n        \u003ca href=\"https:\/\/store.onlinelandsales.com\/searchresults.asp?Search=creek\u0026amp;Submit=\" class=\"news__item\"\u003e\n          \u003cdiv class=\"news-date\"\u003e\n\n          \u003c\/div\u003e\n          \u003cdiv class=\"news__title\"\u003e\n            Search\n          \u003c\/div\u003e\n\n          \u003cp class=\"news__txt\"\u003e\n            By Like \"Creek\" or \"Subdivision Name\"\n          \u003c\/p\u003e\n\n          \u003cdiv class=\"news__img\"\u003e\n            \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0624\/8179\/3103\/files\/TN_Decatur_WhetstonePines01-2.jpg?v=1745768178\" alt=\"news\"\u003e\n          \u003c\/div\u003e\n        \u003c\/a\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"news-slider__item swiper-slide\"\u003e\n        \u003ca href=\"https:\/\/store.onlinelandsales.com\/\" class=\"news__item\"\u003e\n          \u003cdiv class=\"news-date\"\u003e\n\n          \u003c\/div\u003e\n          \u003cdiv class=\"news__title\"\u003e\n            State\n          \u003c\/div\u003e\n\n          \u003cp class=\"news__txt\"\u003e\n            Lots By Area -The Usual Way\n          \u003c\/p\u003e\n\n          \u003cdiv class=\"news__img\"\u003e\n            \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0624\/8179\/3103\/files\/Ok_Pittsburg_PaintedHorse_20-2.jpg?v=1745768180\" alt=\"news\"\u003e\n          \u003c\/div\u003e\n        \u003c\/a\u003e\n      \u003c\/div\u003e \n\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"news-slider__ctr\"\u003e\n\n      \u003cdiv class=\"news-slider__arrows\"\u003e\n        \u003cbutton class=\"news-slider__arrow news-slider-prev\"\u003e\n          \u003cspan class=\"icon-font\"\u003e\n            \u003csvg class=\"icon icon-arrow-left\"\u003e\u003cuse xlink:href=\"#icon-arrow-left\"\u003e\u003c\/use\u003e\u003c\/svg\u003e\n          \u003c\/span\u003e\n        \u003c\/button\u003e\n        \u003cbutton class=\"news-slider__arrow news-slider-next\"\u003e\n          \u003cspan class=\"icon-font\"\u003e\n            \u003csvg class=\"icon icon-arrow-right\"\u003e\u003cuse xlink:href=\"#icon-arrow-right\"\u003e\u003c\/use\u003e\u003c\/svg\u003e\n          \u003c\/span\u003e\n        \u003c\/button\u003e\n      \u003c\/div\u003e\n\n\u003c!--       \u003cdiv class=\"news-slider__pagination\"\u003e\u003c\/div\u003e\n --\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003csvg hidden=\"hidden\"\u003e\n  \u003cdefs\u003e\n    \u003csymbol id=\"icon-arrow-left\" viewbox=\"0 0 32 32\"\u003e\n      \u003ctitle\u003earrow-left\u003c\/title\u003e\n      \u003cpath d=\"M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z\"\u003e\u003c\/path\u003e\n    \u003c\/symbol\u003e\n    \u003csymbol id=\"icon-arrow-right\" viewbox=\"0 0 32 32\"\u003e\n      \u003ctitle\u003earrow-right\u003c\/title\u003e\n      \u003cpath d=\"M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z\"\u003e\u003c\/path\u003e\n    \u003c\/symbol\u003e\n  \u003c\/defs\u003e\n\u003c\/svg\u003e\n\u003c!-- partial --\u003e\n  \u003cscript src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"\u003e\u003c\/script\u003e\n\u003cscript src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/4.3.5\/js\/swiper.min.js\"\u003e\u003c\/script\u003e\u003cscript src=\".\/script.js\"\u003e\u003c\/script\u003e\n\n\u003cscript type=\"text\/javascript\"\u003e\n  var bg = document.querySelector('.item-bg');\nvar items = document.querySelectorAll('.news__item');\nvar item = document.querySelector('.news__item');\n\nfunction cLog(content) {\n    console.log(content)\n}\n\nif($(window).width() \u003e 800) {\n    $(document).on(\"mouseover\", \".news__item\", function (_event, _element) {\n\n        var newsItem = document.querySelectorAll('.news__item');\n        newsItem.forEach(function (element, index) {\n            element.addEventListener('mouseover', function () {\n                var x = this.getBoundingClientRect().left;\n                var y = this.getBoundingClientRect().top;\n                var width = this.getBoundingClientRect().width;\n                var height = this.getBoundingClientRect().height;\n\n                $('.item-bg').addClass('active');\n                $('.news__item').removeClass('active');\n                \/\/ $('.news__item').removeClass('active');\n\n\n                bg.style.width = width + 'px';\n                bg.style.height = height + 'px';\n                bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';\n            });\n\n            element.addEventListener('mouseleave', function () {\n                $('.item-bg').removeClass('active');\n                $('.news__item').removeClass('active');\n            });\n\n        });\n\n    });\n}\n\n\nvar swiper = new Swiper('.news-slider', {\n    effect: 'coverflow',\n    grabCursor: true,\n    loop: true,\n    centeredSlides: true,\n    keyboard: true,\n    spaceBetween: 0,\n    slidesPerView: 'auto',\n    speed: 300,\n    coverflowEffect: {\n        rotate: 0,\n        stretch: 0,\n        depth: 0,\n        modifier: 3,\n        slideShadows: false\n    },\n    breakpoints: {\n        480: {\n            spaceBetween: 0,\n            centeredSlides: true\n        }\n    },\n    simulateTouch: true,\n    navigation: {\n        nextEl: '.news-slider-next',\n        prevEl: '.news-slider-prev'\n    },\n    pagination: {\n        el: '.news-slider__pagination',\n        clickable: true\n    },\n    on: {\n        init: function () {\n            var activeItem = document.querySelector('.swiper-slide-active');\n\n            var sliderItem = activeItem.querySelector('.news__item');\n\n            $('.swiper-slide-active .news__item').addClass('active');\n\n            var x = sliderItem.getBoundingClientRect().left;\n            var y = sliderItem.getBoundingClientRect().top;\n            var width = sliderItem.getBoundingClientRect().width;\n            var height = sliderItem.getBoundingClientRect().height;\n\n\n            $('.item-bg').addClass('active');\n\n            bg.style.width = width + 'px';\n            bg.style.height = height + 'px';\n            bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';\n        }\n    }\n});\n\nswiper.on('touchEnd', function () {\n    $('.news__item').removeClass('active');\n    $('.swiper-slide-active .news__item').addClass('active');\n});\n\nswiper.on('slideChange', function () {\n    $('.news__item').removeClass('active');\n});\n\nswiper.on('slideChangeTransitionEnd', function () {\n    $('.news__item').removeClass('active');\n    var activeItem = document.querySelector('.swiper-slide-active');\n\n    var sliderItem = activeItem.querySelector('.news__item');\n\n    $('.swiper-slide-active .news__item').addClass('active');\n\n    var x = sliderItem.getBoundingClientRect().left;\n    var y = sliderItem.getBoundingClientRect().top;\n    var width = sliderItem.getBoundingClientRect().width;\n    var height = sliderItem.getBoundingClientRect().height;\n\n\n    $('.item-bg').addClass('active');\n\n    bg.style.width = width + 'px';\n    bg.style.height = height + 'px';\n    bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)';\n});\n\u003c\/script\u003e\n\n\n\u003c\/body\u003e","products":[],"url":"https:\/\/store.onlinelandsales.com\/collections\/land-shop-test.oembed","provider":"Onlinelandsales","version":"1.0","type":"link"}