<?php
require 'db2.php';

$stmtb = $conn->prepare("Select * from my_updates where type='Pictures'");
$stmtb->execute();
$resultb = $stmtb->get_result();
//}

?>
<!DOCTYPE html>
<html lang="en">
<head>
		<!-- Mobile Specific Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- Author Meta -->
		<meta name="author" content="Amobi Moses Eche">
		<!-- Meta Description -->
		<meta name="description" content="Jacob Larry in Middle School is a compelling story about a middle schooler who encounters and overcomes significant challenges at the start of his middle school journey. Larry, the protagonist, grapples with various negative influences from both his family and society, which lead him into a series of problematic episodes throughout the book 
		
		Amobi Miracle Moses Eche is an eleven-year-old sixth grader at Great Oaks Legacy Charter School in New Jersey, United States of America. He lives with his parents in New Jersey.
		
		    .">
		<!-- Meta Keyword -->
		<meta name="keywords" content="sale books,Amobi,Moses, Eche, Jacob Larry in Middle School,Jacob, Larry, Middle School,https://www.amobimoseseche.com,www.amobimoseseche.com,amobimoseseche.com,good books to read,
best books to read,
best novels to read,
novels to read,
must read for middle schoolers,
recommended books to read,
story books to read,
a book to read,
the best books to read,
a must read,
jacob book,
books one must read,
Jacob Larry, middle school, children's book, school adventures, overcoming challenges, young readers, educational, fiction, Amobi Moses Eche">
		<!-- meta character set -->
		<meta charset="UTF-8">
		<!-- Site Title -->
		<title>Amobi Moses Eche</title>
		<link rel="icon" type="image/png" href="img/logo3.png" alt='Amobi Moses Eche'>
		<!--
		CSS
		============================================= -->
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/linearicons.css">
		<link rel="stylesheet" href="css/magnific-popup.css">
		<link rel="stylesheet" href="css/nice-select.css">
		<link rel="stylesheet" href="css/owl.carousel.css">
		<link rel="stylesheet" href="css/magnific-popup.css">
		<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
		<link rel="stylesheet" href="css/main-minified.css">
		
		  		<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"> 
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
		<!-- <link rel="stylesheet" href="css/main.css"> -->
		<style>
			
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  /* padding: 0 4px; */
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
p{
	color: #000;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: medium;
}

