Skip to content

Commit

Permalink
Merge pull request #553 from Indugundam/main
Browse files Browse the repository at this point in the history 
Modified text alignment for rating
  • Loading branch information
@swaraj-das
swaraj-das authored Oct 19, 2024
2 parents aaa1377 + ddf2763 commit 7bcb070
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 21 deletions.
36 changes: 18 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,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>
Expand Down Expand Up @@ -177,9 +177,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>
Expand Down Expand Up @@ -209,9 +209,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>
Expand Down Expand Up @@ -241,9 +241,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>
Expand Down Expand Up @@ -273,9 +273,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>
Expand Down Expand Up @@ -305,9 +305,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>
Expand Down Expand Up @@ -336,9 +336,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>
Expand Down Expand Up @@ -367,9 +367,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>
Expand Down Expand Up @@ -398,9 +398,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>
Expand Down
14 changes: 11 additions & 3 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -733,10 +733,18 @@ 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;
font-weight: 600;
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 {
Expand Down

0 comments on commit 7bcb070

Please sign in to comment.