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

Remove all image assets, HTML files, stylesheets, scripts, and documentation from the project.

Browse Source
This commit is contained in:
becarta
2025-05-18 19:18:49 +02:00
parent ed1aab181f
commit 0fe2099c9d
22 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Old/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
Old/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

9
Old/LICENSE Normal file
View File

@@ -0,0 +1,9 @@
MIT License
Copyright (c) 2025 Richard
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

46
Old/README.md Normal file
View File

@@ -0,0 +1,46 @@
# JPM Security & Services
This repository contains multiple versions of the JPM Security & Services website, showcasing different design iterations and layouts. The site serves as a professional platform for JPM Security & Services, a security and services company.
## Overview
The website features multiple design versions (index.html through index6.html), each with its own unique styling and layout approach. The site is built using modern web technologies and follows responsive design principles.
## Features
- Multiple design iterations for comparison and selection
- Responsive design that works across all devices
- Modern UI with gradient effects and smooth animations
- Bootstrap 5 integration for robust layout and components
- Font Awesome icons for enhanced visual elements
- Custom CSS styling with modern design principles
## Technical Stack
- HTML5
- CSS3 (with custom styling)
- JavaScript
- Bootstrap 5
- Font Awesome 6.0.0
## File Structure
- `index.html` - Main landing page with version selection
- `index2.html` through `index6.html` - Alternative design versions
- `style.css` through `style6.css` - Corresponding stylesheets for each version
- `script.js` - JavaScript functionality
- Various image assets for visual content
## Getting Started
1. Clone the repository
2. Open `index.html` in your web browser to view the main landing page
3. Navigate through different versions using the provided links
## Design Versions
Each version (1-6) offers a unique take on the website's design, allowing for easy comparison and selection of the preferred layout and style.
## License
This project is licensed under the terms included in the LICENSE file.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 KiB

274
Old/index.html Normal file
View File

@@ -0,0 +1,274 @@
<!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: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #2c3e50;
--accent-hover: #34495e;
--text-light: #f8f9fa;
--text-dark: #2c3e50;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: var(--text-dark);
line-height: 1.6;
}
.header {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--text-light);
padding: 4rem 0;
text-align: center;
margin-bottom: 4rem;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg') center/cover;
opacity: 0.1;
z-index: 0;
}
.header .container {
position: relative;
z-index: 1;
}
.header h1 {
font-weight: 800;
letter-spacing: 8px;
margin-bottom: 0;
font-size: 3.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.header h2 {
font-size: 1.4rem;
letter-spacing: 4px;
font-weight: 400;
margin-bottom: 1.5rem;
text-transform: uppercase;
}
.version-card {
background: var(--primary-light);
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
margin-bottom: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.version-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.version-img {
height: 250px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.version-img::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.version-content {
padding: 2rem;
position: relative;
}
.version-content h3 {
margin-bottom: 1.5rem;
font-weight: 700;
color: var(--accent-color);
font-size: 1.8rem;
}
.version-content p {
color: #666;
margin-bottom: 1.5rem;
}
.btn-view {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--text-light);
border: none;
padding: 12px 25px;
border-radius: 30px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s ease;
display: inline-block;
margin-top: 1rem;
position: relative;
overflow: hidden;
}
.btn-view::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.btn-view:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-view:hover::before {
left: 100%;
}
.footer {
background: var(--primary-dark);
color: var(--text-light);
padding: 3rem 0;
text-align: center;
margin-top: 4rem;
}
.footer p {
margin-bottom: 0;
opacity: 0.8;
}
.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'); }
@media (max-width: 768px) {
.header {
padding: 3rem 0;
}
.header h1 {
font-size: 2.5rem;
}
.version-card {
margin-bottom: 1.5rem;
}
}
</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
Old/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
Old/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
Old/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
Old/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
Old/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="style6.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
Old/jpm_extracted.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

392
Old/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
Old/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;
}
}

824
Old/style2.css Normal file
View File

