Merge pull request #42 from Shekhar-Raj/hover_feature

added hover to features card!

index.html

@@ -42,6 +42,27 @@
             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;
         }
 
@@ -53,6 +74,7 @@
             width: 60px;
             height: 60px;
             margin-bottom: 20px;
+
         }
 
         .features-card h3 {
@@ -138,6 +160,19 @@
             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;
@@ -152,6 +187,7 @@
 
         .footer-section ul li {
             margin-bottom: 8px;
+
         }
 
         .footer-section ul li a {
@@ -271,22 +307,22 @@ <h3>Build Your Resume in Seconds from LinkedIn</h3>
         <h2>Our Features</h2>
         <div class="features-cards">
             <div class="features-card">
-                <img src="https://source.unsplash.com/60x60/?job" alt="Easy to Use">
+                <img src="assets/joao-ferrao-4YzrcDNcRVg-unsplash.jpg" alt="Easy to Use" >
                 <h3>Easy to Use</h3>
                 <p>Create a professional resume effortlessly with our user-friendly interface.</p>
             </div>
             <div class="features-card">
-                <img src="https://source.unsplash.com/60x60/?analytics" alt="Instant Resume">
+                <img src="assets/instant resume.jpg" alt="Instant Resume">
                 <h3>Instant Resume</h3>
                 <p>Generate a polished resume in seconds using your LinkedIn profile data.</p>
             </div>
             <div class="features-card">
-                <img src="https://source.unsplash.com/60x60/?security" alt="Secure Data">
+                <img src="assets/securedata.jpg" alt="Secure Data">
                 <h3>Secure Data</h3>
                 <p>Your personal information is safe with our secure and encrypted platform.</p>
             </div>
             <div class="features-card">
-                <img src="https://source.unsplash.com/60x60/?support" alt="24/7 Support">
+                <img src="assets/support.jpg" alt="24/7 Support">
                 <h3>24/7 Support</h3>
                 <p>Our dedicated support team is available round the clock to assist you.</p>
             </div>