365DevNet/Nicole
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Website start Nicole

Browse Source
This commit is contained in:
becarta
2025-05-09 17:18:47 +02:00
parent 096a1bf54b
commit a9afadc848
17 changed files with 6586 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
3366B190-203B-475F-B20A-8E051206AE73_1_102_o.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
A2D3B646-3E67-4CB7-95AE-3C4BCF8A4D83_1_102_o.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 640 KiB

BIN
ben-rosett-WdJkXFQ4VHY-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

BIN
cytonn-photography-n95VMLxqM2I-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 KiB

195
index.html Normal file
View File

@@ -0,0 +1,195 @@
<!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 - Versie Selectie</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">
<style>
:root {
--primary-dark: #0a0e17;
--primary-light: #ffffff;
--accent-gray: #3a3a3a;
--accent-silver: #e0e0e0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--primary-light);
color: var(--primary-dark);
line-height: 1.6;
}
.header {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 2rem 0;
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-weight: 800;
letter-spacing: 5px;
margin-bottom: 0;
}
.header h2 {
font-size: 1.2rem;
letter-spacing: 3px;
font-weight: 400;
margin-bottom: 1rem;
}
.version-card {
border: 1px solid #e9e9e9;
border-radius: 5px;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
margin-bottom: 2rem;
}
.version-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.version-img {
height: 200px;
background-size: cover;
background-position: top center;
border-bottom: 1px solid #e9e9e9;
}
.version-content {
padding: 1.5rem;
}
.version-content h3 {
margin-bottom: 1rem;
font-weight: 700;
}
.btn-view {
background-color: var(--primary-dark);
color: var(--primary-light);
border: none;
padding: 10px 20px;
border-radius: 0;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s ease;
display: inline-block;
margin-top: 1rem;
}
.btn-view:hover {
background-color: var(--accent-gray);
color: var(--primary-light);
}
.footer {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 2rem 0;
text-align: center;
margin-top: 3rem;
}
.footer p {
margin-bottom: 0;
}
.version-1-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-2-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-3-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-4-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
.version-5-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<h1>JPM</h1>
<h2>SECURITY & SERVICES</h2>
<p>Selecteer een versie van de website om te bekijken</p>
</div>
</header>
<!-- Version Selection -->
<section class="version-selection">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-1-img"></div>
<div class="version-content">
<h3>Versie 1</h3>
<p>Een moderne, responsieve website met een clean design en een focus op professionaliteit. Deze versie heeft een full-screen hero sectie en een duidelijke presentatie van diensten.</p>
<p><strong>Kenmerken:</strong> Bootstrap framework, full-screen hero sectie, responsief design</p>
<a href="index6.html" class="btn-view" target="_blank">Bekijk Versie 1</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-2-img"></div>
<div class="version-content">
<h3>Versie 2</h3>
<p>Een minimalistische website met zijnavigatie voor een unieke gebruikerservaring. Deze versie legt de nadruk op elegantie en eenvoud met een strakke layout.</p>
<p><strong>Kenmerken:</strong> Zijnavigatie, minimalistische stijl, sectienummering</p>
<a href="index2.html" class="btn-view" target="_blank">Bekijk Versie 2</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-3-img"></div>
<div class="version-content">
<h3>Versie 3</h3>
<p>Een full-screen website met parallax effecten voor een moderne en dynamische uitstraling. Deze versie biedt een meeslepende gebruikerservaring met visuele diepte.</p>
<p><strong>Kenmerken:</strong> Parallax effecten, preloader, scroll-animaties</p>
<a href="index3.html" class="btn-view" target="_blank">Bekijk Versie 3</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-4-img"></div>
<div class="version-content">
<h3>Versie 4</h3>
<p>Een corporate en professionele website met clean lines en een gestructureerde layout. Deze versie is perfect voor een zakelijke uitstraling met duidelijke informatiehiërarchie.</p>
<p><strong>Kenmerken:</strong> Corporate design, feature boxes, top bar met contactinfo</p>
<a href="index4.html" class="btn-view" target="_blank">Bekijk Versie 4</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="version-card">
<div class="version-img version-5-img"></div>
<div class="version-content">
<h3>Versie 5</h3>
<p>Een creatieve en moderne website met animaties en visuele elementen. Deze versie biedt een unieke gebruikerservaring met interactieve elementen en een stijlvol design.</p>
<p><strong>Kenmerken:</strong> Animaties, custom cursor, fullscreen menu, AOS effecten</p>
<a href="index5.html" class="btn-view" target="_blank">Bekijk Versie 5</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

284
index2.html Normal file
View File

@@ -0,0 +1,284 @@
<!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="style2.css">
</head>
<body>
<!-- Side Navigation -->
<div class="side-nav">
<div class="logo-container">
<div class="logo-text">JPM</div>
<div class="logo-subtext">SECURITY & SERVICES</div>
</div>
<nav>
<ul>
<li><a href="#home" class="active">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>
</nav>
<div class="nav-footer">
<div class="social-links">
<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>
<p>&copy; 2025 JPM</p>
</div>
</div>
<!-- Mobile Navigation -->
<div class="mobile-nav">
<div class="container">
<div class="mobile-nav-header">
<div class="logo-text">JPM</div>
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
<div class="mobile-menu">
<nav>
<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>
</nav>
<div class="mobile-social-links">
<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>
<!-- Main Content -->
<main class="main-content">
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 hero-content">
<div class="hero-logo"></div>
<h1>JPM</h1>
<h2>SECURITY & SERVICES</h2>
<p class="hero-text">Uw partner in beveiliging & dienstverlening</p>
<a href="#contact" class="btn btn-primary">Neem contact op</a>
</div>
<div class="col-lg-6 hero-image">
<div class="overlay"></div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="section-header">
<span class="section-number">01</span>
<h2>Onze Diensten</h2>
<p>Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
<div class="row services-grid">
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="service-content">
<h3>Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor evenementen, bedrijven en particulieren. Onze getrainde beveiligers zorgen voor een veilige omgeving met geavanceerde beveiligingssystemen en protocollen. Wij bieden zowel fysieke beveiliging als elektronische beveiligingsoplossingen, afgestemd op uw specifieke situatie.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<div class="service-content">
<h3>Catering</h3>
<p>Hoogwaardige cateringdiensten voor zakelijke en privé-evenementen. Wij verzorgen smakelijke maaltijden en verfrissende dranken met aandacht voor detail en presentatie. Onze ervaren chef-koks bereiden gerechten met verse, lokale ingrediënten en kunnen rekening houden met diverse dieetwensen en culturele voorkeuren.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-concierge-bell"></i>
</div>
<div class="service-content">
<h3>Conciërge</h3>
<p>Exclusieve conciërgediensten voor bedrijven en luxe residenties. Onze conciërges staan 24/7 voor u klaar om aan al uw wensen te voldoen, van het regelen van vervoer en reserveringen tot het coördineren van onderhoudsdiensten. Wij bieden een persoonlijke service die uw comfort en gemak maximaliseert.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="service-item">
<div class="service-icon">
<i class="fas fa-hands-helping"></i>
</div>
<div class="service-content">
<h3>Ondersteuning</h3>
<p>Aanvullende diensten op maat voor uw specifieke behoeften. Wij denken met u mee en bieden oplossingen die bij uw situatie passen, van administratieve ondersteuning tot facilitair beheer. Onze flexibele aanpak zorgt ervoor dat we snel kunnen inspelen op veranderende omstandigheden en nieuwe uitdagingen.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="section-header">
<span class="section-number">02</span>
<h2>Over Ons</h2>
</div>
<div class="about-content">
<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>Opgericht in 2010, is JPM Security & Services uitgegroeid tot een vertrouwde naam in de beveiligingsbranche. Ons team bestaat uit meer dan 50 hoogopgeleide professionals die zich dagelijks inzetten om de beste service te leveren. Wij investeren continu in training en ontwikkeling om op de hoogte te blijven van de nieuwste technieken en trends in de sector.</p>
<div class="values-grid">
<div class="value-item">
<h4>Betrouwbaarheid</h4>
<p>Wij staan altijd voor u klaar, ongeacht de omstandigheden of het tijdstip</p>
</div>
<div class="value-item">
<h4>Professionaliteit</h4>
<p>Hoogopgeleide medewerkers met relevante certificeringen en continue training</p>
</div>
<div class="value-item">
<h4>Kwaliteit</h4>
<p>Dienstverlening van het hoogste niveau met aandacht voor detail en klanttevredenheid</p>
</div>
<div class="value-item">
<h4>Integriteit</h4>
<p>Eerlijk en transparant in alles wat we doen, met respect voor privacy en vertrouwelijkheid</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-image-container">
<div class="about-image"></div>
<div class="about-image-overlay"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="section-header">
<span class="section-number">03</span>
<h2>Contact</h2>
<p>Neem contact met ons op voor meer informatie of een vrijblijvende offerte</p>
</div>
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h4>Adres</h4>
<p>Hoofdstraat 123, 1234 AB Amsterdam</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div class="contact-text">
<h4>Telefoon</h4>
<p>+31 20 123 4567</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 mx-auto">
<div class="business-hours">
<h3>Openingstijden</h3>
<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>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="footer-logo">
<div class="logo-text">JPM</div>
<div class="logo-subtext">SECURITY & SERVICES</div>
</div>
</div>
<div class="col-md-4">
<div class="footer-links">
<h4>Snelle Links</h4>
<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-md-4">
<div class="footer-contact">
<h4>Contact</h4>
<p><i class="fas fa-map-marker-alt"></i> Hoofdstraat 123, 1234 AB Amsterdam</p>
<p><i class="fas fa-phone"></i> +31 20 123 4567</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
<div class="footer-legal">
<a href="#">Privacybeleid</a>
<a href="#">Algemene voorwaarden</a>
</div>
</div>
</div>
</footer>
</main>
<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>