/* img {
  border: 5px solid #555;
} */






















        .gallery {
                display: grid;
                min-height: 500px;
                gap: 0.5rem;
                grid-template-columns: repeat(12, 100px);
                grid-template-rows: repeat(6, 100px);
                }
                .gallery img, .videoc {
                max-width: 200px;
                aspect-ratio: 1;
                display: grid;
                grid-column: span 2;
                object-fit: cover;
                clip-path: path("M 80 20 C 100 0 100 0 120 20 C 140 40 160 60 180 80 C 200 100 200 100 180 120 C 160 140 140 160 120 180 C 100 200 100 200 80 180 C 60 160 40 140 20 120 C 0 100 0 100 20 80 Z");
                transition: transform 0.3s ease, filter 0.3s ease, clip-path 0.3s ease;
                filter: blur(2px) saturate(138%) contrast(175%) invert(13%);
                }
                .gallery img:nth-of-type(7)  {
                grid-column: 2/span 2;
                }
                .gallery img:hover, .videoc:hover {
                clip-path: path("M 0 0 C 100 0 100 0 200 0 C 200 50 200 50 200 80 C 200 100 200 100 200 120 C 200 150 200 150 200 200 C 100 200 100 200 0 200 C 0 150 0 150 0 120 C 0 100 0 100 0 80 Z");
                filter: blur(0) saturate(100%) contrast(100%) invert(0);
                transform: scale(1.1);
                z-index: 3;
                }
                .gallery img:not(:hover), .videoc:not(:hover) {
                animation: Index 0.2s ease;
                }

                @keyframes Index {
                0%, 100% {
                    z-index: 1;
                }
                }
        /* Modal styles */
        /* .modal {
            position: fixed;
            z-index: 10;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
        } */

        .modal-content {
            margin: 15% ;
            padding: 20px;
            max-width: 90%;
            max-height: 90%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-content img,video {
            width: auto;
            max-width: 100%;
            max-height: 100%;
            border-radius: 10px;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #fff;
            font-size: 2rem;
            font-weight: bold;
            cursor: pointer;
        }
		</style>
	</head>
	<body>
		<div id="top"></div>
		<!-- Start Header Area -->
		<header class="default-header">
			<div class="sticky-header">
				<div class="container">
					<div class="row align-items-start align-items-lg-center">
						<div class="col-lg-9 col-sm-7">
							<nav class="navbar navbar-expand-lg navbar-light">
								<a class="brand" href="#"><img src="img/logo3.png" alt="Logo"></a>
								<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
								<span class="navbar-toggler-icon"></span>
								</button>
								<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
									<ul class="navbar-nav color-3">
										<li class="nav-item active">
											<a class="nav-link" href="index.php">Home </a>
										</li>
						
										<li class="nav-item">
											<a class="nav-link" href="gallery.php">Gallery<span class="sr-only">(current)</span></a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#contact">Contacts</a>
										</li>
									</ul>
								</div>
							</nav>
						</div>
						<div class="col-lg-3 col-sm-5 d-flex justify-content-end top-btn-group">
							<div class="sign-up-btn mr-20"><button class="btn-first color-2" data-toggle="modal" data-target="#myModal" id="buy"><span>BUY NOW</span></button></div>
							<div class="lang-select">
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!-- End Header Area -->
		<!-- Start Modal Login -->
		<div class="modal fade" id="myModal">
		    <!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog">-->
			<div class="modal-dialog" role="document">
				<div class="modal-content color-2">
					<a class="cross" data-dismiss="modal" aria-label="Close"><span class="lnr lnr-cross-circle"></span></a>
					<div class="total-content">
						<h3 style="color: orange;">Place Order</h3>
						<p>At the checkout page, select "Bank Transfer" as your preferred payment method or 
							you click <a href="">here</a> to buy Directly form <a href="">amazon.</a>
						</p><p>Note Down Payment Details:
							You will be provided with the necessary bank details for the transfer. This includes:
							<br>
							Bank Name:Access Bank<br>
							Account Name: Happiness Eche<br>
							Account Number: 0059182268<br>
							<!-- Bank Branch:
							Swift/BIC Code (for international transfers) -->
						</p><p>
							Review all details carefully and complete the transfer.
						</p><p>Send Payment Confirmation:
							Once the transfer is complete, take a screenshot or photo of the transfer confirmation.
							Email this confirmation along with your order number to our customer support at [your support email address].
						</p><p>Order Processing:
							
							Upon receiving your payment confirmation, we will process your order.
							You will receive an email confirmation once your payment is verified and your order is processed.
						</p><p>Delivery:
							
							Your book will be shipped to the address provided at checkout. You will receive a notification with tracking information once it is dispatched.
															</p>
						<div class="text-center">
							<p class="d-acount" style="color: orange;">Direct Bank Transfer? 
								<a data-dismiss="modal" aria-label="Close" data-toggle="modal" data-target="#myModaltwo">Click to Start Now</a>  <br>
								<a href="https://www.amazon.com/dp/9787849829?psc=1&ref_=cm_sw_r_cp_ud_ct_H4TVR16XD6VAPCWA1QES"
								 >Amazon Click here </a> 
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End Modal Login -->
		<!-- Start Modal Sign Up -->
		<div class="modal fade" id="myModaltwo" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content color-2">
					<a class="cross" data-dismiss="modal" aria-label="Close"><span class="lnr lnr-cross-circle"></span></a>
					<div class="total-content">
						<h3 style="color: navy;">Checkout Page</h3>
						<form action="sendemail.php" method="post" enctype="multipart/form-data">
							<div class="modal-input">
								<label style="color: orange;" for="orderid" >Order ID</label>
								<input id="orderid" placeholder="Your Full Name" name="orderid" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Order ID'" type="text" required>
							</div>
							<div class="modal-input">
								<label style="color: orange;" for="fName">Full Name</label>
								<input id="fName" placeholder="Your Full Name" name="fName" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Full Name'" type="Text" required>
							</div>
							<div class="modal-input">
								<label style="color: orange;" for="qty">Quatity</label>
								<input id="qty" placeholder="Quantity" name="qty" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Quatity'" type="number" required>
							</div>
							<div class="modal-input">
								<label style="color: orange;" for="email">Email Address</label>
								<input id="email" placeholder="Email Address" name="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address'" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" required>
							</div>
							<div class="modal-input">
								<label style="color: orange;" for="Address"> Address</label>
								<textarea id="address" placeholder="Delivery Address" name="Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Delivery Address'" cols="48" rows="6" required>
								</textarea>
							</div>
							<div class="modal-input">
								<label style="color: orange;" for="pass2">File Upload</label>
								<input id="file" class="password" placeholder="********" name="file" type="file">
							</div>
							<div class="remember">
								<div class="check-box"><i class="fa fa-check" aria-hidden="true"></i></div>
							</div>
							<button class="login-btn" name="Send">Send for Order</button>
						</form>
						<div class="text-center">
							<p class="d-acount" style="color: navy;">If you already have an account on Amazon, you can start here <a href="#" class="modal-2" data-dismiss="modal" aria-label="Close" data-toggle="modal" data-target="#myModal">login</a> here</p>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- <section class="banner-area color-3" style="background-image: url('img/bgiii.jpg');">
			<div class="container">
				<div class="row">
					<div class="col-lg-6">
						<div class="active-banner-carousel" >
							<div class="item" >
								<h1 class="text-white">Jacob Larry in Middle School: Embrace the Chaos</h1>
								<p class="text-white mt-20">Dive into the hilarious and heartfelt adventures of Jacob Larry as he navigates the wild ride of middle school, where friendships, challenges, and unexpected lessons await at every turn</p>
							</div>
							<div class="item">
								<h1 class="text-white">A Captivating Tale of Resilience and Growth</h1>
								<p class="text-white mt-20">Readers rave about this inspiring journey through the challenges of middle school, applauding its relatable characters and heartwarming message of overcoming adversity.</p>
							</div>
							<div class="item">
								<h1 class="text-white">A Must-Read Journey of Resilience and Growth</h1>
								<p class="text-white mt-20">Jacob Larry's inspiring story, where he faces life's toughest challenges with heart and humor, making this book a relatable and uplifting adventure for every middle schooler.</p>
							</div>
							<div class="item">
								<h1 class="text-white">Every one of these comments sounds a lot like self</h1>
								<p class="text-white mt-20">Jacob Larry's inspiring story, where he faces life's toughest challenges with heart and humor, making this book a relatable and uplifting adventure for every middle schooler.</p>
							</div>
							<div class="item">
								<h1 class="text-white">Example: I was a latchkey kid… …and everyone</h1>
								<p class="text-white mt-20">Be careful what you believe because that is what you will experience. Your belief system is a mechanism which is uniquely yours. It is powered by your desire and controlled by your thoughts and actions.</p>
							</div> 
						</div>
					</div>
				</div>
			</div>
		</section> -->






		<!-- End Cta -->
		<!-- Start Downloads -->
		<section id="download" class="section-full" style="background-image: url(img/wt2.jpg); background-repeat:round;">
			<div class="container">


				<div class="row justify-content-center mb-50">
					<h2>Pictures</h2>
                <section class="gallery"> 
				
                <?php
                			$count=1;
                            if ($resultb->num_rows > 0) {
                                        // Output data of each row
                            while($row = $resultb->fetch_assoc()) {
                                echo "<img src='uploads/".htmlspecialchars($row["filename"])."' alt='".htmlspecialchars($row["details"])."' >
								";
                                if($count =='17'){
									$count=1;
                                    echo "</section>
									<section class='gallery'>";
                                }
                                $count++;
                                 }
                            }
                    ?>
                    </section>
					
					<h2>Videos</h2>
					<section class="gallery">
					<?php
                			$count=1;
                            if ($resultb->num_rows > 0) {
                                        // Output data of each row
                            while($row = $resultb->fetch_assoc()) {
                                echo "<video src='uploads/".htmlspecialchars($row["filename"])."' alt='".htmlspecialchars($row["details"])."' class='videoc' >
								";
                                if($count =='17'){
									$count=1;
                                    echo "</section>
									<section class='gallery'>";
                                }
                                $count++;
                                 }
                            }
                    ?>
					</section>

			
			</div>

				<div class="row justify-content-center mb-50">
					<div class="col-md-8">
						<div class="section-head text-center">
							<h2 class="h1 mb-15">Media and Press Kit</h2>
							<p>You should be able to find several indispensable facts about motivation in the following paragraphs. If there’s at least one fact you didn’t know before, imagine the difference it</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<a href="img/podcast/1.opus" class="download-card color-3 mt-30 d-flex align-items-center">
							<span class="lnr lnr-download"></span>
							<p>Interview with Amobi podcast 1</p>
						</a>
					</div>
					<div class="col-md-6">
						<a href="img/podcast/2.opus" class="download-card color-3 mt-30 d-flex align-items-center">
							<span class="lnr lnr-download"></span>
							<p>Interview with Amobi podcast 2</p>
						</a>
					</div>
					<div class="col-md-6">
						<a href="img/podcast/3.opus" class="download-card color-3 mt-30 d-flex align-items-center">
							<span class="lnr lnr-download"></span>
							<p>Interview with Amobi podcast 3</p>
						</a>
					</div>
					<div class="col-md-6">
						<a href="img/podcast/4.opus" class="download-card color-3 mt-30 d-flex align-items-center">
							<span class="lnr lnr-download"></span>
							<p>Interview with Amobi podcast 4</p>
						</a>
					</div>
					<div class="col-md-6">
						<a href="img/podcast/5.opus" class="download-card color-3 mt-30 d-flex align-items-center">
							<span class="lnr lnr-download"></span>
							<p>Interview with Amobi podcast 5</p>
						</a>
					</div>
					<div class="col-md-6">
						<a href="img/podcast/6.opus" class="download-card color-3 mt-30 d-flex align-items-center">
							<span class="lnr lnr-download"></span>
							<p>Interview with Amobi podcast 6</p>
						</a>
					</div>
				</div>
					<br>
				<div class="row justify-content-center mb-50">
					<div class="col-md-8">
						<div class="section-head text-center">
							<h2 class="h1 mb-15">Press Kit (THISDAY LIVE News)</h2>
							<p>Life Through The Eyes of A Middle Schooler</p>
							<p><iframe src="https://www.thisdaylive.com/index.php/2024/03/10/life-through-the-eyes-of-a-middle-schooler" frameborder="0" style="width: 100%; height:800px;"></iframe>
							</p>
						</div>
					</div>
				</div>

			</div>
		</section>

		<!-- End Downloads -->
		<!-- Start Contact Area -->
		<!-- End Subscribe Area -->
		<!-- Start Footer -->
			<footer class="footer-1 footer-bg-1">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-lg-4">
						<div class="footer-content text-center">
							<h2 style="color: white;" >Instagram Handle</h2>
							<p class="mb-0"> 
							<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/C7c4Wwzu-wp/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> 
								<a href="https://www.instagram.com/p/C7c4Wwzu-wp/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/C7c4Wwzu-wp/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by @amobimme</a></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>
							</p>
							</div>
					</div>
					<div class="col-lg-4">
						<div class="footer-content text-center">
							<img src="img/logo3.png" alt="" class="footer-logo">
							<p><h2 style="color: white;" >Amobi Moses Eche</h2></p>
							<div class="social-link d-flex justify-content-center felx-wrap">
								<a href="https://www.facebook.com/codepixartheme/" class="social-btn color-3 footer-color-1"><i class="fa fa-facebook"></i></a>
								<a href="https://twitter.com/codepixer" class="social-btn color-3 footer-color-1"><i class="fa fa-twitter"></i></a>
								<a href="https://www.linkedin.com/in/codepixar/" class="social-btn color-3 footer-color-1"><i class="fa fa-linkedin"></i></a>
								<a href="https://plus.google.com/u/0/101799616645097409954" class="social-btn color-3 footer-color-1"><i class="fa fa-google-plus"></i></a>
								<a href="https://dribbble.com/codepixar" class="social-btn color-3 footer-color-1"><i class="fa fa-dribbble"></i></a>
								<a href="https://www.behance.net/codepixar" class="social-btn color-3 footer-color-1"><i class="fa fa-behance"></i></a>
							</div>
							<p class="color-3">Copyright &copy; 2024. All Rights Reserved   |   <a href="#">SLSE</a></p>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="footer-content text-center">
							
								<div class="widget-box w-100">
									<h2 style="color: white;">Facebook Handle</h2>
								   <p class="mb-0"> 
									<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fweb.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1135776057686798%26id%3D61560387773202%26substory_index%3D1135776057686798&show_text=true&width=500&is_preview=true" width="350" height="464" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
									<!-- <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffootprinteducationalservices&tabs=timeline&width=300&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> -->
									<!-- <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Famobimme&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> -->
								</p>
								</div>
							
						</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- End Footer -->
		<div id="myModalpix" class="modal">
			<span class="close">&times;</span>
			<div class="total-overlay">
				<div class="overlay-content">
			<div class="modal-content" style="width: fit-content; height: fit-content; text-align: center;margin-top: 200px;">
				<img id="modalImg" src="" alt="" >
			</div>
			</div>
		</div>
		</div>


		<div id="myModalvid" class="modal">
			<span class="close">&times;</span>
			<div class="total-overlay">
				<div class="overlay-content">
					<div class="modal-content" style="width: fit-content; height: fit-content; text-align: center;margin-top: 200px;">
					<video id="modalvid" src="" type="video/mp4" controls></video>
			</div>
			</div>
		</div>
		</div>


		<script src="js/vendor/jquery-2.2.4.min.js"></script>
		<!-- <script src="js/vendor/tether.min.js"></script> -->
		<script src="../../../cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
		<script src="js/vendor/bootstrap.min.js"></script>
		<script src="js/jquery.sticky.js"></script>
		<script src="js/jquery.nice-select.js"></script>
		<script src="js/owl.carousel.min.js"></script>
		<script src="js/jquery.magnific-popup.min.js"></script>
		<script src="js/jquery.ajaxchimp.min.js"></script>
		<script src="js/main.js"></script>
	
		<script>
			// Get the modal elements
			const modal = document.getElementById('myModalpix');
			const modalv = document.getElementById('myModalvid');
			const modalImg = document.getElementById('modalImg');
			const modalvid = document.getElementById('modalvid');
			const closeModal = document.querySelector('.close');
			const images = document.querySelectorAll('.gallery img');
			const videos = document.querySelectorAll('.gallery video');
	
			// Open modal on image click
			images.forEach(image => {
				image.addEventListener('click', () => {
					modal.style.display = "block";
					modalImg.src = image.src;
				});
			});
	
			videos.forEach(video => {
				video.addEventListener('click', () => {
					modalv.style.display = "block";
					modalvid.src = video.src;
					video.play();
				});
			});
			// Close modal when clicking on the close button
			closeModal.addEventListener('click', () => {
				modalv.style.display = "none";
				modal.style.display = "none";
			});
	
			// Close modal when clicking outside the image
			window.addEventListener('click', (event) => {
				if (event.target === modal) {
					modal.style.display = "none";
				}
				if (event.target === modalv) {
					modalv.style.display = "none";
					video.pause();
					video.currentTime = 0;
				}
			});
		</script>
		<script>

</script>
	</body>
</html>