Global Shipping Solutions You Can Trust

Reliable, fast, and secure shipping services worldwide. We deliver your cargo safely to any destination with real-time tracking and professional handling.

Get Free Quote Our Services
500+
Destinations
1M+
Packages Delivered
99.9%
On-Time Delivery

Our Shipping Services

Comprehensive logistics solutions for all your shipping needs

Express Shipping

Fast and reliable express delivery services for urgent shipments worldwide.

  • 24-48 hour delivery
  • Real-time tracking
  • Priority handling

Cargo Services

Large-scale cargo shipping for commercial and industrial requirements.

  • Bulk shipping
  • Customs clearance
  • Warehousing

International Shipping

Global shipping solutions connecting businesses across continents.

  • Worldwide coverage
  • Multi-modal transport
  • Documentation support

Ground Transport

Reliable ground transportation services for domestic and cross-border shipping.

  • Regional coverage
  • Scheduled deliveries
  • Freight consolidation

Why Choose GlobalShip?

With over two decades of experience in the shipping and logistics industry, GlobalShip has established itself as a trusted partner for businesses worldwide. We combine cutting-edge technology with reliable service to ensure your cargo reaches its destination safely and on time.

24/7 Support

Round-the-clock customer support for all your shipping needs

Secure Handling

Advanced security measures to protect your valuable cargo

Real-time Tracking

Monitor your shipments with our advanced tracking system

Modern Logistics Hub

Get Your Free Shipping Quote

Fill out the form below and we'll get back to you with a competitive quote

Contact Us

Get in touch with our team for any questions or support

Phone

+1 (555) 123-4567

+1 (555) 987-6543

Email

info@globalship.com

support@globalship.com

Address

123 Shipping Boulevard
Logistics District
New York, NY 10001

Business Hours

Monday - Friday: 8:00 AM - 6:00 PM

Saturday: 9:00 AM - 4:00 PM

Sunday: Emergency Only

