<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9bf09374ec.js" crossorigin="anonymous"></script>
<link href="./bootstrap-5.0.2-dist/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Our Farm</title>
</head>
<body>
<!-- Navbar -->
<div class="container-fluid p-2 bg-p1Accent">
<nav class="container-md navbar navbar-expand-lg navbar-dark bg-p1Accent">
<!-- Show this only on mobile to medium screens -->
<a class="navbar-brand d-lg-none" href="./index.html">
<img src="./Assets/Images/ApiaryLogo.svg" alt="Logo" height="40px">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Use flexbox utility classes to change how the child elements are justified -->
<div class="collapse navbar-collapse justify-content-between" id="navbarToggle">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-nav" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-nav" href="./ourFarm.html">Our Farm</a>
</li>
<li class="nav-item">
<a class="nav-link text-nav" href="./contact.html">Contact Us</a>
</li>
</ul>
<!-- Show this only lg screens and up -->
<a class="navbar-brand d-none d-lg-block" href="./index.html">
<img src="./Assets/Images/ApiaryLogo.svg" alt="Logo" height="50rem">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-nav" href="./honey.html">Honey</a>
</li>
<li class="nav-item">
<a class="nav-link text-nav" href="./mead.html">Mead</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-ordernav" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Order Now!
</button>
</li>
</ul>
</div>
</nav>
</div>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-header2 p1Dark" id="staticBackdropLabel">Order Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="row g-2 d-flex align-items-center">
<div class="col-md-6">
<label for="formGroupExampleInput" class="form-label text-header3">Full Name</label>
<input type="email" class="form-control bg-p1Secondary text-body2" id="formGroupExampleInput" placeholder="Your Full Name">
</div>
<div class="col-md-6">
<label for="formGroupExampleInput" class="form-label text-header3">Contact Number</label>
<input type="email" class="form-control bg-p1Secondary text-body2" id="formGroupExampleInput" placeholder="Contact Number">
</div>
<div class="col-md-12">
<label for="formGroupExampleInput" class="form-label text-header3">Address</label>
<input type="email" class="form-control bg-p1Secondary text-body2" id="formGroupExampleInput" placeholder="Your Address">
</div>
<div class="col-md-6">
<label for="formGroupExampleInput" class="form-label text-header3">Product</label>
<select class="form-select form-select-md mt-2 bg-p1Secondary text-body2" aria-label=".form-select-lg example">
<option selected>Choose A Product</option>
<option value="H1">150G Honey</option>
<option value="H2">250G Honey</option>
<option value="H3">1.4KG Honey</option>
<option value="Mead">Valhalla - Craft Mead</option>
</select>
</div>
<div class="col-md-6">
<label for="formGroupExampleInput" class="form-label text-header3">Quantity</label>
<input type="email" class="form-control bg-p1Secondary text-body2" id="formGroupExampleInput" placeholder="Qty">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Close">Close</button>
<button type="button" class="btn btn-primary">Add To Cart</button>
</div>
</div>
</div>
</div>
<!-- Main -->
<section class="bg-p1Primary">
<div class="">
<div class="bg-banner text-center py-5 d-none d-md-block">
<h3 class="container-fluid text-title1 p1Primary">OUR FARM</h3>
</div>
<div class="row d-flex align-items-center my-3 py-md-5 sectionBannerHeight">
<div class="col-md-1"></div>
<div class="col-md-2">
<h4 class="text-title1 text-center p1Accent mb-2">OUR SToRY</h4>
</div>
<div class="col-md-1"></div>
<div class="col-md-7 px-4 mb-4">
<p class="text-body2 text-md-start text-center p1Dark">The 178 acres of farm land in Daet, Camarines Norte
is home to Cadie’s Apiary. Today, Cadie’s Apiary is a family owned and operated sustainable
apiary but our story starts way back to when our Master beekeeper, Andy, was a child living
on a dairy fair in Bicol Region. Growing up Andy was exposed to bees and beekeeping on his
family’s farm as well as neighboring farms. Andy never imagined that him and his family would
have created Cadie’s Apiary nor did they know how successful it would be! But he did know that
beekeeping was something he was extremely passionate about.
</p>
</div>
<div class="col-1"></div>
</div>
</div>
</section>
<!-- The Keeper -->
<section class="bg-p1Secondary p-2 sectionHeight">
<div class="d-flex justify-content-center">
<div class="row container gy-md-3 align-items-center py-5 py-md-2 sectionHeight">
<div class="col-md-1"></div>
<div class="col-md-5">
<img class="img-fluid d-none d-md-block" src="./Assets/Images/keeper.png" alt="bee keeper">
<img class="img-fluid d-block d-md-none p-3 p-sm-5" src="./Assets/Images/keeper2.png" alt="bee keeper">
</div>
<div class="col-md-5">
<h4 class="text-title1 p1Accent text-center text-md-start">THE KEEPER</h4>
<p class="text-body2 text-center text-md-start">If you’re wondering how a man who has worked most of his adult
life in the corporate world now runs a successful bee farm, I don’t blame you!
But actually, I am a certified Cornell Mastered beekeeper and I have been caring
for bees for many years of my life. Now, I choose to educate others who are looking to
become beekeepers. Not only do I choose to educate the public about beekeeping, but I
also stress the importance of focusing on the health and welfare of the bees as your
top priority. When you do that, the bees live happier, healthier more productive lives,
which in return enhances everything we do.
</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</section>
<!-- Visit Us -->
<section class="bg-p1Primary p-2 sectionHeight">
<div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 text-center">
<h3 class="text-title1 p1Accent my-3">
GIVE US A VISIT
</h3>
<div class="text-align-center">
<iframe
src="https://maps.google.com/maps?q=Mary's%20Farmville&t=&z=13&ie=UTF8&iwloc=&output=embed"
scrolling="no" marginheight="0" marginwidth="0" class="p1border gmaps my-3"></iframe>
</div>
<p class="text-header3 px-3"> WE WOULD LOVE TO SEE YOU HERE</p>
<p class="text-body2 px-3 mb-3">
We’re located at Purok 1 Barangay, Daet, 4600 Camarines Norte. We and our
hard working bees will love you see you here. See you!
</p>
</div>
<div class="col-md-2"></div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="p-2 bg-p1Accent">
<div class="container">
<div class="row align-items-center gy-3 gy-md-2">
<div class="col-md-4 order-3 order-md-1">
<a href="#">
<p class="text-header3 p1Dark text-center">About The Developer</p>
</a>
</div>
<div class="col-md-4 order-1 order-md-2 text-center">
<a href="#">
<img class="img-fluid footer-img image-fluid" src="./Assets/Images/Logo.png">
</a>
</div>
<div class="col-md-4 text-center order-2 order-md-3">
<p class="text-header3 p1Primary">Connect With Us</p>
<a href="#"><i class="p1Primary fa-lg fa-brands fa-facebook-square"></i></a>
<a href="#"></a><i class="mx-2 p1Primary fa-lg fa-brands fa-instagram"></i></a>
<a href="#"></a><i class="p1Primary fa-lg fa-brands fa-twitter"></i></a>
<a href="#"></a><i class="mx-2 p1Primary fa-lg fa-brands fa-tiktok"></i></a>
</div>
</div>
</div>
</footer>
<script src="./bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>