diff --git a/assets/affiliate.webp b/assets/affiliate.webp new file mode 100644 index 0000000..9988638 Binary files /dev/null and b/assets/affiliate.webp differ diff --git a/assets/analytics.jpg b/assets/analytics.jpg new file mode 100644 index 0000000..e39c905 Binary files /dev/null and b/assets/analytics.jpg differ diff --git a/assets/content.png b/assets/content.png new file mode 100644 index 0000000..6274fe1 Binary files /dev/null and b/assets/content.png differ diff --git a/assets/dm.jpg b/assets/dm.jpg new file mode 100644 index 0000000..e6bbfaa Binary files /dev/null and b/assets/dm.jpg differ diff --git a/assets/email.png b/assets/email.png new file mode 100644 index 0000000..7576028 Binary files /dev/null and b/assets/email.png differ diff --git a/assets/features/collaborate.webp b/assets/features/collaborate.webp new file mode 100644 index 0000000..b01de49 Binary files /dev/null and b/assets/features/collaborate.webp differ diff --git a/assets/features/collaborativeInnovativeSolutions.webp b/assets/features/collaborativeInnovativeSolutions.webp new file mode 100644 index 0000000..bb4443d Binary files /dev/null and b/assets/features/collaborativeInnovativeSolutions.webp differ diff --git a/assets/features/dataDrivenInsights.webp b/assets/features/dataDrivenInsights.webp new file mode 100644 index 0000000..2f507bc Binary files /dev/null and b/assets/features/dataDrivenInsights.webp differ diff --git a/assets/features/elink.webp b/assets/features/elink.webp new file mode 100644 index 0000000..2c1812c Binary files /dev/null and b/assets/features/elink.webp differ diff --git a/assets/features/evil.webp b/assets/features/evil.webp new file mode 100644 index 0000000..ddd0739 Binary files /dev/null and b/assets/features/evil.webp differ diff --git a/assets/features/futureProofTech.webp b/assets/features/futureProofTech.webp new file mode 100644 index 0000000..b33c0df Binary files /dev/null and b/assets/features/futureProofTech.webp differ diff --git a/assets/features/involv.webp b/assets/features/involv.webp new file mode 100644 index 0000000..d4d526c Binary files /dev/null and b/assets/features/involv.webp differ diff --git a/assets/influencer.png b/assets/influencer.png new file mode 100644 index 0000000..3795dde Binary files /dev/null and b/assets/influencer.png differ diff --git a/assets/payperclick.webp b/assets/payperclick.webp new file mode 100644 index 0000000..8742f8a Binary files /dev/null and b/assets/payperclick.webp differ diff --git a/assets/social-media.jpg b/assets/social-media.jpg new file mode 100644 index 0000000..9fe39c9 Binary files /dev/null and b/assets/social-media.jpg differ diff --git a/assets/team1.jpg b/assets/team1.jpg new file mode 100644 index 0000000..5cbb1c3 Binary files /dev/null and b/assets/team1.jpg differ diff --git a/assets/team2.png b/assets/team2.png new file mode 100644 index 0000000..b5f6cef Binary files /dev/null and b/assets/team2.png differ diff --git a/assets/team3.jpg b/assets/team3.jpg new file mode 100644 index 0000000..59361f7 Binary files /dev/null and b/assets/team3.jpg differ diff --git a/assets/team4.jpeg b/assets/team4.jpeg new file mode 100644 index 0000000..572cccd Binary files /dev/null and b/assets/team4.jpeg differ diff --git a/assets/web.jpeg b/assets/web.jpeg new file mode 100644 index 0000000..27ff2cb Binary files /dev/null and b/assets/web.jpeg differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..3c28543 --- /dev/null +++ b/contact.html @@ -0,0 +1,337 @@ + + + + + + Multi-Step Form + + + + + +
+
+ + +
+
+ +
+

Multi-Step Form

+
+
+
+
+ +
+

Step 1: Personal Details

+ + + +
+ + Male + Female + Other +
+ +
+ +
+
+ + +
+

Step 2: Professional Details

+ +
+ + Non-Medical + Enineering + Master of Engineering + PhD +
+ + +
+ + +
+
+ + +
+

Step 3: Review & Submit

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

