<div id='events-tabs'>
<ul>
<li><a href='dba' class="burgundy-bg">DBA</a></li>
<li><a href='member' class="grey-bg">Members</a></li>
<li><a href='other' class="lime-bg">Other</a></li>
</ul>
<div id="dba"><?php
renderEvents('dba');
?>
</div>
<div id="member"><?php
renderEvents('member');
?>
</div>
<div id="other"><?php
renderEvents('other');
?>
</div>
</div><!-- #events-tabs -->
<script>
var tabs = $( "#events-tabs ul");
var tab = tabs.find("a");
tab.each(function(){
var tablink = $(this).attr("href");
$(this).click(function(e){
e.preventDefault();
$("#"+tablink+"").fadeIn();
$(this).parent("li").addClass("current");
$(this).parent("li").siblings().removeClass("current");
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" />
<?php
define("BASE_PATH", './');
require_once 'render_util.php';
renderBeginPage('home');
renderHero();
renderNews();
renderEvents();
renderEndPage();
function renderHero()
{
$markup = <<<MARKUP
<div class='hero'>
<div class='header'><b>rescue</b> the mistreated | <b>save</b> the injured | <b>love</b> the abandoned</div>
<div class="adoptable"></div>
</div>
MARKUP;
echo $markup;
}
function renderNews()
{
$markup = <<<MARKUP
<div class="news">
<img class="faq-button" src="./images/faq_button.png" width="168" height="158">
<div class="header">
<img src="./images/recent_news_header.png" width="386" height="77">
</div>
<div class="body">
<div class="featured"></div>
