diff --git a/css/common.css b/css/common.css index 4a6b234..eeff9b2 100644 --- 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 new file mode 100644 index 0000000..74f95fc --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/css/main.css b/css/main.css index aa511b5..0eaff56 100644 --- 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 new file mode 100644 index 0000000..0a328f4 --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/css/services.css b/css/services.css index 4320385..051d7e6 100644 --- 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; */ } \ No newline at end of file diff --git a/index.html b/index.html index 4fbdd8d..1ce7d20 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ + @@ -31,6 +32,19 @@ + +
+
+
+
+ +

+ 🪔 Build your own website with "Free of Cost" Diwali Offer! + Make your offline business online today 🎉 +

+ +
+ +
@@ -203,6 +218,23 @@

Jira

Projects

+
+
+

Front-End Projects

+
+
+

Chai Makers Café

+

Angular + Components + Services : Embadded Gmaps, Tap to dial, Social link.

+
+
+

Alex Food Corner

+

React + TailwindCSS + Vite : Embadded Gmaps, Tap to dial, Social link.

+
+
+
+
+
+

Back-End Projects

PTC Windchill (Java Product)

@@ -282,8 +314,8 @@

Contact Me

- + \ No newline at end of file diff --git a/js/open-modal-btn.js b/js/open-modal-btn.js new file mode 100644 index 0000000..b414742 --- /dev/null +++ b/js/open-modal-btn.js @@ -0,0 +1,21 @@ +// Get elements +const modal = document.getElementById("myModal"); +const btn = document.querySelector(".open-modal-btn"); +const close = document.querySelector(".close"); + +// Open modal on button click +btn.addEventListener("click", () => { + modal.classList.add("show"); +}); + +// Close modal on close button click +close.addEventListener("click", () => { + modal.classList.remove("show"); +}); + +// Close modal on clicking outside the modal content +window.addEventListener("click", (e) => { + if (e.target === modal) { + modal.classList.remove("show"); + } +}); \ No newline at end of file diff --git a/services.html b/services.html index f56d084..345f2ff 100644 --- a/services.html +++ b/services.html @@ -12,6 +12,7 @@ + @@ -103,17 +104,28 @@

Security & Optimization


-
-

Live Projects

-
- - Chai Makers Live Project -


- - Alex Food Corner Live Project - +
+
+

Live Projects

+ +
-
+

+ + +
@@ -146,6 +158,7 @@

Contact Me

+