
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>

    <!-- Open Graph Meta Tags -->
            <meta property="og:title" content="Article Not Found">
        <meta property="og:description" content="Sorry, the article you're looking for is not available.">
        <meta property="og:image" content="https://mitinpod.co.uk/default-image.jpg">
        <meta property="og:url" content="https://mitinpod.co.uk">
        <meta property="og:type" content="website">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Home">
    <meta name="twitter:description" content="<br />
<b>Warning</b>:  Undefined variable $description in <b>C:\xampp\htdocs\mitinpod\public\navbar.php</b> on line <b>49</b><br />
...">
    <meta name="twitter:image" content="https://mitinpod.co.uk/pages/Article_photos/mitinPod logo (500 x 500 px).png">

    <!-- Social Sharing Buttons (AddToAny) -->
    <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
        <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
        <a class="a2a_button_facebook"></a>
        <a class="a2a_button_whatsapp"></a>
    </div>
    <script defer src="https://static.addtoany.com/menu/page.js"></script>
</head>

   
   
   
   <link rel="manifest" href="../webmanifest.json"> 
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/> 

  <style>
  #content,
    #events,
    #articles {
      background-color: #f5f5f5;
      /* Adjust the color as desired */
    }

	.more-icon,
	.h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
	h5,
    h6 {
      color: #ff4507;
      font-family: math;
    }

    .card-img-top {
      height: 140px;
    }

    .navbar-brand, .navbar-brand:hover {
      color: #ff4507;
    }

    .navbar {
      background-color: #fff;
      color: #ff4507;;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
      /* Add the shadow */
	  border-bottom:1px solid #ff4507;
	  padding:0px;
    }

    /* Updated style rule for active and hover states */
   
    .navbar-nav .nav-link {
	  color: #ff4507;
      text-decoration: none;
      /* Remove default underline */
      position: relative;
      transition: color 0.8s;
      /* Transition for the text color */
    }

    .navbar-nav .nav-link:hover {
      color: #ff4507;
      /* Hover text color */
    }

    .navbar-nav .nav-link.active {
      color: #ff4507;
      /* Active text color */
      text-decoration: underline solid #ff4507;
      /* Active underline */
      text-decoration-thickness: 10%;
    }

    .card-img-top {
      width: 286px;
      height: 180px;
      object-fit: cover;
      /* To maintain aspect ratio */
    }

    .img-fluid {
      height: 240px;
	  
	 
    }
	
.navbar button[aria-expanded="true"] > span.close {
   display: inline;
   color:#ff4507;
}

.navbar button[aria-expanded="true"] > span.navbar-toggler-icon {
   display: none;
}

.navbar button[aria-expanded="false"] > span.close {
   display: none;
}

.comments {
	background-color: #e5e5e5d9;
}

.comment-name{
	background-color: white;
}

.jumbotron{
	padding-top:40px;
}

 .btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff4507;
  --bs-btn-border-color: #ff4507;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #07c4ff;
  --bs-btn-hover-border-color: #07c4ff;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #07c4ff;
  --bs-btn-active-border-color: #07c4ff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
  width:100%; 
  display:block;
}

.btn-secondary{
	width:100%; 
  display:block;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon,
.navbar-toggler-icon:focus{
border:none;
box-shadow:none;
outline:none;
}


.navbar-toggler-icon {
--bs-navbar-toggler-icon-bg: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3e%3cpath stroke="%23ff4507" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/%3e%3c/svg%3e');
}
footer h5{
 color:#07c4ff;
}

.small, small {
    font-size: x-small;
}

section a{
	text-decoration:none;
}

.card-title{
	color:#07c4ff;
}

.more-icon{
	
}
  </style>

</head>

<body class="d-flex flex-column min-vh-100">

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="../pages/logo/mitin.png" width="70" height="30" alt=""></a>
    <button class="navbar-toggler" id="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      <span class="close py-1 fas fa-times"><i class="bi bi-x-lg"></i></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav text-center flex-grow-1"> <!-- Use flex-grow-1 to make the list items fill the available space -->
        <li class="nav-item">
          <a class="nav-link active" href="index">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="public_articles">Articles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="public_events">Events</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right text-center">
        <li class="nav-item">
         <a class="nav-link" href="../pages/index">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>




 

<div class="jumbotron jumbotron-fluid">
  <div class="container mt-3">
    <h1 class="display-4">Welcome to mitinPod</h1>
    <p class="lead">Explore articles and events covering various topics.</p>
  </div>
</div>

<div class="container mt-3">
  <div class="row">

    <!-- Articles Section -->
   <section id="articles" class="col-md-6 d-flex flex-column">
  <h2 class="mb-2 pt-2">Articles</h2>
      <a href="public_articles?ArticleID=4" class="card flex-grow-1 mb-4">
      <img class="img-fluid"
        src="../pages/Article_photos/668ad2f11aaa2_social_group.jpg" class="card-img-top col-sm-6"
        alt="Social Groups, Your Anchor">
      <div class="card-body">
        <h5 class="card-title">Social Groups, Your Anchor</h5>
        <p class="card-text"><p>Moving to a new country with a vastly different culture can be an enriching adventure. However, i...</p>
        <span class="more-icon">>> More</span>
      </div>
    </a>
    </section>

<!-- Events Section -->
<section id="events" class="col-md-6 d-flex flex-column">
  <h2 class="mb-2 pt-2">Events</h2>
      <a href="public_events?EventID=5" class="card flex-grow-1 mb-4">
      <img class="img-fluid"
        src="../pages/Event_flyers/family_funfair.jpg" class="card-img-top"
        alt="Family Fun Day">
      <div class="card-body">
        <h5 class="card-title">Family Fun Day</h5>
        <p class="card-text">03/08/2024 at
          TBC</p>
        <span class="more-icon">>> More</span>
      </div>
    </a>
    </section>


  </div>
</div>


   <footer class="footer mt-auto py-3" Style="background-color:#000;">
    <div class="container text-center">
        <span class="text-muted"><h5>mitinPod by JEwu Tech</h5> <hr style = "border-top: 1px solid #fff;">
		<p class="mb-0" style="color:#fff;">Copyright &copy; mitinPod 2024</p>
		</span>
    </div>
</footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

 <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('../sw.js')
                    .then((reg) => {
                        console.log('Service worker registered.', reg);
                    })
                    .catch((err) => {
                        console.error('Service worker registration failed:', err);
                    });
            });
        }
    </script>

</body>
</html>
