Merge pull request #1182 from dhruv389/fix/mobile-section

Improve Mobile Section with New Images and Enhanced Styling #1134
codervivek5 · May 31, 2024 · 7329d1b · 7329d1b
2 parents eb30366 + 864fb0d
commit 7329d1b
Show file tree

Hide file tree

Showing 17 changed files with 492 additions and 306 deletions.
diff --git a/img/mo1.png b/img/mo1.png
diff --git a/img/mo10.png b/img/mo10.png
diff --git a/img/mo11.png b/img/mo11.png
diff --git a/img/mo2.avif b/img/mo2.avif
diff --git a/img/mo3.avif b/img/mo3.avif
diff --git a/img/mo4.webp b/img/mo4.webp
diff --git a/img/mo5.png b/img/mo5.png
diff --git a/img/mo6.png b/img/mo6.png
diff --git a/img/mo7.png b/img/mo7.png
diff --git a/img/mo8.png b/img/mo8.png
diff --git a/img/mo9.png b/img/mo9.png
diff --git a/img/vigybag_design-removebg-preview 1.png b/img/vigybag_design-removebg-preview 1.png
diff --git a/img/vigybag_icon-removebg-preview (1) 1.png b/img/vigybag_icon-removebg-preview (1) 1.png
diff --git a/index.css b/index.css
@@ -89,4 +89,205 @@ box-shadow: 16.5px 17.5px 32px -4.5px #8a8afb;
         flex: 100%;
         max-width: 80%;
     }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ /* NEW Customer review Section BY DHaval */
+
+
+ a:link,a:active,a:visited,a:hover{
+	color:#3f51b5;
+}
+
+.outerdiv
+{
+	width: 100%;
+    min-height: 100vh;
+    background: #EDF2F8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.innerdiv
+{
+	transform: scale(0.9);
+	margin: 1rem;
+	display: grid;
+	grid-gap: 1.5rem;
+	grid-template-rows: repeat(2,22rem);
+	grid-template-columns: repeat(4,17rem);
+}
+.eachdiv
+{
+	padding: 1rem 2rem;
+    border-radius: 0.8rem;
+    box-shadow: 5px 5px 20px #6d6b6b6b;
+    color: white;
+    overflow-y: hidden;
+    height: auto;
+}
+.div1
+{
+	background: #733FC8;
+    grid-column: 1/3;
+    grid-row: 1/2;
+    background-image: url(https://raw.githubusercontent.com/RahulSahOfficial/testimonials_grid_section/5532c958b7d3c9b910a216b198fdd21c73112d84/images/bg-pattern-quotation.svg);
+    background-repeat: no-repeat;
+    background-position-x: 25rem;
+
+}
+.div2
+{
+	background:#49556B;
+    grid-column: 3/4;
+    grid-row: 1/2;
+}
+.div3
+{
+	background: white;
+    grid-column: 4/5;
+    grid-row: 1/3;
+    color: black;
+}
+.div4
+{
+	background: white;
+	grid-column: 1/2;
+    grid-row: 2/3;
+    color: black;
+}
+.div5
+{
+	background: #18202D;
+	grid-column: 2/4;
+    grid-row: 2/3;
+}
+.userdetails
+{
+	display: flex;
+}
+.imgbox
+{
+	margin-right: 1rem;
+}
+.imgbox img
+{
+	border-radius: 50%;
+	width: 2rem;
+	border: 2px solid #cec5c5;
+}
+.detbox
+{
+	display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.detbox p
+{
+	margin: 0;
+}
+.detbox .name
+{
+	color: hsl(0, 0%, 81%);
+    font-size: 0.9rem;
+    margin-bottom: 0.1rem;
+    font-weight: 600;
+}
+.detbox .name.dark
+{
+	color: #49505A;
+}
+.detbox .designation
+{
+	color: hsl(0, 0%, 81%);
+    opacity: 50%;
+    font-size: 0.8rem;
+}
+.detbox .designation.dark
+{
+	color: #49505A;
+}
+.review h4
+{
+	font-size: 1.4rem;
+	color: #F3DEFF;
+    font-weight: 600;
+    line-height: 1.5;
+    margin-bottom: 0.8rem;
+}
+.review.dark h4{
+	color:#4B5258;
+}
+.review p
+{
+	font-size: 0.95rem;
+    color: #F3DEFF;
+    font-weight: 500;
+    opacity: 50%;
+    line-height: 1.5;
+}
+.review.dark p{
+	color: #0e0e0e;
+}
+.attribution
+{
+	font-size: 1rem;
+    line-height: 1.5;
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    text-align: right;
+}
+.attribution a
+{
+	text-decoration: none;
+}
+
+@media only screen and (max-width: 1000px)
+{
+	.innerdiv
+	{
+		transform: scale(0.7);
+	}
+}
+@media only screen and (max-width: 800px)
+{
+	.innerdiv
+	{
+		transform: scale(0.6);
+	}
+}
+@media only screen and (max-width: 700px)
+{
+	.div1 {
+		background-position-x: 10rem;
+	}
+	.innerdiv
+	{
+		display: flex; 
+		flex-direction: column;
+		transform: scale(1);
+		margin: 2rem;
+		margin-bottom: 5rem;
+	}
+	.attribution
+	{
+		position: relative;
+	}
 }