352
index3.html Normal file
View File

@@ -0,0 +1,352 @@
<!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>

429
index4.html Normal file
View File

@@ -0,0 +1,429 @@
<!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="style4.css">
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="top-contact">
<span><i class="fas fa-phone"></i> +31 20 123 4567</span>
<span><i class="fas fa-map-marker-alt"></i> Amsterdam, NL</span>
</div>
</div>
<div class="col-md-6">
<div class="top-social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<header class="header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3">
<div class="logo">
<a href="index.html">
<div class="logo-img"></div>
<div class="logo-text">
<span class="logo-main">JPM</span>
<span class="logo-sub">SECURITY & SERVICES</span>
</div>
</a>
</div>
</div>
<div class="col-lg-9">
<nav class="main-nav">
<ul>
<li><a href="#home" class="active">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>
<li><a href="#contact" class="nav-btn">Offerte Aanvragen</a></li>
</ul>
</nav>
<div class="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div class="mobile-menu">
<div class="container">
<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>
<li><a href="#contact" class="nav-btn">Offerte Aanvragen</a></li>
</ul>
</div>
</div>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="hero-content">
<h1>Professionele Beveiliging & Services</h1>
<p>JPM Security & Services is uw betrouwbare partner voor beveiligingsdiensten, catering, conciërge en meer. Wij bieden hoogwaardige dienstverlening met een persoonlijke aanpak en meer dan 15 jaar ervaring in de branche.</p>
<div class="hero-btns">
<a href="#diensten" class="btn btn-primary">Onze Diensten</a>
<a href="#contact" class="btn btn-outline">Neem Contact Op</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-image">
<div class="hero-img-container">
<div class="hero-img"></div>
</div>
<div class="hero-shape"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features-section">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Betrouwbare Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor uw gemoedsrust, met gecertificeerde beveiligers en moderne technologie</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-user-tie"></i>
</div>
<h3>Ervaren Personeel</h3>
<p>Hoogopgeleide medewerkers met jarenlange ervaring en doorlopende training in de nieuwste technieken</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-headset"></i>
</div>
<h3>24/7 Ondersteuning</h3>
<p>Altijd bereikbaar voor al uw vragen en behoeften, met snelle responstijden en persoonlijke service</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="section-header">
<span class="section-subtitle">Wat wij bieden</span>
<h2 class="section-title">Onze Diensten</h2>
<p class="section-description">Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="service-content">
<h3>Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor evenementen, bedrijven en particulieren. Onze getrainde beveiligers zorgen voor een veilige omgeving met geavanceerde beveiligingssystemen en risicoanalyses. Wij bieden zowel fysieke beveiliging als elektronische beveiligingsoplossingen.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<div class="service-content">
<h3>Catering</h3>
<p>Hoogwaardige cateringdiensten voor zakelijke en privé-evenementen. Ons culinaire team bereidt smakelijke maaltijden en verfrissende dranken met verse, lokale ingrediënten. Van kleine vergaderingen tot grote gala's, wij verzorgen catering op maat met aandacht voor presentatie en detail.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-concierge-bell"></i>
</div>
<div class="service-content">
<h3>Conciërge</h3>
<p>Exclusieve conciërgediensten voor bedrijven en luxe residenties. Onze conciërges staan 24/7 voor u klaar om aan al uw wensen te voldoen, van het regelen van vervoer en reserveringen tot het coördineren van onderhoudsdiensten en speciale evenementen. Wij maken het leven gemakkelijker.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-hands-helping"></i>
</div>
<div class="service-content">
<h3>Ondersteuning</h3>
<p>Aanvullende diensten op maat voor uw specifieke behoeften. Wij bieden flexibele oplossingen zoals administratieve ondersteuning, facilitair beheer, en logistieke diensten. Onze ervaren professionals werken nauw samen met u om de perfecte oplossing te vinden voor uw unieke situatie.</p>
<a href="#contact" class="read-more">Meer informatie <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="about-image">
<div class="about-img"></div>
<div class="about-experience">
<span class="years">15+</span>
<span class="text">Jaren Ervaring</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-content">
<span class="section-subtitle">Over Ons</span>
<h2 class="section-title">Uw Betrouwbare Partner in Beveiliging & Dienstverlening</h2>
<p>JPM Security & Services is een toonaangevende leverancier van beveiligings- en aanvullende diensten in Nederland. Met meer dan 15 jaar 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>Wat ons onderscheidt is onze holistische benadering van dienstverlening. Door beveiliging, catering, conciërge en ondersteunende diensten te combineren, kunnen we een naadloze en geïntegreerde ervaring bieden. Onze klanten waarderen deze one-stop-shop aanpak, die tijd bespaart en zorgt voor consistente kwaliteit over alle diensten heen.</p>
<div class="about-features">
<div class="row">
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Betrouwbaarheid</div>
</div>
</div>
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Professionaliteit</div>
</div>
</div>
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Kwaliteit</div>
</div>
</div>
<div class="col-md-6">
<div class="about-feature-item">
<div class="icon"><i class="fas fa-check"></i></div>
<div class="text">Integriteit</div>
</div>
</div>
</div>
</div>
<a href="#contact" class="btn btn-primary">Neem Contact Op</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<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-4 text-lg-end">
<a href="#contact" class="btn btn-light">Offerte Aanvragen</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="section-header">
<span class="section-subtitle">Contact</span>
<h2 class="section-title">Neem Contact Met Ons Op</h2>
<p class="section-description">Gebruik onze contactgegevens om contact met ons op te nemen</p>
</div>
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="contact-info">
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="content">
<h4>Ons 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="content">
<h4>Telefoon</h4>
<p>+31 20 123 4567</p>
</div>
</div>
<div class="contact-info-item">
<div class="icon">
<i class="fas fa-clock"></i>
</div>
<div class="content">
<h4>Openingstijden</h4>
<p>Maandag - Vrijdag: 9:00 - 17:00</p>
<p>Zaterdag: 10:00 - 14:00</p>
<p>Zondag: Gesloten</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-8 mx-auto">
<div class="additional-info">
<h3>Meer Informatie</h3>
<div class="row">
<div class="col-md-6">
<div class="info-box">
<h4>Certificeringen</h4>
<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 class="col-md-6">
<div class="info-box">
<h4>Werkgebied</h4>
<p>Wij zijn actief in heel Nederland, met focus op de Randstad (Amsterdam, Rotterdam, Den Haag, Utrecht) en omliggende gebieden.</p>
<p>Voor grote projecten zijn wij ook beschikbaar in België en Duitsland.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="footer-widget about-widget">
<div class="footer-logo">
<div class="logo-text">
<span class="logo-main">JPM</span>
<span class="logo-sub">SECURITY & SERVICES</span>
</div>
</div>
<p>Professionele beveiligings- en servicediensten voor bedrijven en particulieren. Wij bieden hoogwaardige dienstverlening met een persoonlijke aanpak.</p>
<div class="footer-social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="footer-widget links-widget">
<h3 class="footer-widget-title">Snelle Links</h3>
<ul class="footer-links">
<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-3 col-md-6">
<div class="footer-widget services-widget">
<h3 class="footer-widget-title">Onze Diensten</h3>
<ul class="footer-links">
<li><a href="#diensten">Beveiliging</a></li>
<li><a href="#diensten">Catering</a></li>
<li><a href="#diensten">Conciërge</a></li>
<li><a href="#diensten">Ondersteuning</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget contact-widget">
<h3 class="footer-widget-title">Contact Info</h3>
<ul class="footer-contact-info">
<li><i class="fas fa-map-marker-alt"></i> Hoofdstraat 123, 1234 AB Amsterdam</li>
<li><i class="fas fa-phone"></i> +31 20 123 4567</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row align-items-center">
<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-bottom-links">
<a href="#">Privacybeleid</a>
<a href="#">Algemene voorwaarden</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top -->
<a href="#" class="back-to-top">
<i class="fas fa-arrow-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>

