diff --git a/assets/Crypto.webp b/assets/Crypto.webp new file mode 100644 index 0000000..c28524f Binary files /dev/null and b/assets/Crypto.webp differ diff --git a/assets/DigiMantraLogo.png b/assets/DigiMantraLogo.png new file mode 100644 index 0000000..3a19837 Binary files /dev/null and b/assets/DigiMantraLogo.png differ diff --git a/assets/DigitalTransformation.webp b/assets/DigitalTransformation.webp new file mode 100644 index 0000000..aad0a92 Binary files /dev/null and b/assets/DigitalTransformation.webp differ diff --git a/assets/Fintech.webp b/assets/Fintech.webp new file mode 100644 index 0000000..14826eb Binary files /dev/null and b/assets/Fintech.webp differ diff --git a/assets/FitnessWearables.webp b/assets/FitnessWearables.webp new file mode 100644 index 0000000..4b4923b Binary files /dev/null and b/assets/FitnessWearables.webp differ diff --git a/assets/Gaming.webp b/assets/Gaming.webp new file mode 100644 index 0000000..92c6bcb Binary files /dev/null and b/assets/Gaming.webp differ diff --git a/assets/RetailLogistics.webp b/assets/RetailLogistics.webp new file mode 100644 index 0000000..2cb5ad4 Binary files /dev/null and b/assets/RetailLogistics.webp differ diff --git a/assets/airtel.png b/assets/airtel.png new file mode 100644 index 0000000..e929b51 Binary files /dev/null and b/assets/airtel.png differ diff --git a/assets/banner.jpeg b/assets/banner.jpeg new file mode 100644 index 0000000..537fefa Binary files /dev/null and b/assets/banner.jpeg differ diff --git a/assets/featured/collaborativeInnovativeSolutions.webp b/assets/featured/collaborativeInnovativeSolutions.webp new file mode 100644 index 0000000..bb4443d Binary files /dev/null and b/assets/featured/collaborativeInnovativeSolutions.webp differ diff --git a/assets/featured/dataDrivenInsights.webp b/assets/featured/dataDrivenInsights.webp new file mode 100644 index 0000000..2f507bc Binary files /dev/null and b/assets/featured/dataDrivenInsights.webp differ diff --git a/assets/featured/elink.webp b/assets/featured/elink.webp new file mode 100644 index 0000000..2c1812c Binary files /dev/null and b/assets/featured/elink.webp differ diff --git a/assets/featured/evil.webp b/assets/featured/evil.webp new file mode 100644 index 0000000..ddd0739 Binary files /dev/null and b/assets/featured/evil.webp differ diff --git a/assets/featured/futureProofTech.webp b/assets/featured/futureProofTech.webp new file mode 100644 index 0000000..b33c0df Binary files /dev/null and b/assets/featured/futureProofTech.webp differ diff --git a/assets/featured/involv.webp b/assets/featured/involv.webp new file mode 100644 index 0000000..d4d526c Binary files /dev/null and b/assets/featured/involv.webp differ diff --git a/assets/jio.png b/assets/jio.png new file mode 100644 index 0000000..de1df71 Binary files /dev/null and b/assets/jio.png differ diff --git a/assets/rablo.png b/assets/rablo.png new file mode 100644 index 0000000..4495c69 Binary files /dev/null and b/assets/rablo.png differ diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 0000000..dab6dfc --- /dev/null +++ b/css/contact.css @@ -0,0 +1,291 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); + +:root { + --main-color: #f75d2f; + --dark-color: #f84812; + --step-color: #ced7e0; + --step-size: 32px; + --steps: 4; + --progress-width: calc((var(--steps) - 1) / var(--steps) * 100%); +} + +/* contact */ + +.contact-container { + font-family: "Inter", serif; + display: flex; + justify-content:center; + align-items: center; + gap: 120px; + margin: 40px 0px; + width: 100%; +} + +.contact-para i{ +background-color: #f75d2f; +color: #fff; +padding: 8px; +margin-right: 10px; +border-radius: 100%; +} + +h1 { + font-weight: 700; + font-family: "Poppins", serif; + text-align: center; + margin: 20px 0px; +} + +h3 { + margin-bottom: 16px; + text-transform: uppercase; + font-size: clamp(1rem, 2vw + 1rem, 1.25rem); +} + +label { + display: inline-block; + margin-bottom: 4px; +} + +input, +textarea { + outline-color: var(--main-color); + border: 1px solid lightgray; + padding: 8px 16px; + border-radius: 4px; + width: 100%; + font-size: 1rem; + text-align: start; +} + +input[type="tel"] { + direction: inherit; +} + +textarea { + resize: none; +} + +select { + width: 200px; + padding: 10px; + font-size: 16px; + border-radius: 5px; + background-color: #f9f9f9; + color: #333; + outline: none; +} + +button { + cursor: pointer; + border: none; + border-radius: 16px; + padding: 8px 16px; + background-color: var(--main-color); + color: #fff; + font-size: 0.875rem; + transition: 0.3s; +} + +button:active, +button:hover { + background-color: var(--dark-color); +} + +button:disabled { + opacity: 0.8; +} + +button:focus { + outline-color: #333; +} + +button[type="submit"] { + background-color: #333; +} + +button[type="submit"]:hover, +button[type="submit"]:active { + background-color: #444; +} + +form { + margin-block: auto; +} + +.error-message { + color: red; + font-weight: 700; +} + +/* form styles */ + +.form-wizard { + background-color: #fff; + padding: 1.5rem; + height: 700px; + border-radius: 8px; + width: min(500px, 90%); + margin: 0px 50px; + box-shadow: 0 4px 16px rgba(167, 21, 84, 0.1); +} + +.progress-container { + position: relative; +} + +.progress-container::before { + content: ""; + height: 4px; + width: var(--progress-width); + background-color: var(--step-color); + position: absolute; + top: calc(var(--step-size) / 2); + left: 50%; + translate: -50% -50%; +} + +.progress-container .progress { + height: 4px; + width: var(--progress-width); + background-color: var(--main-color); + position: absolute; + top: calc(var(--step-size) / 2); + left: 50%; + translate: -50% -50%; + z-index: 2; + transform: scaleX(0); + transform-origin: left; + transition: 0.3s; +} + +/* if page is rtl adjust the transform origin */ +html[dir="rtl"] .progress-container .progress { + transform-origin: right; +} + +.progress-container ol { + list-style-type: none; + display: flex; + align-items: flex-start; + justify-content: space-between; + counter-reset: step-number; + position: relative; + z-index: 3; +} + +.progress-container li { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + color: var(--step-color); + transition: 0.3s linear 0.3s; + text-align: center; + font-size: 0; +} + +.progress-container li::before { + counter-increment: step-number; + content: counter(step-number); + background-color: var(--step-color); + width: var(--step-size); + height: var(--step-size); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + color: #fff; + transition: 0.3s linear 0.3s; + font-size: 1rem; +} + +@media (min-width: 480px) { + .progress-container li { + font-size: 1rem; + gap: 8px; + } +} + +.progress-container li:where(.done, .current) { + color: #333; + font-weight: 500; +} + +.progress-container li.done::before { + background-color: var(--main-color); +} + +.progress-container li.current::before { + background-color: var(--main-color); + box-shadow: 0 0 0 3px rgba(167, 21, 84, 0.25); +} + +.steps-container { + display: flex; + overflow: hidden; +} + +.step { + flex: 1 0 100%; + /* padding: 24px 8px; */ + opacity: 0; + transition: opacity 0.3s; + height: fit-content; + display: grid; + gap: 8px; +} + +.step .reset { + padding: 10px; + background-color: #444; + color: white; +} + +.step .reset:hover { + background-color: #333; +} + +.step.current { + opacity: 1; +} + +.controls { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-top: 28px; + padding-inline: 8px; +} + +.controls button { + flex: 1; +} + +.completed { + text-align: center; +} + +.completed h3 { + margin-bottom: 8px; +} + +.completed svg { + width: 100px; + height: 100px; + stroke: yellowgreen; +} + +.completed:not([hidden]) ~ * { + display: none; +} + + +@media (max-width:768px) { + .contact-container{ + flex-direction: column; + flex-wrap: wrap; + } + +} \ No newline at end of file diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..f11fc32 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,265 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&display=swap"); +/* card styling */ + +.card-container { + margin: auto; + padding: 20px; + max-width: 1200px; + box-sizing: border-box; +} + +.card-item-container { + margin: 20px 80px; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 60px; +} + +.card-container-title { + display: flex; + justify-content: center; + align-items: center; + margin: 30px 0px; + font-family: "Poppins", serif; + font-weight: bold; + text-align: center; +} + +.card-container-title h2 { + font-size: 3rem; +} + +.card-container-title span { + color: #f75d2f; +} + +.card-item .card-icon { + padding: 20px; + background-color: black; + /* background-color: #f75d2f; */ + text-align: center; +} +.card-item .card-icon i { + /* color: black; */ + color: #f75d2f; + font-size: 30px; +} +.card-item { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: transform 0.3s ease; + max-width: 400px; + gap: 30px; + box-sizing: border-box; +} + +.card-item:hover { + transform: translateY(-10px); +} + +.card-item img { + width: 100%; + height: auto; +} + +.card-item h3 { + padding: 10px 15px; + font-size: 1.5rem; + font-weight: bolder; + text-transform: capitalize; + color: #333; + text-align: center; + font-family: "Poppins", serif; +} + +.card-item p { + font-family: "Inter", serif; + padding: 0 15px 15px; + font-size: 1rem; + color: #666; +} + +/* Responsive Design of cards section */ +@media (max-width: 768px) { + .card-item { + max-width: 100%; + margin: 10px 0px; + } + + .card-container-title h2 { + font-size: 2rem; + flex-wrap: wrap; + max-width: 90%; + } + + .card-item-container { + gap: 15px; + } +} + +@media (max-width: 480px) { + .card-item { + flex-wrap: wrap; + max-width: 100%; + } +} + +/* MEET OUR TEAM */ +.team-title { + font-family: "Poppins", serif; + text-align: center; +} + +.team-title h2 { + font-size: 3rem; +} + +.team-title span { + color: #f75d2f; +} + +.team-section { + display: flex; + justify-content: center; + flex-direction: column; + font-family: "Arima", serif; + gap: 40px; +} + +.team-item-row { + display: flex; + justify-content: center; + gap: 40px; +} + +.team-item { + text-align: center; +} + +.team-item img:hover { + cursor: pointer; + transition: 0.8s ease-out; + transform: scale(1.1); +} + +@media (max-width: 768px) { + .team-title h2 { + font-size: 1.8rem; + } + + .team-section { + gap: 20px; + } + + .team-item-row { + flex-direction: column; + align-items: center; + } +} + +/* PRICING */ +.price-container { + margin: 60px 0px; +} + +.pricing-title h2 { + color: black; + font-size: 3rem; + font-family: "Poppins", serif; + text-align: center; +} + +.pricing-title span { + color: #f75d2f; +} + +.price-row { + display: flex; + justify-content: center; + align-items: center; + gap: 60px; +} + +.price-col { + font-family: "Arima", serif; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background: #1f283b; + padding: 20px 40px; + border-radius: 20px; + color: #fff; +} + +.price-col p { + font-size: 22px; + text-transform: uppercase; + letter-spacing: 3px; + /* color: #f75d2f; */ + color: #f75d2f; + font-weight: bolder; +} + +.price-col h3 { + font-size: 44px; + text-transform: capitalize; + margin: 20px 0 40px; + font-weight: 500; +} + +.price-col span { + font-size: 16px; +} + +.price-col ul { + margin: 20px 0px; + color: #ddd; + list-style: none; +} + +.price-col ul li { + margin: 15px 0px; + padding-right: 40px; +} + +.price-col ul li::before { + content: "\2022"; + font-weight: bold; + margin-right: 8px; + color: #f75d2f; + margin-right: 8px; +} + +.price-col button { + width: 100%; + padding: 14px 0px; + background: transparent; + color: #fff; + font-size: 15px; + border: 1px solid #f75d2f; + border-radius: 6px; + margin-top: 30px; + cursor: pointer; + transition: background 0.5s; +} + +.price-col button:hover { + background-color: #f75d2f; +} + +@media (max-width: 768px) { + .price-col { + flex-wrap: wrap; + } + + .price-row { + flex-direction: column; + } +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..b6d26e4 --- /dev/null +++ b/css/style.css @@ -0,0 +1,394 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + +body, +html { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + box-sizing: border-box; + display: flex; + justify-content: center; + flex-direction: column; + scroll-behavior: smooth; +} +header { + position: relative; + height: 80vh; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), + url("/assets/banner.jpeg") center/cover no-repeat; + color: white; +} + +/* NAVBAR */ + +.logo img { + height: 60px; +} + +nav { + display: flex; + justify-content: space-around; + align-items: center; + padding: 20px 40px; +} + +nav ul { + list-style: none; + display: flex; + font-family: "Poppins", serif; + gap: 50px; +} + +nav ul li { + display: flex; + justify-content: center; + align-items: center; +} + +nav ul li a { + text-decoration: none; + color: white; + font-weight: bold; + transition: color 0.3s; +} + +nav ul li a:hover { + color: #f5511f; + transition: 0.3s; +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger div { + width: 25px; + height: 3px; + background-color: white; + margin: 4px 0; +} + +/* HERO */ + +.hero-section { + padding: 50px 20px; + height: auto; + min-height: 600px; + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; +} + +.hero-left { + max-width: 800px; + text-align: left; + color: white; + margin-bottom: 20px; +} + +.hero-left h1 { + font-size: 3rem; + margin: 0 0 20px 0; +} + +.hero-left p { + font-size: 1.2rem; + line-height: 1.5; + margin: 20px 0; +} + +.hero-button { + display: inline-block; + padding: 15px 30px; + background-color: #f5511f; + color: white; + font-size: 1.2rem; + font-weight: bold; + opacity: 0.9; + text-decoration: none; + border-radius: 20px; + transition: all 0.3s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.hero-button:hover { + opacity: 1; + background-color: #e44b1a; + transform: translateY(-3px); + box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); +} + +.hero-section img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +@media (max-width: 768px) { + .hero-section { + flex-direction: column; + text-align: center; + } + + .hero-left { + max-width: 100%; + } + + .hero-left h1 { + font-size: 2.5rem; + } + + .hero-left p { + font-size: 1rem; + } + + .hero-button { + font-size: 1rem; + padding: 10px 20px; + } +} + +@media (max-width: 480px) { + .hero-left h1 { + font-size: 2rem; + } + + .hero-left p { + font-size: 0.9rem; + } + + .hero-button { + font-size: 0.9rem; + padding: 8px 15px; + } +} + +@media (max-width: 1366px) { + .hero-section img { + display: none; + width: 100px; + background-color: red; + } + + .hero-left { + margin-bottom: 300px; + } +} + +/* CONTACT BUTTON */ + +.button { + border-radius: 20px; + background-color: #f75d2f; + border: none; + color: #ffffff; + text-align: center; + font-size: 16px; + font-weight: bold; + padding: 10px 20px; + width: 180px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; +} + +.button span { + cursor: pointer; + + position: relative; + transition: 0.5s; +} + +.button span:after { + content: "\00bb"; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +.button:hover span { + padding-right: 25px; +} + +.button:hover span:after { + opacity: 1; + right: 0; +} + +@media (max-width: 768px) { + nav ul { + display: none; + flex-direction: column; + background-color: rgba(0, 0, 0, 0.8); + position: absolute; + top: 60px; + right: 40px; + padding: 10px 20px; + border-radius: 5px; + } + + nav ul.active { + display: flex; + } + + .hamburger { + display: flex; + } + + .hero h1 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .hero .cta { + font-size: 1rem; + } + .button { + width: 150px; + } +} + +/* FEATURED SECTION */ +.featured-section-container { + background-color: #f1f6fd; + display: flex; + justify-content: "center"; + align-items: center; + flex-direction: column; +} + +.section-title { + font-family: "Poppins", serif; +} + +.section-title span { + color: #f75d2f; + font-weight: bold; +} + +.section-title h2 { + font-size: 3rem; + color: #444; +} +.featured-section { + display: flex; + justify-content: center; + flex-direction: column; + gap: 40px; + margin-top: 15px; +} + +.featured-section .fs-row { + display: flex; + justify-content: center; + gap: 50px; +} + +.featured-section .fs-row img { + width: 200px; + height: auto; +} + +.featured-section .fs-row img:hover { + transition: transform 2s ease-in-out; + cursor: pointer; + filter: grayscale(100%); +} + +@media (max-width: 768px) { + .section-title h2 { + font-size: 2rem; + } + + .featured-section .fs-row img { + width: 100px; + } +} + +@media (max-width: 480px) { + .section-title h2 { + font-size: 1.5rem; + } + + .featured-section img { + width: 120px; + display: flex; + flex-wrap: wrap; + } +} + +/* footer styling */ + +.footer { + font-family: "Poppins", serif; + background-color: black; + color: #fff; + padding: 20px 0; +} + +.footer-container { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.footer-section { + margin: 10px; +} + +.footer-section h3 { + border-bottom: 2px solid #555; + color: #f5511f; + padding-bottom: 5px; + margin-bottom: 10px; +} + +.footer-section ul { + list-style-type: none; + padding: 0; +} + +.footer-section ul li { + margin: 5px 0; +} + +.footer-section ul li a { + color: #fff; + text-decoration: none; +} + +.footer-section ul li a:hover { + text-decoration: underline; +} + +.footer-bottom { + margin: auto; + text-align: center; + margin-top: 20px; + border-top: 1px solid #555; + width: 80%; + padding-top: 10px; +} + +@media (max-width: 768px) { + .footer-container { + flex-direction: column; + align-items: center; + } + + .footer-section { + text-align: center; + } +} diff --git a/css/swiper.css b/css/swiper.css new file mode 100644 index 0000000..dd451ef --- /dev/null +++ b/css/swiper.css @@ -0,0 +1,228 @@ +/* WHAT WE DO */ +.swipecontainer .section-title { + text-align: center; + margin: 10px 0px; +} +.swipecontainer .section-title h2 { + margin: 0px 0px; +} + +.swipecontainer .section-title p { + font-size: 1.1rem; + margin-top: 10px; + margin-bottom: 50px; +} + +.swipecontainer { + width: 100%; + overflow: hidden; + background-color: #f8f9fa; + margin: 50px 0px; + padding: 40px 0px; +} + +.swiper { + display: flex; + justify-content: center; +} + +.swiper-wrapper { + width: 100%; + transition-timing-function: linear !important; +} + +.swiper-slide { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: grab; + max-width: 300px; + height: 300px; + user-select: none; +} + +.swiper-slide:hover { + border-radius: 20px; + + transform: scale(1.05); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); +} + +.swiper-slide img { + border-radius: 20px; + width: 300px; + height: 300px; + object-fit: cover; + pointer-events: none; + border-radius: 12px; +} + +.caption { + position: absolute; + left: 0; + bottom: -2px; + max-width: 100%; + height: 60px; + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + font-weight: bold; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + transform: translateY(100%); + transition: transform 0.5s ease; +} + +.swiper-slide:hover .caption { + transform: translateY(0); +} + +.caption h1 { + font-size: 1rem; + letter-spacing: 0.5px; + margin: auto; +} + +.caption p { + font-size: 0.9rem; + margin: 0; + color: #ccc; +} + +@keyframes pulse { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +@media (max-width: 768px) { + .swipecontainer .section-title h2 { + font-size: 2.5rem; + } +} + +/* FEATURED PROJECTS */ + +.featured-projects-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + max-width: 100%; +} + +.image-slider { + width: 60%; +} + +.image-slider .slick-slide { + background-size: cover; + background-position: center; + width: 100%; + display: flex; + justify-content: center; + gap: 30px; +} + +.image-slider img { + width: 300px; + height: 300px; + object-fit: cover; +} + +.content-slider { + width: 35%; + padding: 10px; + background-color: white; + border-radius: 8px; + height: 300px; + overflow: hidden; +} + +.content-slider .slick-content { + max-width: 100%; + display: flex; + justify-content: center; +} +.content-slider .slide { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + overflow: hidden; +} + +.content-slider .slide h2 { + font-size: 2rem; + color: #000; + margin-bottom: 10px; +} + +.slide { + max-width: 100%; +} + +.content-slider .slide p { + font-size: 17px; + color: #333; +} + +.content-slider .slick-slide { + display: none; + opacity: 0; + transition: opacity 0.3s ease-in-out; +} + +.content-slider .slick-active { + opacity: 1; +} + +/* featured projects section title */ + +.project-section-title { + text-align: center; + font-family: "Poppins", serif; + margin: 10px 0px; +} +.project-section-title h2 { + margin: 0px 0px; + font-size: 3rem; +} + +.project-section-title span { + color: #f75d2f; +} + +.project-section-title p { + font-size: 1.1rem; + margin-top: 10px; + margin-bottom: 50px; +} + +.slick-images img { + display: flex; + justify-content: center; + align-items: center; +} +@media (min-width: 769px) and (max-width: 1400px) { + .slick-images img { + width: 200px; + height: 300px; + gap: 80px; + } +} + +@media (max-width: 768px) { + .featured-projects-container { + display: none; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..8b0eda0 --- /dev/null +++ b/index.html @@ -0,0 +1,681 @@ + + + + + + + Digital Marketing Company + + + + + + + + + + + + + + +
+ +
+ +
+ + + +
+
+
+

Best SEO Services Company

+

+ Would you like your website to rank highly in search engine results? + Please sit back & relax. With our tried-and-true SEO or growth + hacking methods, technologies, and data-backed decision-making + power, we have generated over $2 million in revenue for our clients. +

+ Get Free Consulation >> +
+
+ +
+ Laptop +
+
+ +
+ + + +
+
+
+

We're Featured On

+
+ +
+
+ airtel + Forbes India Logo + Source Logo +
+
+ jio + rablo +
+
+
+
+ + + +
+
+
+

Our Industry Level SEO Services: Be the Next One

+
+ + +
+
+
+
+

Dating SEO

+

+ By enhancing dating site search rankings and user engagement through + keyword optimisation, mobile responsiveness, fast loading times, and + high-quality content. +

+
+
+ +
+
+
+

Hotel SEO

+

+ By enhancing dating site search rankings and user engagement through + keyword optimisation, mobile responsiveness, fast loading times, and + high-quality content. +

+
+
+ +
+
+
+

Gaming SEO

+

+ By building authority in the competitive sector through quality + inbound links, authentic content, and social sharing, we specialise + in the Gaming SEO sector. +

+
+
+ + +
+
+
+

Casino SEO

+

+ Focusing on location-specific keywords, our top SEO company in + London optimises casino websites through landing pages, original + content, and geographical search. +

+
+
+ +
+
+
+

Crypto SEO

+

+ We optimise your website for cryptocurrency and blockchain keywords, + enhancing visibility through SEO and social media and positioning + you as an expert. +

+
+
+ +
+
+
+

Real Estate SEO

+

+ Optimising real estate websites through SEO is crucial for + increasing traffic and leads in a competitive market, focusing on + both on-page and off-page strategies. +

+
+
+
+
+
+ + + + +
+
+
+

What we do?

+

+ Empowering businesses with innovative IT solutions for seamless + digital transformation. +

+
+ +
+
+ +
+ +
+

CRYPTO

+
+
+ +
+ +
+

DIGITAL TRANSFORMATION

+
+
+ +
+ +
+

FINTECH

+
+
+ +
+ +
+

FITNESS WEARABLES

+
+
+
+ +
+

GAMING

+
+
+
+ +
+

RETAIL LOGISTICS

+
+
+
+
+
+
+ + + +
+
+

Featured Projects

+

+ Learn how we are delivering cutting-edge solutions and transforming + businesses. +

+
+ +
+ +
+
+
+

Evil Genius Games

+

+ Evil Genius Games invites players to dive into captivating + tabletop RPG experiences, seamlessly blending strategic depth + with immersive gameplay. Our team led the development of their + digital platform, ensuring intuitive interfaces and dynamic + mechanics. Our collaboration has solidified Evil Genius Games as + an industry leader in immersive gaming experiences. +

+
+
+

EarthLink Fiber Internet

+

+ Earthlink epitomizes leadership in digital innovation, + seamlessly blending advanced technology with unbeatable + connectivity. Our team led the development and design efforts + for their digital infrastructure, ensuring seamless integration + and optimal performance. Through meticulous planning, + implementation, and ongoing support, we helped Earthlink + maintain its position as a frontrunner in the digital + connectivity landscape. +

+
+
+

Involvely Parenting Resource

+

+ Involvvely functions as a comprehensive Parent Resource and + school platform, fosteringconnections among community parents. + Our team played a pivotal role in developing and designing their + platform, ensuring seamless integration and user-friendly + interfaces. Our technical contributions streamlined Involvvely's + platform, allowing parents to get more involved in their + children's education using their innovative ideas. +

+
+
+

Data-Driven Insights

+

+ We go beyond simply building software. We leverage data-driven + insights and analytics to continuously monitor and optimize your + solutions, maximizing performance and user experience. This + ongoing cycle of measurement, analysis, and improvement ensures + your software not only meets your initial needs but also adapts + and evolves alongside your business objectives. +

+
+
+

Collaborative Innovative Solutions

+

+ We cultivate an environment of co-creation and open + communication to design the perfect solution tailored to your + unique needs and goals. This collaborative approach ensures the + delivery of solutions that are not only technically sound but + also meet the needs of the business and its customers. +

+
+
+

Future Proof Technology Stack

+

+ We remain at the forefront of technological advancements, + continuously investing in and integrating the latest tools, + frameworks, and methodologies into our development process. This + commitment ensures that your solutions are built on a + future-proof foundation, adaptable to the ever-evolving digital + landscape. +

+
+
+
+ + +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + +
+
+

Meet Our Team

+
+
+ +
+
+ +
+ +

Sachin Khosla

+

Founder & CEO

+
+
+
+ + +
+
+
+ +

Bikramjit Singh

+

Vice President

+
+
+ +
+
+ +

Mayank Setia

+

Sales Head

+
+
+ +
+
+ +

Vanshree Minglani

+

Associate Director of Finance

+
+
+ +
+
+ +

Jagmeet Cheema

+

Vice President Data Analytics

+
+
+
+
+
+
+ +

Harsimran Singh

+

Vice President

+
+
+ +
+
+ +

Rohit Puri

+

Key Account Manager

+
+
+ +
+
+ +

Manpreet kaur

+

Associate Director

+
+
+ +
+
+ +

Diksha Verma

+

Senior HR Specialist

+
+
+
+
+
+ + + +
+
+
+

Choose Your Plan

+
+ +
+
+
+

starter

+

19$ / month

+
    +
  • 1 website
    • +
  • 10 gb disk space
    • +
  • free email address
    • +
  • basic web builder
    • +
  • no ssl certificate
    • +
+ +
+
+ +
+
+

advanced

+

19$ / month

+
    +
  • 1 website
    • +
  • 10 gb disk space
    • +
  • free email address
    • +
  • basic web builder
    • +
  • no ssl certificate
    • +
+ +
+
+ +
+
+

premium

+

19$ / month

+
    +
  • 1 website
    • +
  • 10 gb disk space
    • +
  • free email address
    • +
  • basic web builder
    • +
  • no ssl certificate
    • +
+ +
+
+
+
+
+ + + +
+
+ + + + +

REGISTERATION

+ + +
+
+ +
    +
  1. Personal Details
    2. +
  2. Professional Details
    3. +
  3. Review & Submit
    4. +
+
+ + + +
+
+

Personal Information

+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+
+ +
+

Professional Details

+ +
+ + +
+ +
+ +
+ + + +
+
+ +
+ + +
+ +
+ + +
+
+
+

Review & Submit

+
+ + +
+
+ + + +
+ + + +
+ +
+
+
+

Build with Us.

+

Accelerate your Growth.

+
+ +
+

Customized solutions and strategies

+

Faster-than-market project delivery

+

End-to-end digital transformation services

+
+
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..c2fa3a5 --- /dev/null +++ b/js/script.js @@ -0,0 +1,162 @@ +function toggleMenu() { + const navList = document.querySelector("nav ul"); + navList.classList.toggle("active"); +} + +const form = document.querySelector(".form-wizard"); +const progress = form.querySelector(".progress"); +const stepsContainer = form.querySelector(".steps-container"); +const steps = form.querySelectorAll(".step"); +const stepIndicators = form.querySelectorAll(".progress-container li"); +const prevButton = form.querySelector(".prev-btn"); +const nextButton = form.querySelector(".next-btn"); +const submitButton = form.querySelector(".submit-btn"); +const editButton = form.querySelector("#editBtn"); + +let currentStep = 0; +let formData = JSON.parse(localStorage.getItem("formData")) || {}; + +// Update progres +const updateProgress = () => { + let width = currentStep / (steps.length - 1); + progress.style.transform = `scaleX(${width})`; + + // Update the step indicators + stepIndicators.forEach((indicator, index) => { + indicator.classList.toggle("current", currentStep === index); + indicator.classList.toggle("done", currentStep > index); + }); + + // Update steps container + stepsContainer.style.height = `${steps[currentStep].offsetHeight}px`; + + steps.forEach((step, index) => { + step.style.transform = `translateX(${currentStep * -100}%)`; + step.classList.toggle("current", currentStep === index); + }); + + updateButtons(); +}; + +// Update button visibility +const updateButtons = () => { + prevButton.hidden = currentStep === 0; + nextButton.hidden = currentStep >= steps.length - 1; + submitButton.hidden = currentStep < steps.length - 1; + editButton.hidden = currentStep !== 2; +}; + +const isValidStep = () => { + const fields = steps[currentStep].querySelectorAll("input, textarea, select"); + let valid = true; + fields.forEach((field) => { + const errorMessage = field.nextElementSibling; + + if (field.id === "fullname" && field.value.trim().length < 3) { + valid = false; + if (errorMessage) + errorMessage.textContent = "Minimum 3 letters required."; + } else if (field.id === "phone" && !/^\d{10}$/.test(field.value)) { + valid = false; + if (errorMessage) + errorMessage.textContent = "Phone number must be 10 digits."; + } else { + if (errorMessage) errorMessage.textContent = ""; + } + + if (!field.checkValidity()) { + valid = false; + } + }); + return valid; +}; + +// Save form data to localStorage +const saveData = () => { + const fields = steps[currentStep].querySelectorAll("input, textarea, select"); + fields.forEach((field) => { + formData[field.name] = field.value; + }); + localStorage.setItem("formData", JSON.stringify(formData)); +}; + +// Display data +const displayData = () => { + const reviewSection = document.getElementById("review"); + reviewSection.innerHTML = ""; + + // Iterate over all the steps to collect and display data + steps.forEach((step) => { + const inputs = step.querySelectorAll("input, select, textarea"); + inputs.forEach((input) => { + if (input.type === "radio" && !input.checked) return; // Skip unchecked radios + if (input.type === "checkbox") { + // Handle checkboxes + if (!formData[input.name]) formData[input.name] = []; + if (input.checked) formData[input.name].push(input.value); + } else { + // Handle other input types + formData[input.name] = input.value; + } + + // Determine label for the field (use placeholder or aria-label if available) + const label = + input.placeholder || + input.ariaLabel || + input.closest("label")?.textContent || + input.name; + + // Display field data in the review section + const p = document.createElement("p"); + if (Array.isArray(formData[input.name])) { + p.textContent = `${label}: ${formData[input.name].join(", ")}`; + } else { + p.textContent = `${label}: ${formData[input.name]}`; + } + reviewSection.appendChild(p); + }); + }); +}; + +prevButton.addEventListener("click", (e) => { + e.preventDefault(); + if (currentStep > 0) { + saveData(); + currentStep--; + updateProgress(); + } +}); + +nextButton.addEventListener("click", (e) => { + e.preventDefault(); + if (isValidStep()) { + saveData(); + if (currentStep < steps.length - 1) { + currentStep++; + updateProgress(); + } + } +}); + +submitButton.addEventListener("click", (e) => { + e.preventDefault(); + if (isValidStep()) { + saveData(); + displayData(); + form.querySelector(".completed").hidden = false; + stepsContainer.hidden = true; + } +}); + +editButton.addEventListener("click", () => { + const fields = steps[currentStep].querySelectorAll("input, textarea, select"); + fields.forEach((field) => { + if (formData[field.name]) { + field.value = formData[field.name]; + } + }); + currentStep = 1; + updateProgress(); +}); + +updateProgress(); diff --git a/js/swiper.js b/js/swiper.js new file mode 100644 index 0000000..25b47d7 --- /dev/null +++ b/js/swiper.js @@ -0,0 +1,98 @@ +const swipecontainer = document.querySelector(".swipecontainer"); +const likeBtns = document.querySelector(".like-btns"); +var swiper = new Swiper(".swiper", { + spaceBetween: 60, + slidesPerView: "auto", + loop: true, + speed: 5000, + freeMode: true, + allowTouchMove: true, + autoplay: { + delay: 0, + disableOnInteraction: false, + }, +}); +function stopAutoPlay() { + const swiperTranslate = swiper.getTranslate(); + swiper.setTranslate(swiperTranslate); + swiper.autoplay.stop(); +} +function startAutoPlay() { + swiper.slideTo(swiper.activeIndex, 5000, true); + swiper.autoplay.start(); +} +swipecontainer.addEventListener("mouseenter", () => stopAutoPlay()); +swipecontainer.addEventListener("mouseleave", () => startAutoPlay()); + +// featured slider +$(document).ready(function () { + var imageSlider = $(".slick-images").slick({ + centerMode: true, + centerPadding: "60px", + slidesToShow: 3, + arrows: false, + dots: true, + asNavFor: ".slick-content", + infinite: true, + speed: 500, + responsive: [ + { + breakpoint: 768, + settings: { + arrows: false, + centerMode: true, + centerPadding: "40px", + slidesToShow: 3, + }, + }, + { + breakpoint: 480, + settings: { + arrows: false, + centerMode: true, + centerPadding: "40px", + slidesToShow: 1, + }, + }, + ], + }); + + var contentSlider = $(".slick-content").slick({ + centerMode: true, + centerPadding: "60px", + slidesToShow: 1, + asNavFor: ".slick-images", + infinite: true, + arrows: false, + dots: true, + speed: 500, + responsive: [ + { + breakpoint: 768, + settings: { + arrows: false, + centerMode: true, + centerPadding: "40px", + slidesToShow: 3, + }, + }, + { + breakpoint: 480, + settings: { + arrows: false, + centerMode: true, + centerPadding: "40px", + slidesToShow: 1, + }, + }, + ], + }); + + $(".content-slider").on("swipe", function (event, slick, direction) { + if (direction === "left") { + imageSlider.slick("slickNext"); + } else if (direction === "right") { + imageSlider.slick("slickPrev"); + } + }); +});