Okay, I can help you create a vibrant website for "BEAMAQ GLOBAL SOLUTIONS". Here are the files to set up the website: BEAMAQ GLOBAL SOLUTIONS - Vibrant Marketing Agency

Ignite Your Brand's Potential

Vibrant Marketing Solutions for a Digital World

Explore Services

Our Journey So Far

Years in Business

Clients Helped

Projects Finished

Our Services

Digital Marketing

Comprehensive strategies to boost your online presence and reach.

Branding & Design

Creating unique brand identities that resonate with your audience.

SEO Optimization

Improving your search engine rankings to drive organic traffic.

Social Media Management

Engaging content and strategies to grow your social following.

Web Development

Building responsive and high-performing websites for your business.

Content Creation

Crafting compelling content that tells your brand's story.

What Sets Us Apart

Innovative Strategies

We constantly explore new ideas to keep you ahead.

Client-Centric Approach

Your success is our top priority.

Data-Driven Results

We measure success through tangible results.

Transparent Communication

Keeping you informed every step of the way.

Passionate Team

Experts dedicated to achieving your goals.

Customized Solutions

Tailoring strategies to fit your unique needs.

What Our Clients Say

"BEAMAQ transformed our online presence! Their team is creative, responsive, and delivered outstanding results."

- Alex Johnson, Tech Innovators

"Working with BEAMAQ was a game-changer. Our leads increased significantly thanks to their targeted campaigns."

- Sarah Chen, Creative Designs Co.

"Highly recommend BEAMAQ! Professional, insightful, and truly dedicated to our brand's growth."

