Skip to content

fixed css in App.css #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
manojthakurgaur wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fixed css in App.css #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 87 additions & 27 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}

.container {
Expand All @@ -14,103 +16,162 @@ body {
padding: 20px;
}

h1,
h2,
h3 {
color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
margin-bottom: 15px;
Copy link

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The font-weight has been changed from 500 to 600, but the color property has been removed from headings. This means headings will now inherit the color from the body element (#333) instead of having an explicit color declaration, which could lead to inconsistent styling if the body color changes in the future.

Suggested change
margin-bottom: 15px;
margin-bottom: 15px;
color: #333;

Copilot uses AI. Check for mistakes.
}

p,
span,
div,
a,
button {
p, span, div, a, button {
font-weight: 400;
}

/* Navigation Bar */
.navbar {
background-color: #2874f0;
color: white;
padding: 15px;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}

.navbar li {
margin-right: 20px;
margin: 0;
}

.navbar a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}

.navbar a:hover {
color: #ffd700;
}

/* Home Page */
.home {
text-align: center;
padding: 50px;
padding: 80px 20px;
}

.home h2 {
font-size: 3rem;
font-size: 2.8rem;
font-weight: 600;
color: #222;
margin-bottom: 20px;
}

/* Shop Page */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
gap: 25px;
}

.product-card {
border: 1px solid #ddd;
background: #fff;
border-radius: 10px;
padding: 20px;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
cursor: pointer;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.product-card img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}

.product-card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}

/* Cart Page */
.cart-item {
display: flex;
align-items: center;
margin-bottom: 20px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.cart-item img {
width: 80px;
height: 80px;
margin-right: 20px;
border-radius: 8px;
object-fit: cover;
}

/* Checkout Page */
.checkout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
gap: 25px;
}

.checkout .section {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Order Success Page */
.order-success {
text-align: center;
padding: 50px;
padding: 80px 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.order-success h2 {
color: #28a745;
font-size: 2.5rem;
margin-bottom: 20px;
}

/* Buttons */
button {
background-color: #2874f0;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}

button:hover {
background-color: #185ad1;
transform: translateY(-2px);
}

/* Slide-up animation */
Expand All @@ -125,7 +186,6 @@ button {
}
}

Copy link

Copilot AI Sep 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment describing the animated class was removed but the class itself remains. Consider adding back a comment to explain the purpose of this animation class for better code maintainability.

Suggested change
/*
* The .product-card-animated class applies a slide-up animation to product cards.
* Use this class to animate product cards as they appear in the UI,
* providing a smooth entrance effect for better user experience.
*/

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment '/* Animated class for product cards */' has been removed, but the corresponding CSS class still exists. This reduces code documentation and makes it less clear what this class is intended for.

Suggested change
/* Animated class for product cards */

Copilot uses AI. Check for mistakes.
/* Animated class for product cards */
.product-card-animated {
animation: slideUp 0.5s ease-in-out;
animation-fill-mode: forwards;
Expand Down