Interactive Map Map integration placeholder
=== assets/css/styles.css === /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #1e40af; --primary-dark: #1e3a8a; --secondary-color: #f59e0b; --accent-color: #06b6d4; --text-primary: #1f2937; --text-secondary: #6b7280; --text-light: #9ca3af; --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-dark: #111827; --border-color: #e5e7eb; --success-color: #10b981; --error-color: #ef4444; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --transition: all 0.3s ease; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; margin-bottom: 1rem; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } p { margin-bottom: 1rem; color: var(--text-secondary); } /* Buttons */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; text-decoration: none; font-weight: 500; text-align: center; cursor: pointer; transition: var(--transition); font-size: 1rem; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-primary:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn-secondary:hover { background-color: var(--primary-color); color: white; } .btn-large { padding: 1rem 2rem; font-size: 1.1rem; } /* Header */ .header { background-color: var(--bg-primary); box-shadow: var(--shadow-sm); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .navbar { padding: 1rem 0; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; } .nav-logo { display: flex; align-items: center; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); } .nav-logo i { margin-right: 0.5rem; font-size: 1.8rem; } .nav-menu { display: flex; align-items: center; gap: 2rem; } .nav-link { text-decoration: none; color: var(--text-primary); font-weight: 500; transition: var(--transition); } .nav-link:hover { color: var(--primary-color); } .nav-link.cta-btn { background-color: var(--primary-color); color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; } .nav-link.cta-btn:hover { background-color: var(--primary-dark); color: white; } .nav-toggle { display: none; flex-direction: column; cursor: pointer; } .nav-toggle .bar { width: 25px; height: 3px; background-color: var(--text-primary); margin: 3px 0; transition: var(--transition); } /* Hero Section */ .hero { padding: 8rem 0 4rem; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); margin-top: 80px; } .hero-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .hero-content { text-align: center; margin-bottom: 4rem; } .hero-title { font-size: 3rem; margin-bottom: 1.5rem; color: var(--text-primary); } .hero-title .highlight { color: var(--primary-color); display: block; } .hero-description { font-size: 1.2rem; max-width: 600px; margin: 0 auto 2rem; color: var(--text-secondary); } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-stats { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; } .stat { text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.5rem; } .stat-label { color: var(--text-secondary); font-weight: 500; } /* Section Headers */ .section-header { text-align: center; margin-bottom: 4rem; } .section-title { color: var(--text-primary); margin-bottom: 1rem; } .section-subtitle { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; } /* Services Section */ .services { padding: 4rem 0; background-color: var(--bg-secondary); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .service-card { background-color: var(--bg-primary); padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow-md); transition: var(--transition); text-align: center; } .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .service-icon { width: 4rem; height: 4rem; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .service-icon i { font-size: 1.5rem; color: white; } .service-title { color: var(--text-primary); margin-bottom: 1rem; } .service-description { margin-bottom: 1.5rem; } .service-features { list-style: none; text-align: left; } .service-features li { display: flex; align-items: center; margin-bottom: 0.5rem; color: var(--text-secondary); } .service-features i { color: var(--success-color); margin-right: 0.5rem; } /* About Section */ .about { padding: 4rem 0; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-description { font-size: 1.1rem; margin-bottom: 2rem; } .about-features { display: flex; flex-direction: column; gap: 1.5rem; } .feature { display: flex; align-items: flex-start; gap: 1rem; } .feature-icon { width: 3rem; height: 3rem; background-color: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-icon i { color: white; font-size: 1.2rem; } .feature-content h4 { color: var(--text-primary); margin-bottom: 0.5rem; } .feature-content p { margin-bottom: 0; } .image-placeholder { background-color: var(--bg-secondary); border: 2px dashed var(--border-color); border-radius: 1rem; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); text-align: center; } .image-placeholder i { font-size: 4rem; margin-bottom: 1rem; color: var(--primary-color); } /* Quote Section */ .quote { padding: 4rem 0; background-color: var(--bg-secondary); } .quote-content { max-width: 800px; margin: 0 auto; } .quote-header { text-align: center; margin-bottom: 3rem; } .quote-form { background-color: var(--bg-primary); padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow-md); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-primary); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgb(30 64 175 / 0.1); } /* Contact Section */ .contact { padding: 4rem 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .contact-info { display: flex; flex-direction: column; gap: 2rem; } .contact-item { display: flex; align-items: flex-start; gap: 1rem; } .contact-icon { width: 3rem; height: 3rem; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-icon i { color: white; font-size: 1.2rem; } .contact-content h4 { color: var(--text-primary); margin-bottom: 0.5rem; } .contact-content p { margin-bottom: 0.25rem; } .map-placeholder { background-color: var(--bg-secondary); border: 2px dashed var(--border-color); border-radius: 1rem; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); text-align: center; } .map-placeholder i { font-size: 4rem; margin-bottom: 1rem; color: var(--primary-color); } /* Footer */ .footer { background-color: var(--bg-dark); color: white; padding: 3rem 0 1rem; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-logo { display: flex; align-items: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .footer-logo i { margin-right: 0.5rem; font-size: 1.8rem; color: var(--accent-color); } .footer-description { color: #9ca3af; margin-bottom: 1.5rem; } .social-links { display: flex; gap: 1rem; } .social-link { width: 2.5rem; height: 2.5rem; background-color: #374151; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: var(--transition); } .social-link:hover { background-color: var(--primary-color); transform: translateY(-2px); } .footer-title { color: white; margin-bottom: 1rem; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: #9ca3af; text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--accent-color); } .footer-bottom { border-top: 1px solid #374151; padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { color: #9ca3af; margin-bottom: 0; } .built-with a { color: var(--accent-color); text-decoration: none; } .built-with a:hover { text-decoration: underline; } /* Responsive Design */ @media (max-width: 768px) { .nav-menu { position: fixed; left: -100%; top: 80px; flex-direction: column; background-color: var(--bg-primary); width: 100%; text-align: center; transition: var(--transition); box-shadow: var(--shadow-lg); padding: 2rem 0; } .nav-menu.active { left: 0; } .nav-toggle { display: flex; } .hero-title { font-size: 2rem; } .hero-buttons { flex-direction: column; align-items: center; } .hero-stats { gap: 2rem; } .stat-number { font-size: 2rem; } .about-content { grid-template-columns: 1fr; gap: 2rem; } .form-row { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-content { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; text-align: center; } .section-title { font-size: 1.5rem; } h1 { font-size: 2rem; } } @media (max-width: 480px) { .container { padding: 0 0.5rem; } .hero { padding: 6rem 0 3rem; } .services-grid { grid-template-columns: 1fr; } .service-card, .quote-form { padding: 1.5rem; } } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Loading animation for forms */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .service-card, .quote-form, .contact-item { animation: fadeInUp 0.6s ease-out; } === assets/js/main.js === // Mobile Navigation Toggle document.addEventListener('DOMContentLoaded', function() { const navToggle = document.getElementById('nav-toggle'); const navMenu = document.getElementById('nav-menu'); if (navToggle && navMenu) { navToggle.addEventListener('click', function() { navMenu.classList.toggle('active'); // Animate hamburger menu const bars = navToggle.querySelectorAll('.bar'); bars.forEach(bar => { bar.style.transform = navMenu.classList.contains('active') ? 'rotate(45deg) translate(5px, 5px)' : ''; }); }); // Close menu when clicking on a link const navLinks = navMenu.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); const bars = navToggle.querySelectorAll('.bar'); bars.forEach(bar => { bar.style.transform = ''; }); }); }); } // Smooth scrolling for anchor links const anchorLinks = document.querySelectorAll('a[href^="#"]'); anchorLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetSection = document.querySelector(targetId); if (targetSection) { const headerHeight = document.querySelector('.header').offsetHeight; const targetPosition = targetSection.offsetTop - headerHeight - 20; window.scrollTo({ top: targetPosition, behavior: 'smooth' }); } }); }); // Header scroll effect const header = document.querySelector('.header'); let lastScrollTop = 0; window.addEventListener('scroll', function() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Add shadow on scroll if (scrollTop > 0) { header.style.boxShadow = '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'; } else { header.style.boxShadow = '0 1px 2px 0 rgb(0 0 0 / 0.05)'; } lastScrollTop = scrollTop; }); // Quote form handling const quoteForm = document.getElementById('quote-form'); if (quoteForm) { quoteForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form data const formData = new FormData(this); const formObject = {}; formData.forEach((value, key) => { formObject[key] = value; }); // Basic validation const requiredFields = ['name', 'email', 'phone', 'service', 'from', 'to', 'details']; let isValid = true; requiredFields.forEach(field => { const input = this.querySelector(`[name="${field}"]`); if (!formObject[field] || formObject[field].trim() === '') { input.style.borderColor = '#ef4444'; isValid = false; } else { input.style.borderColor = '#e5e7eb'; } }); // Email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const emailInput = this.querySelector('[name="email"]'); if (formObject.email && !emailRegex.test(formObject.email)) { emailInput.style.borderColor = '#ef4444'; isValid = false; } if (!isValid) { showNotification('Please fill in all required fields correctly.', 'error'); return; } // Simulate form submission showNotification('Thank you! Your quote request has been submitted. We\'ll contact you within 24 hours.', 'success'); this.reset(); }); } // Notification system function showNotification(message, type = 'info') { // Remove existing notifications const existingNotifications = document.querySelectorAll('.notification'); existingNotifications.forEach(notification => notification.remove()); // Create notification element const notification = document.createElement('div'); notification.className = `notification notification-${type}`; notification.innerHTML = `
${message}
`; // Add styles notification.style.cssText = ` position: fixed; top: 100px; right: 20px; background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'}; color: white; padding: 1rem 1.5rem; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); z-index: 10000; max-width: 400px; animation: slideInRight 0.3s ease-out; `; // Add animation keyframes if (!document.querySelector('#notification-styles')) { const style = document.createElement('style'); style.id = 'notification-styles'; style.textContent = ` @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .notification-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .notification-close { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .notification-close:hover { opacity: 0.8; } `; document.head.appendChild(style); } // Add to page document.body.appendChild(notification); // Close button functionality const closeBtn = notification.querySelector('.notification-close'); closeBtn.addEventListener('click', () => { notification.style.animation = 'slideOutRight 0.3s ease-out'; setTimeout(() => notification.remove(), 300); }); // Auto remove after 5 seconds setTimeout(() => { if (notification.parentNode) { notification.style.animation = 'slideOutRight 0.3s ease-out'; setTimeout(() => notification.remove(), 300); } }, 5000); } // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation const animateElements = document.querySelectorAll('.service-card, .feature, .contact-item'); animateElements.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; observer.observe(el); }); // Add loading state to buttons const ctaButtons = document.querySelectorAll('.btn-cta, .nav-link.cta-btn'); ctaButtons.forEach(button => { button.addEventListener('click', function() { if (!this.classList.contains('loading')) { this.classList.add('loading'); const originalText = this.textContent; this.textContent = 'Loading...'; setTimeout(() => { this.classList.remove('loading'); this.textContent = originalText; }, 2000); } }); }); // Form field focus effects const formInputs = document.querySelectorAll('input, select, textarea'); formInputs.forEach(input => { input.addEventListener('focus', function() { this.parentNode.classList.add('focused'); }); input.addEventListener('blur', function() { this.parentNode.classList.remove('focused'); if (this.value) { this.parentNode.classList.add('filled'); } else { this.parentNode.classList.remove('filled'); } }); }); // Add hover effects to service cards const serviceCards = document.querySelectorAll('.service-card'); serviceCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-10px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); console.log('GlobalShip website loaded successfully!'); }); // Utility functions function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Enhanced scroll performance const debouncedScroll = debounce(() => { // Any scroll-based functionality can be added here }, 10); window.addEventListener('scroll', debouncedScroll); // Export functions for potential external use window.GlobalShip = { showNotification: function(message, type) { // This allows external scripts to show notifications const event = new CustomEvent('showNotification', { detail: { message, type } }); document.dispatchEvent(event); } };