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

Feature/component creation
WWWPiramalFinanceCOM · Jun 18, 2024 · ddaadf2 · ddaadf2
2 parents 96ce91e + 075385d
commit ddaadf2
Show file tree

Hide file tree

Showing 6 changed files with 342 additions and 1 deletion.
diff --git a/blocks/calculator/calculator.css b/blocks/calculator/calculator.css
@@ -22,12 +22,15 @@
     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 ease-in-out;
+    transition: transform 0.3s;
     transform: scale(1.2);
 }
 

diff --git a/blocks/choose-us/choose-us.css b/blocks/choose-us/choose-us.css
@@ -0,0 +1,80 @@
+.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/blocks/download-piramal/download-piramal.css b/blocks/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;
+    }
+}
diff --git a/blocks/our-media/our-media.css b/blocks/our-media/our-media.css
@@ -0,0 +1,49 @@
+.our-media-css .our-media-wrapper .our-media p {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  text-align: center;
+  color: var(--gradient-gray);
+  margin-bottom: 2rem;
+}
+
+.our-media-css .columns-wrapper .columns div {
+    justify-content: space-around;
+}
+
+.our-media-css .columns-wrapper .columns .columns-img-col {
+    display: flex;
+    padding: 0;
+}
+
+.our-media-css .columns-wrapper .columns div div > picture > img {
+    max-width: 100%;
+    width: fit-content;
+    height: 1.3rem;
+}
+
+@media (width >= 360px) {
+    .our-media-css .columns-wrapper .columns div {
+        gap: 2rem;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 0;
+    }
+
+    .our-media-css .columns-wrapper .columns .columns-img-col {
+        width: 45%;
+    }
+}
+
+@media (width >= 600px) {
+    .our-media-css .columns-wrapper .columns .columns-img-col {
+        width: unset;
+    }
+}
+
+@media (width >= 900px) {
+    .our-media-css .columns-wrapper .columns div {
+        gap: 4.5rem;
+        padding: 0 9.5rem;
+    }
+}
diff --git a/blocks/piramal-since/piramal-since.css b/blocks/piramal-since/piramal-since.css
@@ -0,0 +1,110 @@
+.piramal-since-css .piramal-since-wrapper .piramal-since p {
+  text-align: center;
+  font-weight: 800;
+  margin-bottom: 0.75rem;
+}
+
+.piramal-since-css .default-content-wrapper p {
+  font-weight: 400;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 2.7rem;
+}
+
+.piramal-since-css .columns-wrapper .columns > div {
+  gap: 5.375rem;
+}
+
+.piramal-since-css .columns-wrapper .columns > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.piramal-since-css .columns-wrapper .columns div div > p {
+  margin: 0;
+}
+
+.piramal-since-css .columns-wrapper .columns div div :nth-child(2) {
+  font-weight: 400;
+  margin-bottom: 0.625rem;
+}
+
+.piramal-since-css .columns-wrapper .columns div div :nth-child(3) {
+  font-weight: 700;
+}
+
+@media (width >= 360px) {
+  .piramal-since-css .piramal-since-wrapper .piramal-since p {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .piramal-since-css .default-content-wrapper p {
+    font-size: .875rem;
+    line-height: 1.25rem;
+  }
+
+  .piramal-since-css .columns-wrapper .columns > div {
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 3rem;
+    justify-content: space-between;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    text-align: center;
+  }
+
+  .piramal-since-css .columns-wrapper .columns > div > div {
+    width: 35%;
+  }
+
+  .piramal-since-css .columns-wrapper .columns div div > p > picture > img {
+    height: 3rem;
+    width: 3rem;
+  }
+
+  .piramal-since-css .columns-wrapper .columns div div :nth-child(2) {
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+
+  .piramal-since-css .columns-wrapper .columns div div :nth-child(3) {
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (width >= 600px) {
+  .piramal-since-css .columns-wrapper .columns > div > div {
+    width: 42%;
+  }
+}
+
+@media (width >= 900px) {
+  .piramal-since-css .piramal-since-wrapper .piramal-since p {
+    font-size: 2rem;
+    line-height: 1.75rem;
+  }
+
+  .piramal-since-css .default-content-wrapper p {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .piramal-since-css .columns-wrapper .columns div div > p > picture > img {
+    height: 5rem;
+    width: 5rem;
+  }
+
+  .piramal-since-css .columns-wrapper .columns div div :nth-child(2) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .piramal-since-css .columns-wrapper .columns div div :nth-child(3) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -19,6 +19,8 @@
   --dark-color: #ccc;
   --text-color: black;
   --gradient-gray-light: #ebeef050;
+  --gradient-gray: #666;
+  --tw-text-opacity: 1;
 
   /* fonts */
   --body-font-family: roboto, roboto-fallback;