Okay, let's create a professional and responsive website for an engineering company. We'll start with the basic HTML structure, CSS for styling and responsiveness, and JavaScript for the tab navigation and marketplace functionality. Innovate Engineering Solutions

Engineering the Future

Delivering innovative solutions for complex challenges.

Get In Touch

Welcome to Innovate Engineering

We are a team of dedicated engineers passionate about creating high-quality, sustainable, and efficient solutions across various industries. Explore our site to learn more about our expertise.

About Innovate Engineering

Founded in [Year], Innovate Engineering has grown into a trusted partner for businesses seeking cutting-edge engineering services. Our mission is to leverage technology and expertise to solve problems and drive progress.

Our Values

Innovation
Integrity
Collaboration
Excellence
Sustainability

Our Services

We offer a wide range of engineering services, including:

Design & Prototyping

From concept to creation, we bring ideas to life.

Manufacturing Solutions

Optimizing production processes for efficiency.

Project Management

Ensuring projects are delivered on time and budget.

Consulting

Expert advice to navigate technical challenges.

Marketplace

Explore our range of specialized engineering products.

High-Torque Wrench Set
Laser Measurement Device
Calibrated Gauge Blocks

Advanced Sensor Modules
Custom PCB Assemblies
High-Performance Actuators

Robotic Arm Kit
Conveyor Belt System
PLC Control Units

Contact Us

Ready to start your next project? Get in touch with our team.

123 Innovation Drive, Tech City

(555) 123-4567