421
index5.html Normal file
View File

@@ -0,0 +1,421 @@
<!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="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style5.css">
</head>
<body>
<!-- Cursor -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<!-- Preloader -->
<div class="preloader">
<div class="loader">
<div class="logo-text">JPM</div>
</div>
</div>
<!-- Header -->
<header class="header">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="logo">
<a href="#home">
<div class="logo-text">JPM</div>
<div class="logo-tagline">SECURITY & SERVICES</div>
</a>
</div>
</div>
<div class="col-6 text-end">
<div class="menu-toggle">
<span>Menu</span>
<div class="hamburger">
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Full Screen Menu -->
<div class="fullscreen-menu">
<div class="menu-close">
<span>Sluiten</span>
<div class="close-btn">
<span></span>
<span></span>
</div>
</div>
<div class="menu-content">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="menu-links">
<ul>
<li><a href="#home" class="menu-link">Home</a></li>
<li><a href="#diensten" class="menu-link">Diensten</a></li>
<li><a href="#over-ons" class="menu-link">Over Ons</a></li>
<li><a href="#contact" class="menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="menu-info">
<h3>Contact Info</h3>
<p><i class="fas fa-map-marker-alt"></i> Hoofdstraat 123, 1234 AB Amsterdam</p>
<p><i class="fas fa-phone"></i> +31 20 123 4567</p>
<div class="menu-social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6">
<div class="hero-content">
<div data-aos="fade-up" data-aos-delay="200">
<h1 class="hero-title">JPM</h1>
<h2 class="hero-subtitle">SECURITY & SERVICES</h2>
<p class="hero-text">Uw partner in beveiliging & dienstverlening</p>
<div class="hero-btns">
<a href="#diensten" class="btn btn-primary">Ontdek Onze Diensten</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-image">
<div class="hero-img-inner"></div>
</div>
</div>
</div>
</div>
<div class="scroll-down">
<a href="#diensten">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="arrow">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services-section">
<div class="container">
<div class="section-header" data-aos="fade-up">
<span class="section-subtitle">Onze Diensten</span>
<h2 class="section-title">Wat Wij Bieden</h2>
<p class="section-description">Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
<div class="service-card">
<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 voor uw mensen, eigendommen en reputatie.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
<div class="service-card">
<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, afgestemd op uw specifieke wensen en dieetvereisten.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
<div class="service-card">
<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 en het coördineren van onderhoudsdiensten.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
<div class="service-card">
<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 om uw organisatie soepel te laten functioneren.</p>
<a href="#contact" class="service-link">
<span>Meer Info</span>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<div class="about-image">
<div class="about-img-inner"></div>
<div class="about-pattern"></div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="about-content">
<span class="section-subtitle">Over Ons</span>
<h2 class="section-title">Wie Wij Zijn</h2>
<p>JPM Security & Services is een toonaangevende leverancier van beveiligings- en aanvullende diensten in Nederland. Met meer dan 15 jaar 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 Kernwaarden</h3>
<div class="values-grid">
<div class="value-item" data-aos="zoom-in" data-aos-delay="100">
<div class="value-icon">
<i class="fas fa-check-circle"></i>
</div>
<h4>Betrouwbaarheid</h4>
<p>Wij staan altijd voor u klaar, ongeacht de omstandigheden of het tijdstip</p>
</div>
<div class="value-item" data-aos="zoom-in" data-aos-delay="200">
<div class="value-icon">
<i class="fas fa-user-tie"></i>
</div>
<h4>Professionaliteit</h4>
<p>Hoogopgeleide medewerkers met relevante certificeringen en continue training</p>
</div>
<div class="value-item" data-aos="zoom-in" data-aos-delay="300">
<div class="value-icon">
<i class="fas fa-gem"></i>
</div>
<h4>Kwaliteit</h4>
<p>Dienstverlening van het hoogste niveau met aandacht voor detail en klanttevredenheid</p>
</div>
<div class="value-item" data-aos="zoom-in" data-aos-delay="400">
<div class="value-icon">
<i class="fas fa-balance-scale"></i>
</div>
<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>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="cta-inner" data-aos="zoom-in">
<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="section-header" data-aos="fade-up">
<span class="section-subtitle">Contact</span>
<h2 class="section-title">Neem Contact Met Ons Op</h2>
<p class="section-description">Gebruik onze contactgegevens om contact met ons op te nemen</p>
</div>
<div class="row">
<div class="col-lg-8 mx-auto" data-aos="fade-up">
<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" data-aos="fade-up" data-aos-delay="200">
<div class="additional-info-box">
<div class="additional-info-header">
<h3>Meer Informatie</h3>
</div>
<div class="additional-info-content">
<div class="row">
<div class="col-md-6">
<div class="info-block">
<h4>Openingstijden</h4>
<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>
<p>Voor noodgevallen zijn wij 24/7 bereikbaar via ons telefoonnummer.</p>
</div>
</div>
<div class="col-md-6">
<div class="info-block">
<h4>Certificeringen</h4>
<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>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="footer-widget about-widget">
<div class="footer-logo">
<div class="logo-text">JPM</div>
<div class="logo-tagline">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-2 col-md-6">
<div class="footer-widget links-widget">
<h3>Links</h3>
<ul class="footer-links">
<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-3 col-md-6">
<div class="footer-widget services-widget">
<h3>Diensten</h3>
<ul class="footer-links">
<li><a href="#diensten">Beveiliging</a></li>
<li><a href="#diensten">Catering</a></li>
<li><a href="#diensten">Conciërge</a></li>
<li><a href="#diensten">Ondersteuning</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget contact-widget">
<h3>Contact</h3>
<ul class="footer-contact-info">
<li><i class="fas fa-map-marker-alt"></i> Hoofdstraat 123, 1234 AB Amsterdam</li>
<li><i class="fas fa-phone"></i> +31 20 123 4567</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-bottom-links">
<a href="#">Privacybeleid</a>
<a href="#">Algemene voorwaarden</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top -->
<a href="#" class="back-to-top">
<i class="fas fa-arrow-up"></i>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>

203
index6.html Normal file
View File