@@ -0,0 +1,824 @@
/*
* JPM Security & Services - Style 2
* A minimalist design with side navigation
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #3498db;
--accent-hover: #2980b9;
--text-dark: #2c3e50;
--text-light: #f8f9fa;
--side-nav-width: 280px;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
}
/* 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: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
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: 30px;
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover::before {
left: 100%;
}
/* Side Navigation */
.side-nav {
position: fixed;
top: 0;
left: 0;
width: var(--side-nav-width);
height: 100vh;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
padding: 40px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1000;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}
.logo-container {
margin-bottom: 60px;
position: relative;
overflow: hidden;
}
.logo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 5px;
position: relative;
z-index: 1;
}
.logo-subtext {
font-size: 0.8rem;
letter-spacing: 2px;
opacity: 0.8;
position: relative;
z-index: 1;
}
.side-nav nav ul li {
margin-bottom: 20px;
position: relative;
}
.side-nav nav ul li a {
font-size: 1.1rem;
font-weight: 500;
display: block;
padding: 8px 0;
position: relative;
opacity: 0.7;
transition: all 0.3s ease;
}
.side-nav nav ul li a:hover,
.side-nav nav ul li a.active {
opacity: 1;
transform: translateX(10px);
}
.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;
position: relative;
overflow: hidden;
}
.social-icon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.social-icon:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
transform: translateY(-3px);
}
.social-icon:hover::before {
left: 100%;
}
.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: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.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;
transition: all 0.3s ease;
}
.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: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.mobile-menu.active {
display: block;
transform: translateY(0);
}
.mobile-menu nav ul li {
margin-bottom: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.mobile-menu.active nav ul li {
opacity: 1;
transform: translateY(0);
}
.mobile-menu nav ul li a {
display: block;
padding: 10px 0;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.3s ease;
}
.mobile-menu nav ul li a:hover {
transform: translateX(10px);
}
.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;
}
}

1024
Old/style3.css Normal file
View File

File diff suppressed because it is too large Load Diff

599
Old/style4.css Normal file
View File