- Michael Lee, Global Exports Ltd.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); :root { --primary-color: #ff6b6b; --secondary-color: #feca57; --accent-color: #48dbfb; --dark-color: #130f40; --light-color: #f5f6fa; --gradient-primary: linear-gradient( 135deg, var(--primary-color), var(--secondary-color) ); --gradient-secondary: linear-gradient( 135deg, var(--accent-color), #5f27cd ); --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--dark-color); background-color: var(--light-color); } h1, h2, h3, h4 { line-height: 1.2; margin-bottom: 0.75rem; } h1 { font-size: 3rem; font-weight: 700; } h2 { font-size: 2.5rem; font-weight: 600; text-align: center; margin-bottom: 3rem; color: var(--dark-color); } h3 { font-size: 1.5rem; font-weight: 600; } h4 { font-size: 1.1rem; font-weight: 600; } a { text-decoration: none; color: var(--primary-color); } ul { list-style: none; } section { padding: 5rem 5%; } .container { max-width: 1200px; margin: auto; padding: 0 1rem; } /* Header & Nav */ header { background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; backdrop-filter: blur(5px); } nav { display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 5%; } .logo { font-size: 1.5rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } nav ul { display: flex; } nav ul li { margin-left: 1.5rem; } nav ul li a { color: var(--dark-color); font-weight: 600; transition: color 0.3s ease; } nav ul li a:hover { color: var(--primary-color); } .menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--dark-color); cursor: pointer; } /* Hero Section */ #hero { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 100vh; color: var(--light-color); background: var(--gradient-secondary) center/cover no-repeat; /* Optional: Add a background image */ /* background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/hero-bg.jpg'); */ padding-top: 70px; /* Offset for fixed header */ } .hero-content h1 { margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; font-weight: 300; } .cta-button { display: inline-block; background: var(--gradient-primary); color: white; padding: 12px 30px; border-radius: 50px; font-weight: 600; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } /* Stats Section */ #stats { background: var(--light-color); } .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; } .stat-item { background: white; padding: 2rem 1rem; border-radius: 10px; box-shadow: var(--shadow); transition: transform 0.3s ease; } .stat-item:hover { transform: translateY(-5px); } .stat-number { display: block; font-size: 3rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.5rem; } .stat-item p { font-size: 1rem; color: #555; } /* Services Section */ #services { background: white; } .services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .service-item { background: var(--light-color); padding: 2rem; border-radius: 10px; text-align: center; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform 0.3s ease; } .service-item:hover { transform: translateY(-10px); } .service-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem auto; background: var(--gradient-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; transition: transform 0.3s ease; } .service-item:hover .service-icon { transform: scale(1.1); } .service-desc { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(19, 15, 64, 0.9); /* Dark color with opacity */ color: white; padding: 1.5rem; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0; font-size: 0.9rem; height: 100%; /* Ensure it covers the item */ display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px; /* Match parent */ } .service-item:hover .service-desc { transform: translateY(0); opacity: 1; } .service-item h3 { margin-bottom: 0.5rem; transition: opacity 0.3s ease; } .service-item:hover h3 { opacity: 0; /* Hide title on hover */ } /* What Sets Us Apart Section */ #apart { background: var(--gradient-secondary); color: var(--light-color); } #apart h2 { color: var(--light-color); } .apart-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .apart-item { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 10px; text-align: center; transition: background 0.3s ease, transform 0.3s ease; backdrop-filter: blur(5px); } .apart-item:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); } .apart-item i { font-size: 2.5rem; margin-bottom: 1rem; color: var(--secondary-color); display: block; } .apart-item h4 { margin-bottom: 0.5rem; color: white; } .apart-item p { font-size: 0.9rem; font-weight: 300; } /* Testimonials Section */ #testimonials { background: var(--light-color); position: relative; overflow: hidden; } .testimonial-slider { max-width: 800px; margin: auto; position: relative; background: white; padding: 3rem 4rem; /* Space for arrows */ border-radius: 10px; box-shadow: var(--shadow); min-height: 250px; /* Ensure consistent height */ display: flex; /* Use flex for alignment */ align-items: center; /* Vertically center content */ } .testimonial-wrapper { position: relative; width: 100%; overflow: hidden; /* Hide non-active testimonials */ } .testimonial { display: none; /* Hide all by default */ text-align: center; animation: fadeEffect 1s ease-in-out; } .testimonial.active { display: block; /* Show active testimonial */ } .testimonial p { font-size: 1.1rem; font-style: italic; margin-bottom: 1.5rem; color: #555; } .testimonial h4 { font-weight: 600; color: var(--dark-color); } .arrow { position: absolute; top: 50%; transform: translateY(-50%); background: var(--gradient-primary); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1rem; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; display: flex; align-items: center; justify-content: center; z-index: 10; } .arrow:hover { transform: translateY(-50%) scale(1.1); } .left-arrow { left: 1rem; } .right-arrow { right: 1rem; } @keyframes fadeEffect { from { opacity: 0.4; } to { opacity: 1; } } /* Footer */ footer { background: var(--dark-color); color: var(--light-color); text-align: center; padding: 1.5rem 5%; font-size: 0.9rem; } /* Responsive Design */ @media (max-width: 992px) { h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } section { padding: 4rem 5%; } } @media (max-width: 768px) { nav ul { display: none; /* Hide menu items */ position: absolute; top: 70px; left: 0; width: 100%; background: rgba(255, 255, 255, 0.95); flex-direction: column; text-align: center; padding: 1rem 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } nav ul.active { display: flex; /* Show when active */ } nav ul li { margin: 1rem 0; } .menu-toggle { display: block; /* Show hamburger icon */ } #hero { min-height: 80vh; } .stats-container, .services-container, .apart-container { grid-template-columns: 1fr; /* Stack items */ } .testimonial-slider { padding: 2rem 3.5rem; /* Adjust padding for smaller screens */ } .arrow { width: 35px; height: 35px; } .left-arrow { left: 0.5rem; } .right-arrow { right: 0.5rem; } } @media (max-width: 576px) { h1 { font-size: 2rem; } h2 { font-size: 1.8rem; margin-bottom: 2rem; } section { padding: 3rem 5%; } .cta-button { padding: 10px 25px; font-size: 0.9rem; } .stat-number { font-size: 2.5rem; } .testimonial p { font-size: 1rem; } } document.addEventListener('DOMContentLoaded', () => { // Mobile Menu Toggle const menuToggle = document.querySelector('.menu-toggle'); const navUl = document.querySelector('nav ul'); if (menuToggle && navUl) { menuToggle.addEventListener('click', () => { navUl.classList.toggle('active'); }); // Close menu when a link is clicked navUl.querySelectorAll('a').forEach((link) => { link.addEventListener('click', () => { if (navUl.classList.contains('active')) { navUl.classList.remove('active'); } }); }); } // Stats Counter Animation const statNumbers = document.querySelectorAll('.stat-number'); const statsSection = document.getElementById('stats'); let animationStarted = false; const animateStats = () => { statNumbers.forEach((counter) => { const target = +counter.getAttribute('data-target'); const duration = 2000; // 2 seconds const stepTime = Math.abs(Math.floor(duration / target)); let current = 0; const updateCount = () => { current++; counter.innerText = current; if (current < target) { setTimeout(updateCount, stepTime > 0 ? stepTime : 1); // Ensure stepTime is at least 1ms } else { counter.innerText = target; // Ensure final target is reached } }; updateCount(); }); animationStarted = true; // Mark as started }; // Intersection Observer for Stats Animation if (statsSection && statNumbers.length > 0) { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { // Start animation only when section is intersecting and animation hasn't started if (entry.isIntersecting && !animationStarted) { animateStats(); observer.unobserve(statsSection); // Stop observing once animated } }); }, { threshold: 0.5 } // Trigger when 50% of the section is visible ); observer.observe(statsSection); } // Testimonial Slider const testimonials = document.querySelectorAll('.testimonial'); const leftArrow = document.querySelector('.left-arrow'); const rightArrow = document.querySelector('.right-arrow'); let currentTestimonialIndex = 0; function showTestimonial(index) { testimonials.forEach((testimonial, i) => { testimonial.classList.remove('active'); if (i === index) { testimonial.classList.add('active'); } }); } if (testimonials.length > 0 && leftArrow && rightArrow) { leftArrow.addEventListener('click', () => { currentTestimonialIndex = (currentTestimonialIndex - 1 + testimonials.length) % testimonials.length; showTestimonial(currentTestimonialIndex); }); rightArrow.addEventListener('click', () => { currentTestimonialIndex = (currentTestimonialIndex + 1) % testimonials.length; showTestimonial(currentTestimonialIndex); }); // Initialize the first testimonial showTestimonial(currentTestimonialIndex); } }); This sets up the HTML structure, vibrant CSS styling (including animations and responsiveness), and JavaScript for the counter and testimonial slider functionality. You can view the website by opening the `index.html` file.