vimal-java-dev · vimal-java-dev · Oct 19, 2025 · Oct 19, 2025
diff --git a/css/common.css b/css/common.css
@@ -46,7 +46,7 @@ section {
     color: rgb(201, 238, 99);
     position: fixed;
     width: 100%;
-    top: 0;
+    top: 10;
     z-index: 1000;
 }
 

diff --git a/css/discount-banner.css b/css/discount-banner.css
@@ -0,0 +1,139 @@
+/* --- Sticky Top Banner --- */
+.discount-banner {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    background: linear-gradient(90deg, #639bee, #b7e24d, #639fee);
+    background-size: 300% 300%;
+    animation: gradientFlow 6s ease infinite;
+    color: #1a1a1a;
+    text-align: center;
+    padding: 0.9rem 1rem;
+    font-family: 'Poppins', sans-serif;
+    font-size: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 0.6rem;
+    z-index: 9999;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    opacity: 0;
+    transform: translateY(-15px);
+    animation: bannerFadeIn 1.5s ease forwards;
+}
+
+/* --- Text --- */
+.discount-banner p {
+    margin: 0;
+    font-weight: 500;
+    z-index: 2;
+}
+
+/* --- Button --- */
+.banner-btn {
+    background: #1a1a1a;
+    color: #c9ee63;
+    padding: 0.45rem 1.1rem;
+    border-radius: 50px;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+    z-index: 2;
+}
+
+.banner-btn:hover {
+    background: #333;
+    color: #dfff80;
+    transform: scale(1.05);
+}
+
+/* --- Gradient Animation --- */
+@keyframes gradientFlow {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* --- Entrance Animation --- */
+@keyframes bannerFadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* --- Sparkles --- */
+.sparkle {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: sparkleFloat 5s linear infinite;
+    pointer-events: none;
+}
+
+.sparkle1 {
+    top: 15%;
+    left: 10%;
+    animation-delay: 0s;
+}
+
+.sparkle2 {
+    top: 40%;
+    left: 80%;
+    animation-delay: 2s;
+}
+
+.sparkle3 {
+    top: 70%;
+    left: 50%;
+    animation-delay: 4s;
+}
+
+@keyframes sparkleFloat {
+    0% {
+        transform: translateY(0) scale(1);
+        opacity: 0.8;
+    }
+
+    50% {
+        transform: translateY(-10px) scale(1.3);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(0) scale(1);
+        opacity: 0.8;
+    }
+}
+
+/* --- Responsive --- */
+@media (max-width: 600px) {
+    .discount-banner {
+        flex-direction: column;
+        text-align: center;
+        padding: 1rem;
+    }
+
+    .banner-btn {
+        margin-top: 0.4rem;
+    }
+}
diff --git a/css/main.css b/css/main.css
@@ -3,7 +3,7 @@
 =================================================== */
 .hero {
   background: url('/images/hero.png') no-repeat center/cover;
-  height: 70vh;
+  height: 50vh;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -128,7 +128,7 @@
 }
 
 /* ===================================================
-   ===== Teck Stack Section =====
+   ===== Portfolio Section =====
 =================================================== */
 #portfolio {
   text-align: center;
@@ -155,7 +155,7 @@
   background: rgba(179, 105, 105, 0.3);
   backdrop-filter: blur(10px);
   border-radius: 20px;
-  padding: 20px;
+  padding: 60px;
   margin: 20px 0;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }

diff --git a/css/open-modal-btn.css b/css/open-modal-btn.css
@@ -0,0 +1,69 @@
+  /* Modal backdrop */
+  .modal {
+      display: none;
+      /* Hidden by default */
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0, 0, 0, 0.5);
+      /* semi-transparent background */
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+  }
+
+  .modal.show {
+      display: flex;
+      opacity: 1;
+  }
+
+  /* Modal content */
+  .modal-content {
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 12px;
+      max-width: 400px;
+      width: 80%;
+      text-align: center;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+      position: relative;
+      transform: translateY(-50px);
+      transition: transform 0.3s ease;
+  }
+
+  .modal.show .modal-content {
+      transform: translateY(0);
+  }
+
+  /* Close button */
+  .close {
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      font-size: 24px;
+      cursor: pointer;
+  }
+
+  /* Button styling */
+  .open-modal-btn {
+      font-size: 16px;
+      cursor: pointer;
+      border: none;
+      display: inline-block;
+      padding: 12px 25px;
+      border-radius: 30px;
+      background: #ff9800;
+      color: #fff;
+      text-decoration: none;
+      font-weight: bold;
+      transition: background 0.3s, transform 0.3s;
+  }
+
+  .open-modal-btn:hover {
+      background-color: #0056b3;
+  }
diff --git a/css/services.css b/css/services.css
@@ -1,7 +1,7 @@
 /* ===== HERO SECTION ===== */
 .hero-services {
     position: relative;
-    height: 70vh;
+    height: 50vh;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -256,12 +256,52 @@ body.dark .service-card:hover p {
     background-color: #ced4da;
 }
 
-/* Live Projects Section */
+body.dark #services-offer {
+    background-color: #467db4;
+    color: #000;
+}
+
+/* ===================================================
+   ===== Live Projects Section =====
+=================================================== */
 #live-projects {
     text-align: center;
 }
 