@@ -0,0 +1,599 @@
/*
* JPM Security & Services - Style 4
* A modern corporate design with dynamic elements
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #3498db;
--accent-hover: #2980b9;
--text-dark: #2c3e50;
--text-light: #f8f9fa;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
--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: 100px 0;
position: relative;
}
.btn {
display: inline-block;
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 30px;
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
border: none;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-outline {
background: transparent;
color: var(--primary-dark);
border: 2px solid var(--primary-dark);
}
.btn-outline:hover {
background: var(--primary-dark);
color: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Top Bar */
.top-bar {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
padding: 10px 0;
font-size: 0.9rem;
}
.top-contact span {
margin-right: 20px;
display: inline-flex;
align-items: center;
}
.top-contact i {
margin-right: 8px;
font-size: 1rem;
}
.top-social {
text-align: right;
}
.top-social a {
color: var(--primary-light);
margin-left: 15px;
opacity: 0.8;
transition: var(--transition);
}
.top-social a:hover {
opacity: 1;
transform: translateY(-2px);
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.header.scrolled {
padding: 15px 0;
background-color: rgba(255, 255, 255, 0.98);
}
.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: 15px;
filter: brightness(0);
transition: var(--transition);
}
.logo:hover .logo-img {
transform: scale(1.1);
}
.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-color);
}
.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: var(--accent-color);
transition: var(--transition);
}
.main-nav ul li a:hover::after,
.main-nav ul li a.active::after {
width: 100%;
}
.nav-btn {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
padding: 10px 25px;
border-radius: 30px;
transition: var(--transition);
}
.nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Hero Section */
.hero-section {
padding: 120px 0;
position: relative;
overflow: hidden;
background-color: var(--bg-light);
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-dark);
margin-bottom: 2rem;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.2s forwards;
}
.hero-btns {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.4s forwards;
}
.hero-btns .btn {
margin-right: 15px;
}
.hero-image {
position: relative;
z-index: 1;
}
.hero-img-container {
position: relative;
padding-bottom: 100%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
transition: var(--transition);
}
.hero-img-container:hover .hero-img {
transform: scale(1.1);
}
.hero-shape {
position: absolute;
top: 50%;
right: -100px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
opacity: 0.1;
transform: translateY(-50%);
z-index: -1;
}
/* Features Section */
.features-section {
padding: 80px 0;
background-color: var(--primary-light);
}
.feature-box {
text-align: center;
padding: 40px 30px;
background: var(--primary-light);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.feature-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.feature-box:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.feature-box:hover::before {
opacity: 0.05;
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
z-index: 1;
transition: var(--transition);
}
.feature-icon i {
font-size: 35px;
color: var(--primary-light);
}
.feature-box h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.feature-box p {
color: var(--text-dark);
margin-bottom: 0;
position: relative;
z-index: 1;
}
/* Services Section */
.services-section {
padding: 100px 0;
background-color: var(--bg-light);
}
.service-card {
background: var(--primary-light);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-card:hover::before {
opacity: 0.05;
}
.service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.service-icon i {
font-size: 30px;
color: var(--primary-light);
}
.service-content h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.service-content p {
color: var(--text-dark);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.read-more {
color: var(--accent-color);
font-weight: 600;
display: inline-flex;
align-items: center;
position: relative;
z-index: 1;
transition: var(--transition);
}
.read-more i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.read-more:hover {
color: var(--accent-hover);
}
.read-more:hover i {
transform: translateX(5px);
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-content h1 {
font-size: 3rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 991.98px) {
.main-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
}
.hero-content {
text-align: center;
margin-bottom: 50px;
}
.hero-shape {
display: none;
}
.about-content {
margin-top: 50px;
}
}
@media (max-width: 767.98px) {
section {
padding: 60px 0;
}
.hero-content h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.feature-box,
.service-card {
margin-bottom: 30px;
}
}
@media (max-width: 575.98px) {
.hero-content h1 {
font-size: 2rem;
}
.section-subtitle {
font-size: 0.9rem;
}
.section-subtitle::before {
width: 30px;
}
}

817
Old/style5.css Normal file
View File

@@ -0,0 +1,817 @@
/*
* JPM Security & Services - Style 5
* A creative and modern design with animations
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #3498db;
--accent-hover: #2980b9;
--text-dark: #2c3e50;
--text-light: #f8f9fa;
--gradient-start: #2c3e50;
--gradient-end: #3498db;
--border-color: #e9e9e9;
--bg-light: #f8f9fa;
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 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;
cursor: none;
}
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);
cursor: none;
}
ul {
list-style: none;
}
section {
padding: 100px 0;
position: relative;
}
.btn {
display: inline-block;
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 30px;
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
cursor: none;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--primary-light);
border: none;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-light {
background: var(--primary-light);
color: var(--primary-dark);
border: 2px solid var(--primary-dark);
}
.btn-light:hover {
background: var(--primary-dark);
color: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Custom Cursor */
.cursor {
position: fixed;
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.cursor-follower {
position: fixed;
width: 40px;
height: 40px;
border: 1px solid var(--accent-color);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: all 0.2s ease-out;
}
.cursor.active {
width: 20px;
height: 20px;
background: var(--accent-color);
}
.cursor-follower.active {
width: 50px;
height: 50px;
border-width: 2px;
border-color: var(--accent-hover);
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
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;
}
.loader {
position: relative;
}
.logo-text {
font-size: 4rem;
font-weight: 800;
letter-spacing: 8px;
color: var(--primary-light);
animation: pulse 1.5s infinite;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 0;
z-index: 100;
transition: var(--transition);
}
.header.scrolled {
background-color: rgba(255, 255, 255, 0.95);
padding: 15px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.logo {
display: flex;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
}
.logo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 3px;
color: var(--primary-light);
line-height: 1;
transition: var(--transition);
}
.logo-tagline {
font-size: 0.8rem;
letter-spacing: 2px;
color: var(--accent-color);
margin-left: 15px;
transition: var(--transition);
}
.header.scrolled .logo-text {
color: var(--primary-dark);
font-size: 2rem;
}
.header.scrolled .logo-tagline {
color: var(--accent-color);
}
/* Menu Toggle */
.menu-toggle {
display: flex;
align-items: center;
cursor: none;
}
.menu-toggle span {
font-size: 1rem;
font-weight: 600;
color: var(--primary-light);
margin-right: 15px;
transition: var(--transition);
}
.hamburger {
width: 30px;
height: 20px;
position: relative;
cursor: none;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: var(--primary-light);
position: absolute;
left: 0;
transition: var(--transition);
}
.hamburger span:first-child {
top: 0;
}
.hamburger span:last-child {
bottom: 0;
}
.header.scrolled .menu-toggle span,
.header.scrolled .hamburger span {
color: var(--primary-dark);
background-color: var(--primary-dark);
}
/* Fullscreen Menu */
.fullscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
z-index: 99;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.fullscreen-menu.active {
opacity: 1;
visibility: visible;
}
.menu-close {
position: absolute;
top: 30px;
right: 30px;
display: flex;
align-items: center;
cursor: none;
}
.menu-close span {
font-size: 1rem;
font-weight: 600;
color: var(--primary-light);
margin-right: 15px;
}
.close-btn {
width: 30px;
height: 20px;
position: relative;
}
.close-btn span {
display: block;
width: 100%;
height: 2px;
background-color: var(--primary-light);
position: absolute;
left: 0;
transition: var(--transition);
}
.close-btn span:first-child {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.close-btn span:last-child {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
.menu-content {
padding: 100px 0;
}
.menu-links ul li {
margin-bottom: 30px;
}
.menu-link {
font-size: 3rem;
font-weight: 700;
color: var(--primary-light);
position: relative;
display: inline-block;
transition: var(--transition);
}
.menu-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-light);
transition: var(--transition);
}
.menu-link:hover {
transform: translateX(20px);
}
.menu-link:hover::after {
width: 100%;
}
.menu-info {
margin-top: 50px;
}
.menu-info h3 {
font-size: 1.5rem;
color: var(--primary-light);
margin-bottom: 20px;
}
.menu-info p {
color: var(--primary-light);
opacity: 0.8;
margin-bottom: 10px;
}
.menu-info p i {
margin-right: 10px;
}
.menu-social {
margin-top: 30px;
}
.menu-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--primary-light);
border-radius: 50%;
color: var(--primary-light);
margin-right: 10px;
transition: var(--transition);
}
.menu-social a:hover {
background-color: var(--primary-light);
color: var(--primary-dark);
transform: translateY(-3px);
}
/* Hero Section */
.hero-section {
height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background-color: var(--primary-dark);
}
.hero-content {
position: relative;
z-index: 1;
padding: 0 50px;
}
.hero-title {
font-size: 5rem;
font-weight: 800;
color: var(--primary-light);
line-height: 1;
margin-bottom: 20px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}
.hero-subtitle {
font-size: 1.5rem;
color: var(--accent-color);
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.2s forwards;
}
.hero-text {
font-size: 1.2rem;
color: var(--primary-light);
opacity: 0.8;
margin-bottom: 40px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.4s forwards;
}
.hero-btns .btn {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.6s forwards;
}
.hero-image {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
z-index: 0;
}
.hero-img-inner {
width: 100%;
height: 100%;
background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
background-size: cover;
background-position: center;
transition: var(--transition);
transform: scale(1.1);
}
.hero-section:hover .hero-img-inner {
transform: scale(1);
}
/* Scroll Down */
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.mouse {
width: 30px;
height: 50px;
border: 2px solid var(--primary-light);
border-radius: 15px;
position: relative;
}
.wheel {
width: 4px;
height: 8px;
background-color: var(--primary-light);
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
animation: scroll 1.5s infinite;
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
}
.arrow {
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.arrow span {
display: block;
width: 10px;
height: 10px;
border-bottom: 2px solid var(--primary-light);
border-right: 2px solid var(--primary-light);
transform: rotate(45deg);
margin: -5px;
animation: arrow 1.5s infinite;
}
.arrow span:nth-child(2) {
animation-delay: 0.2s;
}
.arrow span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes arrow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Services Section */
.services-section {
background-color: var(--bg-light);
padding: 100px 0;
}
.service-card {
background: var(--primary-light);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.service-card:hover::before {
opacity: 0.05;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.service-icon i {
font-size: 30px;
color: var(--primary-light);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.service-card p {
color: var(--text-dark);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.service-link {
color: var(--accent-color);
font-weight: 600;
display: inline-flex;
align-items: center;
position: relative;
z-index: 1;
transition: var(--transition);
}
.service-link span {
margin-right: 5px;
}
.service-link i {
transition: transform 0.3s ease;
}
.service-card:hover .service-link {
color: var(--accent-hover);
}
.service-link:hover i {
transform: translateX(5px);
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero-title {
font-size: 4rem;
}
.menu-link {
font-size: 2.5rem;
}
}
@media (max-width: 991.98px) {
section {
padding: 80px 0;
}
.hero-title {
font-size: 3.5rem;
}
.hero-subtitle {
font-size: 1.3rem;
}
.hero-content {
padding: 0 30px;
}
.about-content {
margin-top: 50px;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-info {
margin-bottom: 50px;
}
}
@media (max-width: 767.98px) {
.hero-section {
height: auto;
padding: 150px 0 100px;
}
.hero-content {
text-align: center;
margin-bottom: 50px;
}
.hero-image {
position: relative;
width: 100%;
height: 300px;
}
.hero-title {
font-size: 3rem;
}
.menu-close {
top: 20px;
right: 20px;
}
.menu-link {
font-size: 2rem;
}
.cta-inner {
padding: 50px 30px;
}
.contact-form-box {
padding: 30px;
}
.footer h3::after {
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 575.98px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.menu-link {
font-size: 1.8rem;
}
.about-pattern {
display: none;
}
.cursor, .cursor-follower {
display: none;
}
body {
cursor: auto;
}
a, .btn {
cursor: pointer;
}
}

590
Old/style6.css Normal file
View File

@@ -0,0 +1,590 @@
/*
* JPM Security & Services - Style 6
* A modern and sophisticated design with enhanced animations
*/
:root {
--primary-dark: #1a1f2c;
--primary-light: #ffffff;
--accent-color: #e63946;
--accent-hover: #c1121f;
--text-dark: #2b2d42;
--text-light: #f8f9fa;
--gradient-start: #1a1f2c;
--gradient-end: #2b2d42;
--border-color: #e9ecef;
--bg-light: #f8f9fa;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 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: 100px 0;
position: relative;
}
/* Navigation */
.navbar {
padding: 20px 0;
transition: var(--transition);
background: transparent;
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.95);
padding: 15px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.navbar-brand {
font-size: 2rem;
font-weight: 800;
color: var(--primary-light);
transition: var(--transition);
}
.navbar.scrolled .navbar-brand {
color: var(--primary-dark);
}
.nav-link {
color: var(--primary-light) !important;
font-weight: 600;
padding: 10px 20px !important;
position: relative;
transition: var(--transition);
}
.navbar.scrolled .nav-link {
color: var(--primary-dark) !important;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent-color);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 100%;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
position: relative;
overflow: hidden;
}
.hero::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.1;
animation: zoomIn 20s infinite alternate;
}
@keyframes zoomIn {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.hero-content {
color: var(--primary-light);
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}
.logo-container {
width: 100px;
height: 100px;
margin-bottom: 30px;
opacity: 0;
animation: fadeIn 1s ease 0.5s forwards;
}
.logo-image {
width: 100%;
height: 100%;
background: var(--accent-color);
border-radius: 50%;
position: relative;
overflow: hidden;
}
.logo-image::before {
content: 'JPM';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
font-weight: 800;
color: var(--primary-light);
}
.hero h1 {
font-size: 5rem;
font-weight: 800;
color: var(--primary-light);
margin-bottom: 0;
line-height: 1;
}
.hero h2 {
font-size: 2rem;
color: var(--accent-color);
margin-bottom: 20px;
font-weight: 600;
}
.hero .lead {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
/* Buttons */
.btn {
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 30px;
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: var(--accent-color);
color: var(--primary-light);
border: none;
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
}
/* Services Section */
.services {
background-color: var(--bg-light);
}
.section-header {
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5rem;
position: relative;
display: inline-block;
margin-bottom: 20px;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 50px;
height: 3px;
background: var(--accent-color);
transform: translateX(-50%);
}
.service-card {
background: var(--primary-light);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: var(--transition);
z-index: 0;
}
.service-card:hover::before {
opacity: 0.05;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-icon {
width: 70px;
height: 70px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.service-icon i {
font-size: 30px;
color: var(--primary-light);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.service-card p {
color: var(--text-dark);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
/* About Section */
.about {
background-color: var(--primary-light);
}
.about-image {
height: 500px;
background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
background-size: cover;
background-position: center;
border-radius: 15px;
position: relative;
overflow: hidden;
}
.about-image::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border: 3px solid var(--accent-color);
border-radius: 15px;
z-index: 1;
}
.values {
margin-top: 40px;
}
.values h3 {
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.values h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: var(--accent-color);
}
.values ul li {
margin-bottom: 15px;
padding-left: 25px;
position: relative;
}
.values ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent-color);
}
/* Contact Section */
.contact {
background-color: var(--bg-light);
}
.contact-info {
background: var(--primary-light);
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contact-info h3 {
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.contact-info h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: var(--accent-color);
}
.contact-info ul li {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.contact-info ul li i {
width: 30px;
color: var(--accent-color);
}
.social-links {
display: flex;
gap: 15px;
}
.social-icon {
width: 40px;
height: 40px;
background: var(--accent-color);
color: var(--primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.social-icon:hover {
background: var(--accent-hover);
transform: translateY(-3px);
}
.business-hours {
background: var(--primary-light);
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-top: 30px;
}
.business-hours h3 {
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.business-hours h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 3px;
background: var(--accent-color);
}
/* Footer */
.footer {
background: var(--primary-dark);
color: var(--primary-light);
}
.footer-logo {
font-size: 2rem;
font-weight: 800;
color: var(--primary-light);
}
.footer-tagline {
font-size: 1rem;
color: var(--accent-color);
margin-top: 5px;
}
.footer a {
color: var(--primary-light);
opacity: 0.8;
transition: var(--transition);
}
.footer a:hover {
opacity: 1;
color: var(--accent-color);
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Responsive Styles */
@media (max-width: 1199.98px) {
.hero h1 {
font-size: 4rem;
}
}
@media (max-width: 991.98px) {
section {
padding: 80px 0;
}
.hero h1 {
font-size: 3.5rem;
}
.hero h2 {
font-size: 1.8rem;
}
.about-image {
margin-bottom: 40px;
}
}
@media (max-width: 767.98px) {
.hero {
height: auto;
padding: 150px 0 100px;
}
.hero-content {
text-align: center;
}
.hero h1 {
font-size: 3rem;
}
.hero h2 {
font-size: 1.5rem;
}
.section-header h2 {
font-size: 2rem;
}
.contact-info,
.business-hours {
padding: 30px;
}
}
@media (max-width: 575.98px) {
.hero h1 {
font-size: 2.5rem;
}
.hero h2 {
font-size: 1.2rem;
}
.section-header h2 {
font-size: 1.8rem;
}
.btn {
padding: 12px 25px;
}
}