Success!

+

Your data has been submitted successfully.

+ +
+
+ + + + diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..eff1916 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,589 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&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'); + html { + scroll-behavior: smooth; +} +body { + font-family: 'Roboto', sans-serif; + color: #333; +} + +header { + + background: rgba(255, 255, 255, 0.8); + color: #333; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + min-width: 100%; +} + +.container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + text-transform: uppercase; +} + +.nav-links { + display: flex; + gap: 1.5rem; +} + +.nav-links a { + color: #333; + text-decoration: none; + font-size: 1.2rem; + transition: color 0.3s; +} + +.nav-links a:hover { + color: #ff9800; +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger div { + width: 25px; + height: 3px; + background: #333; + margin: 4px 0; +} + +.hero { + height: 100vh; + background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../assets/dm.jpg') center/cover no-repeat; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + text-align: center; + padding: 2rem; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 2rem; +} + +.cta-button { + background: #ff9800; + color: #fff; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 5px; + font-size: 1rem; + cursor: pointer; + transition: 0.3s; +} + +.cta-button:hover { + background: #e68900; +} +/* +services */ + +.services { + padding: 4rem 2rem; + text-align: center; + background: #f9f9f9; +} + +.services h2 { + font-size: 2rem; + margin-bottom: 1rem; +} +.services p{ + color: gray; + font-size: 1.5rem; +} + +.cards { + display: grid; + /* grid-template-columns: repeat(4, 1fr); */ + gap: 2rem; + margin-left: 4rem; + margin-right: 4rem; + margin-top: 2rem; +} + +.card { + background: #fff; + padding: 2rem; + border-radius: 10px; + box-shadow: 0px 4px 6px #e68900; + transition: transform 0.3s; + +} + +.card:hover { + transform: translateY(-10px); +} + +.card i { + font-size: 2rem; + color: #ff9800; + margin-bottom: 1rem; +} + +.card h3 { + margin-bottom: 1rem; + font-size: 1.5rem; +} + +.card p { + font-size: 1rem; +} + +/* pricing */ + +#pricing { + /* margin-top: 10px; */ + /* Adjust this value to clear the navbar */ + /* padding: 20px; */ + text-align: center; + /* align-items: center; */ + /* margin-bottom: 2rem; */ + +} +#pricing p{ + margin-top: 4rem; + margin-bottom: 1.5rem; + text-align: center; + font-weight: bold; + font-size: 2.5rem; +} +.desc { + color: #6b7280; + font-size: 1.2rem; +} + + +.pricing-table { + display: flex; + gap: 20px; + max-width: 100%; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-top: 4rem; + margin-bottom: 4rem; + +} + +.pricing-plan { + background: linear-gradient(145deg, #ffffff, #e6e6e6); + border: 1px solid #d1d5db; + border-radius: 12px; + padding: 20px; + text-align: center; + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); + width: 300px; + transition: transform 0.3s, box-shadow 0.3s; + position: relative; + +} + +.pricing-plan:hover { + transform: translateY(-10px); + box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); +} + +.plan-title { + font-size: 1.8em; + font-weight: bold; + margin-bottom: 15px; + color: #1f2937; +} + +.plan-price { + font-size: 2.2em; + font-weight: bold; + margin: 20px 0; + color: #3b82f6; +} + +.plan-description { + color: #6b7280; + margin-bottom: 20px; +} + +.features { + list-style: none; + padding: 0; + margin: 0; + color: #4b5563; + text-align: left; + margin-top: 2rem; +} + +.features li { + margin: 10px 0; + display: flex; + align-items: center; + gap: 10px; +} + +.features li::before { + content: '\2713'; + color: #10b981; + font-weight: bold; +} + +.btn { + display: inline-block; + padding: 12px 24px; + font-size: 1em; + color: #ffffff; + background-color: #3b82f6; + border: none; + border-radius: 6px; + text-decoration: none; + transition: background-color 0.3s, transform 0.3s; +} + +.btn:hover { + background-color: #2563eb; + transform: scale(1.05); +} + +.badge { + position: absolute; + top: -10px; + right: -10px; + background: #f59e0b; + color: #ffffff; + font-size: 0.9em; + font-weight: bold; + padding: 5px 10px; + border-radius: 50px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.secondary-badge { + position: absolute; + bottom: -10px; + right: -10px; + background: #10b981; + color: #ffffff; + font-size: 0.8em; + font-weight: bold; + padding: 4px 8px; + border-radius: 50px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +/* team */ + +.team { + padding: 4rem 2rem; + text-align: center; + background: #f9f9f9; + box-shadow: 0 4px 6px #e68900; +} + +.team h2 { + font-size: 2.5rem; + margin-bottom: 3rem; +} + +.team .team-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin-left: 6rem; + margin-bottom: 1.5rem; + margin-right: 6rem; + +} + +.team .team-member { + + margin-left: 4rem; + width: 70%; + text-align: center; +} +.team-member img{ + height: 300px; + box-shadow: 0 4px 6px #e68900; +} + +.team img { + width: 100%; + border-radius: 10px; + transition: transform 0.4s; +} + +.team img:hover { + transform: scale(1.05); +} + +.team .team-name { + margin-top: 0.5rem; + font-size: 1.2rem; + font-weight: bold; + color: #333; +} + +.contact { + padding: 4rem 2rem; + text-align: center; + background: #fff; +} + +.contact h2 { + font-size: 2.5rem; + margin-bottom: 2rem; +} + +.contact form { + display: flex; + flex-direction: column; + align-items: center; + max-width: 600px; + margin: 0 auto; +} + +.contact input, .contact textarea { + width: 100%; + padding: 1rem; + margin: 0.5rem 0; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 1rem; + transition: border-color 0.3s; +} + +.contact input:focus, .contact textarea:focus { + border-color: #ff9800; + outline: none; +} + +.cta-button { + background: #ff9800; + color: #fff; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 5px; + font-size: 1rem; + cursor: pointer; + transition: 0.3s; + margin-top: 1rem; +} + +.cta-button:hover { + background: #e68900; +} + +/* Footer */ +.footer { + background-color: #000000; + padding: 3rem; + box-shadow: 0 4px 6px #e68900; + color: white; + text-align: left; + position: relative; + padding-bottom: 0rem; + +} + +.footer-content { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 2rem; +} +.footer-copyright { + text-align: center; + padding: 1rem 0; + background-color: #000000; + font-size: 0.9rem; + color: #555; + width: 100%; + border-top: 1px solid #ffffff; +} + +.footer-copyright p { + + color: white; + font-size: 1rem; + +} + + +/* Tab (768px - 1199px) */ +@media (max-width: 1199px) and (min-width: 768px) { + .cards { + grid-template-columns: repeat(2, 1fr); + } + .hero h1 { + font-size: 3rem; + } + .hero p { + font-size: 1.2rem; + } + .cta-button { + padding: 0.75rem 1.5rem; + font-size: 1rem; + } + .contact input, .contact textarea { + padding: 1rem; + } + /* .price-container { + justify-content: space-around; + } */ +} + +.contact-info h4, .sitemap h4, .social-media h4 { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.contact-info p, .sitemap ul li { + font-size: 1rem; + color: #777; + margin-bottom: 0.5rem; +} + +.contact-info a, .sitemap a, .social-icons a { + color: #ff9800; + text-decoration: none; + transition: color 0.3s; +} + +.contact-info a:hover, .sitemap a:hover, .social-icons a:hover { + text-decoration: underline; + color: #e68900; +} + +.sitemap ul { + list-style: none; + padding: 0; +} + +.social-icons a { + font-size: 1.5rem; + margin-right: 1rem; +} + + + +/* Responsiveness */ + +/* pc (1200px+) */ +@media (min-width: 1200px) { + .cards { + grid-template-columns: repeat(4, 1fr); + } + .card { + padding: 2rem; + } + .hero h1 { + font-size: 4rem; + } + .hero p { + font-size: 1.5rem; + } + .cta-button { + padding: 1rem 2rem; + font-size: 1.2rem; + } + .contact input, .contact textarea { + padding: 1.25rem; + } + /* .price-container { + justify-content: space-around; + } */ +} + +/* Tab (768px - 1199px) */ +@media (max-width: 1199px) and (min-width: 768px) { + .cards { + grid-template-columns: repeat(2, 1fr); + } + .hero h1 { + font-size: 3rem; + } + .hero p { + font-size: 1.2rem; + } + .cta-button { + padding: 0.75rem 1.5rem; + font-size: 1rem; + } + .contact input, .contact textarea { + padding: 1rem; + } + /* .price-container { + gap: 1rem; + } + + .price-card { + width: 45%; + } */ +} + +/* Mobile (320px - 767px) */ +@media (max-width: 767px) { + .cards { + grid-template-columns: 1fr; + } + .nav-links { + display: none; + flex-direction: column; + background: #fff; + position: absolute; + top: 60px; + right: 0; + width: 100%; + padding: 1rem 0; + } + .nav-links.active { + display: flex; + } + .hamburger { + display: flex; + } + .hero h1 { + font-size: 2rem; + } + .hero p { + font-size: 1rem; + } + .cta-button { + padding: 0.5rem 1rem; + font-size: 0.9rem; + } + .contact input, .contact textarea { + padding: 1rem; + } + .pricing-plan { + max-width: 100%; + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + } + + /* .price-card { + width: 90%; + } */ +} + + diff --git a/css/swiper.css b/css/swiper.css new file mode 100644 index 0000000..cbefc7a --- /dev/null +++ b/css/swiper.css @@ -0,0 +1,212 @@ +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&display=swap'); + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + /* display: flex; + align-items: center; + justify-content: center; */ + height: 100%; + background-color: white; + +} +.swipecontainer .heading p{ + text-align: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + +} + +.swipecontainer { + width: 100%; + margin-top: 8rem; + margin-bottom: 2rem; +} +.swipecontainer p{ + color: #000; +} + +.swiper { + width: 100%; + padding: 50px 0; + margin-top: 3rem; +} + +.swiper-slide { + position: relative; + aspect-ratio: 3.5/4; + border-radius: 12px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); + cursor: grab; + user-select: none; + overflow: hidden; + max-width: 300px; + height: 300px; +} + +.swiper-slide img { + object-fit: cover; + pointer-events: none; + width: 100%; + height: 100%; +} + +.caption { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 70px; + background-color: rgba(0, 0, 0, 0.7); + color: #e2e2e2; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + transform: translateY(70px); + transition: transform 1s ease; +} + +.swiper-slide:hover .caption { + transform: translateY(0); +} + +h1 { + font-size: 1.2rem; + letter-spacing: 1px; +} +.swipecontainer p { + font-size: 2.5rem; + font-weight: 800; +} + + +.swiper-wrapper { + transition-timing-function: linear !important; +} + + /* featured projects slider */ + + .featured-projects-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + max-width: 100%; + } + + .image-slider { + width: 60%; + margin-bottom: 6rem; + } + + .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 .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: "Roboto", serif; + margin: 10px 0px; + } + .project-section-title h2 { + margin: 0px 0px; + font-size: 3rem + } + + .project-section-title span{ + color: #000000; + } + + .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; + } + + /* new */ + @media (min-width: 769px) and (max-width: 1400px) { + .slick-images img { + width: 200px; + height: 200px; + gap: 80px; + } +} + +@media (max-width: 768px) { + .featured-projects-container { + display: none; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..736b390 --- /dev/null +++ b/index.html @@ -0,0 +1,289 @@ + + + + + + + Digital Marketing Agency + + + + + + + + + + +
+
+ + +
+
+ +
+
+

Grow Your Business with Us

+

We provide top-notch digital marketing solutions to elevate your brand.

+ +
+
+ + + +
+

Thrive's Digital Marketing Services

+

Our full-service digital marketing agency offers affordable and effective digital marketing plans.

+

We work to deliver improved rankings, increased traffic and, in turn, more business.

+ + +
+
+
+ +

SEO Optimization

+

We help you improve your Google ranking and increase your organic (non-paid) website traffic. SEO is more than just incorporating keywords and we can help to optimize all elements.

+
+
+ +

Search Engine Advertising / Google Ads

+

Search engine advertising, also known as pay-per-click advertising or Google Ads, helps you reach new customers and guarantees a consistent traffic flow to your website.

+
+
+ +

Web Design

+

Websites are the essence of your online presence. We will create a functional website that is customized for your business and drives results. All of our websites include SEO, and lead generation tools.

+
+
+ +

Social Media Marketing

+

We help you with social media advertising to help you grow your business and reach new clients.

+
+
+ +

Content Marketing

+

We help you with social media advertising to help you grow your business and reach new clients.

+
+
+ +

Pay Per Click (PPC) Management

+

Boost your business with our expert PPC campaigns! Our AdWords-certified specialists craft targeted ads, optimize bids, leverage device strategies, and track ROI. We maximize seasonal trends to drive leads and high-quality traffic.

+
+
+ +

Digital Marketing strategy

+

Unlock a custom digital marketing strategy designed for your business. From SEO to paid ads, we create a plan that drives results. Schedule a free consultation today and start reaching your goals.

+
+
+ +

Email Marketing

+

Stand out with expert email marketing! We craft personalized newsletters, grow your subscriber list, and optimize campaigns to drive action. From testing to creating curiosity, we ensure your emails make an impact.

+
+ +
+ + +
+

Our Featured Services

+
+
+
+ +
+

Affiliate Marketing

+
+
+
+ +
+

Analytics and Reporting

+
+
+
+ +
+

Content Marketing

+
+
+
+ +
+

Email Marketing

+
+
+
+ +
+

Influencer Marketing

+
+
+
+ +
+

Pay-Per-Click Advertising (PPC)

+
+
+
+ +
+

Social Media Marketing

+
+
+
+ +
+

Web Design and Development

+
+
+
+
+
+
+ + + +
+

Our Cost Effective Service Pricing

+ Empowering businesses of all sizes to grow online with affordable and effective digital marketing solutions. +
+ Trusted by clients worldwide, we're here to help you thrive + +
+
+
Popular
+
Save 10%
+

Basic

+

$49/month

+

Ideal for small businesses starting out.

+
    +
  • 5 Social Media Posts
    • +
  • Email Support
    • +
  • Basic Analytics
    • +
+ Get Started +
+ +
+
Best Value
+
Save 15%
+

Standard

+

$99/month

+

Perfect for growing businesses.

+
    +
  • 15 Social Media Posts
    • +
  • Priority Email Support
    • +
  • Advanced Analytics
    • +
+ Get Started +
+ +
+
Premium
+
Save 20%
+

Premium

+

$199/month

+

For established businesses scaling up.

+
    +
  • Unlimited Social Media Posts
    • +
  • 24/7 Support
    • +
  • Comprehensive Analytics
    • +
+ Get Started +
+
+
+ + + +
+

Meet Our Digital Marketing Experts Team

+
+
+ Team Member 1 +

Alice Johnson

+
+
+ Team Member 2 +

Michael Smith

+
+
+ Team Member 3 +

Sophia Lee

+
+
+ Team Member 4 +

James Brown

+
+
+
+ + + +
+

Contact Us

+
+ + + + +
+
+ + + + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..5a837bd --- /dev/null +++ b/js/script.js @@ -0,0 +1,121 @@ +function toggleMenu() { + const navLinks = document.querySelector('.nav-links'); + navLinks.classList.toggle('active'); +} + + + +let currentStep = 0; + +function showStep(step) { + const steps = document.querySelectorAll('.step'); + const indicators = document.querySelectorAll('.step-indicator div'); + steps.forEach(s => s.classList.remove('active')); + indicators.forEach(i => i.classList.remove('active')); + steps[step].classList.add('active'); + indicators[step].classList.add('active'); +} + +function nextStep() { + if (validateStep(currentStep)) { + currentStep++; + if (currentStep >= document.querySelectorAll('.step').length) { + currentStep = document.querySelectorAll('.step').length - 1; + } + showStep(currentStep); + if (currentStep === 2) { + reviewData(); + } + } +} + +function prevStep() { + currentStep--; + if (currentStep < 0) { + currentStep = 0; + } + showStep(currentStep); +} + + function validateStep(step) { + const inputs = document.querySelectorAll(`#step${step + 1} input, #step${step + 1} select`); + for (let input of inputs) { + if (!input.checkValidity()) { + input.reportValidity(); + return false; + } + } + return true; + } + + function reviewData() { + const fullName = document.getElementById('fullName').value; + const email = document.getElementById('email').value; + const phone = document.getElementById('phone').value; + const gender = document.querySelector('input[name="gender"]:checked').value; + const age = document.getElementById('age').value; + const education = document.getElementById('education').value; + const experience = document.getElementById('experience').value; + const currentRole = document.getElementById('currentRole').value; + + const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value).join(', '); + + document.getElementById('review').innerHTML = ` +

Full Name: ${fullName}

+

Email: ${email}

+

Phone: ${phone}

+

Gender: ${gender}

+

Age: ${age}

+

Education: ${education}

+

Skills: ${skills}

+

Experience: ${experience} years

+

Current Role: ${currentRole}

+ `; + } + + function submitForm() { + const data = { + fullName: document.getElementById('fullName').value, + email: document.getElementById('email').value, + phone: document.getElementById('phone').value, + gender: document.querySelector('input[name="gender"]:checked').value, + age: document.getElementById('age').value, + education: document.getElementById('education').value, + skills: Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value), + experience: document.getElementById('experience').value, + currentRole: document.getElementById('currentRole').value + }; + + localStorage.setItem('formData', JSON.stringify(data)); + document.getElementById('multiStepForm').style.display = 'none'; + document.getElementById('successMessage').style.display = 'block'; + } + +function exportData() { + const data = localStorage.getItem('formData'); + const blob = new Blob([data], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'formData.json'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); +} + + function clearForm() { + document.getElementById('multiStepForm').reset(); + localStorage.removeItem('formData'); + currentStep = 0; + showStep(currentStep); + document.getElementById('successMessage').style.display = 'none'; + } + + // Initialize the form + showStep(currentStep); + + + + + + diff --git a/js/slider.js b/js/slider.js new file mode 100644 index 0000000..0ce63d5 --- /dev/null +++ b/js/slider.js @@ -0,0 +1,30 @@ +const swipecontainer = document.querySelector(".swipecontainer"); +const likeBtns = document.querySelector(".like-btns"); + +var swiper = new Swiper(".swiper", { + spaceBetween: 30, + slidesPerView: "auto", + loop: true, + speed: 5000, + freeMode: true, + allowTouchMove: false, + autoplay: { + delay: 0, + disableOnInteraction: false, + }, +}); + + +function stopAutoPlay() { + const swiperTranslate = swiper.getTranslate(); + swiper.setTranslate(swiperTranslate); + swiper.autoplay.stop(); +} + +function startAutoPlay() { + swiper.slideTo(swiper.activeIndex, 5000, false); + swiper.autoplay.start() +} + +swipecontainer.addEventListener("mouseenter", () => stopAutoPlay()); +swipecontainer.addEventListener("mouseleave", () => startAutoPlay()); \ No newline at end of file diff --git a/js/swiper.js b/js/swiper.js new file mode 100644 index 0000000..bbe5b71 --- /dev/null +++ b/js/swiper.js @@ -0,0 +1,104 @@ +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 projects 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 + } + } + ] + }); + + // Initialize Slick Slider for Content Slider with Center Mode + 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 + } + } + ] + }); + + // Sync swipe direction of both sliders + $('.content-slider').on('swipe', function (event, slick, direction) { + if (direction === 'left') { + imageSlider.slick('slickNext'); + } else if (direction === 'right') { + imageSlider.slick('slickPrev'); + } + }); +}); \ No newline at end of file diff --git a/swiper.html b/swiper.html new file mode 100644 index 0000000..27db85d --- /dev/null +++ b/swiper.html @@ -0,0 +1,180 @@ + + + + + + + Digital Marketing Company + + + + + + + + + + +
+
+ + +
+
+ + +
+
+

Our Featured Services

+
+
+
+
+ +
+

Affiliate Marketing

+
+
+
+ +
+

Analytics and Reporting

+
+
+
+ +
+

Content Marketing

+
+
+
+ +
+

Email Marketing

+
+
+
+ +
+

Influencer Marketing

+
+
+
+ +
+

Pay-Per-Click Advertising (PPC)

+
+
+
+ +
+

Social Media Marketing

+
+
+
+ +
+

Web Design and Development

+
+
+
+
+
+ + +
+

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.

+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + \ No newline at end of file