Merge pull request #21 from shamalijadhav/feature/component-creation

Feature/component creation
WWWPiramalFinanceCOM · Jun 18, 2024 · 7f8d1c6 · 7f8d1c6
2 parents ddaadf2 + 9ca33c3
commit 7f8d1c6
Show file tree

Hide file tree

Showing 7 changed files with 570 additions and 0 deletions.
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -149,6 +149,26 @@ async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
   loadDelayed();
+  await loadingCustomCss(); 
 }
 
 loadPage();
+
+
+async function loadingCustomCss(){
+  // load custom css files
+  var loadCssArray = [
+    "`${window.hlx.codeBasePath}/styles/loanproducts/loanproducts.css`",
+    "`${window.hlx.codeBasePath}/styles/calculator/calculator.css`",
+    "`${window.hlx.codeBasePath}/styles/choose-us/choose-us.css`",
+    "`${window.hlx.codeBasePath}/styles/download-piramal/download-piramal.css`",
+    "`${window.hlx.codeBasePath}/styles/our-media/our-media.css`",
+    "`${window.hlx.codeBasePath}/styles/piramal-since/piramal-since.css`",
+  ]
+
+  loadCssArray.forEach( async (eachCss) => {
+      await loadCSS(eachCss);
+  });
+
+}
+
diff --git a/styles/calculator/calculator.css b/styles/calculator/calculator.css
@@ -0,0 +1,102 @@
+.calculator-section-css .calculator-wrapper .calculator >div >div p {
+    font-size: 2rem;
+    font-family: "Nunito-Regular";
+    font-weight: bold;
+    margin: 0;
+}
+
+.calculator-section-css .default-content-wrapper p {
+   font-size: 20px;
+   font-family: "Nunito-Regular";
+   color: #666666;
+   margin-top: 0;
+}
+
+.calculator-section-css .columns-wrapper .columns{
+    position: relative;
+}
+
+.calculator-section-css .columns-wrapper .columns >div >div{
+    width: 100%;
+    height: 150px;
+    overflow: hidden;
+    border-radius: 32px;
+}
+.calculator-section-css .columns-wrapper .columns >div >div p{
+    margin-top: 0;
+}
+.calculator-section-css .columns-wrapper .columns img{
+    border-radius: 32px;
+}
+
+.calculator-section-css  img:hover {
+    transition: transform 0.3s;
+    transform: scale(1.2);
+}
+
+.calculator-section-css .columns-wrapper .columns h4{
+    top: 10%;
+    position: absolute;
+    font-size: 1.5rem;
+    color: #ffffff;
+    padding-left: 20px;
+    font-family: "Nunito-Regular";
+}
+
+.calculator-section-css .columns-wrapper .columns .button-container a{
+    font-size: 14px;
+    padding: 15px 18px;
+    background: #F26841;
+    color: #ffffff;
+    border-radius: 8px;
+    position: absolute;
+    top: 40%;
+    margin-left: 20px;
+} 
+
+@media screen and (max-width: 767.99px) {
+    .calculator-section-css .calculator-wrapper .calculator >div >div p {
+        font-size: 18px;
+        font-weight: bold;
+        margin: 0;
+    }
+
+    .calculator-section-css .default-content-wrapper p {
+       font-size: 14px;
+       color: #666666;
+       margin-top: 0;
+    }
+    .calculator-section-css .columns-wrapper .columns img {
+        width: 100%;
+        height: 110px;
+        border-radius: 16px;
+    }
+    .calculator-section-css .columns-wrapper .columns > div > div {
+        position: relative;
+    }
+    .calculator-section-css .columns-wrapper .columns h4{
+        top: 0%;
+        position: absolute;
+        font-size: 1rem;
+        color: #ffffff;
+        padding-left: 20px;
+        font-family: "Nunito-Regular";
+    }
+
+    .calculator-section-css .columns-wrapper .columns .button-container a{
+        font-size: 14px;
+        padding: 9px 11px;
+        background: #F26841;
+        color: #ffffff;
+        border-radius: 8px;
+        position: absolute;
+        top: 25%;
+        margin-left: 20px;
+    } 
+    .calculator-section-css .columns-wrapper .columns > div > div p:first-child{
+       margin: 0;
+    }
+}
+
+
+
diff --git a/styles/choose-us/choose-us.css b/styles/choose-us/choose-us.css
@@ -0,0 +1,81 @@
+.choose-us-css .default-content-wrapper h4 {
+    font-weight: 800;
+  }
+
+  .choose-us-css .choose-us-wrapper .choose-us div > div > p {
+    color: rgb(51 51 51 / var(--tw-text-opacity));
+    font-weight: 400;
+  }
+
+  .choose-us-css .columns-wrapper .columns > div {
+    margin-top: 2.5rem;
+  }
+
+  .choose-us-css .columns-wrapper .columns div div > p {
+    margin: 0;
+  }
+
+  .choose-us-css .columns-wrapper .columns div div :nth-child(2) {
+    font-weight: 800;
+    padding-bottom: 1rem;
+  }
+
+  @media (width >= 360px) {
+    .choose-us-css .default-content-wrapper h4 {
+      font-size: 1.125rem;
+    }
+
+    .choose-us-css .choose-us-wrapper .choose-us div > div > p {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+
+    .choose-us-css .columns-wrapper .columns > div {
+      gap: 2.25rem;
+    }
+
+    .choose-us-css .columns-wrapper .columns > div > div {
+      width: 100%;
+    }
+
+    .choose-us-css .columns-wrapper .columns div div > p > picture > img {
+      height: 3rem;
+      width: 3rem;
+    }
+
+    .choose-us-css .columns-wrapper .columns div div :nth-child(2) {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      padding-bottom: 0.75rem;
+    }
+  }
+
+  @media (width >= 600px) {
+  }
+
+  @media (width >= 900px) {
+    .choose-us-css .default-content-wrapper h4 {
+      font-size: 2rem;
+      line-height: 1.75rem;
+    }
+
+    .choose-us-css .choose-us-wrapper .choose-us div > div > p {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+
+    .choose-us-css .columns-wrapper .columns > div {
+      gap: 5rem;
+    }
+
+    .choose-us-css .columns-wrapper .columns div div > p > picture > img {
+      height: 5rem;
+      width: 5rem;
+    }
+
+    .choose-us-css .columns-wrapper .columns div div :nth-child(2) {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+  }
+
diff --git a/styles/download-piramal/download-piramal.css b/styles/download-piramal/download-piramal.css
@@ -0,0 +1,97 @@
+.download-piramal-css {
+    max-width: 1200px;
+    position: relative;
+    margin: 0 auto;
+}
+
+.download-piramal-css > div:first-child p{
+    position: relative;
+}
+.download-piramal-css .default-content-wrapper p:first-child img {
+    border-radius: 20px;
+}
+
+.download-piramal-css .default-content-wrapper h4{
+    position: absolute;
+}
+
+.download-piramal-css .default-content-wrapper p:nth-child(2){
+    position: absolute;
+    width: 156px;
+    height: 52px;
+
+}
+.download-piramal-css .default-content-wrapper p:nth-child(3){
+    position: absolute;
+    width: 156px;
+    height: 52px;
+    left: 45%;
+}
+.download-piramal-css .download-piramal-wrapper .download-piramal p{
+    position: absolute;
+    top: 25%;
+    font-size: 30px;
+    font-family: "Nunito-Regular";
+    font-weight: 700;
+    color: #ffffff;
+    left: 15%;
+}
+.download-piramal-css .default-content-wrapper:last-child {
+    position: absolute;
+    top: 35%;
+    font-size: 24px;
+    font-family: "Nunito-Regular";
+    color: #ffffff;
+    left: 15%;
+    margin-bottom: 0;
+}
+.download-piramal-css .default-content-wrapper:last-child p{
+    margin-bottom: 0;
+}
+
+.download-piramal-css .default-content-wrapper p:nth-child(4){
+    display: none;
+}
+.download-piramal-css .button-container{
+    display: none;
+}
+
+
+@media screen and (max-width:767.99px) {
+    .download-piramal-css .default-content-wrapper h4,
+    .download-piramal-css > div:first-child p,
+    .download-piramal-css .default-content-wrapper p:first-child img,
+    .download-piramal-css .default-content-wrapper p:nth-child(2),
+    .download-piramal-css .default-content-wrapper p:nth-child(3),
+    .download-piramal-css .download-piramal-wrapper
+    {
+        display: none;
+    }
+    .download-piramal-css .default-content-wrapper p:nth-child(4){
+        position: absolute;
+        bottom: 50%;
+        display: block;
+    }
+    .download-piramal-css .button-container {
+        display: block;
+    }
+    .download-piramal-css .button-container a{
+        display: block;
+        position: absolute;
+        font-size: 12px;
+        top: -50%;
+        background: #F26841;
+        left: 20px;
+        padding: 8px 15px;
+        border-radius: 10px;
+        margin-top: 0;
+    }
+    .download-piramal-css .default-content-wrapper:last-child {
+        position: relative;
+        left: 1%;
+    }
+    .download-piramal-css .default-content-wrapper p:nth-child(4) img{
+        width: revert-layer;
+        height: 176px;
+    }
+}