Okay, I can help you create a responsive website for an engineering company with Home, About Us, Marketplace, and Contact sections, along with a footer. We'll use HTML, CSS, and JavaScript to achieve this, aiming for a professional, engineering-focused design. EngiCorp - Precision Engineering Solutions

Precision Engineering for a Better Future

Innovative solutions driving progress across industries.

Explore Our Products

Our Core Strengths

Advanced Manufacturing

Utilizing state-the-art technology for superior quality.

Custom Design

Tailored engineering designs to meet specific client needs.

Prototyping & Testing

Rigorous testing ensures reliability and performance.

About EngiCorp

Our Mission

To be a leading force in engineering innovation, providing high-quality, reliable solutions that empower our clients and contribute positively to the world. We are committed to excellence, integrity, and sustainable practices.

Our Values

Innovation: Constantly seeking better ways.
Quality: Uncompromising standards in every project.
Collaboration: Working closely with clients for optimal results.
Integrity: Honest and transparent operations.

Marketplace

Explore our range of precision-engineered components and systems. Click an icon to view products in that category.

Hydraulics

Electronics

Mechanical Parts

Sensors

Contact Us

Get in touch with our team for inquiries or project discussions.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Orbitron:wght@400;700&display=swap'); :root { --primary-color: #0a4a7a; /* Deep Blue */ --secondary-color: #1a7fbd; /* Lighter Blue */ --accent-color: #f0ad4e; /* Orange/Gold Accent */ --bg-color: #f4f7f6; /* Light Gray Background */ --text-color: #333; --heading-font: 'Orbitron', sans-serif; --body-font: 'Roboto', sans-serif; --border-radius: 4px; --container-width: 1100px; --header-height: 70px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); /* Offset for fixed header */ } body { font-family: var(--body-font); line-height: 1.6; color: var(--text-color); background-color: var(--bg-color); } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; } h1, h2, h3 { font-family: var(--heading-font); color: var(--primary-color); margin-bottom: 1rem; line-height: 1.2; } h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.5rem; } p { margin-bottom: 1rem; } a { color: var(--secondary-color); text-decoration: none; } a:hover { color: var(--primary-color); text-decoration: underline; } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } /* Header & Navbar */ header { background-color: #fff; 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); } .navbar .container { display: flex; justify-content: space-between; align-items: center; height: 100%; } .logo { font-family: var(--heading-font); font-size: 1.8rem; font-weight: 700; color: var(--primary-color); text-decoration: none; } .logo:hover { text-decoration: none; color: var(--secondary-color); } .nav-links { display: flex; } .nav-links li { margin-left: 25px; } .nav-links a { color: var(--text-color); font-weight: 400; padding: 5px 0; position: relative; text-decoration: none; transition: color 0.3s ease; } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--secondary-color); transition: width 0.3s ease; } .nav-links a:hover, .nav-links a.active-link { /* Style for active link */ color: var(--secondary-color); } .nav-links a:hover::after, .nav-links a.active-link::after { width: 100%; } .menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; } /* Page Sections */ main { padding-top: var(--header-height); /* Ensure content starts below fixed header */ } .page { display: none; /* Hide pages by default */ padding: 60px 0; min-height: calc(100vh - var(--header-height) - 60px); /* Adjust min-height considering footer */ } .page.active { display: block; /* Show active page */ } /* Home Section */ #home { padding: 0; /* Remove padding for hero */ } .hero { background: linear-gradient(rgba(10, 74, 122, 0.8), rgba(10, 74, 122, 0.8)), url('https://via.placeholder.com/1500x600/cccccc/888888?text=Engineering+Background') no-repeat center center/cover; color: #fff; height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; } .hero h1 { font-size: 3.5rem; margin-bottom: 1rem; color: #fff; } .hero p { font-size: 1.3rem; margin-bottom: 2rem; } .cta-button { display: inline-block; background-color: var(--accent-color); color: #fff; padding: 12px 25px; border: none; border-radius: var(--border-radius); font-size: 1rem; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; } .cta-button:hover { background-color: #d6903a; transform: translateY(-2px); text-decoration: none; color: #fff; } .features { padding: 60px 0; text-align: center; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; text-align: center; } .feature-item { background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: transform 0.3s ease; } .feature-item:hover { transform: translateY(-5px); } .feature-item i { font-size: 2.5rem; color: var(--secondary-color); margin-bottom: 15px; } .feature-item h3 { margin-bottom: 10px; font-size: 1.3rem; } /* About Section */ .about-content { display: flex; gap: 40px; align-items: center; } .about-image { flex: 1; max-width: 400px; /* Limit image size */ border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .about-content > div { flex: 2; } .about-content ul { margin-top: 1rem; } .about-content li { margin-bottom: 0.5rem; display: flex; align-items: center; } .about-content li i { color: var(--secondary-color); margin-right: 10px; } /* Marketplace Section */ .category-icons { display: flex; justify-content: center; gap: 40px; margin: 40px 0; flex-wrap: wrap; } .icon-item { text-align: center; cursor: pointer; padding: 20px; border-radius: var(--border-radius); transition: background-color 0.3s ease, transform 0.2s ease; width: 120px; /* Fixed width */ } .icon-item:hover { background-color: #e0e8f0; transform: translateY(-3px); } .icon-item i { font-size: 3rem; color: var(--primary-color); margin-bottom: 10px; display: block; } .icon-item span { font-weight: bold; color: var(--text-color); } #product-list-container { margin-top: 30px; background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: 0 2px 10px rgba(0,0,0,0.05); min-height: 150px; /* Ensure container has some height */ } .product-list { list-style: disc; padding-left: 20px; } .product-list li { margin-bottom: 10px; border-bottom: 1px dashed #eee; padding-bottom: 10px; } .product-list li:last-child { border-bottom: none; padding-bottom: 0; } .product-list strong { color: var(--primary-color); } /* Contact Section */ #contact-form { max-width: 700px; margin: 30px auto 0; background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--primary-color); } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 5px rgba(26, 127, 189, 0.3); } #contact-form button { width: auto; /* Adjust button width */ margin-top: 10px; } #form-status { margin-top: 15px; text-align: center; font-weight: bold; } /* Footer */ footer { background-color: var(--primary-color); color: #eef; padding: 20px 0; text-align: center; margin-top: 40px; /* Add some space before footer */ } footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .social-links a { color: #eef; margin-left: 15px; font-size: 1.3rem; transition: color 0.3s ease; } .social-links a:hover { color: var(--accent-color); text-decoration: none; } /* Responsive Design */ @media (max-width: 768px) { h1 { font-size: 2.2rem; } .hero h1 { font-size: 2.5rem; } h2 { font-size: 1.8rem; } .navbar .container { position: relative; } .nav-links { display: none; flex-direction: column; position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); padding: 10px 0; } .nav-links.active { display: flex; } .nav-links li { margin: 10px 20px; text-align: center; } .nav-links a::after { display: none; /* Hide underline effect on mobile */ } .menu-toggle { display: block; } .about-content { flex-direction: column; } .about-image { max-width: 100%; margin-bottom: 20px; } .category-icons { gap: 20px; } .icon-item { width: 100px; padding: 15px; } .icon-item i { font-size: 2.5rem; } footer .container { flex-direction: column; gap: 15px; } .social-links { margin-top: 10px; } .social-links a { margin: 0 10px; } } document.addEventListener('DOMContentLoaded', () => { const navLinks = document.querySelectorAll('.nav-links a'); const pages = document.querySelectorAll('.page'); const menuToggle = document.querySelector('.menu-toggle'); const navLinksContainer = document.querySelector('.nav-links'); const categoryIcons = document.querySelectorAll('.icon-item'); const productListContainer = document.getElementById('product-list-container'); const contactForm = document.getElementById('contact-form'); const formStatus = document.getElementById('form-status'); // --- Single Page Navigation --- function showPage(pageId) { pages.forEach(page => { page.classList.remove('active'); }); const activePage = document.getElementById(pageId); if (activePage) { activePage.classList.add('active'); } // Update active link style navLinks.forEach(link => { link.classList.remove('active-link'); if (link.getAttribute('href') === `#${pageId}`) { link.classList.add('active-link'); } }); // Close mobile menu if open if (navLinksContainer.classList.contains('active')) { navLinksContainer.classList.remove('active'); } } // Event listeners for nav links navLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); // Prevent default anchor jump const targetId = link.getAttribute('href').substring(1); // Get id without '#' showPage(targetId); // Update URL hash without page jump (optional, good for bookmarking/history) // history.pushState(null, null, `#${targetId}`); }); }); // Show initial page based on hash or default to 'home' const initialPageId = window.location.hash ? window.location.hash.substring(1) : 'home'; showPage(initialPageId); // Handle browser back/forward navigation // window.addEventListener('popstate', () => { // const pageId = window.location.hash ? window.location.hash.substring(1) : 'home'; // showPage(pageId); // }); // --- Mobile Menu Toggle --- menuToggle.addEventListener('click', () => { navLinksContainer.classList.toggle('active'); }); // --- Marketplace Product Loading --- const products = { hydraulics: [ { name: "Hydraulic Pump HGP-3A", description: "High-pressure gear pump." }, { name: "Solenoid Valve SV-10", description: "Direct-acting solenoid valve." }, { name: "Hydraulic Cylinder HC-50", description: "Double-acting cylinder, 50mm bore." } ], electronics: [ { name: "Microcontroller Board MCB-X1", description: "ARM Cortex-M4 based board." }, { name: "Power Supply Unit PSU-24V", description: "24V 5A regulated power supply." }, { name: "Signal Conditioner SC-A4", description: "Analog signal conditioning module." } ], mechanical: [ { name: "Ball Bearing BB-608", description: "Standard deep groove ball bearing." }, { name: "Linear Actuator LA-100", description: "100mm stroke electric linear actuator." }, { name: "Coupling CPL-FLEX", description: "Flexible shaft coupling." } ], sensors: [ { name: "Temperature Sensor TS-PT100", description: "RTD PT100 temperature probe." }, { name: "Pressure Transducer PT-50B", description: "0-50 Bar pressure transducer." }, { name: "Proximity Sensor PS-IND", description: "Inductive proximity sensor M12." } ] }; function displayProducts(category) { const productData = products[category]; if (!productData) { productListContainer.innerHTML = '

