Files
Nicole/Old/index3.html

352 lines
18 KiB
HTML

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JPM Security & Services</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="style3.css">
</head>
<body>
<!-- Preloader -->
<div class="preloader">
<div class="logo-container">
<div class="logo-text">JPM</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#home">
<span class="brand-text">JPM</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#diensten">Diensten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#over-ons">Over Ons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="hero-content">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<div class="hero-logo"></div>
<h1 class="hero-title">JPM</h1>
<h2 class="hero-subtitle">SECURITY & SERVICES</h2>
<p class="hero-text">Uw partner in beveiliging & dienstverlening</p>
<a href="#contact" class="btn btn-primary btn-lg">Neem contact op</a>
</div>
</div>
</div>
</div>
<div class="scroll-down">
<a href="#diensten">
<span></span>
<span></span>
<span></span>
</a>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 text-center">
<div class="section-title">
<span class="subtitle">Wat wij bieden</span>
<h2>Onze Diensten</h2>
<p>Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
</div>
</div>
<div class="row services-container">
<div class="col-md-6 col-lg-3">
<div class="service-box">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor evenementen, bedrijven en particulieren. Onze gecertificeerde beveiligers zijn getraind in de nieuwste veiligheidstechnieken en werken met geavanceerde beveiligingssystemen om optimale bescherming te bieden.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-box">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Catering</h3>
<p>Hoogwaardige cateringdiensten voor zakelijke en privé-evenementen. Van exclusieve diners tot grote recepties, onze culinaire experts zorgen voor een onvergetelijke gastronomische ervaring met seizoensgebonden en lokale ingrediënten.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-box">
<div class="service-icon">
<i class="fas fa-concierge-bell"></i>
</div>
<h3>Conciërge</h3>
<p>Exclusieve conciërgediensten voor bedrijven en luxe residenties. Onze discrete en efficiënte conciërges anticiperen op uw behoeften en zorgen voor een naadloze ervaring, van het regelen van vervoer tot het organiseren van speciale evenementen.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-box">
<div class="service-icon">
<i class="fas fa-hands-helping"></i>
</div>
<h3>Ondersteuning</h3>
<p>Aanvullende diensten op maat voor uw specifieke behoeften. Onze flexibele ondersteuningsdiensten omvatten administratieve hulp, facilitair beheer, en logistieke ondersteuning, allemaal afgestemd op uw unieke eisen en verwachtingen.</p>
<a href="#contact" class="service-link">Meer info <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about-section parallax-section">
<div class="parallax-bg"></div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="about-content">
<div class="section-title light">
<span class="subtitle">Wie wij zijn</span>
<h2>Over Ons</h2>
</div>
<p>JPM Security & Services is een toonaangevende leverancier van beveiligings- en aanvullende diensten in Nederland. Met jarenlange ervaring in de branche bieden wij professionele oplossingen die voldoen aan de hoogste standaarden.</p>
<p>Onze missie is om betrouwbare en hoogwaardige diensten te leveren die bijdragen aan de veiligheid en het comfort van onze klanten. Wij geloven in een persoonlijke aanpak en streven naar langdurige relaties met onze klanten.</p>
<p>Sinds onze oprichting in 2010 hebben we een sterke reputatie opgebouwd voor uitmuntendheid en betrouwbaarheid. Ons team van meer dan 50 professionals heeft een brede expertise in verschillende sectoren, waaronder retail, horeca, evenementen, en vastgoed. Deze diversiteit stelt ons in staat om geïntegreerde oplossingen te bieden die perfect aansluiten bij de unieke behoeften van elke klant.</p>
<div class="about-values">
<h3>Onze Waarden</h3>
<div class="values-container">
<div class="value-item">
<div class="value-icon">
<i class="fas fa-check-circle"></i>
</div>
<div class="value-text">
<h4>Betrouwbaarheid</h4>
<p>Wij staan altijd voor u klaar, ongeacht de omstandigheden of het tijdstip</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<i class="fas fa-user-tie"></i>
</div>
<div class="value-text">
<h4>Professionaliteit</h4>
<p>Hoogopgeleide medewerkers met relevante certificeringen en continue training</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<i class="fas fa-gem"></i>
</div>
<div class="value-text">
<h4>Kwaliteit</h4>
<p>Dienstverlening van het hoogste niveau met aandacht voor detail en klanttevredenheid</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<i class="fas fa-balance-scale"></i>
</div>
<div class="value-text">
<h4>Integriteit</h4>
<p>Eerlijk en transparant in alles wat we doen, met respect voor privacy en vertrouwelijkheid</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-image">
<div class="image-frame">
<div class="image-content"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="cta-inner">
<div class="row align-items-center">
<div class="col-lg-9">
<div class="cta-content">
<h2>Klaar om uw beveiliging en service naar een hoger niveau te tillen?</h2>
<p>Neem vandaag nog contact met ons op voor een vrijblijvende offerte en ontdek hoe JPM Security & Services uw organisatie kan ondersteunen.</p>
</div>
</div>
<div class="col-lg-3 text-lg-end">
<a href="#contact" class="btn btn-light">Neem Contact Op</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 text-center">
<div class="section-title">
<span class="subtitle">Contact</span>
<h2>Neem Contact Met Ons Op</h2>
<p>Gebruik onze contactgegevens om contact met ons op te nemen</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="contact-info-box">
<div class="contact-info-header">
<h3>Contactgegevens</h3>
</div>
<div class="contact-info-content">
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="text">
<h4>Adres</h4>
<p>Hoofdstraat 123, 1234 AB Amsterdam</p>
</div>
</div>
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-phone"></i>
</div>
<div class="text">
<h4>Telefoon</h4>
<p>+31 20 123 4567</p>
</div>
</div>
</div>
<div class="contact-social">
<h4>Volg ons</h4>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 mx-auto">
<div class="business-hours-box">
<div class="business-hours-header">
<h3>Openingstijden</h3>
</div>
<div class="business-hours-content">
<div class="row">
<div class="col-md-6">
<ul class="list-unstyled">
<li><strong>Maandag - Vrijdag:</strong> 9:00 - 17:00</li>
<li><strong>Zaterdag:</strong> 10:00 - 14:00</li>
<li><strong>Zondag:</strong> Gesloten</li>
</ul>
</div>
<div class="col-md-6">
<p>Voor noodgevallen zijn wij 24/7 bereikbaar via ons telefoonnummer.</p>
<p>Bezoek aan ons kantoor is mogelijk op afspraak.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="footer-about">
<div class="footer-logo">
<div class="logo-text">JPM</div>
<div class="logo-subtext">SECURITY & SERVICES</div>
</div>
<p>Professionele beveiligings- en servicediensten voor bedrijven en particulieren. Wij bieden hoogwaardige dienstverlening met een persoonlijke aanpak.</p>
</div>
</div>
<div class="col-lg-4">
<div class="footer-links">
<h3>Snelle Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#diensten">Diensten</a></li>
<li><a href="#over-ons">Over Ons</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="footer-newsletter">
<h3>Certificeringen</h3>
<p>JPM Security & Services is trots op onze certificeringen en lidmaatschappen:</p>
<ul class="list-unstyled">
<li>• ISO 9001:2015 - Kwaliteitsmanagement</li>
<li>• VCA** - Veiligheid, Gezondheid en Milieu</li>
<li>• Lid van de Nederlandse Veiligheidsbranche</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="row">
<div class="col-md-6">
<p class="copyright">&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
</div>
<div class="col-md-6 text-md-end">
<div class="footer-legal">
<a href="#">Privacybeleid</a>
<a href="#">Algemene voorwaarden</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<a href="#" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>