From 3400a9e4e870a612584ba2111b1e9358d2fb1a14 Mon Sep 17 00:00:00 2001
From: Indu Gundam <indugundam2004@gmail.com>
Date: Wed, 16 Oct 2024 22:05:44 +0530
Subject: [PATCH] Modified text alignment for rating

Signed-off-by: Indu Gundam <indugundam2004@gmail.com>
---
 index.html | 36 ++++++++++++++++++------------------
 style.css  | 15 +++++++++++++--
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index ca5d0c37..a54f1a24 100644
--- a/index.html
+++ b/index.html
@@ -144,9 +144,9 @@ <h3>Wireless Controllers for PlayStation 4</h3>
                     <p>(2252 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.1★</p>
+                    Overall Rating<span class="rating-value">4.1</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                 <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                 <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -174,9 +174,9 @@ <h3>Controllers for Xbox One and Series X</h3>
                     <p>(1189 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.8★</p>
+                    Overall Rating<span class="rating-value">4.8</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -205,9 +205,9 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
                     <p>(3145 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.2★</p>
+                    Overall Rating<span class="rating-value">4.2</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -236,9 +236,9 @@ <h3>VR Headset from Meta</h3>
                     <p>(871 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.2★</p>
+                    Overall Rating<span class="rating-value">4.2</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -267,9 +267,9 @@ <h3>VR Headset from Apple</h3>
                     <p>(235 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.8★</p>
+                    Overall Rating<span class="rating-value">4.8</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -298,9 +298,9 @@ <h3>High Performance Gaming Mouse</h3>
                     <p>(9256 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">5.0★</p>
+                    Overall Rating<span class="rating-value">5.0</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -329,9 +329,9 @@ <h3>Mechanical Gaming Keyboard</h3>
                     <p>(6184 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.5★</p>
+                    Overall Rating<span class="rating-value">4.5</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -360,9 +360,9 @@ <h3>Wireless Gaming Headset</h3>
                     <p>(8452 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.7★</p>
+                    Overall Rating<span class="rating-value">4.7</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
@@ -391,9 +391,9 @@ <h3>Ergonomic Gaming Chair</h3>
                     <p>(3564 reviews)</p>
                 </div>
                 <div class="overall-rating">
-                    <span>Overall Rating:</span>
-                    <p class="star">4.8★</p>
+                    Overall Rating<span class="rating-value">4.8</span><span class="star">★</span>
                 </div>
+                
                 <div class="btn-section">
                     <button type="button" id = "buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
                     <button type="button" id = "cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
diff --git a/style.css b/style.css
index 2ab5dedb..23922a06 100644
--- a/style.css
+++ b/style.css
@@ -694,12 +694,23 @@ button {
     align-items: center;
 }
 
+.overall-rating .rating-value {
+    margin-left: 8px; /* Adds space between the heading and rating */
+    color: #ff3c6d; /* Sets the rating value to pink */
+    font-weight: 600; /* Makes the rating value bold */
+    line-height: 1;
+}
+
 .overall-rating .star {
-    margin-left: 5px;
-    color: #ff3c6d;
+    margin-left: 2px; /* Small gap between the rating value and the star */
+    color: #ff3c6d; /* Star color is pink as well */
     font-weight: 600;
+    line-height: 1;
 }
 
+
+
+
 .footer {
     background: #303036;
     color: #d3d3d3;