Skip to content
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

Jump to bottom

Updated index.html and styles.css #377

Closed
wants to merge 1 commit into from
Closed

Updated index.html and styles.css #377

Show file tree
Hide file tree
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
26 changes: 3 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,25 +70,7 @@
<div class="checkbox-con">
<input id="checkbox" type="checkbox" />
</div>
<a href="index.html"><h1>Waste Management</h1></a>
<nav>

<div class="btn-nav">

<button class="button"> <a href="#upload">Upload</a></button>
<button class="button"><a href="#features">Features</a></button>

<button class="button"><a href="#feedback">Feedback</a></button>

<button class="button"><a href="#about">About Me</a></button>

<button class="button"><a href="register.html">Sign up</a></button>

<button class="button"><a href="#footer">Contact</a></button>

<!-- <div class="checkbox-con">
<input id="checkbox" type="checkbox">
</div> -->


</div>

Expand All @@ -99,10 +81,7 @@
<button id="menu-toggle" aria-label="Toggle menu">☰</button>
</div>
</nav>
<div class="nav-controls">
<button id="theme-toggle" aria-label="Toggle dark mode">🌓</button>
<button id="menu-toggle" aria-label="Toggle menu">☰</button>
</div>

</header>
<section class="hero">
<div class="hero-content">
Expand Down Expand Up @@ -172,6 +151,7 @@ <h2>Discover Our Features</h2>
<div class="features-container"></div>
</section>
<section class="features" id="features">

<div class="feature-card" id="eco-friendly">
<div class="icon"></div>
<h3>Eco-Friendly Tips</h3>
Expand Down
89 changes: 75 additions & 14 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ a {
text-decoration: none;
color: inherit;
}
.btn-nav{
display: flex;
justify-content: space-between;
align-items: center;

}
Rohan-2601 marked this conversation as resolved.
Show resolved Hide resolved

/* Progress Bar */
#progress-container {
Expand All @@ -36,25 +42,70 @@ a {
transition: width 0.09s ease-in-out;
border-radius: 10px;
}
.form_style {
border-radius: 15px;
padding: 5px;
background-color:#99e4ab ;


/* Header and Navigation */
header {
background-color: #00796b;
color: white;
padding: 15px;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}


/* Styling the header and centering the h1 */
header h1 {
font-size: 1.5rem;
margin: 0;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-bottom: 20px; /* Adds some space between h1 and buttons */
color: #333;
padding: 10px;
background-color: #99e4ab;
border-radius: 8px;
Comment on lines +56 to +63
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Add missing selector for CSS properties

CSS properties are declared without a selector between lines 56-63. This will result in a syntax error and the styles won't be applied.

Include the missing selector to group the properties correctly. Apply this diff:

+header h1 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px; /* Adds some space between h1 and buttons */
  color: #333;
  padding: 10px;
  background-color: #99e4ab;
  border-radius: 8px;
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
font-size: 36px;
font-weight: bold;
text-align: center;
margin-bottom: 20px; /* Adds some space between h1 and buttons */
color: #333;
padding: 10px;
background-color: #99e4ab;
border-radius: 8px;
header h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-bottom: 20px; /* Adds some space between h1 and buttons */
color: #333;
padding: 10px;
background-color: #99e4ab;
border-radius: 8px;
}


}

/* Centering the buttons and adding spacing */
.btn-nav {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Allows wrapping if screen is too narrow */
gap: 20px; /* Adds equal space between buttons */
margin-top: 20px;
}

/* Button styling */
.button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 12px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
text-align: center;
}

/* Hover effect for buttons */
.button:hover {
background-color: #45a049;
transform: scale(1.05);
}

/* Media query to adjust the layout on smaller screens */
@media (max-width: 768px) {
.btn-nav {
flex-direction: column; /* Stack buttons vertically on small screens */
gap: 10px;
}
}
header{
background-color: #99e4ab;

}
Comment on lines +102 to +105
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Ensure proper closure of the header style block

The header style block may be missing a closing brace or contains unnecessary whitespace, which can cause parsing errors in the stylesheet.

Verify and correct the block to prevent syntax errors.

 header {
   background-color: #99e4ab;
+}

Committable suggestion was skipped due to low confidence.




nav ul {
list-style-type: none;
display: flex;
Expand Down Expand Up @@ -307,6 +358,12 @@ nav ul li a:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: left;
object-fit: cover;

}
.mission-item img{
width: 300px;
height: 300px;
Comment on lines +361 to +366
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Move object-fit: cover; to the image selector

The object-fit property is applied to .mission-item, which is not an image element. This property should be applied directly to the <img> tag.

Adjust the CSS as follows:

-.mission-item {
-  object-fit: cover;
-}
 .mission-item img {
+  object-fit: cover;
   width: 300px;
   height: 300px;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
object-fit: cover;
}
.mission-item img{
width: 300px;
height: 300px;
}
.mission-item img{
object-fit: cover;
width: 300px;
height: 300px;

}

/* Hover Effect for Mission Items */
Expand All @@ -328,6 +385,8 @@ nav ul li a:hover {
line-height: 1.6;
}



/* Responsive */
@media (max-width: 768px) {
.mission-box {
Expand Down Expand Up @@ -515,14 +574,16 @@ nav ul li a:hover {
/* General styling for the section */
.features {
padding: 60px 20px;
background-color: #f9f9f9;

text-align: center;

}

.features h2 {
font-size: 36px;
margin-bottom: 40px;
color: #333;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Container for feature cards */
Expand Down