292 lines
13 KiB
PHP
292 lines
13 KiB
PHP
<?php include_once('header02.php');
|
||
?>
|
||
|
||
<style>
|
||
.gallery-slider-active {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
/* spacing between images */
|
||
justify-content: center;
|
||
}
|
||
|
||
.gallery-three-item {
|
||
width: 520px;
|
||
height: 300px;
|
||
overflow: hidden;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
background: #f9f9f9;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.gallery-three-item .image {
|
||
flex-grow: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.gallery-three-item img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
/* ensures aspect ratio while filling container */
|
||
display: block;
|
||
}
|
||
|
||
</style>
|
||
<!-- Page Banner Start -->
|
||
<?php
|
||
$bannerFolder = 'assets/images/banners/';
|
||
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
|
||
|
||
$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
|
||
if (!empty($bannerImages)) {
|
||
$randomBanner = $bannerImages[array_rand($bannerImages)];
|
||
}
|
||
?>
|
||
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
|
||
<!-- Overlay PNG -->
|
||
<div class="banner-overlay"></div>
|
||
<div class="container">
|
||
<div class="banner-inner text-white mb-50">
|
||
<h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">About</h2>
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
|
||
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
|
||
<li class="breadcrumb-item active">About</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Benefit Area start -->
|
||
<section class="benefit-area mt-100 rel z-1">
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-between">
|
||
<div class="col-xl-5 col-lg-6">
|
||
<div class="mobile-app-content rmb-55" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||
<div class="section-title counter-text-wrap mb-40">
|
||
<h2>Welcome to the Four Wheel Drive Club of Southern Africa!</h2>
|
||
</div>
|
||
<p style="max-width: 600px; margin: 0 auto;">
|
||
We're a family-friendly outdoor adventure club passionate about exploring the great outdoors through off-road driving, camping, overlanding, cross-border trips, day trips, and unforgettable events. Whether you're new to 4x4 adventures or a seasoned explorer, our community is all about camaraderie, responsible adventure, and creating lasting memories—on and off the road.
|
||
</p>
|
||
<ul class="list-style-two mt-35 mb-30">
|
||
<li>Overlanding</li>
|
||
<li>Camping</li>
|
||
<li>Day Trips</li>
|
||
<li>4x4 Driver Training</li>
|
||
<li>Family Events</li>
|
||
<li>Monthly Open Days</li>
|
||
<li>Guest Speakers</li>
|
||
<li>4x4 Driving Track</li>
|
||
</ul>
|
||
<!-- <a href="about.html" class="theme-btn style-two">
|
||
<span data-hover="Explore Guides">Explore Guides</span>
|
||
<i class="fal fa-arrow-right"></i>
|
||
</a> -->
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="benefit-image-part style-two">
|
||
<div class="image-one" data-aos="fade-down" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
|
||
<img src="assets/images/benefit/benefit1.png" alt="Benefit">
|
||
</div>
|
||
<div class="image-two" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
|
||
<img src="assets/images/benefit/benefit2.png" alt="Benefit">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Benefit Area end -->
|
||
|
||
<!-- Hotel Area start -->
|
||
<section class="hotel-area bgc-black py-100 rel z-1">
|
||
<div class="container-fluid">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-12">
|
||
<div class="section-title text-white text-center counter-text-wrap mb-70" data-aos="fade-up"
|
||
data-aos-duration="1500" data-aos-offset="50">
|
||
<h2>BASE4 Open Days</h2>
|
||
<p style="max-width: 60%; margin: auto;">Whether you're a member or just curious, everyone's welcome at our monthly open events. Come camp with us, enjoy guest speakers, take your rig for a spin on the 4x4 track, or just relax by the swimming pool. Saturday’s Open Day includes breakfast and lunch for sale, plus braai fires ready to go—just bring your tongs! It’s the perfect way to experience the spirit of the club and connect with fellow adventurers. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gallery-slider-active">
|
||
<?php
|
||
$folder = 'assets/images/opendays/';
|
||
$images = glob($folder . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
|
||
|
||
// Shuffle and pick first 5
|
||
shuffle($images);
|
||
$selected = array_slice($images, 0, 10);
|
||
|
||
foreach ($selected as $image) {
|
||
echo '<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||
<div class="image">
|
||
<img src="' . $image . '" alt="Gallery">
|
||
</div>
|
||
|
||
</div>';
|
||
}
|
||
?>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="hotel-more-btn text-center mt-40">
|
||
<a href="destination2.html" class="theme-btn style-four">
|
||
<span data-hover="Explore More Hotel">Explore More Hotel</span>
|
||
<i class="fal fa-arrow-right"></i>
|
||
</a>
|
||
</div> -->
|
||
</div>
|
||
</section>
|
||
<!-- Hotel Area end -->
|
||
|
||
|
||
<!-- Features Area start -->
|
||
<section class="features-area pt-100 pb-45 rel z-1">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-xl-6">
|
||
<div class="features-content-part mb-55" data-aos="fade-left" data-aos-duration="1500"
|
||
data-aos-offset="50">
|
||
<div class="section-title mb-20">
|
||
<h2>Want to get involved?<b>JOIN THE COMMITTEE!</b></h2>
|
||
<p>Want to be more involved in the adventure? Join our committee and help shape the future of the club! Whether it’s planning epic trips, organizing fun events, or assisting with training, your energy and ideas make all the difference. The club runs on the passion of its members—get stuck in, meet awesome people, and be part of what makes it all happen!</p>
|
||
<div class="image">
|
||
<img style="border-radius:10px;" src="assets/images/memories/40.jpg" alt="Hotel">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
|
||
<div class="row pb-25">
|
||
<div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up"
|
||
data-aos-duration="1500" data-aos-offset="50">
|
||
<h2>4WDCSA Committee and Other Office Bearers</h2>
|
||
<div>
|
||
<h3>Committee</h3>
|
||
<li>Chairman - John Runciman</li>
|
||
<li>National Liaison - Peter Hutchison</li>
|
||
<li>Treasurer - Doug Timm</li>
|
||
<li>Outings - John Runciman</li>
|
||
<li>Events - Noelene Runciman</li>
|
||
<li>Driver Training - John Runciman</li>
|
||
<li>Digital Media - Christopher Pinto</li>
|
||
|
||
</div>
|
||
<div class="pt-30 pb-20">
|
||
<h3>Administration</h3>
|
||
<li>Secretary - Jacqui Boshoff</li>
|
||
|
||
</div>
|
||
<p style="font-size:0.8rem;">
|
||
All portfolio holders/committee members of the 4WDCSA are volunteers and are not paid for their services.<br>The secretary is paid for administrative duties only.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Features Area end -->
|
||
|
||
|
||
<!-- Hotel Area start -->
|
||
<section class="hotel-area bgc-black py-100 rel z-1">
|
||
<div class="container-fluid">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-12">
|
||
<div class="section-title text-white text-center counter-text-wrap mb-70" data-aos="fade-up"
|
||
data-aos-duration="1500" data-aos-offset="50">
|
||
<h2>4x4 Memories</h2>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gallery-slider-active"><?php
|
||
$folder = 'assets/images/memories/';
|
||
$images = glob($folder . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
|
||
|
||
// Shuffle and pick first 5
|
||
shuffle($images);
|
||
$selected = array_slice($images, 0, 20);
|
||
|
||
foreach ($selected as $image) {
|
||
echo '<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||
<div class="image">
|
||
<img src="' . $image . '" alt="Gallery">
|
||
</div>
|
||
|
||
</div>';
|
||
}
|
||
?>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="hotel-more-btn text-center mt-40">
|
||
<a href="destination2.html" class="theme-btn style-four">
|
||
<span data-hover="Explore More Hotel">Explore More Hotel</span>
|
||
<i class="fal fa-arrow-right"></i>
|
||
</a>
|
||
</div> -->
|
||
</div>
|
||
</section>
|
||
<!-- Hotel Area end -->
|
||
|
||
<!-- CTA Area start -->
|
||
<section class="cta-area pt-100 rel z-1">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-duration="1500" data-aos-offset="50">
|
||
<div class="cta-item" style="background-image: url(assets/images/trips/1_01.jpg);">
|
||
<span class="category">Extended Trips</span>
|
||
<h2>Come and Explore Africa and beyond</h2>
|
||
<a href="trips.php" class="theme-btn style-two bgc-secondary">
|
||
<span data-hover="Explore Tours">Explore Trips</span>
|
||
<i class="fal fa-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-delay="50" data-aos-duration="1500" data-aos-offset="50">
|
||
<div class="cta-item" style="background-image: url(assets/images/courses/driver_training.png);">
|
||
<span class="category">Driver Training</span>
|
||
<h2>Level up your 4x4 Driving Skills</h2>
|
||
<a href="driver_training.php" class="theme-btn style-two">
|
||
<span data-hover="Explore Tours">Explore Training</span>
|
||
<i class="fal fa-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-md-6" data-aos="zoom-in-down" data-aos-delay="100" data-aos-duration="1500" data-aos-offset="50">
|
||
<div class="cta-item" style="background-image: url(assets/images/base4/camping.jpg);">
|
||
<span class="category">Events</span>
|
||
<h2>See whats cooking at BASE4!</h2>
|
||
<a href="events.php" class="theme-btn style-two bgc-secondary">
|
||
<span data-hover="Explore Tours">Explore Events</span>
|
||
<i class="fal fa-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- CTA Area end -->
|
||
|
||
|
||
<!-- Blog Area start -->
|
||
<section class="blog-area pt-70 rel z-1">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Blog Area end -->
|
||
|
||
|
||
<?php include_once("insta_footer.php"); ?>
|