Testimonial section added with responsive

Mehedi-irfan · Dec 16, 2024 · f3a5cdb · f3a5cdb
1 parent 17e6538
commit f3a5cdb
Show file tree

Hide file tree

Showing 5 changed files with 307 additions and 14 deletions.
diff --git a/css/output.css b/css/output.css
@@ -596,6 +596,10 @@ video {
   }
 }
 
+.fixed{
+  position: fixed;
+}
+
 .absolute{
   position: absolute;
 }
@@ -620,10 +624,18 @@ video {
   bottom: 8rem;
 }
 
+.left-0{
+  left: 0px;
+}
+
 .left-12{
   left: 3rem;
 }
 
+.right-0{
+  right: 0px;
+}
+
 .right-12{
   right: 3rem;
 }
@@ -632,6 +644,10 @@ video {
   right: 2rem;
 }
 
+.top-0{
+  top: 0px;
+}
+
 .top-10{
   top: 2.5rem;
 }
@@ -640,15 +656,27 @@ video {
   top: 1.25rem;
 }
 
+.z-40{
+  z-index: 40;
+}
+
 .z-50{
   z-index: 50;
 }
 
+.m-auto{
+  margin: auto;
+}
+
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
 }
 
+.mb-1{
+  margin-bottom: 0.25rem;
+}
+
 .mb-10{
   margin-bottom: 2.5rem;
 }
@@ -665,6 +693,14 @@ video {
   margin-bottom: 1rem;
 }
 
+.mb-6{
+  margin-bottom: 1.5rem;
+}
+
+.mt-8{
+  margin-top: 2rem;
+}
+
 .inline-block{
   display: inline-block;
 }
@@ -689,6 +725,10 @@ video {
   height: 100%;
 }
 
+.min-h-\[40vh\]{
+  min-height: 40vh;
+}
+
 .cursor-pointer{
   cursor: pointer;
 }
@@ -701,6 +741,10 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap{
+  flex-wrap: wrap;
+}
+
 .place-items-center{
   place-items: center;
 }
@@ -709,6 +753,10 @@ video {
   align-items: center;
 }
 
+.justify-center{
+  justify-content: center;
+}
+
 .justify-between{
   justify-content: space-between;
 }
@@ -768,6 +816,11 @@ video {
   background-color: rgb(255 125 59 / var(--tw-bg-opacity, 1));
 }
 
+.px-14{
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+}
+
 .px-4{
   padding-left: 1rem;
   padding-right: 1rem;
@@ -986,6 +1039,34 @@ video {
   font-weight: 700;
 }
 
+.user-pic{
+  margin: 0.75rem;
+  height: 5rem;
+  width: 5rem;
+  cursor: pointer;
+  border-radius: 9999px;
+  padding: 0.25rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.user-pic.active-pic{
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 125 59 / var(--tw-border-opacity, 1));
+}
+
+.user-text{
+  display: none;
+}
+
+.user-text.active-text{
+  display: block;
+}
+
 .hover\:bg-color-secondary:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(255 125 59 / var(--tw-bg-opacity, 1));
@@ -1000,6 +1081,10 @@ video {
     width: 50%;
   }
 
+  .md\:w-4\/5{
+    width: 80%;
+  }
+
   .md\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1054,4 +1139,66 @@ video {
   .lg\:grid-cols-3{
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .lg\:px-20{
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .lg\:after\:absolute::after{
+    content: var(--tw-content);
+    position: absolute;
+  }
+
+  .lg\:after\:left-32::after{
+    content: var(--tw-content);
+    left: 8rem;
+  }
+
+  .lg\:after\:top-10::after{
+    content: var(--tw-content);
+    top: 2.5rem;
+  }
+
+  .lg\:after\:top-4::after{
+    content: var(--tw-content);
+    top: 1rem;
+  }
+
+  .lg\:after\:flex::after{
+    content: var(--tw-content);
+    display: flex;
+  }
+
+  .lg\:after\:h-7::after{
+    content: var(--tw-content);
+    height: 1.75rem;
+  }
+
+  .lg\:after\:w-52::after{
+    content: var(--tw-content);
+    width: 13rem;
+  }
+
+  .lg\:after\:bg-\[url\(\'\.\.\/img\/line-bottom\.png\'\)\]::after{
+    content: var(--tw-content);
+    background-image: url('../img/line-bottom.png');
+  }
+
+  .lg\:after\:bg-\[url\(\'\.\.\/img\/line\.png\'\)\]::after{
+    content: var(--tw-content);
+    background-image: url('../img/line.png');
+  }
+
+  .lg\:after\:bg-no-repeat::after{
+    content: var(--tw-content);
+    background-repeat: no-repeat;
+  }
+}
+
+@media (min-width: 1536px){
+  .\32xl\:after\:left-52::after{
+    content: var(--tw-content);
+    left: 13rem;
+  }
 }