@@ -0,0 +1,203 @@
<!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="style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<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" 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">
<div class="container h-100 position-relative" style="z-index: 1;">
<div class="row h-100 align-items-center">
<div class="col-lg-6">
<div class="hero-content">
<div class="logo-container mb-4">
<div class="logo-image"></div>
</div>
<h1>JPM</h1>
<h2>SECURITY & SERVICES</h2>
<p class="lead">Uw partner in beveiliging & dienstverlening</p>
<a href="#contact" class="btn btn-primary btn-lg">Neem contact op</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="diensten" class="services py-5">
<div class="container">
<div class="section-header text-center mb-5">
<h2>Onze Diensten</h2>
<p>Professionele oplossingen voor al uw beveiligings- en servicebehoeften</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 mb-4">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Beveiliging</h3>
<p>Professionele beveiligingsdiensten voor evenementen, bedrijven en particulieren. Onze getrainde beveiligers zorgen voor een veilige omgeving met 24/7 toezicht en snelle responstijden.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Catering</h3>
<p>Hoogwaardige cateringdiensten voor zakelijke en privé-evenementen. Ons ervaren team verzorgt smakelijke maaltijden en verfrissende dranken, afgestemd op uw specifieke wensen en dieetvereisten.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="service-card">
<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 conciërges staan 24/7 voor u klaar om aan al uw wensen te voldoen, van reserveringen tot persoonlijke assistentie.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-hands-helping"></i>
</div>
<h3>Ondersteuning</h3>
<p>Aanvullende diensten op maat voor uw specifieke behoeften. Wij bieden flexibele oplossingen die naadloos aansluiten bij uw situatie, van administratieve ondersteuning tot facilitair beheer.</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="over-ons" class="about py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="about-image"></div>
</div>
<div class="col-lg-6">
<div class="section-header mb-4">
<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>Bij JPM Security & Services begrijpen we dat elke klant unieke behoeften heeft. Daarom bieden we op maat gemaakte oplossingen die perfect aansluiten bij uw specifieke situatie. Onze flexibele aanpak en toewijding aan kwaliteit maken ons de ideale partner voor al uw beveiligings- en servicevereisten.</p>
<div class="values mt-4">
<h3>Onze Waarden</h3>
<ul>
<li><strong>Betrouwbaarheid</strong> - Wij staan altijd voor u klaar, ongeacht de omstandigheden</li>
<li><strong>Professionaliteit</strong> - Hoogopgeleide medewerkers met relevante certificeringen</li>
<li><strong>Kwaliteit</strong> - Dienstverlening van het hoogste niveau met aandacht voor detail</li>
<li><strong>Integriteit</strong> - Eerlijk en transparant in alles wat we doen, met respect voor privacy</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact py-5">
<div class="container">
<div class="section-header text-center mb-5">
<h2>Contact</h2>
<p>Neem contact met ons op voor meer informatie of een vrijblijvende offerte</p>
</div>
<div class="row">
<div class="col-lg-8 mx-auto mb-4">
<div class="contact-info">
<h3>Contactgegevens</h3>
<ul class="list-unstyled">
<li><i class="fas fa-map-marker-alt"></i> Hoofdstraat 123, 1234 AB Amsterdam</li>
<li><i class="fas fa-phone"></i> +31 20 123 4567</li>
</ul>
<div class="social-links mt-4">
<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 class="row mt-4">
<div class="col-lg-8 mx-auto">
<div class="business-hours">
<h3>Openingstijden</h3>
<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>
</section>
<!-- Footer -->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">
<div class="footer-logo">JPM</div>
<div class="footer-tagline">SECURITY & SERVICES</div>
</div>
<div class="col-lg-4 text-lg-center">
<p class="mb-0">&copy; 2025 JPM Security & Services. Alle rechten voorbehouden.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="#" class="text-decoration-none me-3">Privacybeleid</a>
<a href="#" class="text-decoration-none">Algemene voorwaarden</a>
</div>
</div>
</div>
</footer>
<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>

BIN
jpm_extracted.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

392
script.js Normal file
View File

@@ -0,0 +1,392 @@
/**
* JPM Security & Services - Main Script
* Handles interactive elements and functionality for all website versions
*/
document.addEventListener('DOMContentLoaded', function() {
// Determine which version of the website is being used
const currentPage = window.location.pathname.split('/').pop();
// Common functionality for all versions
initCommonFunctionality();
// Version-specific functionality
if (currentPage === 'index.html' || currentPage === '') {
initVersion1();
} else if (currentPage === 'index2.html') {
initVersion2();
} else if (currentPage === 'index3.html') {
initVersion3();
} else if (currentPage === 'index4.html') {
initVersion4();
} else if (currentPage === 'index5.html') {
initVersion5();
}
});
/**
* Common functionality for all website versions
*/
function initCommonFunctionality() {
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
// Get navbar height for offset (if navbar exists)
let navbarHeight = 0;
const navbar = document.querySelector('.navbar, .header');
if (navbar) {
navbarHeight = navbar.offsetHeight;
}
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
// Close mobile menu if open (different selectors for different versions)
const mobileMenu = document.querySelector('.navbar-collapse.show, .mobile-menu.active, .fullscreen-menu.active');
if (mobileMenu) {
// Different ways to close the menu depending on version
const menuToggle = document.querySelector('.navbar-toggler, .menu-toggle, .mobile-menu-toggle');
if (menuToggle) {
menuToggle.click();
}
}
}
});
});
// Form submission handling for all contact forms
const contactForms = document.querySelectorAll('.contact-form');
if (contactForms.length > 0) {
contactForms.forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const formValues = Object.fromEntries(formData.entries());
// Here you would typically send the data to a server
// For demonstration, we'll just show an alert
alert('Bedankt voor uw bericht! We nemen zo spoedig mogelijk contact met u op.');
// Reset the form
this.reset();
});
});
}
// Back to top button functionality
const backToTopButton = document.querySelector('.back-to-top');
if (backToTopButton) {
window.addEventListener('scroll', function() {
if (window.scrollY > 300) {
backToTopButton.classList.add('active');
} else {
backToTopButton.classList.remove('active');
}
});
backToTopButton.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
// Preloader functionality (for versions that have it)
const preloader = document.querySelector('.preloader');
if (preloader) {
window.addEventListener('load', function() {
setTimeout(function() {
preloader.classList.add('fade-out');
setTimeout(function() {
preloader.style.display = 'none';
}, 500);
}, 1000);
});
}
}
/**
* Version 1 specific functionality
*/
function initVersion1() {
// Navbar scroll behavior
const navbar = document.querySelector('.navbar');
if (navbar) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.style.padding = '10px 0';
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.padding = '15px 0';
navbar.style.boxShadow = 'none';
}
});
}
// Animation on scroll (simple implementation)
const animateElements = document.querySelectorAll('.service-card, .about-image, .contact-info, .contact-form');
const animateOnScroll = function() {
animateElements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementPosition < windowHeight - 100) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
// Set initial state for animation
animateElements.forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
});
// Run animation check on load and scroll
window.addEventListener('load', animateOnScroll);
window.addEventListener('scroll', animateOnScroll);
}
/**
* Version 2 specific functionality
*/
function initVersion2() {
// Mobile menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const mobileMenu = document.querySelector('.mobile-menu');
if (menuToggle && mobileMenu) {
menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
mobileMenu.classList.toggle('active');
});
}
// Active link highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.side-nav nav ul li a, .mobile-menu nav ul li a');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
}
/**
* Version 3 specific functionality
*/
function initVersion3() {
// Navbar scroll behavior
const navbar = document.querySelector('.navbar');
if (navbar) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
}
// Active link highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
}
/**
* Version 4 specific functionality
*/
function initVersion4() {
// Mobile menu toggle
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mobileMenu = document.querySelector('.mobile-menu');
if (menuToggle && mobileMenu) {
menuToggle.addEventListener('click', function() {
this.classList.toggle('active');
mobileMenu.classList.toggle('active');
});
}
// Header scroll behavior
const header = document.querySelector('.header');
if (header) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
}
// Active link highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.main-nav ul li a, .mobile-menu ul li a');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
}
/**
* Version 5 specific functionality
*/
function initVersion5() {
// Initialize AOS (Animate On Scroll) library if available
if (typeof AOS !== 'undefined') {
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true,
mirror: false
});
}
// Custom cursor
const cursor = document.querySelector('.cursor');
const cursorFollower = document.querySelector('.cursor-follower');
if (cursor && cursorFollower) {
document.addEventListener('mousemove', function(e) {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
setTimeout(function() {
cursorFollower.style.left = e.clientX + 'px';
cursorFollower.style.top = e.clientY + 'px';
}, 100);
});
document.addEventListener('mousedown', function() {
cursor.classList.add('active');
cursorFollower.classList.add('active');
});
document.addEventListener('mouseup', function() {
cursor.classList.remove('active');
cursorFollower.classList.remove('active');
});
// Add hover effect to links and buttons
const hoverElements = document.querySelectorAll('a, button, .btn, .menu-toggle, .menu-close');
hoverElements.forEach(element => {
element.addEventListener('mouseenter', function() {
cursor.classList.add('active');
cursorFollower.classList.add('active');
});
element.addEventListener('mouseleave', function() {
cursor.classList.remove('active');
cursorFollower.classList.remove('active');
});
});
}
// Fullscreen menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const menuClose = document.querySelector('.menu-close');
const fullscreenMenu = document.querySelector('.fullscreen-menu');
if (menuToggle && menuClose && fullscreenMenu) {
menuToggle.addEventListener('click', function() {
fullscreenMenu.classList.add('active');
document.body.style.overflow = 'hidden';
});
menuClose.addEventListener('click', function() {
fullscreenMenu.classList.remove('active');
document.body.style.overflow = '';
});
// Close menu when clicking on a menu link
const menuLinks = document.querySelectorAll('.menu-link');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
fullscreenMenu.classList.remove('active');
document.body.style.overflow = '';
});
});
}
// Header scroll behavior
const header = document.querySelector('.header');
if (header) {
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
}
}

