| |
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>DJ Francois</title>
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
| <style>
|
|
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| font-family: 'Arial', sans-serif;
|
| }
|
|
|
| body {
|
| background: #0a0a0a;
|
| color: white;
|
| overflow-x: hidden;
|
| scroll-behavior: smooth;
|
| }
|
|
|
|
|
| nav {
|
| position: fixed;
|
| top: 0;
|
| width: 100%;
|
| padding: 20px 50px;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
|
| z-index: 1000;
|
| }
|
|
|
| .logo {
|
| font-size: 24px;
|
| font-weight: bold;
|
| background: linear-gradient(45deg, #ff00ff, #00ffff);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| }
|
|
|
| .nav-links {
|
| display: flex;
|
| gap: 30px;
|
| }
|
|
|
| .nav-links a {
|
| color: white;
|
| text-decoration: none;
|
| font-size: 16px;
|
| transition: color 0.3s;
|
| }
|
|
|
| .nav-links a:hover {
|
| color: #ff00ff;
|
| }
|
|
|
|
|
| .video-header {
|
| height: 100vh;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| #hero-video {
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%);
|
| min-width: 100%;
|
| min-height: 100%;
|
| z-index: 1;
|
| filter: brightness(0.7);
|
| }
|
|
|
| .video-overlay {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
|
| z-index: 2;
|
| }
|
|
|
| .video-content {
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%);
|
| z-index: 3;
|
| text-align: center;
|
| }
|
|
|
| .video-text {
|
| font-size: 4em;
|
| font-weight: bold;
|
| background: linear-gradient(45deg, #ff00ff, #00ffff);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| margin-bottom: 30px;
|
| }
|
|
|
| .play-button {
|
| font-size: 3em;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| background: linear-gradient(45deg, #ff00ff, #00ffff);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| }
|
|
|
| .play-button:hover {
|
| transform: scale(1.1);
|
| }
|
|
|
| .volume-control {
|
| position: absolute;
|
| right: 30px;
|
| bottom: 30px;
|
| z-index: 3;
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| }
|
|
|
| .volume-slider {
|
| width: 100px;
|
| }
|
|
|
|
|
| section {
|
| min-height: 100vh;
|
| padding: 100px 50px;
|
| position: relative;
|
| }
|
|
|
| #about {
|
| background: #111;
|
| }
|
|
|
| #events {
|
| background: #1a1a1a;
|
| }
|
|
|
| #bookings {
|
| background: #222;
|
| }
|
|
|
| .section-content {
|
| max-width: 800px;
|
| margin: 0 auto;
|
| text-align: center;
|
| }
|
|
|
| h2 {
|
| font-size: 3em;
|
| margin-bottom: 30px;
|
| background: linear-gradient(45deg, #ff00ff, #00ffff);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .video-text {
|
| font-size: 2.5em;
|
| }
|
|
|
| .play-button {
|
| font-size: 2em;
|
| }
|
|
|
| .volume-control {
|
| right: 20px;
|
| bottom: 20px;
|
| }
|
|
|
| .volume-slider {
|
| width: 80px;
|
| }
|
|
|
| nav {
|
| padding: 20px;
|
| }
|
|
|
| .nav-links {
|
| gap: 20px;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <nav>
|
| <div class="logo">DJ FRANCOIS</div>
|
| <div class="nav-links">
|
| <a href="#home">HOME</a>
|
| <a href="#about">ABOUT</a>
|
| <a href="#events">EVENTS & TICKETS</a>
|
| <a href="#bookings">BOOKINGS</a>
|
| </div>
|
| </nav>
|
|
|
| <section id="home" class="video-header">
|
| <video id="hero-video" muted loop>
|
| <source src="http://djfrancois.nl/djfrancois-nl/wp-content/uploads/2025/02/DJ-Francois-Party-people.mp4" type="video/mp4">
|
| </video>
|
| <div class="video-overlay"></div>
|
| <div class="video-content">
|
| <div class="video-text">Meet the true king of The Classixs</div>
|
| <i class="fas fa-play play-button" id="play-btn"></i>
|
| </div>
|
| <div class="volume-control">
|
| <i class="fas fa-volume-up" id="volume-icon"></i>
|
| <input type="range" id="volume-slider" class="volume-slider" min="0" max="1" step="0.01" value="1">
|
| </div>
|
| </section>
|
|
|
| <section id="about">
|
| <div class="section-content">
|
| <h2>About</h2>
|
| <p>Information about DJ Francois...</p>
|
| </div>
|
| </section>
|
|
|
| <section id="events">
|
| <div class="section-content">
|
| <h2>Events & Tickets</h2>
|
| <p>Upcoming events and ticket information...</p>
|
| </div>
|
| </section>
|
|
|
| <section id="bookings">
|
| <div class="section-content">
|
| <h2>Bookings</h2>
|
| <p>Booking information and contact details...</p>
|
| </div>
|
| </section>
|
|
|
| <script>
|
|
|
| const video = document.getElementById('hero-video');
|
| const playBtn = document.getElementById('play-btn');
|
| const volumeSlider = document.getElementById('volume-slider');
|
| const volumeIcon = document.getElementById('volume-icon');
|
|
|
| video.play();
|
|
|
| playBtn.addEventListener('click', () => {
|
| if(video.paused) {
|
| video.play();
|
| playBtn.classList.remove('fa-play');
|
| playBtn.classList.add('fa-pause');
|
| } else {
|
| video.pause();
|
| playBtn.classList.remove('fa-pause');
|
| playBtn.classList.add('fa-play');
|
| }
|
| });
|
|
|
| volumeSlider.addEventListener('input', (e) => {
|
| video.volume = e.target.value;
|
| volumeIcon.className = video.volume === 0 ? 'fas fa-volume-mute' : 'fas fa-volume-up';
|
| });
|
|
|
|
|
| document.querySelectorAll('.nav-links a').forEach(anchor => {
|
| anchor.addEventListener('click', function(e) {
|
| e.preventDefault();
|
| document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| behavior: 'smooth'
|
| });
|
| });
|
| });
|
| </script>
|
| </body>
|
| </html>
|
|
|
| |
| |
Comments