No products found for this category.

'; return; } let listHtml = `

${category.charAt(0).toUpperCase() + category.slice(1)} Products

${product.name}: ${product.description}

'; productListContainer.innerHTML = listHtml; } categoryIcons.forEach(icon => { icon.addEventListener('click', () => { const category = icon.getAttribute('data-category'); displayProducts(category); }); }); // Optionally display a default category on load // displayProducts('hydraulics'); // --- Contact Form Handling --- contactForm.addEventListener('submit', (e) => { e.preventDefault(); // Prevent actual form submission formStatus.textContent = 'Sending message...'; formStatus.style.color = 'var(--secondary-color)'; // Simulate form submission (replace with actual AJAX call if needed) setTimeout(() => { formStatus.textContent = 'Message sent successfully!'; formStatus.style.color = 'green'; contactForm.reset(); // Clear the form setTimeout(() => { formStatus.textContent = ''; }, 5000); // Clear status after 5s }, 1500); }); }); This sets up the basic structure, styling, and interactivity. * **HTML (`index.html`)**: Defines the structure with header, main sections (pages), and footer. Uses Font Awesome for icons. * **CSS (`style.css`)**: Provides styling with a blue/gray/orange color scheme, uses specific fonts (`Orbitron` for headings, `Roboto` for body), and includes media queries for responsiveness. It uses a fixed header and styles the different sections, including the marketplace icons and contact form. * **JavaScript (`script.js`)**: * Handles the single-page navigation by showing/hiding sections when nav links are clicked. * Manages the mobile menu toggle. * Loads placeholder product lists when marketplace category icons are clicked. * Provides basic feedback for the contact form submission (simulated). You can now view the website structure and basic functionality. Remember to replace placeholder content and images with your actual engineering company's details.