363
style.css Normal file
View File

@@ -0,0 +1,363 @@
/*
* JPM Security & Services - Style 1
* A modern, responsive design based on the business card colors
*/
:root {
--primary-dark: #0a0e17; /* Dark navy/black from the card */
--primary-light: #ffffff; /* White/silver from the card */
--accent-gray: #3a3a3a; /* Gray from the card borders */
--accent-silver: #e0e0e0; /* Lighter silver for accents */
--text-dark: #333333;
--text-light: #f8f9fa;
}
/* General Styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
section {
padding: 80px 0;
}
.btn-primary {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--primary-light);
padding: 10px 25px;
border-radius: 0;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--accent-gray);
border-color: var(--accent-gray);
color: var(--primary-light);
}
/* Navigation */
.navbar {
background-color: var(--primary-dark);
padding: 15px 0;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
}
.brand-text {
color: var(--primary-light);
letter-spacing: 2px;
}
.navbar-dark .navbar-nav .nav-link {
color: var(--primary-light);
font-weight: 500;
padding: 10px 15px;
transition: all 0.3s ease;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: var(--accent-silver);
}
/* Hero Section */
.hero {
background-color: var(--primary-dark);
color: var(--primary-light);
height: 100vh;
position: relative;
display: flex;
align-items: center;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(10, 14, 23, 0.9) 0%, rgba(10, 14, 23, 0.7) 100%);
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero-content {
padding: 30px;
max-width: 600px;
}
.hero h1 {
font-size: 4rem;
font-weight: 800;
letter-spacing: 5px;
margin-bottom: 0;
}
.hero h2 {
font-size: 1.5rem;
letter-spacing: 3px;
margin-bottom: 20px;
font-weight: 400;
}
.logo-container {
width: 120px;
height: 120px;
position: relative;
}
.logo-image {
width: 100%;
height: 100%;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
}
/* Services Section */
.services {
background-color: var(--primary-light);
}
.section-header h2 {
color: var(--primary-dark);
margin-bottom: 15px;
position: relative;
padding-bottom: 15px;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: var(--primary-dark);
}
.service-card {
background-color: #f8f9fa;
padding: 30px 20px;
text-align: center;
height: 100%;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.service-icon {
font-size: 2.5rem;
color: var(--primary-dark);
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary-dark);
}
/* About Section */
.about {
background-color: #f8f9fa;
}
.about-image {
height: 400px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border: 5px solid var(--primary-dark);
}
.values ul {
list-style: none;
padding-left: 0;
}
.values ul li {
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
}
.values ul li:last-child {
border-bottom: none;
}
/* Contact Section */
.contact {
background-color: var(--primary-light);
}
.contact-info {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 30px;
height: 100%;
}
.contact-info h3 {
margin-bottom: 20px;
position: relative;
padding-bottom: 15px;
}
.contact-info h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary-light);
}
.contact-info ul li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.contact-info ul li i {
margin-right: 15px;
margin-top: 5px;
}
.social-links {
display: flex;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
color: var(--primary-light);
border-radius: 50%;
margin-right: 10px;
transition: all 0.3s ease;
}
.social-icon:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
}
.contact-form .form-control {
border-radius: 0;
padding: 12px 15px;
margin-bottom: 15px;
border: 1px solid #ced4da;
}
.contact-form .form-control:focus {
box-shadow: none;
border-color: var(--primary-dark);
}
/* Footer */
.footer {
background-color: var(--primary-dark);
color: var(--primary-light);
}
.footer a {
color: var(--primary-light);
}
.footer a:hover {
color: var(--accent-silver);
}
.footer-logo {
font-size: 2rem;
font-weight: 800;
letter-spacing: 3px;
}
.footer-tagline {
font-size: 0.9rem;
letter-spacing: 2px;
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.hero {
height: auto;
min-height: 100vh;
}
.hero h1 {
font-size: 3rem;
}
.about-image {
height: 300px;
}
}
@media (max-width: 767.98px) {
section {
padding: 60px 0;
}
.hero-content {
text-align: center;
padding: 30px 15px;
}
.logo-container {
margin: 0 auto;
}
.hero h1 {
font-size: 2.5rem;
}
.hero h2 {
font-size: 1.2rem;
}
.contact-info {
margin-bottom: 30px;
}
}
@media (max-width: 575.98px) {
.hero h1 {
font-size: 2rem;
}
.section-header h2 {
font-size: 1.8rem;
}
}

760
style2.css Normal file
View File

