Skip to content
Open
Changes from all commits
Commits
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
60 changes: 60 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
.button {
color: red;
background: #fff;
color: blue;
padding: 10px;
}

.card {
bacground-color: #eee;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Invalid `bacground-color` drops intended background styling


The declaration uses bacground-color, so the browser discards it. Cards may render with transparent/default backgrounds, reducing contrast and breaking the intended component appearance.

Replace bacground-color: #eee; with background-color: #eee; in .card.

margin: 0px;
border: 1px solid #ccc;
}

.alert {
color: #1234e;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Malformed `#1234e` makes `color` declaration ignored


color: #1234e; is not a valid color token, so the rule is ignored. Alert text can render with unintended inherited colors and lose visual emphasis.

Use a valid hex like #123456, #123, or an explicit rgb() value.

}

.banner {
background-color: #336699;
background: url("hero.png") no-repeat;
Comment on lines +19 to +20

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

`background` shorthand clears prior `background-color` fallback


The second declaration uses background shorthand after background-color. Shorthand resets unspecified background sub-properties, removing the fallback color when the image is unavailable.

Use background-image and background-repeat instead of shorthand, or include color inside the shorthand.

}

.nav a {
color: #333 !important;
text-decoration: none !important;
font-weight: bold !important;
}

.sidebar {
}

.box {
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.flex-item {
display: flex;
float: left;
Comment on lines +37 to +38

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

`display: flex` combined with `float` causes unpredictable layout


.flex-item uses both display: flex and float: left. Combining float behavior with flex layout often creates hard-to-debug positioning drift and responsive breakage.

Remove float: left and handle positioning with flex parent properties (justify-content, gap, align-items).

}

.modal {
position: absolute;
z-index: 99999;
}

.footer {
padding: 20px;
}
.footer {
padding: 40px;
Comment on lines +49 to +50

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Repeated `.footer` rule silently overrides earlier `padding`


Two .footer blocks set different padding values, and the latter wins by cascade order. Earlier code becomes misleading and can cause accidental regressions.

Merge into one .footer block with a single intentional padding value.

}

.hero {
width: 100;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

`width: 100` is invalid and ignored by browsers


width: 100; has no unit, so CSS parsing drops the declaration. The hero section width may differ from design intent and vary by surrounding layout context.

Use width: 100px; or width: 100%; depending on intended sizing behavior.

height: 50%;
}

* {
transition: all 0.3s ease;
Comment on lines +58 to +59

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Universal `transition: all` triggers unnecessary repaints


* { transition: all ... } attaches transitions to every element and every animatable property. This can degrade responsiveness, especially on low-end devices and large DOMs.

Scope transitions to specific components and animate only needed properties like opacity or transform.

}
Loading