Merge branch 'main' into issue11

GarimaSingh0109 · Oct 2, 2024 · 47ec651 · 47ec651
2 parents 9ac39ec + ea8e1c2
commit 47ec651
Show file tree

Hide file tree

Showing 6 changed files with 374 additions and 31 deletions.
diff --git a/comment.html b/comment.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comment Page</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="comment-section">
+        <h2>Comments</h2>
+        <div id="comments"></div>
+        <form id="comment-form">
+            <textarea id="comment-input" placeholder="Leave a comment..." required></textarea>
+            <button type="submit">Submit</button>
+        </form>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -163,6 +163,7 @@
       <label for="toggler" class="fas fa-bars"></label>
       <a href="#" class="logo">Resum Resume<span>.</span></a>
 
+
       <nav class="navbar">
         <a href="#home">Home</a>
         <a href="about.html">About</a>
@@ -196,6 +197,190 @@ <h3 class="poppins-regular">Build Your Resume in Seconds from LinkedIn</h3>
 
     <!-- home section ends-->
 
+
+        /* Footer Styles */
+.footer {
+    background-color: #aca7eb; /* Keeping the existing background color */
+    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;
+}
+
+/* Making the text section more responsive */
+.text {
+    padding-right: 20px; 
+    max-width: 50%; 
+}
+
+.image {
+    max-width: 50%; 
+}
+
+.image img {
+    width: 100%; 
+    height: auto;
+    border-radius: 5px; 
+}
+
+/* Footer headings */
+.footer-section h3 {
+    font-size: 20px; /* Increased font size for better readability */
+    font-weight: 800; /* Bolder text for stronger emphasis */
+    margin-bottom: 15px;
+    color: #ffffff;
+}
+
+/* Footer links */
+.footer-section ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.footer-section ul li {
+    margin-bottom: 10px; /* Added some extra space between links */
+}
+
+.footer-section ul li a {
+    color: #ffffff; /* Brighter color to make links stand out */
+    text-decoration: none;
+    font-weight: 600; /* Bolder links */
+    transition: color 0.3s ease, font-size 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.footer-section ul li a:hover {
+    color: #ffffff;
+    text-decoration: underline;
+    font-size: 1.1em; /* Slight size increase on hover */
+}
+
+/* Social media icons styling */
+.social-icons {
+    margin-top: 15px;
+}
+
+.social-icons a {
+    color: #ffffff;
+    font-size: 24px; /* Increased size for more visibility */
+    margin-right: 15px;
+    transition: color 0.3s ease, transform 0.3s ease; /* Adding hover effect transition */
+}
+
+.social-icons a:hover {
+    color: #ffdd57; /* Hover effect on social media icons */
+    transform: scale(1.2); /* Slight zoom effect on hover */
+}
+
+/* Footer bottom section (copyright) */
+.footer-bottom {
+    text-align: center;
+    padding-top: 20px;
+    margin-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Making the border more visible */
+}
+
+.footer-bottom p {
+    font-size: 16px; /* Increased font size for better readability */
+    font-weight: 600; /* Bolder text for emphasis */
+    color: #ffffff;
+}
+
+
+        /* 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;
+            }
+        }
+
+    </style>
+</head>
+<body>
+   <!-- header section starts -->
+
+<header>
+
+    <input type="checkbox" name="" id="toggler">
+    <label for="toggler" class="fas fa-bars"></label>
+    <a href="#" class="logo">Resum Resume<span>.</span></a>
+
+            <nav class="navbar">
+                <a href="#home">Home</a>
+                <a href="about.html">About</a>
+                <a href="resume.html">Build Resume</a>
+                <a href="signup.html">Sign Up</a>
+                <a href="login.html">Login</a>
+                <a href="comment.html">Login</a>
+            </nav>
+
+            <div class="icons">
+                <a href="about.html" class="fas fa-info-circle"></a>
+                <a href="#" class="fas fa-envelope"></a>
+                <a href="login.html" id="loginIcon" class="fas fa-user"></a>
+            </div>
+
+        </header> 
+
+        <!-- header section ends -->
+
+
+        <!-- home section starts -->
+
+        <section class="home" id="Home">
+
+            <div class="content">
+                <h3>Build Your Resume in Seconds from LinkedIn</h3>
+                <p>Easily generate a professional resume using your LinkedIn profile. Select a template, enter your LinkedIn URL,
+                    and get a downloadable resume in a few clicks. Save time and create a resume that stands out. </p>
+                <a href="signup.html" class="btn">Get Started</a>
+            </div>
+
+        </section>
+
+        <!-- home section ends-->
+
+
     <!-- Features Section -->
     <section class="features">
       <h2>Our Features</h2>