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

Improve Footer and Navbar Styling on About Page #833

Merged
merged 1 commit into from
Oct 25, 2024
Merged

Improve Footer and Navbar Styling on About Page #833

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
43 changes: 35 additions & 8 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,22 +414,29 @@
</script>

<!-- Navbar -->
<nav class="navbar">
<img src="images/logo.png" alt="logo">
<h1>Resum Resume</h1>
<nav class="navbar">
<div class="tabs-container"></div>
<img src="images/logo.png" alt="logo">
<a class="tab" href="index.html">Home</a>
<a class="tab" href="about.html">About</a>
<a class="tab" href="resume.html">Build Resume</a>
<a class="tab" href="resume_tips.html">Resume Tips</a>
<a class="tab" href="signup.html">Sign Up</a>
<a class="tab" href="login.html">Login</a>
<a class="tab" href="privacypolicy.html">Privacy Policy</a>
</div>
Comment on lines +418 to 425
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix the mismatched HTML tags in the navbar

There's an unmatched closing </div> tag within the nav element starting at line 418, which may cause rendering issues. Ensure that all HTML tags are properly opened and closed.

Apply this diff to correct the HTML structure:

 <nav class="navbar">
     <img src="images/logo.png" alt="logo">
     <a class="tab" href="index.html">Home</a>
     <a class="tab" href="about.html">About</a>
     <a class="tab" href="resume.html">Build Resume</a>
     <a class="tab" href="resume_tips.html">Resume Tips</a>
     <a class="tab" href="signup.html">Sign Up</a>
     <a class="tab" href="login.html">Login</a>
-    </div>
 </nav>
📝 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
<img src="images/logo.png" alt="logo">
<a class="tab" href="index.html">Home</a>
<a class="tab" href="about.html">About</a>
<a class="tab" href="resume.html">Build Resume</a>
<a class="tab" href="resume_tips.html">Resume Tips</a>
<a class="tab" href="signup.html">Sign Up</a>
<a class="tab" href="login.html">Login</a>
<a class="tab" href="privacypolicy.html">Privacy Policy</a>
</div>
<img src="images/logo.png" alt="logo">
<a class="tab" href="index.html">Home</a>
<a class="tab" href="about.html">About</a>
<a class="tab" href="resume.html">Build Resume</a>
<a class="tab" href="resume_tips.html">Resume Tips</a>
<a class="tab" href="signup.html">Sign Up</a>
<a class="tab" href="login.html">Login</a>

</nav>

</nav>
<!-- navbar styling -->
<style>
.navbar{
padding-left: 7rem;
padding-right: 7rem;
}
.tab{
color: white;
font-size: 2rem;
}
</style>

Mohitranag18 marked this conversation as resolved.
Show resolved Hide resolved
<!-- main section -->
<div class="panel-1">
<div class="about">
<h1>About</h1>
Expand Down Expand Up @@ -524,7 +531,27 @@ <h3>Connect With Us</h3>
<p>&copy; 2024 Resume Builder. All rights reserved.</p>
</div>
</footer>

<style>
.footer-section{
display: flex;
justify-content: left;
flex-direction: column;
}
.ul{
display: flex;
flex-direction: column;
justify-content: left;
}
li{
text-align: left;
}
.footer a{
color: white;
}
.footer p{
margin-top: 2rem;
}
</style>
Comment on lines +534 to +554
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Move footer styles to the <head> section or external stylesheet

Defining CSS within <style> tags inside the body is not recommended. For better maintainability and consistency, consider moving these footer styles to the <head> section or an external stylesheet. Additionally, consider using more descriptive class names instead of .ul, since ul is an HTML tag, to avoid confusion.

Apply this diff to move the footer styles to the <head> section and rename the .ul class:

 <!-- Remove the inline footer styles from the body -->
-<style>
-    .footer-section{
-        display: flex;
-        justify-content: left;
-        flex-direction: column;
-    }
-    .ul{
-        display: flex;
-        flex-direction: column;
-        justify-content: left;
-    }
-    li{
-        text-align: left;
-    }
-    .footer a{
-        color: white;
-    }
-    .footer p{
-        margin-top: 2rem;
-    }
-</style>

Add these styles to the existing <style> section in the <head>:

+/* Add to your existing CSS in the <head> */
+.footer-section {
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+}
+.footer-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+li {
+    text-align: left;
+}
+.footer a {
+    color: white;
+}
+.footer p {
+    margin-top: 2rem;
+}

Update the HTML to use the new class name:

-<ul class="ul">
+<ul class="footer-list">

Committable suggestion was skipped due to low confidence.

<script>
const toggler = document.getElementById("toggler");
const body = document.body;
Expand Down