-body.dark #services-offer {
+.live-projects .btn {
+    display: inline-block;
+    padding: 12px 25px;
+    border-radius: 30px;
+    background: #ff9800;
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background 0.3s, transform 0.3s;
+}
+
+.live-projects .btn:hover {
+    background: #e68900;
+    transform: translateY(-3px);
+}
+
+.live-projects-card {
+    background: rgba(179, 105, 105, 0.3);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 60px;
+    margin: 20px 0;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+body.dark .live-projects-card {
     background-color: #467db4;
     color: #000;
+}
+
+/* Wrapper for centering counter horizontally */
+.counter-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    /* margin-top: 10px; */
 }
diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
   <link rel="stylesheet" href="/css/main.css">
   <link rel="stylesheet" href="/css/common.css">
   <link rel="stylesheet" href="/css/dropdown.css">
+  <link rel="stylesheet" href="/css/discount-banner.css">
   <link rel="stylesheet" href="/css/mini-services.css">
   <link rel="stylesheet" href="/css/whatsapp-floating.css">
   <!-- Font Awesome -->
@@ -31,6 +32,19 @@
 </style>
 
 <body>
+  <!-- 🌟 VimalTech Diwali Offer Banner -->
+  <div class="discount-banner">
+    <div class="sparkle sparkle1"></div>
+    <div class="sparkle sparkle2"></div>
+    <div class="sparkle sparkle3"></div>
+
+    <p>
+      🪔 <strong>Build your own website with "Free of Cost" Diwali Offer!</strong>
+      Make your offline business online today 🎉
+    </p>
+    <a href="/services.html#live-projects" class="banner-btn">Claim Offer</a>
+  </div>
+
   <!-- Header / Navbar -->
   <nav class="navbar">
     <div>
@@ -65,6 +79,7 @@
     </div>
   </nav>
 
+
   <!-- Hero Section -->
   <section id="hero" class="hero">
     <div class="hero-content">
@@ -203,6 +218,23 @@ <h3>Jira</h3>
   <!-- Projects Section -->
   <section id="projects" class="container fade-in">
     <h2>Projects</h2>
+    <hr style="height:2px;border-width:0;color:rgb(56, 0, 0);background-color:rgb(92, 35, 35)">
+    <br />
+    <h3>Front-End Projects</h3>
+    <div class="projects-grid">
+      <div class="project-card">
+        <h3>Chai Makers Café</h3>
+        <p>Angular + Components + Services : Embadded Gmaps, Tap to dial, Social link.</p>
+      </div>
+      <div class="project-card">
+        <h3>Alex Food Corner</h3>
+        <p>React + TailwindCSS + Vite : Embadded Gmaps, Tap to dial, Social link.</p>
+      </div>
+    </div>
+    <br />
+    <hr style="height:2px;border-width:0;color:rgb(56, 0, 0);background-color:rgb(92, 35, 35)">
+    <br />
+    <h3>Back-End Projects</h3>
     <div class="projects-grid">
       <div class="project-card">
         <h3>PTC Windchill (Java Product)</h3>
@@ -282,8 +314,8 @@ <h2>Contact Me</h2>
   <!-- JS -->
   <script src="/js/common.js"></script>
   <script type="module" src="/js/visitorCounter.js"></script>
-  <script src="/js/main.js"></script>
   <script src="/js/dropdown.js"></script>
+  <script src="/js/main.js"></script>
 </body>
 
 </html>