@@ -0,0 +1,760 @@
/*
* JPM Security & Services - Style 2
* A minimalist design with side navigation
*/
:root {
--primary-dark: #0a0e17; /* Dark navy/black from the card */
--primary-light: #ffffff; /* White/silver from the card */
--accent-gray: #3a3a3a; /* Gray from the card borders */
--accent-silver: #e0e0e0; /* Lighter silver for accents */
--text-dark: #333333;
--text-light: #f8f9fa;
--side-nav-width: 280px;
}
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
background-color: var(--primary-light);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
ul {
list-style: none;
}
section {
padding: 100px 0;
position: relative;
}
.btn-primary {
background-color: var(--primary-dark);
border: none;
color: var(--primary-light);
padding: 12px 30px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
border-radius: 0;
}
.btn-primary:hover {
background-color: var(--accent-gray);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Side Navigation */
.side-nav {
position: fixed;
top: 0;
left: 0;
width: var(--side-nav-width);
height: 100vh;
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 40px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1000;
}
.logo-container {
margin-bottom: 60px;
}
.logo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 5px;
}
.logo-subtext {
font-size: 0.8rem;
letter-spacing: 2px;
opacity: 0.8;
}
.side-nav nav ul li {
margin-bottom: 20px;
}
.side-nav nav ul li a {
font-size: 1.1rem;
font-weight: 500;
display: block;
padding: 8px 0;
position: relative;
opacity: 0.7;
}
.side-nav nav ul li a:hover,
.side-nav nav ul li a.active {
opacity: 1;
}
.side-nav nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-light);
transition: width 0.3s ease;
}
.side-nav nav ul li a:hover::after,
.side-nav nav ul li a.active::after {
width: 30px;
}
.nav-footer {
margin-top: auto;
}
.social-links {
display: flex;
margin-bottom: 20px;
}
.social-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin-right: 10px;
transition: all 0.3s ease;
}
.social-icon:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
}
.nav-footer p {
font-size: 0.8rem;
opacity: 0.7;
}
/* Mobile Navigation */
.mobile-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: var(--primary-dark);
color: var(--primary-light);
}
.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.menu-toggle {
background: none;
border: none;
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--primary-light);
position: absolute;
left: 0;
transition: all 0.3s ease;
}
.menu-toggle span:nth-child(1) {
top: 0;
}
.menu-toggle span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.menu-toggle span:nth-child(3) {
bottom: 0;
}
.menu-toggle.active span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
.mobile-menu {
display: none;
padding: 20px 0;
background-color: var(--primary-dark);
}
.mobile-menu.active {
display: block;
}
.mobile-menu nav ul li {
margin-bottom: 15px;
}
.mobile-menu nav ul li a {
display: block;
padding: 10px 0;
font-size: 1.1rem;
font-weight: 500;
}
.mobile-social-links {
display: flex;
margin-top: 20px;
}
/* Main Content */
.main-content {
margin-left: var(--side-nav-width);
overflow-x: hidden;
}
/* Hero Section */
.hero-section {
height: 100vh;
padding: 0;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
z-index: 1;
pointer-events: none;
}
.hero-content {
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: relative;
z-index: 1;
}
.hero-logo {
width: 100px;
height: 100px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 30px;
filter: brightness(0);
}
.hero-content h1 {
font-size: 4rem;
font-weight: 800;
letter-spacing: 5px;
color: var(--primary-dark);
margin-bottom: 0;
}
.hero-content h2 {
font-size: 1.2rem;
letter-spacing: 3px;
color: var(--primary-dark);
font-weight: 400;
margin-bottom: 30px;
}
.hero-text {
font-size: 1.2rem;
margin-bottom: 40px;
max-width: 500px;
}
.hero-image {
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
position: relative;
min-height: 100vh;
display: block;
z-index: 0;
}
.hero-image .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
}
/* Section Headers */
.section-header {
margin-bottom: 60px;
position: relative;
}
.section-number {
font-size: 5rem;
font-weight: 800;
color: rgba(10, 14, 23, 0.05);
position: absolute;
top: -60px;
left: -20px;
z-index: -1;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-dark);
}
.section-header p {
font-size: 1.1rem;
color: var(--accent-gray);
max-width: 600px;
}
/* Services Section */
.services-section {
background-color: #f8f9fa;
}
.services-grid {
margin-top: 40px;
}
.service-item {
display: flex;
margin-bottom: 40px;
transition: all 0.3s ease;
}
.service-item:hover {
transform: translateY(-5px);
}
.service-icon {
font-size: 2rem;
color: var(--primary-dark);
margin-right: 20px;
min-width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(10, 14, 23, 0.05);
border-radius: 50%;
}
.service-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
/* About Section */
.about-section {
background-color: var(--primary-light);
}
.about-content {
padding-right: 30px;
}
.about-content p {
margin-bottom: 20px;
line-height: 1.8;
}
.values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
}
.value-item {
padding: 20px;
background-color: #f8f9fa;
transition: all 0.3s ease;
}
.value-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.value-item h4 {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--primary-dark);
}
.about-image-container {
position: relative;
height: 100%;
min-height: 500px;
}
.about-image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: cover;
background-position: center;
}
.about-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 14, 23, 0.3);
}
/* Contact Section */
.contact-section {
background-color: #f8f9fa;
}
.contact-info {
margin-bottom: 40px;
}
.contact-item {
display: flex;
margin-bottom: 30px;
}
.contact-icon {
font-size: 1.5rem;
color: var(--primary-dark);
margin-right: 20px;
min-width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(10, 14, 23, 0.05);
border-radius: 50%;
}
.contact-text h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ced4da;
border-radius: 0;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--primary-dark);
outline: none;
box-shadow: none;
}
/* Footer */
.footer {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 80px 0 30px;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo .logo-text {
font-size: 2rem;
}
.footer-logo .logo-subtext {
font-size: 0.7rem;
}
.footer h4 {
font-size: 1.2rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-light);
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-links ul li a:hover {
opacity: 1;
padding-left: 5px;
}
.footer-contact p {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.footer-contact p i {
margin-right: 10px;
opacity: 0.7;
}
.footer-bottom {
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-bottom p {
font-size: 0.9rem;
opacity: 0.7;
}
.footer-legal a {
margin-left: 20px;
font-size: 0.9rem;
opacity: 0.7;
}
.footer-legal a:hover {
opacity: 1;
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-content {
padding: 40px;
}
.hero-content h1 {
font-size: 3.5rem;
}
}
@media (max-width: 991.98px) {
:root {
--side-nav-width: 240px;
}
.hero-content h1 {
font-size: 3rem;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 1;
pointer-events: none;
}
.section-header h2 {
font-size: 2.2rem;
}
.about-image-container {
min-height: 400px;
margin-top: 40px;
}
}
@media (max-width: 767.98px) {
/* Switch to mobile navigation */
.side-nav {
display: none;
}
.mobile-nav {
display: block;
}
.main-content {
margin-left: 0;
padding-top: 70px;
}
.hero-section {
height: auto;
}
.hero-content {
padding: 60px 20px;
text-align: center;
align-items: center;
}
.hero-image {
height: 50vh;
}
.hero-image .overlay {
background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
}
.section {
padding: 60px 0;
}
.section-number {
font-size: 4rem;
top: -40px;
}
.section-header h2 {
font-size: 2rem;
}
.values-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-legal {
margin-top: 15px;
}
.footer-legal a {
margin: 0 10px;
}
}
@media (max-width: 575.98px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content h2 {
font-size: 1rem;
}
.service-item {
flex-direction: column;
text-align: center;
}
.service-icon {
margin: 0 auto 20px;
}
.contact-item {
flex-direction: column;
text-align: center;
}
.contact-icon {
margin: 0 auto 15px;
}
}

986
style3.css Normal file
View File

@@ -0,0 +1,986 @@
/*
* JPM Security & Services - Style 3
* A modern, full-screen design with parallax effects
*/
:root {
--primary-dark: #0a0e17; /* Dark navy/black from the card */
--primary-light: #ffffff; /* White/silver from the card */
--accent-gray: #3a3a3a; /* Gray from the card borders */
--accent-silver: #e0e0e0; /* Lighter silver for accents */
--text-dark: #333333;
--text-light: #f8f9fa;
}
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
background-color: var(--primary-light);
overflow-x: hidden;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
ul {
list-style: none;
}
section {
padding: 100px 0;
position: relative;
}
.btn-primary {
background-color: var(--primary-dark);
border: none;
color: var(--primary-light);
padding: 15px 35px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
border-radius: 0;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: var(--accent-gray);
transition: all 0.4s ease;
z-index: -1;
}
.btn-primary:hover::before {
left: 0;
}
.btn-primary:hover {
color: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-dark);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.fade-out {
opacity: 0;
visibility: hidden;
}
.preloader .logo-container {
animation: pulse 1.5s infinite;
}
.preloader .logo-text {
font-size: 4rem;
font-weight: 800;
letter-spacing: 8px;
color: var(--primary-light);
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Navigation */
.navbar {
padding: 20px 0;
transition: all 0.4s ease;
background-color: transparent;
}
.navbar.scrolled {
background-color: var(--primary-dark);
padding: 15px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
}
.brand-text {
color: var(--primary-light);
letter-spacing: 3px;
}
.navbar-toggler {
border: none;
padding: 0;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-nav .nav-link {
color: var(--primary-light);
font-weight: 500;
padding: 10px 15px;
position: relative;
}
/* Fix for active navigation link */
.navbar-nav .nav-link.active {
color: var(--primary-light);
background-color: rgba(10, 14, 23, 0.7);
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--primary-light);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
width: 30px;
}
/* Hero Section */
.hero-section {
height: 100vh;
background-color: var(--primary-dark);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
opacity: 0.2;
animation: scale 20s infinite alternate;
}
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
color: var(--primary-light);
}
.hero-logo {
width: 120px;
height: 120px;
margin: 0 auto 30px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
}
.hero-title {
font-size: 5rem;
font-weight: 800;
letter-spacing: 10px;
margin-bottom: 0;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards 0.5s;
}
.hero-subtitle {
font-size: 1.5rem;
letter-spacing: 5px;
margin-bottom: 30px;
font-weight: 400;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards 0.7s;
}
.hero-text {
font-size: 1.2rem;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards 0.9s;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.scroll-down a {
display: inline-block;
width: 30px;
height: 50px;
position: relative;
}
.scroll-down span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 2px solid var(--primary-light);
border-bottom: 2px solid var(--primary-light);
transform: rotate(-45deg);
animation: scrollDown 2s infinite;
opacity: 0;
box-sizing: border-box;
}
.scroll-down span:nth-of-type(1) {
animation-delay: 0s;
}
.scroll-down span:nth-of-type(2) {
top: 16px;
animation-delay: 0.15s;
}
.scroll-down span:nth-of-type(3) {
top: 32px;
animation-delay: 0.3s;
}
@keyframes scrollDown {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Section Title */
.section-title {
margin-bottom: 60px;
}
.section-title .subtitle {
display: inline-block;
font-size: 1rem;
font-weight: 500;
color: var(--accent-gray);
margin-bottom: 15px;
position: relative;
padding-left: 50px;
}
.section-title .subtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 40px;
height: 1px;
background-color: var(--accent-gray);
}
.section-title h2 {
font-size: 2.5rem;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-dark);
}
.section-title.light {
color: var(--primary-light);
}
.section-title.light .subtitle {
color: var(--primary-light);
}
.section-title.light .subtitle::before {
background-color: var(--primary-light);
}
.section-title.light h2::after {
background-color: var(--primary-light);
}
.section-title.text-center h2::after {
left: 50%;
transform: translateX(-50%);
}
/* Services Section */
.services-section {
background-color: var(--primary-light);
padding: 120px 0;
}
.services-container {
margin-top: 50px;
}
.service-box {
background-color: #f8f9fa;
padding: 40px 30px;
border-radius: 5px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
position: relative;
z-index: 1;
overflow: hidden;
}
.service-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: var(--primary-dark);
transition: all 0.5s ease;
z-index: -1;
}
.service-box:hover::before {
height: 100%;
}
.service-box:hover {
transform: translateY(-10px);
}
.service-box:hover h3,
.service-box:hover p,
.service-box:hover .service-link {
color: var(--primary-light);
}
.service-box:hover .service-icon {
background-color: var(--primary-light);
color: var(--primary-dark);
}
.service-icon {
width: 70px;
height: 70px;
background-color: rgba(10, 14, 23, 0.05);
color: var(--primary-dark);
font-size: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: 25px;
transition: all 0.3s ease;
}
.service-box h3 {
font-size: 1.5rem;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.service-box p {
margin-bottom: 20px;
transition: all 0.3s ease;
}
.service-link {
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.service-link i {
margin-left: 5px;
transition: all 0.3s ease;
}
.service-link:hover i {
transform: translateX(5px);
}
/* About Section */
.about-section {
position: relative;
padding: 120px 0;
color: var(--primary-light);
}
.parallax-section {
overflow: hidden;
}
.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.parallax-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 14, 23, 0.85);
}
.about-content {
position: relative;
z-index: 1;
}
.about-content p {
margin-bottom: 20px;
line-height: 1.8;
}
.about-values {
margin-top: 40px;
}
.about-values h3 {
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
display: inline-block;
}
.about-values h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--primary-light);
}
.values-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.value-item {
display: flex;
align-items: flex-start;
}
.value-icon {
font-size: 1.5rem;
color: var(--primary-light);
margin-right: 15px;
min-width: 30px;
}
.value-text h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.about-image {
position: relative;
z-index: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image-frame {
position: relative;
width: 80%;
padding-bottom: 100%;
border: 5px solid var(--primary-light);
}
.image-content {
position: absolute;
top: 30px;
left: 30px;
right: -30px;
bottom: -30px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: cover;
background-position: center;
}
/* Contact Section */
.contact-section {
padding: 120px 0;
background-color: #f8f9fa;
}
.contact-info-box {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 50px 40px;
height: 100%;
border-radius: 5px;
}
.contact-info-header {
margin-bottom: 30px;
}
.contact-info-header h3 {
position: relative;
padding-bottom: 15px;
display: inline-block;
}
.contact-info-header h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--primary-light);
}
.contact-info-item {
display: flex;
margin-bottom: 30px;
}
.contact-info-item .icon {
font-size: 1.5rem;
margin-right: 20px;
min-width: 30px;
}
.contact-info-item .text h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.contact-social {
margin-top: 40px;
}
.contact-social h4 {
margin-bottom: 15px;
}
.social-icons {
display: flex;
}
.social-icon {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 10px;
transition: all 0.3s ease;
}
.social-icon:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
}
.contact-form-box {
background-color: var(--primary-light);
padding: 50px 40px;
border-radius: 5px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
height: 100%;
}
.form-group {
margin-bottom: 25px;
}
.form-control {
height: 55px;
padding: 0 20px;
border: 1px solid #e1e1e1;
border-radius: 0;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--primary-dark);
box-shadow: none;
}
textarea.form-control {
height: auto;
padding: 20px;
}
.btn-block {
width: 100%;
}
/* Footer */
.footer {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 80px 0 0;
}
.footer-about {
margin-bottom: 30px;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-logo .logo-text {
font-size: 2rem;
font-weight: 800;
letter-spacing: 3px;
}
.footer-logo .logo-subtext {
font-size: 0.8rem;
letter-spacing: 2px;
}
.footer h3 {
font-size: 1.3rem;
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
display: inline-block;
}
.footer h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-light);
}
.footer-links {
margin-bottom: 30px;
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-links ul li a:hover {
opacity: 1;
padding-left: 5px;
}
.footer-newsletter {
margin-bottom: 30px;
}
.footer-newsletter p {
margin-bottom: 20px;
opacity: 0.7;
}
.newsletter-form {
position: relative;
}
.newsletter-form input {
width: 100%;
height: 50px;
padding: 0 20px;
border: none;
background-color: rgba(255, 255, 255, 0.1);
color: var(--primary-light);
}
.newsletter-form input:focus {
outline: none;
}
.newsletter-form button {
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
background-color: var(--primary-light);
color: var(--primary-dark);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
background-color: var(--accent-silver);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 0;
margin-top: 50px;
}
.footer-bottom p {
margin-bottom: 0;
opacity: 0.7;
}
.footer-legal a {
margin-left: 20px;
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-legal a:hover {
opacity: 1;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: var(--primary-dark);
color: var(--primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.back-to-top.active {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: var(--accent-gray);
color: var(--primary-light);
transform: translateY(-3px);
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-title {
font-size: 4rem;
}
.values-container {
grid-template-columns: 1fr;
}
.image-frame {
width: 100%;
}
}
@media (max-width: 991.98px) {
section {
padding: 80px 0;
}
.hero-title {
font-size: 3.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.section-title h2 {
font-size: 2.2rem;
}
.about-image {
margin-top: 50px;
}
.contact-info-box,
.contact-form-box {
margin-bottom: 30px;
}
}
@media (max-width: 767.98px) {
section {
padding: 60px 0;
}
.hero-title {
font-size: 3rem;
letter-spacing: 5px;
}
.hero-subtitle {
font-size: 1rem;
letter-spacing: 3px;
}
.section-title h2 {
font-size: 2rem;
}
.service-box {
margin-bottom: 30px;
}
.footer {
padding-top: 60px;
}
.footer-bottom {
text-align: center;
}
.footer-legal {
margin-top: 15px;
}
.footer-legal a {
margin: 0 10px;
}
}
@media (max-width: 575.98px) {
.hero-title {
font-size: 2.5rem;
}
.preloader .logo-text {
font-size: 3rem;
}
.back-to-top {
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
}
}

985
style4.css Normal file
View File

@@ -0,0 +1,985 @@
/*
* JPM Security & Services - Style 4
* A corporate and professional design with clean lines
*/
:root {
--primary-dark: #0a0e17; /* Dark navy/black from the card */
--primary-light: #ffffff; /* White/silver from the card */
--accent-gray: #3a3a3a; /* Gray from the card borders */
--accent-silver: #e0e0e0; /* Lighter silver for accents */
--text-dark: #333333;
--text-light: #f8f9fa;
--border-color: #e9e9e9;
--bg-light: #f8f9fa;
--transition: all 0.3s ease;
}
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-dark);
background-color: var(--primary-light);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
color: var(--primary-dark);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
}
section {
padding: 80px 0;
position: relative;
}
.btn {
display: inline-block;
padding: 12px 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0;
transition: var(--transition);
cursor: pointer;
}
.btn-primary {
background-color: var(--primary-dark);
color: var(--primary-light);
border: 2px solid var(--primary-dark);
}
.btn-primary:hover {
background-color: transparent;
color: var(--primary-dark);
}
.btn-outline {
background-color: transparent;
color: var(--primary-dark);
border: 2px solid var(--primary-dark);
}
.btn-outline:hover {
background-color: var(--primary-dark);
color: var(--primary-light);
}
.btn-light {
background-color: var(--primary-light);
color: var(--primary-dark);
border: 2px solid var(--primary-light);
}
.btn-light:hover {
background-color: transparent;
color: var(--primary-light);
}
.section-subtitle {
display: inline-block;
font-size: 1rem;
font-weight: 600;
color: var(--accent-gray);
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
padding-left: 50px;
}
.section-subtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 40px;
height: 2px;
background-color: var(--primary-dark);
transform: translateY(-50%);
}
.section-title {
font-size: 2.5rem;
margin-bottom: 20px;
position: relative;
}
.section-description {
font-size: 1.1rem;
color: var(--accent-gray);
max-width: 700px;
margin: 0 auto 50px;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
/* Top Bar */
.top-bar {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 10px 0;
font-size: 0.9rem;
}
.top-contact span {
margin-right: 20px;
}
.top-contact i {
margin-right: 5px;
}
.top-social {
text-align: right;
}
.top-social a {
color: var(--primary-light);
margin-left: 15px;
opacity: 0.8;
}
.top-social a:hover {
opacity: 1;
}
/* Header */
.header {
background-color: var(--primary-light);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.logo {
display: flex;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
}
.logo-img {
width: 50px;
height: 50px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
filter: brightness(0);
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-main {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: 3px;
color: var(--primary-dark);
line-height: 1;
}
.logo-sub {
font-size: 0.7rem;
letter-spacing: 1.5px;
color: var(--accent-gray);
}
.main-nav {
display: flex;
justify-content: flex-end;
}
.main-nav ul {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.main-nav ul li {
margin-left: 30px;
}
.main-nav ul li a {
color: var(--text-dark);
font-weight: 500;
padding: 5px 0;
position: relative;
}
.main-nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-dark);
transition: var(--transition);
}
.main-nav ul li a:hover::after,
.main-nav ul li a.active::after {
width: 100%;
}
.nav-btn {
background-color: var(--primary-dark);
color: var(--primary-light) !important;
padding: 10px 20px !important;
border-radius: 0;
}
.nav-btn:hover {
background-color: var(--accent-gray);
}
.nav-btn::after {
display: none;
}
.mobile-menu-toggle {
display: none;
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
}
.mobile-menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--primary-dark);
position: absolute;
left: 0;
transition: var(--transition);
}
.mobile-menu-toggle span:nth-child(1) {
top: 0;
}
.mobile-menu-toggle span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.mobile-menu-toggle span:nth-child(3) {
bottom: 0;
}
.mobile-menu-toggle.active span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
.mobile-menu {
display: none;
position: fixed;
top: 90px;
left: 0;
width: 100%;
background-color: var(--primary-light);
padding: 20px 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
z-index: 99;
}
.mobile-menu.active {
display: block;
}
.mobile-menu ul li {
margin-bottom: 15px;
}
.mobile-menu ul li a {
display: block;
padding: 8px 0;
font-weight: 500;
}
.mobile-menu ul li a.nav-btn {
display: inline-block;
margin-top: 10px;
}
/* Hero Section */
.hero-section {
padding: 100px 0;
background-color: var(--bg-light);
overflow: hidden;
}
.hero-content {
padding-right: 30px;
}
.hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
}
.hero-content p {
font-size: 1.1rem;
margin-bottom: 30px;
color: var(--accent-gray);
}
.hero-btns .btn {
margin-right: 15px;
margin-bottom: 10px;
}
.hero-image {
position: relative;
}
.hero-img-container {
position: relative;
z-index: 1;
}
.hero-img {
width: 100%;
height: 400px;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
border: 10px solid var(--primary-light);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.hero-shape {
position: absolute;
top: -30px;
right: -30px;
width: 80%;
height: 80%;
border: 5px solid var(--primary-dark);
z-index: 0;
}
/* Features Section */
.features-section {
padding: 60px 0;
background-color: var(--primary-light);
margin-top: -30px;
position: relative;
z-index: 2;
}
.feature-box {
text-align: center;
padding: 40px 30px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
background-color: var(--primary-light);
transition: var(--transition);
height: 100%;
}
.feature-box:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 80px;
height: 80px;
background-color: rgba(10, 14, 23, 0.05);
color: var(--primary-dark);
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 auto 25px;
transition: var(--transition);
}
.feature-box:hover .feature-icon {
background-color: var(--primary-dark);
color: var(--primary-light);
}
.feature-box h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.feature-box p {
color: var(--accent-gray);
}
/* Services Section */
.services-section {
background-color: var(--bg-light);
padding: 100px 0;
}
.service-card {
background-color: var(--primary-light);
padding: 30px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
border-bottom: 3px solid transparent;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-bottom-color: var(--primary-dark);
}
.service-icon {
width: 70px;
height: 70px;
background-color: rgba(10, 14, 23, 0.05);
color: var(--primary-dark);
font-size: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: 25px;
transition: var(--transition);
}
.service-card:hover .service-icon {
background-color: var(--primary-dark);
color: var(--primary-light);
}
.service-content h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.service-content p {
color: var(--accent-gray);
margin-bottom: 20px;
}
.read-more {
font-weight: 600;
color: var(--primary-dark);
display: inline-flex;
align-items: center;
}
.read-more i {
margin-left: 5px;
transition: var(--transition);
}
.read-more:hover i {
transform: translateX(5px);
}
/* About Section */
.about-section {
padding: 100px 0;
background-color: var(--primary-light);
}
.about-image {
position: relative;
margin-bottom: 30px;
}
.about-img {
width: 100%;
height: 450px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: cover;
background-position: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.about-experience {
position: absolute;
bottom: -20px;
right: 30px;
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 20px 30px;
text-align: center;
}
.about-experience .years {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
display: block;
}
.about-experience .text {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.about-content {
padding-left: 30px;
}
.about-content p {
margin-bottom: 20px;
color: var(--accent-gray);
}
.about-features {
margin: 30px 0;
}
.about-feature-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.about-feature-item .icon {
width: 30px;
height: 30px;
background-color: rgba(10, 14, 23, 0.05);
color: var(--primary-dark);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 15px;
}
.about-feature-item .text {
font-weight: 600;
}
/* CTA Section */
.cta-section {
background-color: var(--primary-dark);
color: var(--primary-light);
padding: 60px 0;
}
.cta-content h2 {
color: var(--primary-light);
font-size: 2rem;
margin-bottom: 10px;
}
.cta-content p {
opacity: 0.8;
}
/* Contact Section */
.contact-section {
padding: 100px 0;
background-color: var(--bg-light);
}
.contact-info {
margin-bottom: 30px;
}
.contact-info-item {
display: flex;
margin-bottom: 30px;
background-color: var(--primary-light);
padding: 25px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: var(--transition);
}
.contact-info-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.contact-info-item .icon {
width: 60px;
height: 60px;
background-color: rgba(10, 14, 23, 0.05);
color: var(--primary-dark);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
}
.contact-info-item .content h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.contact-form-wrapper {
background-color: var(--primary-light);
padding: 40px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
width: 100%;
height: 50px;
padding: 0 15px;
border: 1px solid var(--border-color);
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary-dark);
outline: none;
box-shadow: none;
}
textarea.form-control {
height: auto;
padding: 15px;
}
/* Footer */
.footer {
background-color: var(--primary-dark);
color: var(--primary-light);
}
.footer-top {
padding: 80px 0 50px;
}
.footer-widget {
margin-bottom: 30px;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-logo .logo-text {
display: flex;
flex-direction: column;
}
.footer-logo .logo-main {
font-size: 2rem;
font-weight: 800;
letter-spacing: 3px;
color: var(--primary-light);
line-height: 1;
}
.footer-logo .logo-sub {
font-size: 0.7rem;
letter-spacing: 1.5px;
color: var(--accent-silver);
}
.about-widget p {
opacity: 0.7;
margin-bottom: 20px;
}
.footer-social {
display: flex;
}
.footer-social a {
width: 36px;
height: 36px;
background-color: rgba(255, 255, 255, 0.1);
color: var(--primary-light);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 10px;
transition: var(--transition);
}
.footer-social a:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
}
.footer-widget-title {
font-size: 1.3rem;
color: var(--primary-light);
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.footer-widget-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-light);
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links li a {
opacity: 0.7;
transition: var(--transition);
}
.footer-links li a:hover {
opacity: 1;
padding-left: 5px;
}
.footer-contact-info li {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
opacity: 0.7;
}
.footer-contact-info li i {
margin-right: 10px;
margin-top: 5px;
}
.footer-bottom {
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.copyright {
margin-bottom: 0;
opacity: 0.7;
}
.footer-bottom-links a {
margin-left: 20px;
opacity: 0.7;
transition: var(--transition);
}
.footer-bottom-links a:hover {
opacity: 1;
}
/* Back to Top */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: var(--primary-dark);
color: var(--primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.back-to-top.active {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: var(--accent-gray);
color: var(--primary-light);
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-content h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 991.98px) {
.main-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
float: right;
}
.hero-content {
padding-right: 0;
margin-bottom: 50px;
text-align: center;
}
.hero-shape {
display: none;
}
.about-content {
padding-left: 0;
margin-top: 30px;
}
.cta-content {
text-align: center;
margin-bottom: 30px;
}
.cta-section .text-lg-end {
text-align: center !important;
}
}
@media (max-width: 767.98px) {
section {
padding: 60px 0;
}
.top-bar {
display: none;
}
.hero-section {
padding: 80px 0;
}
.hero-content h1 {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.feature-box,
.service-card {
margin-bottom: 30px;
}
.about-experience {
position: relative;
bottom: auto;
right: auto;
display: inline-block;
margin-top: -20px;
}
.footer-widget {
text-align: center;
}
.footer-widget-title::after {
left: 50%;
transform: translateX(-50%);
}
.footer-social {
justify-content: center;
}
.footer-contact-info li {
justify-content: center;
}
.footer-bottom {
text-align: center;
}
.footer-bottom-links {
margin-top: 15px;
}
.footer-bottom-links a {
margin: 0 10px;
}
}
@media (max-width: 575.98px) {
.hero-content h1 {
font-size: 1.8rem;
}
.section-subtitle {
padding-left: 30px;
}
.section-subtitle::before {
width: 20px;
}
.back-to-top {
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
}
}

1216
style5.css Normal file
View File

File diff suppressed because it is too large Load Diff