diff --git a/themes/modern2/assets/css/components/2-layout/responsive.scss b/themes/modern2/assets/css/components/2-layout/responsive.scss index 3bee19117..da5acfd2e 100755 --- a/themes/modern2/assets/css/components/2-layout/responsive.scss +++ b/themes/modern2/assets/css/components/2-layout/responsive.scss @@ -731,4 +731,99 @@ } } } + .popUp { + display: flex; + transform: translateY(100%); + position: fixed; + bottom: 0; + left: 0; + background: #f7f7f7; + z-index: 11; + animation: popUp 0.2s linear; + border-radius: 20px 20px 0 0; + padding: 40px 20px; + width: calc(100% - 40px); + @include transition; + &__inner { + width: 100%; + + &-header { + display: flex; + align-items: center; + justify-content: space-between; + &-logo { + width: 75px; + img { + width: 100%; + } + } + &-close { + display: flex; + align-items: flex-end; + justify-content: flex-end; + svg { + width: 18px; + height: 18px; + fill: #000; + } + } + } + &-body { + margin: 15px 0; + &-subtitle { + font-size: 16px; + line-height: 20px; + font-weight: 400; + color: #000000; + text-align: center; + } + &-title { + font-size: 20px; + line-height: 24px; + font-weight: 700; + color: #000000; + text-align: center; + margin-bottom: 15px; + } + } + &-footer { + &-btn { + width: 80%; + margin: 0 auto; + padding: 15px 0; + align-items: center; + justify-content: center; + color: #fff; + text-align: center; + font-size: 16px; + line-height: 20px; + border-radius: 15px; + background: $main-color; + display: flex; + } + &-close { + text-align: center; + font-size: 16px; + line-height: 20px; + font-weight: 400; + color: $main-color; + margin-top: 15px; + } + } + } + &.active { + transform: translateY(0%); + } + } + @keyframes popUp { + 0% { + opacity: 0; + transform: translateY(100%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } + } } + diff --git a/themes/modern2/assets/css/components/3-page/home.scss b/themes/modern2/assets/css/components/3-page/home.scss index 14c188714..c60a1daa6 100755 --- a/themes/modern2/assets/css/components/3-page/home.scss +++ b/themes/modern2/assets/css/components/3-page/home.scss @@ -377,6 +377,9 @@ } } // partner end +.popUp { + display: none; +} /* progressive image CSS */ @keyframes reveal { diff --git a/themes/modern2/assets/css/main.css b/themes/modern2/assets/css/main.css index ef314b1f6..bef4d5ba4 100755 --- a/themes/modern2/assets/css/main.css +++ b/themes/modern2/assets/css/main.css @@ -1586,6 +1586,10 @@ li { margin-bottom: 80px; } +.popUp { + display: none; +} + /* progressive image CSS */ @keyframes reveal { 0% { @@ -2713,4 +2717,98 @@ li { .main__body-card { margin: 0 0 0 0; } + + .popUp { + display: flex; + transform: translateY(100%); + position: fixed; + bottom: 0; + left: 0; + background: #f7f7f7; + z-index: 11; + animation: popUp 0.2s linear; + border-radius: 20px 20px 0 0; + padding: 40px 20px; + width: calc(100% - 40px); + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; + } + .popUp__inner { + width: 100%; + } + .popUp__inner-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .popUp__inner-header-logo { + width: 75px; + } + .popUp__inner-header-logo img { + width: 100%; + } + .popUp__inner-header-close { + display: flex; + align-items: flex-end; + justify-content: flex-end; + } + .popUp__inner-header-close svg { + width: 18px; + height: 18px; + fill: #000; + } + .popUp__inner-body { + margin: 15px 0; + } + .popUp__inner-body-subtitle { + font-size: 16px; + line-height: 20px; + font-weight: 400; + color: #000000; + text-align: center; + } + .popUp__inner-body-title { + font-size: 20px; + line-height: 24px; + font-weight: 700; + color: #000000; + text-align: center; + margin-bottom: 15px; + } + .popUp__inner-footer-btn { + width: 80%; + margin: 0 auto; + padding: 15px 0; + align-items: center; + justify-content: center; + color: #fff; + text-align: center; + font-size: 16px; + line-height: 20px; + border-radius: 15px; + background: #fd4c24; + display: flex; + } + .popUp__inner-footer-close { + text-align: center; + font-size: 16px; + line-height: 20px; + font-weight: 400; + color: #fd4c24; + margin-top: 15px; + } + .popUp.active { + transform: translateY(0%); + } + + @keyframes popUp { + 0% { + opacity: 0; + transform: translateY(100%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } + } } \ No newline at end of file diff --git a/themes/modern2/assets/js/main.js b/themes/modern2/assets/js/main.js index 2744ce9c8..e193fd9c8 100644 --- a/themes/modern2/assets/js/main.js +++ b/themes/modern2/assets/js/main.js @@ -20,7 +20,6 @@ $(".swiper-wrapper").slick({ arrows: true, infinite: true, - prevArrow: $(".p3"), nextArrow: $(".n3"), }); @@ -44,6 +43,17 @@ $(".newsSlider").slick({ }, ], }); +// popUp start +var popUp = document.getElementById("popUp"); +var popUpClose1 = document.getElementById("popUpClose1"); +var popUpClose2 = document.getElementById("popUpClose2"); +popUpClose1.onclick = function () { + popUp.classList.remove("active"); +}; +popUpClose2.onclick = function () { + popUp.classList.remove("active"); +}; +// popUp end $(".marquee").slick({ speed: 8000, autoplay: true, diff --git a/themes/modern2/pages/index.htm b/themes/modern2/pages/index.htm index c82428898..ba8d947f9 100644 --- a/themes/modern2/pages/index.htm +++ b/themes/modern2/pages/index.htm @@ -140,7 +140,52 @@ random = 0 - + + + \ No newline at end of file