From 72ede2c22086f63d97d53c00be6ae013498698f1 Mon Sep 17 00:00:00 2001 From: Vaibhav sasulkar Date: Thu, 10 Oct 2024 20:25:39 +0530 Subject: [PATCH] homepage banner ui in progres --- blocks/carousel/carousel.css | 8 ++--- blocks/carousel/embed-banner-carousel.css | 36 ++++++++++------------- blocks/embed/embed.js | 2 +- 3 files changed, 20 insertions(+), 26 deletions(-) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 21b51ca760..a60fe27b5a 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -504,7 +504,7 @@ .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground, .banner-carousel-wrapper.personal-loan-sub-page-banner .carousel-wrapper .carousel .panel-container .teaser .foreground { width: 100%; - min-height: 450px; + min-height: 440px; } .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .title>h2, @@ -720,7 +720,7 @@ @media screen and (max-width:767px) { .section.banner-carousel-wrapper .carousel-wrapper .carousel .panel-container .teaser { - min-height: 450px; + min-height: 440px; } .section.banner-carousel-wrapper.careers-page-banner .carousel-wrapper .panel-container .teaser.block>.background .front-picture { @@ -741,7 +741,7 @@ } .section.banner-carousel-wrapper.careers-page-banner .carousel-wrapper .carousel .panel-container .teaser { - min-height: 450px; + min-height: 440px; } .section.banner-carousel-wrapper.careers-page-banner .carousel-wrapper .panel-container .teaser.block>.background .front-picture img { @@ -1048,7 +1048,7 @@ display: flex; align-items: end; justify-content: center; - min-height: 450px; + min-height: 440px; } } /* ek lakh loan end */ \ No newline at end of file diff --git a/blocks/carousel/embed-banner-carousel.css b/blocks/carousel/embed-banner-carousel.css index d7fca072c1..b997e55fcf 100644 --- a/blocks/carousel/embed-banner-carousel.css +++ b/blocks/carousel/embed-banner-carousel.css @@ -1,7 +1,6 @@ /* 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; @@ -62,15 +61,16 @@ .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; + font-weight: 700; margin-right: 8px; line-height: 30px; - padding: 16px 2.16rem; + padding: 14px; border-radius: 8px; color: var(--white); - font-family: 'Nunito-Semibold'; + font-family: 'Nunito-Bold'; background-color: var(--orange); margin: 0; + min-width: 159px; } .sectio .carousel-wrapper .teaser.blockn.video-component-carousel .background .foreground .text .long-description p.button-container a sub { @@ -150,7 +150,6 @@ @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; @@ -160,7 +159,6 @@ 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) { @@ -180,19 +178,25 @@ font-size: 14px; font-weight: 700; line-height: 28px; - padding: 6px 14px; - margin-bottom: 0px; font-family: 'Nunito-Bold'; + padding: 11px 10px; + line-height: 22px; + margin-bottom: 0px; + margin-right: 0; + min-width: 102px; } - .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 { + margin-top: 1.5rem; + } + + .section.banner-carousel-wrapper.banner-video-carousel .carousel-wrapper .teaser.block.video-component-carousel .background .foreground .text { + align-items: end; } } @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; @@ -221,16 +225,6 @@ 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; diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js index c3db4a0a1a..5cb055727f 100644 --- a/blocks/embed/embed.js +++ b/blocks/embed/embed.js @@ -68,7 +68,7 @@ const embedTwitter = (url) => { const videoTag = (url) => { // const videoHTML = `
-
`