From 376a29d0325486f57491319c509e71ff342139a7 Mon Sep 17 00:00:00 2001
From: Sneha2005 <snehasrijaya2005@gmail.com>
Date: Wed, 2 Oct 2024 17:59:07 +0530
Subject: [PATCH 1/4] Add responsive design updates and image outlines

---
 about.html  | 416 ++++++++++++++++++++++++++------------------
 index.html  | 486 +++++++++++++++++++++++++---------------------------
 login.html  |  76 ++++++--
 resume.html | 134 +++++++++++----
 signup.html |  77 +++++++--
 style.css   | 142 ++++++++-------
 6 files changed, 789 insertions(+), 542 deletions(-)

diff --git a/about.html b/about.html
index e464c28..cf85a93 100644
--- a/about.html
+++ b/about.html
@@ -6,184 +6,264 @@
     <title>About Us - LinkedIn Resume Builder</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
-        :root{
-         --purple: #aca7eb;
-        }
-
-        body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #acb4bc;
-            margin: 0;
-            padding: 0;
-        }
-
-        .header {
-            background-color: #aca7eb;
-            padding: 20px;
-            text-align: center;
-            color: white;
-        }
-
-        .header h1 {
-            margin: 0;
-            font-size: 36px;
-        }
-        .content1{
-            display: flex;
-            justify-content: flex-start;
-        }
-        .gif{
-            margin-left: 100px;
-        }
-        .content {
-            max-width: 800px;
-            margin: 50px auto;
-            background-color: #fff;
-            border-radius: 10px;
-            padding: 30px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease-in-out;
-            box-shadow: 0 12px 12px;
-        }
-
-        .content:hover{
-            transform:scale(1.1);
-            transform: 0.5s ease;
-        }
-
-        .content h2 {
-            font-size: 28px;
-            color: white;
-            border-radius: 5px;
-            padding: 2px 5px;
-            margin-bottom: 20px;
-            background-color: black;
-            text-align: center;
-        }
-
-        .content h2:hover{
-            background-color: #0073b1;
-        }
-
-
-        .content p {
-            font-size: 18px;
-            color: #555;
-            line-height: 1.6;
-            margin-bottom: 20px;
-        }
-
-
-        .content ul {
-            padding-left: 20px;
-            margin-bottom: 20px;
-        }
-
-        .content ul li {
-            font-size: 18px;
-            color: #555;
-            margin-bottom: 10px;
-        }
-
-        .footer {
-            text-align: center;
-            padding: 15px;
-            font-size: 24px;
-            color: #666;
-            background-color: #f4f4f9;
-            margin-top: 45px;
-            
-        }
-        .footer p{
-            margin-bottom: 0;
-        }
-
-        .back-button {
-            display: block;
-            text-align: center;
-            margin-top: 35px;
-            margin-bottom: 0px;
-        }
-
-        .back-button a {
-            padding: 10px 20px;
-            background-color: #aca7eb;
-            color: white;
-            text-decoration: none;
-            border-radius: 5px;
-        }
-
-        .back-button a:hover {
-            background-color: var(--purple);
-        }
-        .navbar {
-            background-color: #aca7eb;
-            padding: 15px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .navbar h1 {
-            color: white;
-            margin: 0;
-            font-size: 24px;
-        }
-
-        .navbar ul {
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            gap: 20px;
-        }
-
-        .navbar ul li {
-            display: inline;
-        }
-
-        .navbar ul li a {
-            color: white;
-            text-decoration: none;
-            font-size: 18px;
-        }
-
-        .navbar ul li a:hover {
-            text-decoration: underline;
-        }
-
-        /* Main Content Placeholder */
-        .content {
-            padding: 20px;
-        }
-
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .navbar {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-
-            .navbar ul {
-                flex-direction: column;
-                gap: 10px;
-            }
-
-            .navbar h1 {
-                margin-bottom: 10px;
-            }
-        }
+:root {
+    --deep-teal: #003d4d; /* Updated primary color */
+    --off-white: #f8f9fa; /* Updated background color */
+    --dark-slate: #2f4f4f; /* Text color */
+    --soft-gold: #d9c79e; /* Accent color */
+}
+
+* {
+    margin: 0; 
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    outline: none;
+    border: none;
+    text-decoration: none;
+    text-transform: capitalize;
+    transition: .2s linear;
+}
+
+body {
+    background-color: var(--off-white); /* Updated background color */
+    margin: 0;
+    padding: 0;
+}
+
+.header {
+    background-color: var(--deep-teal); /* Updated header color */
+    padding: 20px;
+    text-align: center;
+    color: var(--off-white); /* Text color for better contrast */
+}
+
+.header h1 {
+    margin: 0;
+    font-size: 36px;
+}
+
+.content1 {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.gif {
+    margin-left: 100px;
+}
+
+.content {
+    max-width: 70%; /* Further reduced width to prevent hiding the GIFs */
+    margin: 30px auto; /* Centered margin */
+    background-color: #f5f5f5; /* Slightly off-white background */
+    border-radius: 10px;
+    padding: 20px; /* Padding to maintain space inside the box */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; /* Transition for scaling and glow */
+}
+
+.content:hover {
+    transform: scale(1.05); /* Slightly reduced scale effect for a minimalist look */
+    box-shadow: 0 0 15px rgba(0, 77, 79, 0.8); /* Glow effect with Dark Teal color */
+    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Ensure smooth transition */
+}
+
+.content h2 {
+    font-size: 28px;
+    color: var(--dark-slate); /* Updated heading color */
+    border-radius: 5px;
+    padding: 2px 5px;
+    margin-bottom: 20px;
+    background-color: var(--soft-gold); /* Updated background color for h2 */
+    text-align: center; /* Center align the heading */
+    transition: background-color 0.5s ease, color 0.5s ease;
+}
+
+.content h2:hover {
+    background-color: var(--deep-teal); /* Updated hover effect to match the theme */
+    color: var(--off-white);
+    transition: background-color 0.5s ease, color 0.5s ease; /* Transition for background and color */
+}
+
+.content p {
+    font-size: 18px;
+    color: var(--dark-slate); /* Updated paragraph color to Dark Slate */
+    line-height: 1.6;
+    margin-bottom: 20px;
+    text-align: left; /* Left-align paragraph text */
+}
+
+.content ul {
+    padding-left: 20px; /* Indent list */
+    margin-bottom: 20px;
+    text-align: left; /* Ensure ul is left aligned */
+}
+
+.content ul li {
+    font-size: 18px;
+    color: var(--dark-slate); /* Updated list item color */
+    margin-bottom: 10px;
+    text-align: left; /* Left-align list items */
+}
+
+
+/* Footer Styles */
+.footer {
+    background-color: var(--deep-teal); /* Match deep teal for footer background */
+    color: var(--off-white); /* Off-white text for footer for contrast */
+    padding: 30px 0; /* Consistent padding */
+    text-align: center; /* Center the text */
+    margin-top: 30px;
+}
+
+.footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 1200px; /* Max width for footer content */
+    margin: 0 auto; /* Center footer content */
+    padding: 0 20px; /* Consistent padding */
+}
+
+.footer-section {
+    flex: 1; /* Flexible sections in footer */
+    margin-bottom: 20px; /* Space between footer sections */
+    min-width: 200px; /* Minimum width for each section */
+}
+
+.footer-section h3 {
+    font-size: 18px; /* Font size for section headings */
+    font-weight: 700; /* Bold weight for section headings */
+    margin-bottom: 15px; /* Space below section headings */
+    color: var(--soft-gold); /* Soft Gold color for headings */
+}
+
+.footer-section ul {
+    list-style-type: none; /* No bullet points for list */
+    padding: 0; /* No padding for list */
+}
+
+.footer-section ul li {
+    margin-bottom: 8px; /* Space between list items */
+}
+
+.footer-section ul li a {
+    color: #e0e0e0; /* Light grey for links */
+    text-decoration: none; /* No underline for links */
+    transition: color 0.3s ease; /* Smooth transition for color change */
+}
+
+.footer-section ul li a:hover {
+    color: var(--soft-gold); /* Soft Gold color on hover */
+    text-decoration: none; /* Removed underline on hover for consistency */
+}
+
+.footer-bottom {
+    text-align: center; /* Centered text for the footer bottom */
+    padding-top: 20px; /* Padding for footer bottom */
+    margin-top: 20px; /* Margin for separation */
+    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border for separation */
+}
+
+.back-button {
+    display: block;
+    text-align: center;
+    margin-top: 20px; /* Decrease this value to move the button up */
+    margin-bottom: 0px;
+}
+
+.back-button a {
+    padding: 10px 20px;
+    background-color: var(--deep-teal); /* Updated back button color */
+    color: var(--off-white); /* Text color for back button */
+    text-decoration: none;
+    border-radius: 5px;
+}
+
+.back-button a:hover {
+    background-color: var(--soft-gold); /* Updated hover color */
+}
+
+.navbar {
+    background-color: var(--deep-teal); /* Updated navbar background color */
+    padding: 31px 20px; /* Increased top and bottom padding */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.navbar h1 {
+    color: var(--off-white); /* Changed to use off-white for better contrast */
+    margin: 0;
+    font-size: 2rem;
+    margin-left: 15px; /* Adjust this value to move the logo right */
+    transition: color 0.3s ease; /* Smooth transition for color change */
+}
+
+.navbar h1:hover {
+    color: var(--soft-gold); /* Color change on hover */
+}
+
+.navbar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 20px;
+    margin-right: 30px; /* Adjust this value to move the items left */
+}
+
+.navbar ul li {
+    display: inline;
+}
+
+.navbar ul li a {
+    color: var(--off-white); /* Updated navbar link color */
+    text-decoration: none;
+    font-size: 18px;
+}
+
+.navbar ul li a:hover {
+    color: var(--soft-gold); /* Updated hover color to Soft Gold */
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+/* Main Content Placeholder */
+.content {
+    padding: 20px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .navbar ul {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .navbar h1 {
+        margin-bottom: 10px;
+    }
+}
+
     </style>
 </head>
 <body>
 
    <!-- Navbar -->
    <nav class="navbar">
-    <h1>Resume Builder</h1>
+    <h1>Resum Resume</h1>
     <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="resume.html">Build Resume</a></li>
+        <li><a href="signup.html">Sign Up</a></li>
+        <li><a href="login.html">Login</a></li>
     </ul>
 </nav>
     <div class="content1">
diff --git a/index.html b/index.html
index 518780e..0b20a9e 100644
--- a/index.html
+++ b/index.html
@@ -12,255 +12,245 @@
 
     <link rel="stylesheet" href="style.css">
     <style>
-<label for="dark-mode-toggle">
+    <label for="dark-mode-toggle" style="margin: 20px; display: block; text-align: center;">
     <input type="checkbox" id="dark-mode-toggle" />
     Toggle Dark Mode
-</label>
-
-        /* Features Section */
-        .features {
-            padding: 60px 20px;
-            background-color: #f9f9f9;
-        }
-
-        .features h2 {
-            text-align: center;
-            color: #333;
-            margin-bottom: 40px;
-            font-size: 32px;
-        }
-
-        .features-cards {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .features-card {
-            background-color: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: calc(25% - 30px);
-            text-align: center;
-
-            transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
-            position: relative;
-            z-index: 1;
-        }
-
-        .features-card:hover {
-        transform: translateY(-10px) scale(1.1);
-        box-shadow: 0 4px 8px #0073b1; 
-        z-index: 3;
-        }
-
-        .features-card img {
-            width: 260px;
-            height: 260px;
-            margin-bottom: 15px;
-            height: 50%; /* Set height to 50% of the card */
-            /* /* object-fit: cover;  */
-            border-radius: 10px;
-            
-
-            transition: transform 0.3s ease;
-        }
-
-        .features-card:hover {
-            transform: translateY(-5px);
-        }
-
-        .features-card img {
-            width: 60px;
-            height: 60px;
-            margin-bottom: 20px;
-
-        }
-
-        .features-card h3 {
-            color: #aca7eb;
-            margin: 15px 0;
-            font-size: 22px;
-        }
-
-        .features-card p {
-            color: #666;
-            font-size: 16px;
-        }
-
-        /* Testimonials Section */
-        .testimonials {
-            padding: 60px 20px;
-            background-color: #ffffff;
-        }
-
-        .testimonials h2 {
-            text-align: center;
-            color: #333;
-            margin-bottom: 40px;
-            font-size: 32px;
-        }
-
-        .testimonial-cards {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .testimonial-card {
-            background-color: #f9f9f9;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: calc(33.33% - 30px);
-            text-align: center;
-        }
-
-        .testimonial-card img {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            margin-bottom: 20px;
-        }
-
-        .testimonial-card h3 {
-            color: #aca7eb;
-            margin: 10px 0;
-            font-size: 20px;
-        }
-
-        .testimonial-card p {
-            color: #666;
-            font-size: 16px;
-            font-style: italic;
-        }
-
-        /* Footer Styles */
-        .footer {
-            background-color: #aca7eb;
-            color: #ffffff;
-            padding: 40px 0;
-        }
-
-        .footer-content {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-
-        .footer-section {
-            flex: 1;
-            margin-bottom: 20px;
-            min-width: 200px;
-        }
-
-        .text {
-            padding-right: 20px; 
-            max-width: 50%; 
-        }
-        .image {
-            max-width: 50%; 
-        }
-        .image img {
-            width: 100%; 
-            height: auto;
-            border-radius: 5px; 
-
-
-        .footer-section h3 {
-            font-size: 18px;
-            font-weight: 700;
-            margin-bottom: 15px;
-            color: #ffffff;
-        }
-
-        .footer-section ul {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        .footer-section ul li {
-            margin-bottom: 8px;
-
-        }
-
-        .footer-section ul li a {
-            color: #e0e0e0;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-
-        .footer-section ul li a:hover {
-            color: #ffffff;
-            text-decoration: underline;
-        }
-
-        .social-icons {
-            margin-top: 15px;
-        }
-
-        .social-icons a {
-            color: #ffffff;
-            font-size: 20px;
-            margin-right: 15px;
-            transition: color 0.3s ease;
-        }
-
-        .social-icons a:hover {
-            color: #e0e0e0;
-        }
-
-        .footer-bottom {
-            text-align: center;
-            padding-top: 20px;
-            margin-top: 20px;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        /* Responsive Styles */
-        @media (max-width: 768px) {
-            .navbar {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-
-            .navbar ul {
-                flex-direction: column;
-                gap: 10px;
-                margin-top: 10px;
-            }
-
-            .hero-content {
-                flex-direction: column;
-            }
-
-            .hero-text {
-                padding-right: 0;
-                margin-bottom: 30px;
-            }
-
-            .features-card, .testimonial-card {
-                width: 100%;
-            }
-
-            .footer-content {
-                flex-direction: column;
-            }
-
-            .footer-section {
-                margin-bottom: 30px;
-            }
-        }
+    </label>
+
+<!-- Features Section -->
+<style>
+.features {
+    padding: 60px 20px;
+    background-color: #f9f9f9; /* Consider changing this to a darker tone if needed */
+}
+
+.features h2 {
+    text-align: center;
+    color: #333; /* Consider changing this for better contrast */
+    margin-bottom: 40px;
+    font-size: 32px;
+}
+
+.features-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.features-card {
+    background-color: #fff; /* You might want to change this to a softer off-white */
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: calc(25% - 30px);
+    text-align: center;
+
+    transition: transform 0.3s, box-shadow 0.3s, z-index 0.3s;
+    position: relative;
+    z-index: 1;
+}
+
+.features-card:hover {
+    transform: translateY(-10px) scale(1.1);
+    box-shadow: 0 4px 8px #0073b1; /* Consider adjusting this to match the modern minimalist theme */
+    z-index: 3;
+}
+.features-card img {
+    width: 60px; /* Set the width for the icon images */
+    height: 60px; /* Set the height for the icon images */
+    margin-bottom: 20px;
+    border-radius: 10px; /* Rounded corners for the images */
+    transition: transform 0.3s ease;
+}
+
+.features-card:hover {
+    transform: translateY(-5px); /* Slight lift effect on hover */
+}
+
+.features-card h3 {
+    color: var(--deep-teal); /* Use the deep teal color for headings */
+    margin: 15px 0;
+    font-size: 22px;
+}
+
+.features-card p {
+    color: var(--dark-slate); /* Use dark slate for paragraph text */
+    font-size: 16px;
+}
+
+/* Testimonials Section */
+.testimonials {
+    padding: 60px 20px;
+    background-color: var(--off-white); /* Use the off-white background color */
+}
+
+.testimonials h2 {
+    text-align: center;
+    color: var(--dark-slate); /* Use dark slate for heading text */
+    margin-bottom: 40px;
+    font-size: 32px;
+}
+
+.testimonial-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.testimonial-card {
+    background-color: var(--off-white); /* Use off-white for testimonial cards */
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: calc(33.33% - 30px);
+    text-align: center;
+}
+
+.testimonial-card img {
+    width: 80px; /* Profile image width */
+    height: 80px; /* Profile image height */
+    border-radius: 50%; /* Circular shape for profile images */
+    margin-bottom: 20px;
+}
+.testimonial-card h3 {
+    color: var(--deep-teal); /* Use deep teal for testimonial headings */
+    margin: 10px 0;
+    font-size: 20px;
+}
+
+.testimonial-card p {
+    color: var(--dark-slate); /* Use dark slate for testimonial text */
+    font-size: 16px;
+    font-style: italic; /* Italic style for testimonial text */
+}
+
+/* Footer Styles */
+.footer {
+    background-color: var(--deep-teal); /* Use deep teal for footer background */
+    color: #ffffff; /* White text for footer */
+    padding: 40px 0;
+}
+
+.footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 1200px; /* Max width for footer content */
+    margin: 0 auto; /* Center footer content */
+    padding: 0 20px;
+}
+
+.footer-section {
+    flex: 1; /* Flexible sections in footer */
+    margin-bottom: 20px; /* Space between footer sections */
+    min-width: 200px; /* Minimum width for each section */
+}
+
+.text {
+    padding-right: 20px; /* Right padding for text sections */
+    max-width: 50%; /* Maximum width for text sections */
+}
+
+.image {
+    max-width: 50%; /* Maximum width for image sections */
+}
+
+.image img {
+    width: 100%; /* Full width for images */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 5px; /* Rounded corners for images */
+}
+
+.footer-section h3 {
+    font-size: 18px; /* Font size for section headings */
+    font-weight: 700; /* Bold weight for section headings */
+    margin-bottom: 15px; /* Space below section headings */
+    color: #ffffff; /* White color for headings */
+}
+
+.footer-section ul {
+    list-style-type: none; /* No bullet points for list */
+    padding: 0; /* No padding for list */
+}
+
+.footer-section ul li {
+    margin-bottom: 8px; /* Space between list items */
+}
+
+.footer-section ul li a {
+    color: #e0e0e0; /* Light grey for links */
+    text-decoration: none; /* No underline for links */
+    transition: color 0.3s ease; /* Smooth transition for color change */
+}
+
+.footer-section ul li a:hover {
+    color: #ffffff; /* White color on hover */
+    text-decoration: underline; /* Underline on hover */
+}
+
+.social-icons {
+    margin-top: 15px; /* Space above social icons */
+}
+
+.social-icons a {
+    color: #ffffff; /* White color for social icons */
+    font-size: 20px; /* Font size for social icons */
+    margin-right: 15px; /* Space between social icons */
+    transition: color 0.3s ease; /* Smooth transition for color change */
+}
+
+.social-icons a:hover {
+    color: var(--light-grey); /* Use light grey on hover for social icons */
+}
+
+.footer-bottom {
+    text-align: center; /* Center the text in the footer bottom */
+    padding-top: 20px; /* Space above footer bottom */
+    margin-top: 20px; /* Space above footer bottom */
+    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border for separation */
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column; /* Stack navbar items vertically */
+        align-items: flex-start; /* Align items to the start */
+    }
+
+    .navbar ul {
+        flex-direction: column; /* Stack navbar links vertically */
+        gap: 10px; /* Space between navbar links */
+        margin-top: 10px; /* Space above navbar links */
+    }
+
+    .hero-content {
+        flex-direction: column; /* Stack hero content vertically */
+    }
+
+    .hero-text {
+        padding-right: 0; /* Remove right padding for hero text */
+        margin-bottom: 30px; /* Space below hero text */
+    }
+
+    .features-card, .testimonial-card {
+        width: 100%; /* Full width for cards on small screens */
+    }
+
+    .footer-content {
+        flex-direction: column; /* Stack footer content vertically */
+    }
+
+    .footer-section {
+        margin-bottom: 30px; /* Space below footer sections */
+    }
+}
+
     </style>
 </head>
 <body>
@@ -270,7 +260,7 @@
         
     <input type="checkbox" name="" id="toggler">
     <label for="toggler" class="fas fa-bars"></label>
-    <a href="#" class="logo">Resum Resume<span>.</span></a>
+    <a href="#" class="logo">Resum Resume</a>
              
             <nav class="navbar">
                 <a href="#home">Home</a>
diff --git a/login.html b/login.html
index aa8fe3b..63048c9 100644
--- a/login.html
+++ b/login.html
@@ -6,19 +6,33 @@
     <title>Login - LinkedIn Resume Builder</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --deep-teal: #003d4d;
+            --off-white: #f8f9fa;
+            --dark-slate: #2f4f4f;
+            --soft-gold: #d9c79e;
+        }
 
-        :root{
-          --purple: #aca7eb;
+        * {
+            margin: 0; 
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            outline: none;
+            text-decoration: none;
+            text-transform: capitalize;
+            transition: .2s linear;
         }
+
         body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #f0f4f8;
+            background-color: var(--off-white);
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
+            flex-direction: column;
         }
 
         .container {
@@ -29,10 +43,23 @@
             max-width: 400px;
             width: 100%;
             text-align: center;
+            position: relative; /* Allow footer positioning */
+        }
+
+        .logo {
+            font-size: 2rem; /* Adjusted size for single line */
+            color: var(--deep-teal);
+            font-weight: 600;
+            margin-bottom: 20px;
+            cursor: pointer; /* Change cursor to pointer */
+        }
+
+        .logo:hover {
+            color: var(--soft-gold); /* Change color on hover */
         }
 
         h2 {
-            color: #333;
+            color: var(--dark-slate);
             margin-bottom: 20px;
         }
 
@@ -48,29 +75,46 @@
         button {
             width: 100%;
             padding: 15px;
-            background-color: #aca7eb;
+            background-color: var(--deep-teal);
             color: white;
             border: none;
             border-radius: 4px;
             font-size: 18px;
             cursor: pointer;
+            margin-top: 10px; /* Added margin for spacing */
         }
 
         button:hover {
-            background-color: var(--purple);
+            background-color: var(--soft-gold);
+        }
+
+        .signup-btn {
+            background-color: var(--soft-gold);
+            margin-top: 10px;
+        }
+
+        .signup-btn:hover {
+            background-color: var(--deep-teal);
         }
 
         .footer {
-            margin-top: 20px;
+            margin-top: 20px; /* Space between container and footer */
+            text-align: center;
+            width: 100%; /* Ensure the footer takes full width */
+            background-color: var(--deep-teal); /* Background color for the footer */
+            color: white; /* Text color */
+            padding: 30px 0; /* Padding for spacing */
+            position: absolute; /* Positioning at the bottom */
+            bottom: 0; /* Align to the bottom */
         }
 
         .footer p {
-            color: #666;
+            color: #fff; /* Text color for footer */
             font-size: 14px;
         }
 
         .footer a {
-            color: #aca7eb;
+            color: var(--soft-gold);
             text-decoration: none;
         }
 
@@ -82,16 +126,20 @@
 <body>
 
     <div class="container">
+        <div class="logo" onclick="window.location.href='index.html'">Resum Resume</div>
         <h2>Log In to Your Account</h2>
-        <form action="#" method="POST">
+        <form id="loginForm" action="#" method="POST">
             <input type="email" placeholder="Email Address" required>
             <input type="password" placeholder="Password" required>
             <button type="submit">Log In</button>
         </form>
-        <div class="footer">
-            <p>Don't have an account? <a href="signup.html">Sign Up</a></p>
-        </div>
+        <button class="signup-btn" onclick="window.location.href='signup.html'">Go to Signup</button>
+    </div>
+
+    <div class="footer">
+        <p>Powered by Resume Builder &copy; 2024</p>
     </div>
+
     <script>
         document.getElementById('loginForm').addEventListener('submit', function(event) {
             event.preventDefault(); // Prevent the default form submission
diff --git a/resume.html b/resume.html
index d029a23..bf872f9 100644
--- a/resume.html
+++ b/resume.html
@@ -9,15 +9,32 @@
       rel="stylesheet"
     />
     <style>
-
       :root {
-        --purple: #aca7eb;
+        --deep-teal: #003d4d; /* Updated primary color */
+        --off-white: #f8f9fa; /* Updated background color */
+        --dark-slate: #2f4f4f; /* Text color */
+        --soft-gold: #d9c79e; /* Accent color */
       }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        outline: none;
+        border: none;
+        text-decoration: none;
+        text-transform: capitalize;
+        transition: 0.2s linear;
+      }
+
       body {
-        font-family: "Roboto", sans-serif;
-        background-color: #f4f4f9;
+        background-color: var(--off-white);
         margin: 0;
         padding: 0;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh; /* Ensure body takes full height */
       }
 
       .container {
@@ -26,25 +43,37 @@
         background-color: #fff;
         padding: 20px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        border-radius: 10px; /* Added rounded corners */
+        transition: box-shadow 0.3s ease;
+      }
+
+      .container:hover {
+        box-shadow: 0 0 20px rgba(0, 77, 79, 0.8); /* Glow effect on hover */
       }
 
       h1 {
         text-align: center;
-        color: #333;
+        color: var(--dark-slate); /* Updated heading color */
       }
 
       form {
         display: flex;
         flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: auto; /* Adjusted height for more fields */
+        width: 300px;
       }
 
       label {
         margin: 10px 0 5px;
-        color: #333;
+        color: var(--dark-slate); /* Updated label color */
         font-weight: 500;
       }
 
       input[type="url"],
+      input[type="email"],
+      input[type="tel"],
       select,
       button {
         padding: 10px;
@@ -56,30 +85,38 @@
       }
 
       input[type="url"]:focus,
+      input[type="email"]:focus,
+      input[type="tel"]:focus,
       select:focus {
         border-color: var(--purple);
       }
 
       button {
-        background-color: var(--purple);
+        background-color: var(--deep-teal);
         color: white;
         border: none;
         cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.3s ease;
       }
 
       button:hover {
-        background-color: var(--purple);
+        background-color: var(--soft-gold); /* Soft gold hover color */
+        color: var(--deep-teal);
+        transform: scale(1.05);
       }
 
       .footer {
         text-align: center;
-        margin-top: 20px;
+        margin-top: auto; /* Push footer to the bottom */
+        padding: 34px 0;
+        background-color: var(--deep-teal);
+        color: white;
         font-size: 14px;
-        color: #666;
       }
+
       .navbar {
-        background-color: var(--purple);
-        padding: 15px 20px;
+        background-color: var(--deep-teal);
+        padding: 30px 20px;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -87,13 +124,18 @@
 
       .navbar h1 {
         color: white;
-        margin: 0;
-        font-size: 24px;
+        margin-left: 15px;
+        font-size: 2rem;
+        transition: color 0.3s ease;
+      }
+
+      .navbar h1:hover {
+        color: var(--soft-gold);
       }
 
       .navbar ul {
         list-style-type: none;
-        margin: 0;
+        margin-right: 30px;
         padding: 0;
         display: flex;
         gap: 20px;
@@ -107,15 +149,16 @@
         color: white;
         text-decoration: none;
         font-size: 18px;
+        transition: color 0.3s ease;
       }
 
       .navbar ul li a:hover {
-        text-decoration: underline;
+        color: var(--soft-gold);
       }
 
-      /* Main Content Placeholder */
       .content {
         padding: 20px;
+        text-align: center;
       }
 
       /* Responsive adjustments */
@@ -133,19 +176,27 @@
         .navbar h1 {
           margin-bottom: 10px;
         }
+
+        .container {
+          max-width: 90%; /* Adjusted width for mobile */
+        }
       }
     </style>
   </head>
   <body>
+    <!-- Navbar -->
+    <nav class="navbar">
+      <h1>Resum Resume</h1>
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="resume.html">Build Resume</a></li>
+        <li><a href="signup.html">Sign Up</a></li>
+        <li><a href="login.html">Login</a></li>
+      </ul>
+    </nav>
+
     <div class="container">
-      <!-- Navbar -->
-      <nav class="navbar">
-        <h1>Resume Builder</h1>
-        <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="about.html">About</a></li>
-        </ul>
-      </nav>
       <form id="resumeForm">
         <label for="linkedin-url">LinkedIn Profile URL</label>
         <input
@@ -156,6 +207,24 @@ <h1>Resume Builder</h1>
           required
         />
 
+        <label for="email">Email Address</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          placeholder="Enter your email address"
+          required
+        />
+
+        <label for="phone">Phone Number</label>
+        <input
+          type="tel"
+          id="phone"
+          name="phone"
+          placeholder="Enter your phone number"
+          required
+        />
+
         <label for="template">Choose a Resume Template</label>
         <select id="template" name="template" required>
           <option value="classic">Classic Template</option>
@@ -165,10 +234,11 @@ <h1>Resume Builder</h1>
 
         <button type="submit">Generate Resume</button>
       </form>
+    </div>
 
-      <div class="footer">
-        <p>Powered by Resume Builder &copy; 2024</p>
-      </div>
+    <!-- Footer -->
+    <div class="footer">
+      <p>Powered by Resume Builder &copy; 2024</p>
     </div>
 
     <script>
@@ -178,13 +248,15 @@ <h1>Resume Builder</h1>
           event.preventDefault();
 
           const linkedInUrl = document.getElementById("linkedin-url").value;
+          const email = document.getElementById("email").value;
+          const phone = document.getElementById("phone").value;
           const template = document.getElementById("template").value;
 
-          if (linkedInUrl && template) {
+          if (linkedInUrl && email && phone && template) {
             alert(
-              `Generating resume using ${template} template for LinkedIn profile: ${linkedInUrl}`
+              `Generating resume using ${template} template for LinkedIn profile: ${linkedInUrl}, Email: ${email}, Phone: ${phone}`
             );
-            // Here you would add logic to send this data to your backend for processing
+            // Add logic to send this data to your backend for processing
           }
         });
     </script>
diff --git a/signup.html b/signup.html
index daa16f4..9908377 100644
--- a/signup.html
+++ b/signup.html
@@ -7,17 +7,33 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
         :root {
-          --purple: #aca7eb;
+            --deep-teal: #003d4d;
+            --off-white: #f8f9fa;
+            --dark-slate: #2f4f4f;
+            --soft-gold: #d9c79e;
         }
+
+        * {
+            margin: 0; 
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            outline: none;
+            border: none;
+            text-decoration: none;
+            text-transform: capitalize;
+            transition: .2s linear;
+        }
+
         body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #f0f4f8;
+            background-color: var(--off-white);
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
+            flex-direction: column; /* Added for vertical alignment */
         }
 
         .container {
@@ -30,8 +46,20 @@
             text-align: center;
         }
 
+        .logo {
+            font-size: 2rem; /* Decreased size for single line */
+            color: var(--deep-teal);
+            font-weight: 600;
+            margin-bottom: 20px;
+            cursor: pointer; /* Change cursor to pointer */
+        }
+
+        .logo:hover {
+            color: var(--soft-gold); /* Change color on hover */
+        }
+
         h2 {
-            color: #333;
+            color: var(--dark-slate);
             margin-bottom: 20px;
         }
 
@@ -48,7 +76,7 @@
         button {
             width: 100%;
             padding: 15px;
-            background-color: var(--purple);
+            background-color: var(--deep-teal);
             color: white;
             border: none;
             border-radius: 4px;
@@ -57,20 +85,36 @@
         }
 
         button:hover {
-            background-color: var(--purple);
+            background-color: var(--soft-gold);
+        }
+
+        .login-btn {
+            background-color: var(--soft-gold);
+            margin-top: 10px;
+        }
+
+        .login-btn:hover {
+            background-color: var(--deep-teal);
         }
 
         .footer {
-            margin-top: 20px;
+            margin-top: 20px; /* Space between container and footer */
+            text-align: center;
+            width: 100%; /* Ensure the footer takes full width */
+            background-color: var(--deep-teal); /* Background color for the footer */
+            color: white; /* Text color */
+            padding: 30px 0; /* Padding for spacing */
+            position: absolute; /* Positioning at the bottom */
+            bottom: 0; /* Align to the bottom */
         }
 
         .footer p {
-            color: #666;
+            color: #fff; /* Text color for footer */
             font-size: 14px;
         }
 
         .footer a {
-            color: var(--purple);
+            color: var(--soft-gold);
             text-decoration: none;
         }
 
@@ -82,22 +126,25 @@
 <body>
 
     <div class="container">
+        <div class="logo" onclick="window.location.href='index.html'">Resum Resume</div>
         <h2>Create Your Account</h2>
-        <form action="#" method="POST">
+        <form id="signupForm" action="#" method="POST">
             <input type="text" placeholder="Full Name" required>
             <input type="email" placeholder="Email Address" required>
             <input type="password" placeholder="Password" required>
             <input type="password" placeholder="Confirm Password" required>
             <button type="submit">Sign Up</button>
         </form>
-        <div class="footer">
-            <p>Already have an account? <a href="login.html">Log In</a></p>
-        </div>
+        <button class="login-btn" onclick="window.location.href='login.html'">Go to Login</button>
+    </div>
+
+    <div class="footer">
+        <p>Powered by Resume Builder &copy; 2024</p>
     </div>
 
     <script>
         document.getElementById('signupForm').addEventListener('submit', function(event) {
-            event.preventDefault(); // Prevent the default form submission
+            event.preventDefault();
 
             var formData = new FormData(this);
             
@@ -108,7 +155,7 @@ <h2>Create Your Account</h2>
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    window.location.href = 'index.html'; // Redirect to homepage
+                    window.location.href = 'index.html'; 
                 } else {
                     alert('Sign Up failed: ' + data.message);
                 }
diff --git a/style.css b/style.css
index 03138a1..6e187d1 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,8 @@
 :root{
-    --purple: #aca7eb;
+    --deep-teal: #003d4d; /* Deep Teal */
+    --off-white: #f8f9fa; /* Off-White */
+    --dark-slate: #2f4f4f; /* Dark Slate */
+    --soft-gold: #d9c79e; /* Soft Gold */
 }
 
 * {
@@ -25,100 +28,103 @@ section{
     padding: 2rem 9%;
 }
 
-.heading{
+.heading {
     text-align: center;
     font-size: 4rem;
-    color: #333;
+    color: var(--dark-slate); /* Dark Slate color */
     padding: 1rem;
     margin: 2rem 0;
-    background: rgba(255,51,153,0.05);
+    background: var(--deep-teal); /* Changed background to Deep Teal */
 }
 
-.heading span{
-    color: var(--pink);
+.heading span {
+    color: var(--soft-gold); /* Soft Gold for span */
 }
 
-.btn{
+.btn {
     display: inline-block;
     margin-top: 1rem;
     border-radius: 5rem;
-    background: #333;
-    color: #fff;
+    background: var(--soft-gold); /* Soft Gold button background */
+    color: var(--dark-slate); /* Dark Slate text color */
     padding: 0.9rem 3.5rem;
     cursor: pointer;
     font-size: 1.7rem;
 }
 
-.btn:hover{
-    background: var(--purple);
+.btn:hover {
+    background: var(--deep-teal); /* Deep Teal on hover */
 }
 
-header{
+header {
     position: fixed;
     top: 0; left: 0; right: 0;
-    background: #fff;
+    background: var(--deep-teal); /* Changed background to Deep Teal */
     padding: 2rem 9%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     z-index: 1000;
-    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
 }
 
-header .logo{
+header .logo {
     font-size: 3rem;
-    color: #3f10ea;
+    color: var(--off-white); /* White logo for contrast */
     font-weight: bolder;
 }
-header .logo:hover{
+
+header .logo:hover {
     font-size: 3rem;
-    color: #f03c0b;
+    color: var(--soft-gold); /* Soft Gold on hover for logo */
     font-weight: bolder;
     text-decoration: none;
 }
 
-header .logo span{
-    color: var(--#3f10ea);
+header .logo span {
+    color: var(--off-white); /* Updated to match logo color */
 }
 
-header .navbar a{
+header .navbar a {
     font-size: 2rem;
-    padding: 0 1.5rem;
-    color: #666;
+    padding: 15px;
+    color: var(--off-white); /* White text for better contrast */
+    text-decoration: none; /* Ensure no underline by default */
 }
 
-header .navbar a:hover{
-    color: var(--red);
-    text-decoration: none;
+header .navbar a:hover {
+    color: var(--soft-gold); /* Soft Gold on hover */
+    text-decoration: none; /* Ensure no underline by default */
 }
 
-header .icons a{
+header .icons a {
     font-size: 2.5rem;
-    color: #333;
+    color: var(--off-white); /* White icons for contrast */
     margin-left: 1.5rem;
 }
 
-header .icons a:hover{
-    color: var(--purple);
+header .icons a:hover {
+    color: var(--soft-gold); /* Soft Gold hover effect for icons */
 }
 
-header #toggler{
+header #toggler {
     display: none;
 }
 
-header .fa-bars{
+header .fa-bars {
     font-size: 3rem;
-    color:#333;
+    color: var(--off-white); /* White for better visibility */
     border-radius: .5rem;
     padding: .5rem 1.5rem;
     cursor: pointer;
-    border: .1rem solid rgba(0,0,0,0.3);
+    border: .1rem solid rgba(0, 0, 0, 0.3);
     display: none;
 }
+
 /* Default light mode styles */
 body {
-    background-color: #ffffff;
-    color: #000000;
+    background-color: var(--off-white); /* Changed from #ffffff to Off-White */
+    color: var(--dark-slate); /* Changed from #000000 to Dark Slate */
 }
 
 /* Dark mode styles */
@@ -134,12 +140,11 @@ body {
 
 /* Add more styles as needed for other elements */
 
-
 .home{
     display: flex;
     align-items: center;
     min-height: 100vh;
-    background: url(images/background-home.png)no-repeat;
+    background: url(images/background-home.png) no-repeat;
     background-size: cover;
     background-position: center;
 }
@@ -150,19 +155,20 @@ body {
 
 .home .content h3{
     font-size: 5rem;
-    color: #333;
+    color: var(--dark-slate); /* Changed from #333 to Dark Slate */
+
 }
 
 .home .content span{
     font-size: 3.5rem;
-    color: var(--purple);
+    color: var(--soft-gold); /* Changed from var(--purple) to Soft Gold */
     padding: 1rem 0;
     line-height: 1.5;
 }
 
 .home .content p{
     font-size: 1.5rem;
-    color: #999;
+    color: #666; /* Changed from #999 to a darker gray for better readability */
     padding: 1rem 0;
     line-height: 1.5;
 }
@@ -173,78 +179,82 @@ body {
 
 
 /* media queries */
-@media (max-width:991px){
-
-    html{
+@media (max-width: 991px) {
+    html {
         font-size: 55%;
     }
 
-    header{
+    header {
         padding: 2rem;
     }
 
-    section{
+    section {
         padding: 2rem;
     }
 
-    .home{
+    .home {
         background-position: left;
     }
     
 }
 
-@media (max-width:768px){
-
-    html .fa-bars{
+@media (max-width: 768px) {
+    html .fa-bars {
         display: block;
     }
 
-    header .navbar{
+    header .navbar {
         position: absolute;
-        top: 100%; left: 0; right: 0;
-        background: #eee;
-        border-top: 0.1rem solid rgba(0,0,0,0.1);
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #f9f9f9; /* Updated background to a softer light color */
+        border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
         clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     }
 
-    header #toggler:checked ~ .navbar{
+    header #toggler:checked ~ .navbar {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     }
 
-    header .navbar a{
+    header .navbar a {
         margin: 1.5rem;
         padding: 1.5rem;
-        background: #fff;
-        border: 0.1rem solid rgba(0,0,0,0.1);
+        background: #ffffff; /* Updated to a cleaner white */
+        border: 0.1rem solid rgba(0, 0, 0, 0.1);
+        color: var(--dark-slate); /* Changed text color to Dark Slate */
         display: block;
     }
 
-    .home .content h3{
+    header .navbar a:hover {
+        color: var(--soft-gold); /* Hover color set to Soft Gold */
+    }
+
+    .home .content h3 {
         font-size: 5rem;
     }
 
-    .home .content span{
+    .home .content span {
         font-size: 2.5rem;
     }
 
-    .icons-container .icons h3{
+    .icons-container .icons h3 {
         font-size: 2rem;
     }
     
-    .icons-container .icons span{
+    .icons-container .icons span {
         font-size: 1.7rem;
     }
      
 
 }
 
-@media (max-width:450px){
-
-    html{
+@media (max-width: 450px) {
+    html {
         font-size: 50%;
     }
 
-    .heading{
+    .heading {
         font-size: 3rem;
     }
     

From 87582dc32d9d4794dfb9b001e14b4a3a390a572b Mon Sep 17 00:00:00 2001
From: Sneha2005 <snehasrijaya2005@gmail.com>
Date: Fri, 4 Oct 2024 18:46:34 +0530
Subject: [PATCH 2/4] Added smooth float-in animation for text and image on
 home page

---
 style.css | 37 +++++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 6e187d1..65ea95e 100644
--- a/style.css
+++ b/style.css
@@ -140,19 +140,31 @@ body {
 
 /* Add more styles as needed for other elements */
 
-.home{
+.home {
     display: flex;
     align-items: center;
     min-height: 100vh;
     background: url(images/background-home.png) no-repeat;
     background-size: cover;
     background-position: center;
+    animation: floatInFromRight 2s ease-out forwards; /* Image floats from right */
 }
 
-.home .content{
+.home .content {
     max-width: 50rem;
+    opacity: 0; /* Ensure the text is hidden initially */
+    animation: floatInFromTop 2s ease-out forwards; /* Text floats from top */
 }
 
+.home .content h3,
+.home .content p,
+.home .content a {
+    opacity: 0; /* Initially hidden */
+    animation: floatInFromTop 2s ease-out forwards; /* Text enters from the top */
+    animation-delay: 0.5s; /* Delay for a smooth entrance */
+}
+
+
 .home .content h3{
     font-size: 5rem;
     color: var(--dark-slate); /* Changed from #333 to Dark Slate */
@@ -173,6 +185,27 @@ body {
     line-height: 1.5;
 }
 
+@keyframes floatInFromTop {
+    0% {
+        opacity: 0;
+        transform: translateY(0); /* Starting position from above */
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0); /* Final position */
+    }
+}
+
+@keyframes floatInFromRight {
+    0% {
+        opacity: 0;
+        transform: translateX(50px); /* Starting position from the right */
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0); /* Final position */
+    }
+}
 
 
 

From 76a51a6c54e8cf96f101603a3296c1cf927952c3 Mon Sep 17 00:00:00 2001
From: Sneha2005 <snehasrijaya2005@gmail.com>
Date: Fri, 4 Oct 2024 18:49:46 +0530
Subject: [PATCH 3/4] Added smooth float-in animation for text and image on
 home page and removed linkedin GIFs from about page.

---
 about.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/about.html b/about.html
index cf85a93..019c539 100644
--- a/about.html
+++ b/about.html
@@ -267,7 +267,6 @@ <h1>Resum Resume</h1>
     </ul>
 </nav>
     <div class="content1">
-        <img src="Li.gif" alt="" height="150px">
         <div class="content">
             <div class="action">
     
@@ -301,7 +300,6 @@ <h2>Why Use LinkedIn Resume Builder?</h2>
                 <li><strong>Accurate data:</strong> Directly pulls information from your LinkedIn profile.</li>
             </ul>
         </div>
-        <img src="Li.gif" alt="" height="150px">
     </div>
     <div class="back-button">
         <a href="index.html">Go Back to Home</a>

From 474e8c94f3fd66f5945ed152e05dc65edf53dcb9 Mon Sep 17 00:00:00 2001
From: Sneha2005 <snehasrijaya2005@gmail.com>
Date: Fri, 4 Oct 2024 19:52:13 +0530
Subject: [PATCH 4/4] Improved home and about pages with animations and removed
 LinkedIn gifs

---
 index.html  |  70 ++----
 login.html  |  10 +-
 resume.html | 625 +++++++++++++++++++++-------------------------------
 signup.html |   8 +-
 style.css   |  27 ++-
 5 files changed, 292 insertions(+), 448 deletions(-)

diff --git a/index.html b/index.html
index 3517098..1c2e100 100644
--- a/index.html
+++ b/index.html
@@ -16,22 +16,18 @@
         Toggle Dark Mode
     </label>
     <style>
-<<<<<<< HEAD
+
     <label for="dark-mode-toggle" style="margin: 20px; display: block; text-align: center;">
-||||||| da240a0
+
 <label for="dark-mode-toggle">
-=======
-  /*<label for ="dark-mode-toggle">
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
+
     <input type="checkbox" id="dark-mode-toggle" />
     Toggle Dark Mode
-<<<<<<< HEAD
+
     </label>
-||||||| da240a0
+
 </label>
-=======
-</label>*/
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
+
 
 <!-- Features Section -->
 <style>
@@ -110,7 +106,7 @@
     font-size: 32px;
 }
 
-<<<<<<< HEAD
+
 .testimonial-cards {
     display: flex;
     flex-wrap: wrap;
@@ -119,21 +115,15 @@
     max-width: 1200px;
     margin: 0 auto;
 }
-||||||| da240a0
+
         .features-card h3 {
             color: #aca7eb;
             margin: 15px 0;
             font-size: 22px;
         }
-=======
-        .features-card h3 {
-            color: #6e65f0;
-            margin: 15px 0;
-            font-size: 22px;
-        }
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
 
-<<<<<<< HEAD
+
+
 .testimonial-card {
     background-color: var(--off-white); /* Use off-white for testimonial cards */
     padding: 30px;
@@ -142,17 +132,12 @@
     width: calc(33.33% - 30px);
     text-align: center;
 }
-||||||| da240a0
+
         .features-card p {
             color: #666;
             font-size: 16px;
         }
-=======
-        .features-card p {
-            color: #52525a;
-            font-size: 16px;
-        }
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
+
 
 .testimonial-card img {
     width: 80px; /* Profile image width */
@@ -194,44 +179,32 @@
     min-width: 200px; /* Minimum width for each section */
 }
 
-<<<<<<< HEAD
+
 .text {
     padding-right: 20px; /* Right padding for text sections */
     max-width: 50%; /* Maximum width for text sections */
 }
-||||||| da240a0
+
         .testimonial-card h3 {
             color: #aca7eb;
             margin: 10px 0;
             font-size: 20px;
         }
-=======
-        .testimonial-card h3 {
-            color:  #6e65f0;
-            margin: 10px 0;
-            font-size: 20px;
-        }
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
 
-<<<<<<< HEAD
+
+
 .image {
     max-width: 50%; /* Maximum width for image sections */
 }
-||||||| da240a0
+
         .testimonial-card p {
             color: #666;
             font-size: 16px;
             font-style: italic;
         }
-=======
-        .testimonial-card p {
-            color: #52525a;
-            font-size: 16px;
-            font-style: italic;
-        }
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
 
-<<<<<<< HEAD
+
+
 .image img {
     width: 100%; /* Full width for images */
     height: auto; /* Maintain aspect ratio */
@@ -322,7 +295,7 @@
     }
 }
 
-||||||| da240a0
+
         /* Footer Styles */
         .footer {
             background-color: #aca7eb;
@@ -442,8 +415,7 @@
                 margin-bottom: 30px;
             }
         }
-=======
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
+
     </style>
 </head>
 <body>
diff --git a/login.html b/login.html
index 8e89928..ae155d4 100644
--- a/login.html
+++ b/login.html
@@ -6,21 +6,13 @@
     <title>Login - LinkedIn Resume Builder</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
-<<<<<<< HEAD
+        
         :root {
             --deep-teal: #003d4d;
             --off-white: #f8f9fa;
             --dark-slate: #2f4f4f;
             --soft-gold: #d9c79e;
-||||||| da240a0
 
-        :root{
-          --purple: #aca7eb;
-=======
-
-        :root{
-          --purple:   #6e65f0;
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
         }
 
         * {
diff --git a/resume.html b/resume.html
index ba90327..45a6a33 100644
--- a/resume.html
+++ b/resume.html
@@ -1,413 +1,290 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Resume Builder from LinkedIn</title>
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
-      rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+        rel="stylesheet"
     />
     <style>
-<<<<<<< HEAD
-||||||| da240a0
-
-=======
-      *{
-        margin:10px;
-      }
-      .nav{
-        background-color: #aca7eb;
-        display: flex;
-        width: 100%;
-        margin: 0%;
-        
-      }
-      ul{
-        list-style: none;
-        display: flex;
-        align-items: end;
-        color: #fff;
-        font-size: 25px;
-        font-weight: 300;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-      }
-      a{
-        color: #fff;
-        justify-content: space-between;
-        text-decoration: none;
-      }
-      li{
-        text-align: end;
-      }
-      .heading{
-        font-size: 70px;
-        background-color: #aca7eb;
-        color: white;
-        padding-left: 20px;
-        font-family:   sans-serif;
-      }
-      img{
-        border: 2px solid black;
-      }
-      .sub-heading{
-        margin-left: 30px;
-        padding-top: 40px;
-        font-size: 40px;
-        color: #4841bd;
-        width:fit-content;
-        font-family: Georgia, 'Times New Roman', Times, serif;
-      }
-      .sample-resume{
-        width:20%;
-        margin:10px;
-        padding: 3px;
-      }
-      .sample-color{
-        width:17%;
-        margin:10px;
-        padding: 3px;
-      }
-      .button-view{
-       padding: 15px;
-       font-size: 25px;
-       font-weight: 500;
-       font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-       border: 1px solid #4841bd;
-      }
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
-      :root {
-<<<<<<< HEAD
-        --deep-teal: #003d4d; /* Updated primary color */
-        --off-white: #f8f9fa; /* Updated background color */
-        --dark-slate: #2f4f4f; /* Text color */
-        --soft-gold: #d9c79e; /* Accent color */
-||||||| da240a0
-        --purple: #aca7eb;
-=======
-        --purple: #6e65f0;
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
-      }
-
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
-        outline: none;
-        border: none;
-        text-decoration: none;
-        text-transform: capitalize;
-        transition: 0.2s linear;
-      }
-
-      body {
-        background-color: var(--off-white);
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh; /* Ensure body takes full height */
-      }
-
-      .container {
-        margin: 50px 120px ;
-        background-color: #fff;
-        padding: 20px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        border-radius: 10px; /* Added rounded corners */
-        transition: box-shadow 0.3s ease;
-      }
-
-      .container:hover {
-        box-shadow: 0 0 20px rgba(0, 77, 79, 0.8); /* Glow effect on hover */
-      }
-
-      h1 {
-        text-align: center;
-        color: var(--dark-slate); /* Updated heading color */
-      }
-
-      form {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: auto; /* Adjusted height for more fields */
-        width: 300px;
-      }
-
-      label {
-        margin: 10px 0 5px;
-        color: var(--dark-slate); /* Updated label color */
-        font-weight: 500;
-      }
-
-      input[type="url"],
-      input[type="email"],
-      input[type="tel"],
-      select,
-      button {
-        padding: 10px;
-        font-size: 16px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        outline: none;
-      }
-
-      input[type="url"]:focus,
-      input[type="email"]:focus,
-      input[type="tel"]:focus,
-      select:focus {
-        border-color: var(--purple);
-      }
-
-      button {
-        background-color: var(--deep-teal);
-        color: white;
-        border: none;
-        cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.3s ease;
-      }
-
-      button:hover {
-        background-color: var(--soft-gold); /* Soft gold hover color */
-        color: var(--deep-teal);
-        transform: scale(1.05);
-      }
-
-      .footer {
-        text-align: center;
-        margin-top: auto; /* Push footer to the bottom */
-        padding: 34px 0;
-        background-color: var(--deep-teal);
-        color: white;
-        font-size: 14px;
-      }
-
-      .navbar {
-        background-color: var(--deep-teal);
-        padding: 30px 20px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .navbar h1 {
-        color: white;
-        margin-left: 15px;
-        font-size: 2rem;
-        transition: color 0.3s ease;
-      }
-
-      .navbar h1:hover {
-        color: var(--soft-gold);
-      }
-
-      .navbar ul {
-        list-style-type: none;
-        margin-right: 30px;
-        padding: 0;
-        display: flex;
-        gap: 20px;
-      }
-
-      .navbar ul li {
-        display: inline;
-      }
-
-      .navbar ul li a {
-        color: white;
-        text-decoration: none;
-        font-size: 18px;
-        transition: color 0.3s ease;
-      }
-
-      .navbar ul li a:hover {
-        color: var(--soft-gold);
-      }
-
-      .content {
-        padding: 20px;
-        text-align: center;
-      }
-
-      /* Responsive adjustments */
-      @media (max-width: 768px) {
-        .navbar {
-          flex-direction: column;
-          align-items: flex-start;
+        :root {
+            --deep-teal: #003d4d; /* Updated primary color */
+            --off-white: #f8f9fa; /* Updated background color */
+            --dark-slate: #2f4f4f; /* Text color */
+            --soft-gold: #d9c79e; /* Accent color */
         }
 
-        .navbar ul {
-          flex-direction: column;
-          gap: 10px;
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            outline: none;
+            border: none;
+            text-decoration: none;
+            text-transform: capitalize;
+            transition: 0.2s linear;
         }
 
-        .navbar h1 {
-          margin-bottom: 10px;
+        body {
+            background-color: var(--off-white);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh; /* Ensure body takes full height */
         }
 
         .container {
-          max-width: 90%; /* Adjusted width for mobile */
+            margin: 50px auto; /* Center horizontally */
+            padding: 20px;
+            max-width: 500px; /* Set a max-width for the container */
+            background-color: #fff;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 10px; /* Added rounded corners */
+            transition: box-shadow 0.3s ease;
+            display: flex; /* Use flexbox to center items */
+            justify-content: center; /* Center horizontally */
+            align-items: center; /* Center vertically */
+            height: calc(100vh - 180px); /* Full height minus margins */
+        }
+
+        .container:hover {
+            box-shadow: 0 0 20px rgba(0, 77, 79, 0.8); /* Glow effect on hover */
+        }
+
+        h1 {
+            text-align: center;
+            color: var(--dark-slate); /* Updated heading color */
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%; /* Make form take full width of container */
+        }
+
+        label {
+            margin: 10px 0 5px;
+            color: var(--dark-slate); /* Updated label color */
+            font-weight: 500;
+        }
+
+        input[type="url"],
+        input[type="email"],
+        input[type="tel"],
+        select,
+        button {
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-bottom: 20px;
+            outline: none;
+            width: 100%; /* Full width for input fields */
         }
-      }
-      @media (max-width: 400px) {
+
+        input[type="url"]:focus,
+        input[type="email"]:focus,
+        input[type="tel"]:focus,
+        select:focus {
+            border-color: var(--purple);
+        }
+
+        button {
+            background-color: var(--deep-teal);
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        button:hover {
+            background-color: var(--soft-gold); /* Soft gold hover color */
+            color: var(--deep-teal);
+            transform: scale(1.05);
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: auto; /* Push footer to the bottom */
+            padding: 34px 0;
+            background-color: var(--deep-teal);
+            color: white;
+            font-size: 14px;
+        }
+
+        .navbar {
+            background-color: var(--deep-teal);
+            padding: 30px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .navbar h1 {
+            color: white;
+            margin-left: 15px;
+            font-size: 2rem;
+            transition: color 0.3s ease;
+        }
+
+        .navbar h1:hover {
+            color: var(--soft-gold);
+        }
+
         .navbar ul {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-evenly;
-          width: 100%;
+            list-style-type: none;
+            margin-right: 30px;
+            padding: 0;
+            display: flex;
+            gap: 20px;
         }
+
         .navbar ul li {
-          justify-content: space-evenly !important;
+            display: inline;
         }
+
         .navbar ul li a {
-          color: #eee7e7;
-          font-size: 20px;
+            color: white;
+            text-decoration: none;
+            font-size: 18px;
+            transition: color 0.3s ease;
         }
+
         .navbar ul li a:hover {
-          color: #ffffff;
-          font-size: 22px;
+            color: var(--soft-gold);
+        }
+
+        .content {
+            padding: 20px;
+            text-align: center;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .navbar {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .navbar ul {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .navbar h1 {
+                margin-bottom: 10px;
+            }
+
+            .container {
+                max-width: 90%; /* Adjusted width for mobile */
+            }
+        }
+        @media (max-width: 400px) {
+            .navbar ul {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-evenly;
+                width: 100%;
+            }
+            .navbar ul li {
+                justify-content: space-evenly !important;
+            }
+            .navbar ul li a {
+                color: #eee7e7;
+                font-size: 20px;
+            }
+            .navbar ul li a:hover {
+                color: #ffffff;
+                font-size: 22px;
+            }
         }
-      }
     </style>
-  </head>
-  <body>
-<<<<<<< HEAD
+</head>
+<body>
+
     <!-- Navbar -->
     <nav class="navbar">
-      <h1>Resum Resume</h1>
-      <ul>
-        <li><a href="index.html">Home</a></li>
-        <li><a href="about.html">About</a></li>
-        <li><a href="resume.html">Build Resume</a></li>
-        <li><a href="signup.html">Sign Up</a></li>
-        <li><a href="login.html">Login</a></li>
-      </ul>
-    </nav>
-
-    <div class="container">
-||||||| da240a0
-    <div class="container">
-      <!-- Navbar -->
-      <nav class="navbar">
-        <h1>Resume Builder</h1>
+        <h1>Resum Resume</h1>
         <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="about.html">About</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="resume.html">Build Resume</a></li>
+            <li><a href="signup.html">Sign Up</a></li>
+            <li><a href="login.html">Login</a></li>
         </ul>
-      </nav>
-=======
-    <div class="nav">
-        <h1 class="heading">Resume Builder</h1>
-        <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="about.html">About</a></li>
-        </ul>
-      </div>
-        <div class="gallery-view">
-
-          <div class="sampleTemplates">
-           <h2 class="sub-heading">SAMPLE DESIGNS</h2>
-
-           <img class="sample-resume"src="images\sample-resume6.jpg" alt="resume6">
-           <img class="sample-resume"src="images\sample-resume1.jpg" alt="resume1">
-           <img class="sample-resume"src="images\sample-resume2.jpg" alt="resume2">
-           <img class="sample-resume"src="images\sample-resume7.jpg" alt="resume7">
-           <img class="sample-resume"src="images\sample-resume4.jpg" alt="resume4">
-           <img class="sample-resume"src="images\sample-resume5.jpg" alt="resume5">
-           <img class="sample-resume"src="images\sample-resume8.jpg" alt="resume8">
-           <a href="galleryView.html"><button class="button-view">GALLERY VIEW</button></a>
-           
-           
-          </div>
-          <div class="colorPallet">
-            <h2 class="sub-heading">COLOUR PALETTE</h2>
-            <img class="sample-color"src="images\sample-color1.png" alt="color1">
-            <img class="sample-color"src="images\sample-color2.png" alt="color2">
-            <img class="sample-color"src="images\sample-color3.png" alt="color3">
-            <img class="sample-color"src="images\sample-color4.png" alt="color4">
-            <a href="colorChoice.html"><button class="button-view">MORE CHOICES</button></a> 
-          </div>
-        </div>
-
-        <div class="main-section">
-        <h2 class="sub-heading">CREATE YOUR OWN RESUME</h2>
+    </nav>
+
     <div class="container">
-     
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
-      <form id="resumeForm">
-        <label for="linkedin-url">LinkedIn Profile URL</label>
-        <input
-          type="url"
-          id="linkedin-url"
-          name="linkedin-url"
-          placeholder="Enter your LinkedIn URL"
-          required
-        />
-
-        <label for="email">Email Address</label>
-        <input
-          type="email"
-          id="email"
-          name="email"
-          placeholder="Enter your email address"
-          required
-        />
-
-        <label for="phone">Phone Number</label>
-        <input
-          type="tel"
-          id="phone"
-          name="phone"
-          placeholder="Enter your phone number"
-          required
-        />
-
-        <label for="template">Choose a Resume Template</label>
-        <select id="template" name="template" placeholder="Choose Template"required>
-        <option value="classic">Choose Template</option>
-          <option value="classic">Classic Template</option>
-          <option value="modern">Modern Template</option>
-          <option value="minimalist">Minimalist Template</option>
-          <option value="Custom">Custom Template</option>
-        </select>
-
-        <button type="submit">Generate Resume</button>
-      </form>
-<<<<<<< HEAD
-    </div>
-||||||| da240a0
-=======
+        <form id="resumeForm">
+            <label for="linkedin-url">LinkedIn Profile URL</label>
+            <input
+                type="url"
+                id="linkedin-url"
+                name="linkedin-url"
+                placeholder="Enter your LinkedIn URL"
+                required
+            />
+
+            <label for="email">Email Address</label>
+            <input
+                type="email"
+                id="email"
+                name="email"
+                placeholder="Enter your email address"
+                required
+            />
+
+            <label for="phone">Phone Number</label>
+            <input
+                type="tel"
+                id="phone"
+                name="phone"
+                placeholder="Enter your phone number"
+                required
+            />
+
+            <label for="template">Choose a Resume Template</label>
+            <select id="template" name="template" placeholder="Choose Template" required>
+                <option value="classic">Choose Template</option>
+                <option value="classic">Classic Template</option>
+                <option value="modern">Modern Template</option>
+                <option value="minimalist">Minimalist Template</option>
+                <option value="custom">Custom Template</option>
+            </select>
+
+            <button type="submit">Generate Resume</button>
+        </form>
     </div>
 
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
-
     <!-- Footer -->
     <div class="footer">
-      <p>Powered by Resume Builder &copy; 2024</p>
+        <p>Powered by Resume Builder &copy; 2024</p>
     </div>
 
     <script>
-      document
-        .getElementById("resumeForm")
-        .addEventListener("submit", function (event) {
-          event.preventDefault();
-
-          const linkedInUrl = document.getElementById("linkedin-url").value;
-          const email = document.getElementById("email").value;
-          const phone = document.getElementById("phone").value;
-          const template = document.getElementById("template").value;
-
-          if (linkedInUrl && email && phone && template) {
-            alert(
-              `Generating resume using ${template} template for LinkedIn profile: ${linkedInUrl}, Email: ${email}, Phone: ${phone}`
-            );
-            // Add logic to send this data to your backend for processing
-          }
-        });
+        document
+            .getElementById("resumeForm")
+            .addEventListener("submit", function (event) {
+                event.preventDefault();
+
+                const linkedInUrl = document.getElementById("linkedin-url").value;
+                const email = document.getElementById("email").value;
+                const phone = document.getElementById("phone").value;
+                const template = document.getElementById("template").value;
+
+                if (linkedInUrl && email && phone && template) {
+                    alert(
+                        `Generating resume using ${template} template for LinkedIn profile: ${linkedInUrl}, Email: ${email}, Phone: ${phone}`
+                    );
+                    // Add logic to send this data to your backend for processing
+                }
+            });
     </script>
-  </body>
+</body>
 </html>
diff --git a/signup.html b/signup.html
index 3ca8a48..6823860 100644
--- a/signup.html
+++ b/signup.html
@@ -7,16 +7,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
         :root {
-<<<<<<< HEAD
+            
             --deep-teal: #003d4d;
             --off-white: #f8f9fa;
             --dark-slate: #2f4f4f;
             --soft-gold: #d9c79e;
-||||||| da240a0
-          --purple: #aca7eb;
-=======
-          --purple: #6e65f0;
->>>>>>> 138659a007ac3e74405947d0c1d4a7a240745c7a
+
         }
 
         * {
diff --git a/style.css b/style.css
index 39f9c7e..b12a7ce 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,9 @@
 :root{
-    --purple: #aca7eb;
+    --deep-teal: #003d4d; /* Deep Teal */
+    --off-white: #f8f9fa; /* Off-White */
+    --dark-slate: #2f4f4f; /* Dark Slate */
+    --soft-gold: #d9c79e; /* Soft Gold */
+
 }
 
 * {
@@ -56,7 +60,7 @@ section{
 header {
     position: fixed;
     top: 0; left: 0; right: 0;
-    background: #fff;
+    background: var(--deep-teal); /* Changed background to Deep Teal */
     padding: 2rem 9%;
     display: flex;
     align-items: center;
@@ -78,14 +82,16 @@ header .logo:hover {
     text-decoration: none;
 }
 
-header .logo span{
-    color: var(--#3f10ea);
+header .logo span {
+    color: var(--off-white); /* Updated to match logo color */
+
 }
 
 header .navbar a {
     font-size: 2rem;
-    padding: 0 1.5rem;
-    color: #666;
+    padding: 15px;
+    color: var(--off-white); /* White text for better contrast */
+    text-decoration: none; /* Ensure no underline by default */
 }
 
 header .navbar a:hover {
@@ -95,7 +101,7 @@ header .navbar a:hover {
 
 header .icons a {
     font-size: 2.5rem;
-    color: #333;
+    color: var(--off-white); /* White icons for contrast */
     margin-left: 1.5rem;
 }
 
@@ -109,7 +115,8 @@ header #toggler {
 
 header .fa-bars {
     font-size: 3rem;
-    color:#333;
+
+    color: var(--off-white); /* White for better visibility */
     border-radius: .5rem;
     padding: .5rem 1.5rem;
     cursor: pointer;
@@ -163,7 +170,7 @@ body {
 
 .home .content h3{
     font-size: 5rem;
-    color: #333;
+    color: var(--dark-slate); /* Changed from #333 to Dark Slate */
 }
 
 .home .content span{
@@ -175,7 +182,7 @@ body {
 
 .home .content p{
     font-size: 1.5rem;
-    color: #999;
+    color: #666; /* Changed from #999 to a darker gray for better readability */
     padding: 1rem 0;
     line-height: 1.5;
 }