From 397389d4d0d8dc9ffef5a1c91533fb4b6bc3bac1 Mon Sep 17 00:00:00 2001 From: npy11 Date: Tue, 8 Oct 2024 19:07:53 +0530 Subject: [PATCH] banner carousel video home page added --- blocks/carousel/carousel.css | 2 + blocks/carousel/embed-banner-carousel.css | 480 +++++++++++----------- component-models.json | 4 + 3 files changed, 254 insertions(+), 232 deletions(-) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index b29ab1defd..21b51ca760 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -221,6 +221,8 @@ background-color: var(--black); opacity: .2; border: unset; + background-color: rgb(51, 51, 51); + opacity: 0.3; } .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button.selected { diff --git a/blocks/carousel/embed-banner-carousel.css b/blocks/carousel/embed-banner-carousel.css index 30faa1b80d..eccdbfd3dc 100644 --- a/blocks/carousel/embed-banner-carousel.css +++ b/blocks/carousel/embed-banner-carousel.css @@ -1,259 +1,275 @@ /* carousel Banner video comp start*/ - + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { - /* height: 440px; */ - background-size: 100%; - background-position: top; - background-repeat: no-repeat; - max-width: 100%; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground { + /* height: 440px; */ + background-size: 100%; + background-position: top; + background-repeat: no-repeat; + max-width: 100%; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground { + width: 100%; + height: 440px; + margin: 0 auto; + /* padding: 0px 12px; */ + max-width: 1240px; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text { + display: flex; + height: inherit; + align-items: center; + justify-content: end; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel.left .background .foreground .text { + justify-content: start; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel.left .background .foreground .text .long-description { + text-align: start; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description { + text-align: right; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description h1, +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description h2 { + font-size: 51px; + font-weight: 800; + line-height: 61px; + color: var(--white); + font-family: 'Nunito-Extrabold'; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:first-child { + padding: 5px 5px 0 5px; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:first-child { + margin-bottom: 8px; + padding: 0px 5px 5px 5px; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container { + margin-top: 2.25rem; + display: inline-block; + position: unset; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a { + cursor: pointer; + font-size: 18px; + font-weight: 600; + margin-right: 8px; + line-height: 30px; + padding: 16px 2.16rem; + border-radius: 8px; + color: var(--white); + font-family: 'Nunito-Semibold'; + background-color: var(--orange); + margin: 0; +} + +.sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground .text .long-description p.button-container a sub { + color: var(--white); + font-family: 'Nunito-Semibold'; + font-size: 18px; + font-weight: 600; +} + +.sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground .text .long-description p.button-container a sub:hover { + color: var(--text-color); +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a:not(.button-container:last-child a):hover { + color: var(--text-color); +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child { + line-height: 30px; + vertical-align: bottom; +} + +/* .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child a.button { + cursor: pointer; + font-size: 18px; + margin-top: 32px; + font-weight: 700; + line-height: 30px; + padding: 14px 24px; + border-radius: 8px; + vertical-align: top; + display: inline-block; + color: var(--greyishblue); + font-family: 'Nunito-Bold'; + background-color: var(--white); + margin-right: 0; + } */ + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text div.long-description p:last-child span.icon-play-circle-icon { + margin-left: 5px; + vertical-align: middle; +} + +.section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text div.long-description p:last-child span.icon-play-circle-icon img { + width: 30px; + height: 25px; +} + +.section.banner-carousel-wrapper.banner-video-carousel .teaser.block.video-component-carousel .carousel.block>.button-container { + left: 24px; + bottom: 24px; + position: absolute; +} + +.section.banner-carousel-wrapper.banner-video-carousel .teaser.block.video-component-carousel .carousel.block>.button-container button { + width: 7px; + height: 7px; + opacity: 0.3; + background-color: var(--white); +} + +.section.banner-carousel-wrapper.banner-video-carousel .teaser.block.video-component-carousel .carousel.block>.button-container button.selected { + opacity: 1; + width: 24px; + background: var(--white); +} + +.sectio .carousel-wrapper .teaser.blockn.video-component-carousel .carousel { + overflow: unset; + overflow-y: hidden; + overflow-x: auto; +} + +.section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button.video-component-carousel.selected { + background-color: var(--white); +} + +@media screen and (max-width: 1024px) { + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { + /* height: 398px; */ width: 100%; - height: 440px; - margin: 0 auto; - /* padding: 0px 12px; */ - max-width: 1240px; + background-size: 100% 100%; + object-fit: contain; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text { - display: flex; - height: inherit; - align-items: center; - justify-content: end; + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground { + margin: 0px; + height: 390px; + max-width: unset; + padding: 0 16px; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description { - text-align: right; + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:not(p.button-container) { + font-size: 40px; + line-height: 48px; } - + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description h1, .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description h2 { - font-size: 51px; - font-weight: 800; - line-height: 61px; - color: var(--white); - font-family: 'Nunito-Extrabold'; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:first-child { - padding: 5px 5px 0 5px; + font-size: 24px; + line-height: 1.2; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:first-child { - margin-bottom: 8px; - padding: 0px 5px 5px 5px; + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a, + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child a.button { + margin-top: 0px; + font-size: 14px; + font-weight: 700; + line-height: 28px; + padding: 6px 14px; + margin-bottom: 0px; + font-family: 'Nunito-Bold'; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container { - margin-top: 1rem; - display: inline-block; - position: unset; + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child a.button { + margin-top: 17px; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a { - cursor: pointer; - font-size: 18px; - font-weight: 600; - margin-right: 8px; - line-height: 30px; - padding: 14px 24px; - border-radius: 8px; - color: var(--white); - font-family: 'Nunito-Semibold'; - background-color: var(--orange); +} + +@media screen and (max-width: 767px) { + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { + /* height: 250px; */ + object-fit: contain; + display: block; + background-position: top; } - - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground .text .long-description p.button-container a sub { - color: var(--white); - font-family: 'Nunito-Semibold'; - font-size: 18px; - font-weight: 600; + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground { + margin: 0px; + height: 250px; + max-width: unset; + padding: unset; } - - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground .text .long-description p.button-container a sub:hover { - color: var(--text-color); + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text { + width: 100%; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a:not(.button-container:last-child a):hover { - color: var(--text-color); + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel.bottom .background .foreground .text { + align-items: end; + height: 90%; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child { - line-height: 30px; - vertical-align: bottom; + + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:not(p.button-container) { + font-size: 24px; + line-height: 29px; + font-family: 'Nunito-Extrabold'; } - + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a, .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child a.button { - cursor: pointer; - font-size: 18px; - margin-top: 32px; - font-weight: 700; - line-height: 30px; - padding: 14px 24px; - border-radius: 8px; - vertical-align: top; - display: inline-block; - color: var(--greyishblue); - font-family: 'Nunito-Bold'; - background-color: var(--white); + margin-top: 0px; + font-size: 11px; + padding: 4px 5px; + line-height: 22px; + margin-bottom: 0px; margin-right: 0; } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text div.long-description p:last-child span.icon-play-circle-icon { - margin-left: 5px; - vertical-align: middle; + + .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground .text .long-description p.button-container a sub { + font-size: 11px; + line-height: 22px; } - + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text div.long-description p:last-child span.icon-play-circle-icon img { - width: 30px; - height: 25px; + width: 22px; + height: 22px; } - - .section.banner-carousel-wrapper.banner-video-carousel .teaser.block.video-component-carousel .carousel.block>.button-container { - left: 24px; - bottom: 24px; - position: absolute; - } - - .section.banner-carousel-wrapper.banner-video-carousel .teaser.block.video-component-carousel .carousel.block>.button-container button { - width: 7px; - height: 7px; - opacity: 0.3; - background-color: var(--white); +} + +@media (min-width:1025px) and (max-width:1300px) { + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { + /* height: 380px; */ + background-size: cover; + background-position: center top; } - - .section.banner-carousel-wrapper.banner-video-carousel .teaser.block.video-component-carousel .carousel.block>.button-container button.selected { - opacity: 1; - width: 24px; - background: var(--white); - } - - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .carousel { - overflow: unset; - overflow-y: hidden; - overflow-x: auto; - } - - .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button.video-component-carousel.selected{ - background-color: var(--white); + + .section.page-container.neeyat-pg-con>div { + max-width: 90.25% !important; + padding: 0 14px; } - - @media screen and (max-width: 1024px) { - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { - /* height: 398px; */ - width: 100%; - background-size: 100% 100%; - object-fit: contain; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground { - margin: 0px; - height: 390px; - max-width: unset; - padding: 0 16px; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:not(p.button-container) { - font-size: 40px; - line-height: 48px; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description h1, - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description h2 { - font-size: 24px; - line-height: 1.2; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a, - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child a.button { - margin-top: 0px; - font-size: 14px; - font-weight: 700; - line-height: 28px; - padding: 6px 14px; - margin-bottom: 0px; - font-family: 'Nunito-Bold'; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child a.button { - margin-top: 17px; - } + + .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground { + max-width: 90.25%; + padding: 0 14px } - - @media screen and (max-width: 767px) { - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { - /* height: 250px; */ - object-fit: contain; - display: block; - background-position: top; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground { - margin: 0px; - height: 250px; - max-width: unset; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text { - width: 100%; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p:not(p.button-container) { - font-size: 24px; - line-height: 29px; - font-family: 'Nunito-Extrabold'; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container a, - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text .long-description p.button-container:last-child a.button { - margin-top: 0px; - font-size: 11px; - padding: 4px 5px; - line-height: 22px; - margin-bottom: 0px; - margin-right: 0; - } - - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground .text .long-description p.button-container a sub { - font-size: 11px; - line-height: 22px; - } - - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text div.long-description p:last-child span.icon-play-circle-icon img { - width: 22px; - height: 22px; - } + + .header-wrapper .nav-wrapper nav:has(.section.neeyat-header) { + margin-top: unset; + max-width: 90.25%; + padding: 0 14px; } - - @media (min-width:1025px) and (max-width:1300px) { - .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background { - /* height: 380px; */ - background-size: cover; - background-position: center top; - } - - .section.page-container.neeyat-pg-con>div { - max-width: 90.25% !important; - padding: 0 14px; - } - - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground { - max-width: 90.25%; - padding: 0 14px - } - - .header-wrapper .nav-wrapper nav:has(.section.neeyat-header) { - margin-top: unset; - max-width: 90.25%; - padding: 0 14px; - } - - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground, - .sectio .carousel-wrapper .teaser.blockn.video-component-carousel { - min-height: 380px; - height: 380px; - } + + .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground, + .sectio .carousel-wrapper .teaser.blockn.video-component-carousel { + min-height: 380px; + height: 380px; } - - /* carosuel video End */ \ No newline at end of file +} + +/* carosuel video End */ \ No newline at end of file diff --git a/component-models.json b/component-models.json index c36203b3d8..621a79a314 100644 --- a/component-models.json +++ b/component-models.json @@ -1018,6 +1018,10 @@ { "name": "Right", "value": "right" + }, + { + "name": "Bottom", + "value": "bottom" } ] },