info@innovateeng.com

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); :root { --primary-color: #0a4a7d; /* Deep Blue */ --secondary-color: #007bff; /* Bright Blue */ --accent-color: #f0f8ff; /* Alice Blue */ --text-color: #333; --light-gray: #f4f4f4; --white: #fff; --header-height: 70px; --transition-speed: 0.3s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--white); padding-top: var(--header-height); /* Prevent content overlap */ overflow-x: hidden; /* Prevent horizontal scroll */ } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* Header & Navigation */ .header { background-color: var(--white); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: var(--header-height); transition: background-color var(--transition-speed); } .header-content { display: flex; justify-content: space-between; align-items: center; height: 100%; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; transition: color var(--transition-speed); } .logo:hover { color: var(--secondary-color); } .main-nav { display: flex; align-items: center; } .nav-links { list-style: none; display: flex; } .nav-links li { margin-left: 25px; } .nav-link { text-decoration: none; color: var(--primary-color); font-weight: 600; padding: 5px 0; position: relative; transition: color var(--transition-speed); } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: width var(--transition-speed); } .nav-link:hover, .nav-link.active { color: var(--secondary-color); } .nav-link.active::after, .nav-link:hover::after { width: 100%; } .nav-toggle { display: none; /* Hidden by default */ background: none; border: none; cursor: pointer; padding: 10px; } .hamburger { display: block; width: 25px; height: 3px; background-color: var(--primary-color); position: relative; transition: background-color 0s 0.1s linear; /* Delay disappearance */ } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 100%; height: 3px; background-color: var(--primary-color); transition: transform var(--transition-speed), top var(--transition-speed) 0.1s linear; } .hamburger::before { top: -8px; } .hamburger::after { top: 8px; } /* Mobile Nav Toggle Styles */ .nav-open .nav-toggle .hamburger { background-color: transparent; /* Hide middle line */ } .nav-open .nav-toggle .hamburger::before { transform: rotate(45deg); top: 0; } .nav-open .nav-toggle .hamburger::after { transform: rotate(-45deg); top: 0; } /* Main Content & Sections */ main { min-height: calc(100vh - var(--header-height) - 50px); /* Adjust footer height */ } .tab-content { display: none; /* Hide tabs by default */ opacity: 0; animation: fadeIn 0.6s forwards; } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .section-padding { padding: 60px 0; } h1, h2, h3 { color: var(--primary-color); margin-bottom: 1rem; } h1 { font-size: 2.8rem; font-weight: 700; } h2 { font-size: 2.2rem; font-weight: 600; } h3 { font-size: 1.5rem; font-weight: 600; } p { margin-bottom: 1rem; } ul { list-style: disc; margin-left: 20px; margin-bottom: 1rem; } /* Hero Section */ .hero { background: linear-gradient(rgba(10, 74, 125, 0.8), rgba(10, 74, 125, 0.8)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; color: var(--white); text-align: center; padding: 100px 0; animation: fadeIn 1s ease-out; } .hero h1 { color: var(--white); margin-bottom: 0.5rem; } .hero p { font-size: 1.2rem; margin-bottom: 1.5rem; } .cta-button { display: inline-block; background-color: var(--secondary-color); color: var(--white); padding: 12px 25px; border: none; border-radius: 5px; text-decoration: none; font-weight: 600; transition: background-color var(--transition-speed), transform var(--transition-speed); cursor: pointer; } .cta-button:hover { background-color: #0056b3; /* Darker blue */ transform: translateY(-2px); } /* Services Section */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; } .service-item { background-color: var(--light-gray); padding: 30px; border-radius: 8px; text-align: center; transition: transform var(--transition-speed), box-shadow var(--transition-speed); } .service-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .service-icon { font-size: 2.5rem; color: var(--secondary-color); margin-bottom: 15px; } /* Marketplace Section */ .marketplace-categories { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; } .category { flex: 1 1 200px; /* Allow wrapping */ min-width: 180px; } .category-button { background-color: var(--accent-color); border: 1px solid #ddd; border-radius: 5px; padding: 15px; width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: var(--primary-color); transition: background-color var(--transition-speed); } .category-button:hover { background-color: #e0f0ff; } .category-icon { font-size: 1.5rem; color: var(--secondary-color); width: 30px; /* Fixed width for alignment */ text-align: center; } .product-list { list-style: none; margin: 10px 0 0 0; padding-left: 15px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out, opacity 0.5s ease-out; opacity: 0; border-left: 3px solid var(--secondary-color); } .product-list.visible { max-height: 300px; /* Adjust as needed */ opacity: 1; } .product-list li { padding: 5px 0; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .product-list li i { color: var(--secondary-color); font-size: 0.8rem; } /* Contact Section */ .contact-form { margin-bottom: 40px; max-width: 600px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--primary-color); } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem; } .form-group textarea { resize: vertical; } .contact-info p { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 10px; } .contact-info i { color: var(--secondary-color); width: 20px; /* Align icons */ text-align: center; } /* Footer */ .footer { background-color: var(--primary-color); color: var(--white); text-align: center; padding: 20px 0; margin-top: 40px; /* Ensure space above footer */ } /* Responsiveness */ @media (max-width: 768px) { h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.3rem; } .header-content { position: relative; /* Needed for absolute positioning of nav */ } .nav-toggle { display: block; /* Show hamburger */ z-index: 1001; /* Above nav links */ position: relative; /* Ensure it's clickable */ } .main-nav { position: static; /* Reset position */ } .nav-links { position: fixed; top: 0; right: -100%; /* Start off-screen */ width: 70%; max-width: 300px; height: 100vh; background-color: var(--white); flex-direction: column; padding-top: calc(var(--header-height) + 20px); padding-left: 20px; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); transition: right var(--transition-speed); z-index: 1000; } .nav-open .nav-links { right: 0; /* Slide in */ } .nav-links li { margin: 15px 0; margin-left: 0; /* Reset margin */ } .nav-link { font-size: 1.1rem; } .hero { padding: 60px 0; } .service-grid { grid-template-columns: 1fr; /* Stack services */ } .marketplace-categories { flex-direction: column; /* Stack categories */ } } @media (max-width: 480px) { .container { padding: 0 15px; } h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .cta-button { padding: 10px 20px; font-size: 0.9rem;} } document.addEventListener('DOMContentLoaded', () => { const navLinks = document.querySelectorAll('.nav-link'); const tabContents = document.querySelectorAll('.tab-content'); const marketplaceButtons = document.querySelectorAll('.category-button'); const navToggle = document.querySelector('.nav-toggle'); const mainNav = document.querySelector('.main-nav'); const body = document.body; const currentYearSpan = document.getElementById('current-year'); // Set current year in footer if (currentYearSpan) { currentYearSpan.textContent = new Date().getFullYear(); } // --- Tab Navigation --- function setActiveTab(targetId) { // Update nav links navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('data-tab') === targetId) { link.classList.add('active'); } }); // Update tab content visibility tabContents.forEach(content => { content.classList.remove('active'); if (content.id === targetId) { content.classList.add('active'); } }); // Close mobile nav if open if (body.classList.contains('nav-open')) { body.classList.remove('nav-open'); } } navLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); // Prevent default anchor jump const targetId = link.getAttribute('data-tab'); setActiveTab(targetId); // Optional: Update URL hash without page jump (for bookmarking/sharing) // history.pushState(null, null, `#${targetId}`); }); }); // --- Marketplace Accordion --- marketplaceButtons.forEach(button => { button.addEventListener('click', () => { const categoryId = button.getAttribute('data-category'); const productList = document.getElementById(categoryId); if (productList) { // Toggle visibility of the clicked list const isVisible = productList.classList.toggle('visible'); // Optional: Close other lists when one is opened if (isVisible) { document.querySelectorAll('.product-list.visible').forEach(list => { if (list !== productList) { list.classList.remove('visible'); } }); } } }); }); // --- Mobile Navigation Toggle --- if (navToggle && mainNav) { navToggle.addEventListener('click', () => { body.classList.toggle('nav-open'); }); } // --- Close mobile nav if clicking outside --- document.addEventListener('click', (e) => { if (body.classList.contains('nav-open') && !mainNav.contains(e.target) && !navToggle.contains(e.target)) { body.classList.remove('nav-open'); } }); // --- Initial Setup --- // Activate tab based on URL hash if present, otherwise default to 'home' const initialTab = window.location.hash.substring(1) || 'home'; // Check if a tab with this ID exists const initialTabElement = document.getElementById(initialTab); if (initialTabElement && initialTabElement.classList.contains('tab-content')) { setActiveTab(initialTab); } else { setActiveTab('home'); // Default to home if hash is invalid } }); This sets up the basic structure, styling, and functionality. You can view the website structure and basic interactions. The design is professional, responsive, and includes the requested tabs and marketplace functionality with Font Awesome icons. Animations are kept subtle for a high-quality feel (fade-ins, hover effects, smooth transitions).