← back to Jill Website
views/video-demo.ejs
204 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experience Nosara - Nosara Beachfront Rentals</title>
<meta name="description" content="Watch videos to get a feel for Nosara, Costa Rica - surfing, beaches, yoga, and the pura vida lifestyle before your visit.">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Stylesheets -->
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/video.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2><a href="/" style="text-decoration: none; color: inherit;">Nosara Beachfront</a></h2>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">Home</a></li>
<li><a href="/#properties" class="nav-link">Properties</a></li>
<li><a href="/beaches" class="nav-link">Beaches</a></li>
<li><a href="/#contact" class="nav-link">Contact</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" style="background: linear-gradient(135deg, rgba(44, 95, 141, 0.6) 0%, rgba(22, 160, 133, 0.6) 100%),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=85&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3'); background-size: cover; background-position: center;">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">Experience Nosara</h1>
<p class="hero-subtitle">Watch videos to get a feel for this beautiful destination before your visit</p>
</div>
</div>
</section>
<!-- Experience Nosara Videos Section -->
<section class="experiences" style="padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Discover Nosara Through Video</h2>
<p>Real footage of surfing, beaches, and the pura vida lifestyle</p>
</div>
<div class="video-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem;">
<!-- Surfing Nosara -->
<div class="video-card" style="background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
<div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/nmgXeSFLPzs"
title="Daily Surf Report - Nosara"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div style="padding: 1.5rem;">
<h3 style="margin: 0 0 0.5rem; color: var(--primary-color);">Daily Surf Report</h3>
<p style="margin: 0; color: #666;">Watch daily surf conditions from Coconut Harry's at Playa Guiones</p>
</div>
</div>
<!-- CNS Surf Contest -->
<div class="video-card" style="background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
<div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/IQteiqWsKfw"
title="CNS Surf Contest - Playa Guiones"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div style="padding: 1.5rem;">
<h3 style="margin: 0 0 0.5rem; color: var(--primary-color);">CNS Surf Contest</h3>
<p style="margin: 0; color: #666;">Experience the competitive surf scene at Playa Guiones</p>
</div>
</div>
<!-- Surfing Nosara Interview -->
<div class="video-card" style="background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
<div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/ps867Yk-3KE"
title="Surfing Nosara - Community"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div style="padding: 1.5rem;">
<h3 style="margin: 0 0 0.5rem; color: var(--primary-color);">Surfing Nosara Community</h3>
<p style="margin: 0; color: #666;">Meet the local surf community and learn about life in Nosara</p>
</div>
</div>
<!-- Costa Rica Travel -->
<div class="video-card" style="background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
<div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/DKlFEndhQVc"
title="Travel with me to Costa Rica"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div style="padding: 1.5rem;">
<h3 style="margin: 0 0 0.5rem; color: var(--primary-color);">Travel to Costa Rica</h3>
<p style="margin: 0; color: #666;">Follow along on a trip through beautiful Costa Rica</p>
</div>
</div>
<!-- Surfing Foundation Event -->
<div class="video-card" style="background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
<div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/cep19OxBN7A"
title="Surfing Nosara Foundation"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div style="padding: 1.5rem;">
<h3 style="margin: 0 0 0.5rem; color: var(--primary-color);">Surfing Nosara Foundation</h3>
<p style="margin: 0; color: #666;">Support local youth through the Surfing Nosara Foundation</p>
</div>
</div>
<!-- Monteverde Travel -->
<div class="video-card" style="background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
<div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/NFh7uOF7dYw"
title="Monteverde Costa Rica"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div style="padding: 1.5rem;">
<h3 style="margin: 0 0 0.5rem; color: var(--primary-color);">Explore Monteverde</h3>
<p style="margin: 0; color: #666;">Day trip to the famous cloud forests of Monteverde</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="contact" style="padding: 5rem 0; background: var(--light);">
<div class="container">
<div class="section-header">
<h2>Ready to Experience Nosara?</h2>
<p>Book your beachfront property and start your adventure</p>
</div>
<div style="text-align: center; margin-top: 2rem;">
<a href="/#properties" class="btn-primary" style="padding: 1.2rem 2.5rem; font-size: 1.1rem; border-radius: 50px; text-decoration: none; display: inline-block; background: var(--primary-color); color: var(--white);">
View Available Properties <i class="fas fa-arrow-right"></i>
</a>
<a href="/#contact" class="btn-secondary" style="padding: 1.2rem 2.5rem; font-size: 1.1rem; border-radius: 50px; text-decoration: none; display: inline-block; margin-left: 1rem; background: var(--accent-color); color: var(--white);">
Contact Us <i class="fas fa-envelope"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer style="background: var(--dark); color: white; padding: 2rem 0; text-align: center;">
<div class="container">
<p>© <%= currentYear %> Nosara Beachfront Rentals. All rights reserved.</p>
</div>
</footer>
<!-- Scripts -->
<script src="/js/main.js"></script>
<script src="/js/video.js"></script>
</body>
</html>