1<script> 2 const uid = '2167#6ac1b2bb9572f'; 3 const client_id = '2167'; 4 console.log(uid); 5</script>
5 6 7<!DOCTYPE html> 8<html lang="en"> 9<head> 10 <meta charset="UTF-8" /> 11 <meta name="viewport" content="width=device-width, initial-scale=1" /> 12 <title></title> 13 14 <!-- Basic SEO --> 15 <meta name="description" content="At Newark Youth London, we are committed to creating meaningful opportunities for young people and the wider community." /> 16 <meta name="author" content="Newark Youth London" /> 17 <meta name="robots" content="index, follow" /> 18 19 <!-- Open Graph / Facebook --> 20 <meta property="og:type" content="website" /> 21 <meta property="og:url" content="https://newark.org.uk/" /> 22 <meta property="og:title" content="Newark Youth London" /> 23 <meta property="og:description" content="At Newark Youth London, we are committed to creating meaningful opportunities for young people and the wider community." /> 24 <meta property="og:image" content="https://newark.org.uk/assets/images/logo/logo.png" /> 25 <meta property="og:site_name" content="Newark Youth London" /> 26 27 <!-- Twitter --> 28 <meta name="twitter:card" content="summary_large_image" /> 29 <meta name="twitter:url" content="https://newark.org.uk/" /> 30 <meta name="twitter:title" content="Newark Youth London" /> 31 <meta name="twitter:description" content="At Newark Youth London, we are committed to creating meaningful opportunities for young people and the wider community." /> 32 <meta name="twitter:image" content="https://newark.org.uk/assets/images/logo/logo.png" /> 33 <meta name="twitter:creator" content="@YourTwitterHandle" /> 34 35 <!-- Favicons and Icons --> 36 <link rel="shortcut icon" href="https://newark.org.uk/assets/images/icon/icon.png" type="image/png" /> 37 <link rel="icon" href="https://newark.org.uk/assets/images/logo/logo.png" type="image/png" sizes="16x16" /> 38 <link rel="apple-touch-icon" href="https://newark.org.uk/assets/images/logo/logo.png" /> 39 40 <!-- Microsoft Tile --> 41 <meta name="msapplication-TileImage" content="https://newark.org.uk/assets/images/logo/logo.png" /> 42 43 <!-- Google Fonts --> 44 <link rel="preconnect" href="https://fonts.googleapis.com"> 45 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 46 <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900,1,100..900&display=swap" rel="stylesheet"> 47 48 <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet"> 49 50 <!-- CSS --> 51 <link rel="stylesheet" href="https://newark.org.uk/assets/css/owl.css" /> 52 <link rel="stylesheet" href="https://newark.org.uk/assets/css/style.css" /> 53 <link rel="stylesheet" href="https://newark.org.uk/assets/css/responsive.css" /> 54 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"> 55 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> 56 <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css"> 57 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
58<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
58 59 <style> 60 body p{ 61 font-family:"Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; 62 font-size:17px !important; 63 } 64 </style> 65 66 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 67
67<script src="https://newark.org.uk/assets/js/jquery.js"></script>
67 68 69 <!-- Magnific Popup CSS & JS --> 70<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
71<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
71 72 73 <!-- Page Name Slide Script --> 74
74<script> 75 window.addEventListener('DOMContentLoaded', () => { 76 const path = window.location.pathname.toLowerCase(); 77 let page = ''; 78 79 if (path.includes('/about')) { 80 page = 'About'; 81 } else if (path.includes('/services')) { 82 page = 'Services'; 83 } else if (path.includes('/products')) { 84 page = 'Products'; 85 } else if (path.includes('/blog')) { 86 page = 'Blog'; 87 } else { 88 page = path.split("/").pop(); 89 page = page.split(".")[0]; 90 page = page.replace(/-/g, " "); 91 page = page.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" "); 92 } 93 94 if (page === "") page = "Home"; 95 96 const showDiv = document.getElementById('showPageName'); 97 showDiv.innerText = page; 98 99 setTimeout(() => { 100 showDiv.classList.add('show'); 101 setTimeout(() => { 102 showDiv.classList.remove('show'); 103 showDiv.classList.add('hide'); 104 }, 3000); 105 }, 2000); 106 }); 107 </script>
107 108 109 <style> 110 #deskNav{ 111 z-index:999 !important; 112 } 113 #showPageName { 114 display: inline-block; 115 background-color: #002262; 116 color: #fff; 117 padding: 0.5rem 2rem; 118 border-radius: 4px; 119 font-weight: 600; 120 font-size: 1.5rem; 121 border: 1px solid #fff; 122 position: fixed; 123 bottom: 50%; 124 right: -100%; 125 max-width: fit-content; 126 white-space: nowrap; 127 z-index: 9999; 128 box-shadow: 0 4px 12px rgba(0,0,0,0.2); 129 transition: right 1.5s ease; 130 border-radius:35px; 131 } 132 #showPageName.show { right: 20px; } 133 #showPageName.hide { right: -100%; } 134 </style> 135 136<style> 137#bannerNav a { 138 color: white; 139 text-decoration: none; 140 font-size:20px 141} 142#bannerNav a:hover { 143 text-decoration: underline; 144} 145</style> 146
147<script> 148document.addEventListener('DOMContentLoaded', () => { 149 const banner = document.getElementById('bannerNav'); 150 if (!banner) return; // element না থাà¦à¦²à§ exit 151 152 // Get current URL path 153 let path = window.location.pathname.replace(/^\/|\/$/g, ''); 154 const parts = path.split('/'); 155 156 // Build breadcrumb HTML 157 let html = '<i class="fa fa-home"></i> <a href="/">Home</a>'; 158 159 if (parts.length >= 1 && parts[0]) { 160 const category = parts[0].replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); 161 html += ` <i class="fa fa-caret-right"></i> <span class="categoryName">${category}</span>`; 162 } 163 164 if (parts.length >= 2 && parts[1]) { 165 const page = parts[1].replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); 166 html += ` <i class="fa fa-caret-right"></i> <span class="pageName">${page}</span>`; 167 } 168 169 // Insert into DOM 170 banner.innerHTML = html; 171}); 172 173</script>
173 174</head> 175<body id="myBody"> 176 177<div id="showPageName" class="page-name"></div> 178<!-- preloader start --> 179<div id="loading"> 180 <div class="loader-container"> 181 <div class="logo-circle"> 182 <img src="https://newark.org.uk/assets/images/logo/40.png" alt="Logo" class="logoSp" /> 183 <span class="ripple ripple1"></span> 184 <span class="ripple ripple2"></span> 185 <span class="ripple ripple3"></span> 186 </div> 187 </div> 188</div> 189<!-- preloader end --> 190 191<style> 192#loading { 193 background-color: royalblue; 194 height: 100%; 195 width: 100%; 196 position: fixed; 197 z-index: 99999; 198 top: 0; 199 left: 0; 200 display: flex; 201 justify-content: center; 202 align-items: center; 203 transition: opacity 0.6s ease; /* smooth fade */ 204} 205 206.loader-container { 207 position: relative; 208 width: 120px; 209 height: 120px; 210} 211 212.logo-circle { 213 position: relative; 214 width: 100%; 215 height: 100%; 216 display: flex; 217 justify-content: center; 218 align-items: center; 219} 220 221.logoSp { 222 width: 80px; 223 height: 80px; 224 z-index: 3; 225} 226 227.ripple { 228 position: absolute; 229 width: 100%; 230 height: 100%; 231 border: 5px solid #ffc107; 232 border-radius: 50%; 233 opacity: 0; 234 animation: ripple-wave 2s infinite; 235} 236 237.ripple1 { animation-delay: 0s; } 238.ripple2 { animation-delay: 0.6s; } 239.ripple3 { animation-delay: 1.2s; } 240 241@keyframes ripple-wave { 242 0% { 243 transform: scale(0.5); 244 opacity: 0.9; 245 } 246 100% { 247 transform: scale(2); 248 opacity: 0; 249 } 250} 251</style> 252
253<script> 254// Fade-out preloader when full page loaded 255window.addEventListener('load', function () { 256 const preloader = document.getElementById('loading'); 257 preloader.style.opacity = '0'; // start fade-out 258 259 // wait until CSS transition ends, then hide element 260 preloader.addEventListener('transitionend', () => { 261 preloader.style.display = 'none'; 262 }); 263}); 264</script>
264 265 266 267 268 269 270<style> 271marquee div, marquee p { 272 display: inline !important; 273 white-space: nowrap !important; 274 margin: 0 !important; 275 padding: 0 !important; 276} 277</style> 278<style> 279 .navbar-toggler-icon { 280 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; 281} 282 .navbar{ 283 padding: 0 10px !important; 284 } 285 .mega-menu-content{ 286 border-left: 1px solid #ccc; 287 } 288 289 .content-panel{ 290 padding:20px !important 291 } 292 293 h6 a{ 294 color:#096BC9; 295 text-decoration: none; 296 } 297 .submenu a{ 298 text-decoration: none; 299 color:#096BC9 !important; 300 } 301 .submenu a.small{ 302 text-decoration: none; 303 color:#ddd !important; 304 } 305 306.mega-menu-categories button { 307 display: flex; 308 flex-direction: column; 309 align-items: center; 310 justify-content: center; 311 gap: 6px; 312 width: 100%; 313 background: none; 314 border: none; 315 text-align: center; 316 padding: 16px 12px; 317 border-radius: 10px; 318 font-size: 14px; 319 cursor: pointer; 320 transition: all 0.3s; 321} 322 323.mega-menu-categories button i { 324 font-size: 22px; 325 color: #096BC9; 326} 327 328.mega-menu-categories button.active, 329.mega-menu-categories button:hover { 330 background: linear-gradient(90deg, #096BC9, #4169e1); 331 color: #fff; 332 font-weight: bold; 333} 334 335.mega-menu-categories button.active i, 336.mega-menu-categories button:hover i { 337 color: #fff; 338} 339 340.submenu a { 341 transition: background 0.3s, color 0.3s; 342 border-radius: 8px; 343 padding: 10px 12px; 344} 345 346.submenu a:hover { 347 background: linear-gradient(90deg, #096BC9, #002262); 348 color: #fff !important; 349} 350.submenu a.small:hover { 351 color: #fff !important; 352} 353.highlight-box{ 354 margin-top: 3px; 355} 356.highlight-box img { 357 transition: transform 0.4s ease, box-shadow 0.4s ease; 358 border-radius: 10px; 359} 360 361.highlight-box img:hover { 362 box-shadow: 0 6px 18px rgba(0,0,0,0.2); 363} 364.mega-menu-categories button i { 365 font-size: 40px; 366 color: #096BC9; 367 text-align: center; 368} 369.mega-menu-categories button.active i { 370 color: #fff; 371} 372#deskNav{ 373 position:fixed; 374 width: 100%; 375 top:20px; 376 z-index: 99; 377} 378.menu-item:hover{ 379 transform: scale(1.05); 380 transition: .5s; 381} 382.menu-item{ 383 transform: scale(1); 384 transition: .5s; 385 cursor: pointer; 386} 387.nav-item.position-relative:hover .submenu { 388 display: block !important; 389} 390#deskNav{ 391 transform: translateY(0); 392 opacity: 1; 393 transition: transform 0.4s ease, opacity 0.4s ease; 394 395} 396#deskNav.hide { 397 transform: translateY(-100%); 398 opacity: 0; 399} 400</style> 401 402<div id="deskNav"> 403<nav class="navbar navbar-expand-lg navbar-custom"> 404 <div class="container-fluid" style="padding:0"> 405 <a class="navbar-brand" href="https://newark.org.uk/"><img src="https://newark.org.uk/assets/images/logo/logo.png" style="height:120px"></a> 406 407 <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu"> 408 <span class="navbar-toggler-icon"></span> 409 </button> 410 411 <div class="collapse navbar-collapse" id="mainMenu"> 412 <ul class="navbar-nav mx-auto"> 413 <!-- NORMAL LINKS --> 414 <li class="nav-item position-relative"> 415 <a class="nav-link d-flex align-items-center" href="#" id="resourcesLink"> 416 <i class="fas fa-info-circle"></i> About Us 417 <span class="ms-1 dropdown-toggle"></span> 418 </a> 419 <div class="submenu position-absolute bg-white shadow rounded p-3" style="display: none; top: 100%; left: 0; min-width: 250px;"> 420 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/about"> 421 <strong><i class="fas fa-info"></i> About</strong><br> 422 <small class="">Team members working with us.</small> 423 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/timeline"> 424 <strong><i class="fas fa-clock"></i> Timeline</strong><br> 425 <small>Our journey through the years.</small> 426 </a> 427 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/our-people"> 428 <strong><i class="fas fa-blog"></i>
428 Our People</strong><br> 429 <small class="">Team members working with us.</small> 430 </a> 431 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/our-governance"> 432 <strong><i class="fas fa-file-alt"></i> Our Governance</strong><br> 433 <small class="">Structure for organized management.</small> 434 </a> 435 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/volunteer"> 436 <strong><i class="fas fa-book"></i> Volunteer</strong><br> 437 <small class="">Help us achieve our goals.</small> 438 </a> 439 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/contact"> 440 <strong><i class="fas fa-phone-alt"></i> Contact</strong><br> 441 <small class="">Reach us anytime easily.</small> 442 </a> 443 </div> 444 </li> 445 <!-- NORMAL LINKS --> 446 <li class="nav-item position-relative"> 447 <a class="nav-link d-flex align-items-center" href="#" id="products1"> 448 <i class="fas fa-box"></i> What We Do 449 <span class="ms-1 dropdown-toggle"></span> 450 </a> 451 <div class="submenu position-absolute bg-white shadow rounded p-3" style="display: none; top: 100%; left: 0; min-width: 520px;"> 452 <div class="row"> 453 <div class="col-md-6"> 454 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/youth-clubs"> 455 <strong><i class="fas fa-users"></i> Youth Clubs</strong><br> 456 <small class="">Join sports and activities here.</small> 457 </a> 458 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/sports-sessions"> 459 <strong><i class="fas fa-basketball-ball"></i> Sports Sessions</strong><br> 460 <small class="">Various games every week session.</small> 461 </a> 462 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/holiday-programme"> 463 <strong><i class="fas fa-plane-departure"></i> Holiday Programme</strong><br> 464 <small class="">Fun events during holidays here.</small> 465 </a> 466 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/football"> 467 <strong><i class="fas fa-futbol"></i> Football</strong><br> 468 <small class="">Training and matches weekly scheduled.</small> 469 </a> 470 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/women-and-girls"> 471 <strong><i class="fas fa-female"></i> Women and Girls</strong><br> 472 <small class="">Programs for women and girls.</small> 473 </a> 474 </div> 475 <div class="col-md-6"> 476 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/employability"> 477 <strong><i class="fas fa-briefcase"></i> Employability</strong><br> 478 <small class="">Skills training for employment opportunity.</small> 479 </a> 480 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/accredited-courses"> 481 <strong><i class="fas fa-award"></i> Accredited Courses</strong><br> 482 <small class="">Recognized programs and certificates awarded.</small> 483 </a> 484 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/what-we-do/homework-club"> 485 <strong><i class="fas fa-book-open"></i> Homework Club</strong><br> 486 <small class="">Various homework club available now.</small> 487 </a> 488 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/wh
488at-we-do/just-smiles-original"> 489 <strong><i class="fas fa-smile"></i> Just Smiles Original</strong><br> 490 <small class="">Creative activities for happy children.</small> 491 </a> 492 </div> 493 </div> 494 </div> 495 </li> 496 497 498 499 500 <li class="nav-item position-relative"> 501 <a class="nav-link d-flex align-items-center" href="#" id="aboutLink"> 502 <i class="fas fa-hand-holding-heart"></i> Support Us 503 <span class="ms-1 dropdown-toggle"></span> 504 </a> 505 <div class="submenu position-absolute bg-white shadow rounded p-3" style="display: none; top: 100%; left: 0; min-width: 220px;"> 506 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/support-us/donate"> 507 <strong><i class="fas fa-donate"></i> Donate</strong><br> 508 <small class="">Support projects financially today.</small> 509 </a> 510 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/about-us/volunteer"> 511 <strong><i class="fas fa-hands-helping"></i> Volunteer</strong><br> 512 <small class="">Join hands to help people.</small> 513 </a> 514 <a class="d-block py-2 px-2 text-dark" href="https://newark.org.uk/support-us/vacancies"> 515 <strong><i class="fas fa-user-check"></i> Vacancies</strong><br> 516 <small class="">Apply for open job positions.</small> 517 </a> 518 </div> 519 </li> 520 521 <!-- OTHER LINKS --> 522 <li class="nav-item"><a class="nav-link" href="https://newark.org.uk/impact-data"><i class="fas fa-chart-bar"></i> Impact & Data</a></li> 523 <li class="nav-item"><a class="nav-link" href="https://newark.org.uk/supporters"><i class="fas fa-comments"></i> Supporters</a></li> 524 <li class="nav-item"><a class="nav-link" href="https://newark.org.uk/gallery"><i class="fas fa-images"></i> Gallery</a></li> 525 526 </ul> 527 528 <div class="d-flex align-items-center gap-3"> 529 <a href="https://newark.org.uk/registration" class="btn-gradient">Registration</a> 530 </div> 531 </div> 532 </div> 533</nav> 534 535</div> 536
537<script> 538document.addEventListener('DOMContentLoaded', () => { 539 540 function handleSubmenu(linkId) { 541 const link = document.getElementById(linkId); 542 const item = link.parentElement; 543 const submenu = item.querySelector('.submenu'); 544 if (!submenu) return; 545 546 link.addEventListener('click', (e) => { 547 e.preventDefault(); 548 const isVisible = submenu.style.display === 'block'; 549 submenu.style.display = isVisible ? 'none' : 'block'; 550 link.classList.toggle('active', !isVisible); 551 }); 552 553 item.addEventListener('mouseenter', () => { 554 submenu.style.display = 'block'; 555 link.classList.add('active'); 556 }); 557 558 item.addEventListener('mouseleave', () => { 559 submenu.style.display = 'none'; 560 link.classList.remove('active'); 561 }); 562 563 document.addEventListener('click', (e) => { 564 if (!item.contains(e.target)) { 565 submenu.style.display = 'none'; 566 link.classList.remove('active'); 567 } 568 }); 569 } 570 571 handleSubmenu('resourcesLink'); 572 handleSubmenu('aboutLink'); 573 574 const megaMenus = document.querySelectorAll('.nav-item.dropdown'); 575 megaMenus.forEach(item => { 576 const dropdown = item.querySelector('.dropdown-menu'); 577 if (!dropdown) return; 578 item.addEventListener('mouseenter', () => dropdown.classList.add('show')); 579 item.addEventListener('mouseleave', () => dropdown.classList.remove('show')); 580 }); 581 582}); 583 584document.querySelectorAll('.menu-item').forEach(item => { 585 let link = item.querySelector('a'); 586 if(link){ 587 item.addEventListener('click', () => { 588 window.location.href = link.href; 589 }); 590 } 591}); 592</script>
592 593 594
595<script> 596(function() { 597 const deskNav = document.getElementById('deskNav'); 598 let lastScroll = 0; 599 600 window.addEventListener('scroll', () => { 601 const currentScroll = window.pageYOffset || document.documentElement.scrollTop; 602 603 if (currentScroll > lastScroll && currentScroll > 50) { 604 // Scrolling down â hide nav 605 deskNav.classList.add('hide'); 606 } else { 607 // Scrolling up â show nav 608 deskNav.classList.remove('hide'); 609 } 610 611 lastScroll = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling 612 }); 613})(); 614</script>
614 615<style> 616.btn-close { 617 --bs-btn-close-color: #fff; /* Icon color */ 618 --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234169e1'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; 619} 620</style> 621<!-- Offcanvas Menu --> 622<div class="offcanvas offcanvas-end" tabindex="-1" id="mobileMenu" aria-labelledby="mobileMenuLabel" style="width:80%; border-left:2px solid royalblue;"> 623 624 <!-- Header: Logo + Close --> 625 <div class="offcanvas-header d-flex justify-content-between align-items-center" style="padding:10px 16px; background:;"> 626 <img src="https://newark.org.uk/assets/images/logo/logo.png" alt="Logo" style="height:50px;"> 627 <button type="button" class="btn-close text-reset custom-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> 628 </div> 629 630 <div class="offcanvas-body p-0"> 631 <ul class="offcanvas-menu list-unstyled m-0"> 632 633 <!-- About Us --> 634 <li class="offcanvas-item"> 635 <a href="#"><span>About Us</span><i class="fas fa-chevron-down float-end"></i></a> 636 <ul class="offcanvas-submenu list-unstyled"> 637 <li><a href="https://newark.org.uk/about-us/about"><i class="fas fa-info"></i> About</a></li> 638 <li><a href="https://newark.org.uk/about-us/timeline"><i class="fas fa-clock"></i> Timeline</a></li> 639 <li><a href="https://newark.org.uk/about-us/our-people"><i class="fas fa-users"></i> Our People</a></li> 640 <li><a href="https://newark.org.uk/about-us/our-governance"><i class="fas fa-landmark"></i> Governance</a></li> 641 <li><a href="https://newark.org.uk/about-us/volunteer"><i class="fas fa-hands-helping"></i> Volunteer</a></li> 642 <li><a href="https://newark.org.uk/about-us/contact"><i class="fas fa-envelope"></i> Contact</a></li> 643 </ul> 644 </li> 645 646 <li class="offcanvas-item"> 647 <a href="#"><span>What We Do</span><i class="fas fa-chevron-down float-end"></i></a> 648 <ul class="offcanvas-submenu list-unstyled"> 649 <li><a href="https://newark.org.uk/what-we-do/youth-clubs"><i class="fas fa-users"></i> Youth Clubs</a></li> 650 <li><a href="https://newark.org.uk/what-we-do/sports-sessions"><i class="fas fa-running"></i> Sports Sessions</a></li> 651 <li><a href="https://newark.org.uk/what-we-do/holiday-programme"><i class="fas fa-umbrella-beach"></i> Holiday Programme</a></li> 652 <li><a href="https://newark.org.uk/what-we-do/football"><i class="fas fa-futbol"></i> Football</a></li> 653 <li><a href="https://newark.org.uk/what-we-do/women-and-girls"><i class="fas fa-female"></i> Women and Girls</a></li> 654 <li><a href="https://newark.org.uk/what-we-do/employability"><i class="fas fa-briefcase"></i> Employability</a></li> 655 <li><a href="https://newark.org.uk/what-we-do/accredited-courses"><i class="fas fa-certificate"></i> Accredited Courses</a></li> 656 <li><a href="https://newark.org.uk/what-we-do/homework-club"><i class="fas fa-book"></i> Homework Club</a></li> 657 <li><a href="https://newark.org.uk/what-we-do/just-smiles-original"><i class="fas fa-smile"></i> Just Smiles Original</a></li> 658 </ul> 659 </li> 660 661 <!-- Support Us --> 662 <li class="offcanvas-item"> 663 <a href="#"><span>Support Us</span><i class="fas fa-chevron-down float-end"></i></a> 664 <ul class="offcanvas-submenu list-unstyled"> 665 <li><a href="https://newark.org.uk/support-us/donate"><i class="fas fa-hand-holding-heart"></i> Donate</a></li> 666 <li><a href="https://newark.org.uk/support-us/volunteer"><i class="fas fa-hands-helping"></i> Volunteer</a></li> 667 <li><a href="https://newark.org.uk/support-us/vacancies"><i class="fas fa-user-check"></i> Vacancies</a></li> 668 </ul> 669 </li> 670 671 <!-- Normal Links --> 672 <li class="offcanvas-item"><a href="https://newark.org.uk/impact-data">Impact & Data</a></li> 673 <li class="offcanvas-item"><a href="https://newark.org.uk/supporters">Supporters</a></li> 674 <li class="offcanvas-item"><a href="https://newark.org.uk/gallery">Gallery</a></li> 675 <li class="offcanvas-item"><a href="https://newark.org.uk/registration">Registration</a></li> 676 677 <!-- Footer Contact List --> 678 <li id="mobileMenuFooter" class="text-left mt-2 px-3"> 679 <h6 class="fw-bold text-dark mb-3">Contact Info</h6> 680 <ul class="list-unstyled mb-3"> 681 <li class="mb-0"><i class="fas fa-phone me-2 cicon"></i> <a href="tel:+4407 392 2121">0207 392 2121</a></li> 682 <li class="mb-0"><i class="fas fa-envelope me-2 cicon"></i> <a href="mailto:[email protected]">[email protected]</a></li> 683 <li><i class="fas fa-map-marker-alt me-2 cicon"></i> Unit S2, Whitechapel Centre<br> 85 Myrdle Street, London E1 1HL</li> 684 </ul> 685 686 <!-- Social Bar --> 687 <div class="d-flex justify-content-center gap-3 mt-3 mb-3 socialMenu"> 688 <a href="https://www.facebook.com/newarkyl/" target="_blank" class="social-icon"><i class="fab fa-facebook-f cicon2"></i></a> 689 <a href="https://www.instagram.com/newarkyouthldn?igsh=MXRiODk2ZXN3YTVqcw==" target="_blank" class="social-icon"><i class="cicon2 fab fa-instagram"></i></a> 690 <a href="#" target="_blank" class="social-icon"><i class="fab fa-x-twitter cicon2"></i></a> 691 <a href=" https://www.youtube.com/@NewarkYL" target="_blank" class="social-icon"><i class="fab fa-youtube cicon2"></i></a> 692 <a href="#" target="_blank" class="social-icon"><i class="fab fa-tiktok cicon2"></i></a> 693 </div> 694 695 <div class="pb-2 d-flex gap-2" style="margin-top:10px; width:100%;"> 696 <a href="https://play.google.com/store/apps/details?id=uk.co.signsoft.newarkyouthlondon" target="_blank"> 697 <img src="https://newark.org.uk/assets/images/icons/googlePlay.png" class="img img-fluid mt-1" style="height:;" alt=""> 698 </a> 699 <a href="https://apps.apple.com/us/app/newark-youth-london/id675891389
6991" target="_blank"> 700 <img src="https://newark.org.uk/assets/images/icons/apple.png" class="img img-fluid mt-1" style="height:;" alt=""> 701 </a> 702 </div> 703 704 </li> 705 706 </ul> 707 </div> 708</div> 709 710<!-- Script -->
711<script> 712document.addEventListener('DOMContentLoaded', () => { 713 const items = document.querySelectorAll('.offcanvas-item'); 714 const currentUrl = window.location.href; 715 716 items.forEach(item => { 717 const link = item.querySelector('a'); 718 const submenu = item.querySelector('.offcanvas-submenu'); 719 720 // Highlight current URL 721 if (link.href === currentUrl || (submenu && [...submenu.querySelectorAll('a')].some(sublink => currentUrl.endsWith(sublink.getAttribute('href'))))) { 722 item.classList.add('active'); // add active to li 723 if (submenu) submenu.style.maxHeight = submenu.scrollHeight + 'px'; // expand submenu 724 if (submenu) submenu.querySelectorAll('a').forEach(sublink => { 725 if (currentUrl.endsWith(sublink.getAttribute('href'))) { 726 sublink.classList.add('active'); // highlight submenu link 727 } 728 }); 729 } 730 731 // Click toggle for submenu 732 if (submenu) { 733 link.addEventListener('click', e => { 734 e.preventDefault(); 735 const isVisible = submenu.style.maxHeight && submenu.style.maxHeight !== '0px'; 736 submenu.style.maxHeight = isVisible ? '0' : submenu.scrollHeight + 'px'; 737 item.classList.toggle('active', !isVisible); // toggle active on li 738 }); 739 } 740 }); 741}); 742</script>
742 743 744<style> 745/* Parent menu active */ 746.offcanvas-item.active > a { 747 background-color: royalblue !important; 748 color: #fff !important; 749} 750 751.offcanvas-item.active > a i { 752 transform: rotate(180deg); 753} 754 755/* Submenu active link */ 756.offcanvas-submenu li a.active { 757 font-weight: 600; 758 background-color: rgba(0,0,0,0.1); 759} 760 761 762</style> 763 764 765<style> 766 .custom-close { 767 background-color: royalblue; /* Royal Blue background */ 768 border-radius: 50%; /* Fully rounded */ 769 opacity: 1; /* Default Bootstrap opacity remove */ 770 padding:8px !important; 771 color:#fff !important 772} 773 774.custom-close:hover { 775 background-color: #27408b; /* Darker shade on hover */ 776} 777.cicon{ 778 color:royalblue; 779} 780.cicon2{ 781 color:#fff; 782} 783/* =============================== 784 OFFCANVAS MENU STYLING 785================================ */ 786.offcanvas-body { 787 background: #fff; 788 color: #000; 789 /*padding: 0;*/ 790 overflow-y: auto; 791 height: 100%; 792} 793 794.offcanvas-header .btn-close { 795 filter: none; 796} 797 798/* Main Menu Links */ 799.offcanvas-item > a { 800 display: flex; 801 justify-content: space-between; 802 align-items: center; 803 padding: 14px 16px; 804 text-decoration: none; 805 color: #000; 806 font-weight: 600; 807 cursor: pointer; 808 transition: background 0.3s; 809 border-bottom: 1px solid #ccc; 810} 811 812.offcanvas-item > a:hover { 813 background: rgba(0,0,0,0.05); 814} 815 816.offcanvas-item > a i { 817 transition: transform 0.3s; 818} 819 820.offcanvas-item > a.active i { 821 transform: rotate(180deg); 822} 823 824/* Submenu */ 825.offcanvas-submenu { 826 list-style: none; 827 margin: 0; 828 max-height: 0; 829 overflow: hidden; 830 transition: max-height 0.3s ease; 831} 832 833.offcanvas-submenu li a { 834 padding: 10px 20px; 835 display: flex; 836 align-items: center; 837 gap: 8px; 838 width:100%; 839 font-size: 0.95rem; 840} 841
842.offcanvas-submenu li:hover { 843 background: rgba(0,0,0,0.05); 844} 845 846.offcanvas-submenu li a { 847 text-decoration: none; 848 color: #000; 849} 850 851/* =============================== 852 FOOTER CONTACT & SOCIAL 853================================ */ 854#mobileMenuFooter { 855 padding: 15px 16px; 856 background: #; 857 color: #000; 858 text-align: left; 859} 860 861#mobileMenuFooter ul { 862 padding: 0; 863 margin: 0 0 10px 0; 864 list-style: none; 865} 866 867#mobileMenuFooter ul li { 868 gap: 8px; 869 padding: 6px 0; 870 font-size: 0.95rem; 871} 872 873#mobileMenuFooter ul li a { 874 color: #000; 875 font-size:16px !important; 876 text-decoration: none; 877} 878 879#mobileMenuFooter ul li a:hover { 880 text-decoration: underline; 881} 882 883/* Social Icons Bar */ 884#mobileMenuFooter .socialMenu { 885 display: flex; 886 justify-content: center; 887 gap: 8px !important; 888 margin-top: 10px; 889} 890 891#mobileMenuFooter .social-icon { 892 display: flex; 893 justify-content: center; 894 align-items: center; 895 width: 40px; 896 height: 40px; 897 border-radius: 50%; 898 background: royalblue; 899 color: #000; 900 font-size: 18px; 901 transition: all 0.3s ease; 902} 903 904#mobileMenuFooter .social-icon:hover { 905 background: royalblue; 906 color: #fff; 907} 908 909/* =============================== 910 MOBILE RESPONSIVE 911================================ */ 912@media (max-width: 576px) { 913 .offcanvas-item > a { 914 padding: 12px 14px; 915 font-size: 15px; 916 } 917 918 919 #mobileMenuFooter ul li { 920 font-size: 14px; 921 } 922 923 #mobileMenuFooter .social-icon { 924 width: 36px; 925 height: 36px; 926 font-size: 16px; 927 } 928} 929</style> 930<style> 931/* ===== Video Slider ===== */ 932#videoSlider { 933 position: unset !important; /* desktop default */ 934} 935 936/* Carousel item takes full height */ 937#videoSlider .carousel-item { 938 height: auto; /* desktop default */ 939} 940 941/* Carousel caption container */ 942.carousel-caption { 943 bottom: 10% !important; 944 left: 15px !important; 945 right: auto; 946 text-align: left; 947 max-width: 90%; 948 width: 40%; 949 background: rgba(0, 0, 0, 0.4); /* semi-transparent */ 950 padding: 20px 25px; 951 border-radius: 12px; 952 text-align: center; 953 margin-top: 150px; 954} 955 956/* Keep final state after animation */ 957.carousel-caption.animate__animated { 958 animation-fill-mode: forwards; 959} 960 961/* Animation speed */ 962.carousel-caption.animate__fadeInUp { 963 animation-duration: 1s; 964} 965 966/* Title */ 967.carousel-caption h3 { 968 font-size: 2.5rem; 969 color: #fff; 970 margin-bottom: 10px; 971 text-shadow: 2px 2px 10px rgba(0,0,0,0.6); 972} 973 974/* Description */ 975.carousel-caption p { 976 font-size: 1.2rem; 977 color: #f1f1f1; 978 margin-bottom: 15px; 979 text-shadow: 1px 1px 8px rgba(0,0,0,0.5); 980} 981 982/* Buttons container */ 983.carousel-caption .btn-group { 984 display: flex; 985 gap: 15px; 986 justify-content: center; 987 align-items: center; 988 flex-wrap: wrap; 989} 990.carousel-caption .custom-btn { 991 padding: 12px 28px; 992 font-size: 1rem; 993 font-weight: 600; 994 border-radius: 40px; 995 transition: all 0.3s ease; 996 text-decoration: none; 997 text-align: center; 998 cursor: pointer; 999 white-space: nowrap; 1000} 1001 1002/* Royal Blue filled button */ 1003.primary-btn { 1004 background-color: #4169E1; 1005 color: #fff; 1006 border: none; 1007} 1008.primary-btn:hover { 1009 background-color: #274bdb; 1010 transform: translateY(-2px); 1011 box-shadow: 0 5px 15px rgba(0,0,0,0.2); 1012} 1013 1014/* White outline button */ 1015.outline-btn { 1016 background-color: #fff; 1017 color: #4169E1; 1018 border: 2px solid #4169E1; 1019} 1020.outline-btn:hover { 1021 background-color: #D7B468; 1022 color: #fff; 1023 transform: translateY(-2px); 1024 box-shadow: 0 5px 15px rgba(0,0,0,0.2); 1025} 1026 1027/* ===== Responsive Settings ===== */ 1028@media (max-width: 992px) { 1029 .carousel-caption { width: 60%; } 1030 .carousel-caption h3 { font-size: 2rem; } 1031 .carousel-caption p { font-size: 1rem; } 1032} 1033 1034@media (max-width: 768px) { 1035 #videoSlider { 1036 height: 55vh !important; 1037 } 1038 1039 #videoSlider .carousel-item { 1040 height: 55vh !important; 1041 } 1042 1043 #videoSlider video { 1044 height: 100% !important; /* fill container */ 1045 width: 100% !important; 1046 object-fit: cover; 1047 } 1048 1049 .carousel-caption { width: 80%; } 1050 .carousel-caption p { display: none; } /* hide text */ 1051 .carousel-caption h3 { font-size: 1.6rem; } 1052 .carousel-caption .btn-group { flex-direction: row; gap: 10px; } 1053 .carousel-caption .custom-btn { font-size: 0.9rem; padding: 8px 20px; } 1054} 1055 1056@media (max-width: 576px) { 1057 .carousel-caption { 1058 width: 95%; 1059 padding: 12px 15px; 1060 bottom: 5% !important; 1061 } 1062 .carousel-caption h3 { font-size: 1.3rem; } 1063 .carousel-caption p { display: none; } /* still hidden */ 1064 .carousel-caption .btn-group { flex-direction: row; gap: 8px; } 1065 .carousel-caption .custom-btn { font-size: 0.85rem; padding: 6px 16px; } 1066} 1067 1068</style> 1069 1070<div id="videoSlider" style="z-index:-1" class="carousel slide carousel-fade" data-bs-ride="carousel"> 1071 <div class="carousel-inner"> 1072 <div class="carousel-item active"> 1073 <video class="d-block w-100" poster="assets/images/slider/slider-1.jpg" autoplay muted loop playsinline> 1074 <source src="assets/images/slider/slider-1.mp4" type="video/mp4"> 1075 </video> 1076 <!-- Carousel Caption --> 1077 <div class="carousel-caption animate__animated animate__fadeInUp"> 1078 <h3 class="fontOne"><b>Supporting young people since 1984</b></h3> 1079 1080 </div> 1081 </div> 1082 </div> 1083</div> 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105<!-- Include Bootstrap CSS & JS --> 1106<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
1107<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
1107 1108 1109<!-- Modal --> 1110<div class="modal fade" id="impactModal" tabindex="-1" aria-hidden="true"> 1111 <div class="modal-dialog modal-dialog-centered modal-lg"> 1112 <div class="modal-content border-3 border-warning rounded-3 overflow-hidden position-relative" 1113 style="border-color:#D7B468!important;"> 1114 1115 <!-- Close Button (attached to top right of box) --> 1116 <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">Ã</button> 1117 1118 <div class="row g-0 align-items-stretch"> 1119 <!-- Left Side --> 1120 <div class="col-md-6 d-flex flex-column justify-content-center p-4"> 1121 <h2 class="text-primary text-center mb-2"> 1122 Newark changes lives through its unwavering dedication and support </h2> 1123 <p class="text-dark text-justify" style="font-size:15px;line-height:1.6;"> 1124 <div style="white-space: pre-wrap;"><p style="margin: 0px 0px 0.25rem; line-height: 1.3;"><span style="color: rgb(0, 0, 0);">At Newark Youth London, we are more than just an organisation â we are a force for positive change in the London Borough of Tower Hamlets and neighbouring boroughs. </span></p><br><p style="margin: 0px 0px 0.25rem; line-height: 1.3;"><span style="color: rgb(0, 0, 0);">Since 1984, our roots have run deep, beginning as a local football club and growing into a beacon of hope for young people and adults alike.</span></p><br></div> </p> 1125 <a href="https://newark.org.uk/support-us/donate" class="btn mt-3 text-white" style="background:royalblue;font-size:20px;"> 1126 Support Us </a> 1127 </div> 1128 1129 <!-- Right Side --> 1130 <div class="col-md-6"> 1131 <img src="https://admin.newark.org.uk/uploads/2025/1766845488_Picture_1.jpeg" 1132 alt="Happy child" class="img-fluid h-100 w-100 object-fit-cover"> 1133 </div> 1134 </div> 1135 </div> 1136 </div> 1137</div> 1138<!-- Custom CSS --> 1139<style> 1140/* Close button â attached inside top right corner */ 1141.btn-close-custom { 1142 position: absolute; 1143 top: 0px; 1144 right: 0px; 1145 background: royalblue; 1146 color: white; 1147 border: 2px solid gold; 1148 font-weight: bold; 1149 font-size: 30px; 1150 width: 45px; 1151 height: 45px; 1152 border-radius: 0 0 0 50%; 1153 line-height: 1; 1154 display: flex; 1155 align-items: center; 1156 justify-content: center; 1157 z-index: 1056; 1158 cursor: pointer; 1159 transition: 0.3s; 1160 box-shadow: 0 0 10px rgba(0,0,0,0.3); 1161} 1162.btn-close-custom:hover { 1163 background: #D7B468; 1164 color: royalblue; 1165} 1166 1167/* Responsive */ 1168@media (max-width: 700px) { 1169 .modal-content h2 { 1170 font-size: 17px !important; 1171 } 1172 .modal-content p { 1173 font-size: 14px !important; 1174 line-height: 1.5 !important; 1175 } 1176 .modal-content .btn { 1177 font-size: 14px !important; 1178 padding: 7px 12px !important; 1179 } 1180 .modal-content img { 1181 height: 200px !important; 1182 object-fit: cover; 1183 } 1184 .btn-close-custom { 1185 top: 0px; 1186 right: 0px; 1187 width: 38px; 1188 height: 38px; 1189 font-size: 25px; 1190 } 1191} 1192</style> 1193 1194<!-- JS: Auto Show + 40min localStorage timer -->
1195<script> 1196window.addEventListener("load", () => { 1197 const MODAL_KEY = "impactModalShown"; 1198 1199 // If the modal was not shown yet in this tab session 1200 if (!sessionStorage.getItem(MODAL_KEY)) { 1201 setTimeout(() => { 1202 const modal = new bootstrap.Modal(document.getElementById('impactModal')); 1203 modal.show(); 1204 1205 const modalEl = document.getElementById('impactModal'); 1206 modalEl.addEventListener('hidden.bs.modal', () => { 1207 // Mark as shown for this tab session 1208 sessionStorage.setItem(MODAL_KEY, "true"); 1209 }); 1210 }, 1000); 1211 } 1212 1213 // When tab closes, clear the session (automatic) and optionally clear localStorage 1214 window.addEventListener("beforeunload", () => { 1215 // Optional: if you still want to clear localStorage too 1216 localStorage.removeItem("impactModalClosedTime"); 1217 }); 1218}); 1219</script>
1219 1220 1221 1222<section class="wpo-features-area"> 1223 <div class="container"> 1224 <div class="features-wrap"> 1225 <div class="row"> 1226 1227 <div class="col col-lg-3 col-md-6 col-12"> 1228 <div class="feature-item-wrap"> 1229 <div class="feature-item"> 1230 <div class="cardsl" data-target="1600"> 1231 <div class="nuLabel">Participants Engaged</div> 1232 <div class="number"><span class="count-number">1600</span></div> 1233 </div> 1234 </div> 1235 <div class="feature-item-hidden"> 1236 <div class="feature-text"> 1237 <p>In 2024-25, over 1600 individual participants engaged in our programmes.</p> 1238 </div> 1239 </div> 1240 </div> 1241 </div> 1242 1243 <div class="col col-lg-3 col-md-6 col-12"> 1244 <div class="feature-item-wrap"> 1245 <div class="feature-item"> 1246 <div class="cardsl" data-target="41000"> 1247 <div class="nuLabel">Newark Contact Hours</div> 1248 <div class="number"><span class="count-number">41,000</span></div> 1249 </div> 1250 </div> 1251 <div class="feature-item-hidden"> 1252 1253 <div class="feature-text"> 1254 <p>Over 41,000 hours of positive contact with participants.</p> 1255 </div> 1256 </div> 1257 </div> 1258 </div> 1259 1260 <div class="col col-lg-3 col-md-6 col-12"> 1261 <div class="feature-item-wrap"> 1262 <div class="feature-item"> 1263 <div class="cardsl" data-target="144"> 1264 <div class="nuLabel">Accredited Outcome Achieved</div> 1265 <div class="number"><span class="count-number">144</span></div> 1266 </div> 1267 </div> 1268 <div class="feature-item-hidden"> 1269 1270 <div class="feature-text"> 1271 <p>144 young people achieved an accredited outcome.</p> 1272 </div> 1273 </div> 1274 </div> 1275 </div> 1276 1277 <div class="col col-lg-3 col-md-6 col-12"> 1278 <div class="feature-item-wrap"> 1279 <div class="feature-item"> 1280 <div class="cardsl" data-target="164"> 1281 <div class="nuLabel">Children went on International Visits</div> 1282 <div class="number"><span class="count-number">164</span></div> 1283 </div> 1284 </div> 1285 <div class="feature-item-hidden"> 1286 1287 <div class="feature-text"> 1288 <p>164 children visited Spain, France, Italy and Bangladesh in 2025 as part of TurningProject.</p> 1289 </div> 1290 </div> 1291 </div> 1292 </div> 1293 1294 1295 </div> 1296 </div> 1297 </div> 1298</section> 1299<style> 1300.wpo-features-area { 1301 padding:0; 1302 background:transparent; 1303} 1304 1305/* Responsive padding */ 1306@media (max-width: 991px) { 1307 .wpo-features-area { 1308 padding:0; 1309 } 1310} 1311 1312@media (max-width: 767px) { 1313 .wpo-features-area { 1314 padding: 0; 1315 } 1316} 1317 1318/* Features wrap */ 1319.wpo-features-area .features-wrap { 1320 margin-top: -80px; 1321 z-index: 9; 1322 position: relative; 1323} 1324 1325@media (max-width: 991px) { 1326 .wpo-features-area .features-wrap { 1327 margin-top: 0; 1328 } 1329} 1330 1331/* Feature item wrap */ 1332.wpo-features-area .feature-item-wrap { 1333 position: relative; 1334} 1335 1336/* Feature items */ 1337.wpo-features-area .feature-item-wrap .feature-item, 1338.wpo-features-area .feature-item-wrap .feature-item-hidden { 1339 background: linear-gradient(135deg, #ffc107, #156293); 1340 padding: 60px; 1341 text-align: center; 1342 position: relative; 1343} 1344 1345/* bar/line inside item */ 1346.wpo-features-area .feature-item-wrap .feature-item:before, 1347.wpo-features-area .feature-item-wrap .feature-item-hidden:before { 1348 position: absolute; 1349 left: -2px; 1350 top: 50%; 1351 transform: translateY(-50%); 1352 width: 4px; 1353 height: 100px; 1354 background: linear-gradient(180deg, #f8f8f8, #ffffff, #ffffff); 1355 content: ""; 1356 border-radius:50%; 1357} 1358 1359/* -------- CENTERED HOVER BOX -------- */ 1360.wpo-features-area .feature-item-wrap .feature-item-hidden { 1361 position: absolute; 1362 top: 50%; /* vertical center */ 1363 left: 50%; /* horizontal center */ 1364 width: 90%; 1365 padding: 30px 25px; 1366 background: linear-gradient(180deg, #ffffff, #096BC9, #002262); 1367 border-radius: 20px; 1368 z-index: 11; 1369 1370 opacity: 0; 1371 visibility: hidden; 1372 1373 /* CENTER position + smooth zoom */ 1374 transform: translate(-50%, -50%) scale(0); 1375 transform-origin: center center; 1376 1377 transition: all 0.35s ease; 1378} 1379 1380/* Hover â show popup */ 1381.wpo-features-area .feature-item-wrap:hover .feature-item-hidden, 1382.wpo-features-area .feature-item-wrap.active .feature-item-hidden { 1383 opacity: 1; 1384 visibility: visible; 1385 transform: translate(-50%, -50%) scale(1); 1386} 1387 1388/* remove before bar in hidden box */ 1389.wpo-features-area .feature-item-wrap .feature-item-hidden::before { 1390 display: none !important; 1391} 1392 1393/* hidden text color */ 1394.wpo-features-area .feature-item-wrap .feature-item-hidden p { 1395 margin-bottom: 0; 1396 color: #ffffff; 1397} 1398 1399/* Column padding */ 1400.wpo-features-area .col { padding: 0; } 1401 1402@media (max-width: 575px) { 1403 .wpo-features-area .col { padding: 0px; } 1404} 1405 1406/* First & last column border */ 1407.wpo-features-area .col:first-child .feature-item { 1408 border-top-left-radius: 20px; 1409 border-bottom-left-radius: 20px; 1410} 1411.wpo-features-area .col:first-child .feature-item:before { 1412 display: none; 1413} 1414.wpo-features-area .col:last-child .feature-item { 1415 border-top-right-radius: 20px; 1416 border-bottom-right-radius: 20px; 1417} 1418 1419@media (max-width: 991px) { 1420 .wpo-features-area .col:first-child .feature-item, 1421 .wpo-features-area .col:last-child .feature-item { 1422 border-radius: 0; 1423 } 1424} 1425 1426@media (max-width: 767px) { 1427 .wpo-features-area .feature-item-wrap .feature-item::before { 1428 display: none !important; 1429 } 1430 .wpo-features-area .feature-item-wrap .feature-item { 1431 margin-top: 0px; 1432 border-bottom:1px solid #ccc; 1433 } 1434} 1435 1436</style><!-- About Section Start --> 1437<section class="about-section section-padding fix">
1438 <div class="container"> 1439 <h2 class="section-title-work text-royal-work text-center mb-3">About Us</h2> 1440 <div class="about-wrapper"> 1441 <div class="row"> 1442 1443 <!-- Right Images --> 1444 <div class="col-lg-6 d-flex justify-content-center align-items-center"> 1445 <div class="about-item"> 1446 <div class="mb-3"> 1447 <img style="width:100%" src="assets/images/background/about3.png" alt="img" class="main-img"> 1448 </div> 1449 </div> 1450 </div> 1451 <!-- Left Content --> 1452 <div class="col-lg-6"> 1453 <div class="about-content"> 1454 <div class="section-title mb-0"> 1455 <h2> 1456 <span>N</span>ewark changes lives through its unwavering dedication and support. 1457 </h2> 1458 </div> 1459 <p class="text"> 1460 "At Newark Youth London, we are more than just an organisation â we are a force forpositive change in the London Borough of Tower Hamlets and neighbouring boroughs.Since 1984, our roots have run deep, beginning as a local football club and growing intoa beacon of hope for young people and adults alike." 1461 </p> 1462 <div class="section-title mb-0"> 1463 <h2 style="text-transform:capitalize">Our Values</h2> 1464 </div> 1465 <!-- Icon Item 1 --> 1466 <div class="about-icon-item"> 1467 <div class="icon"> 1468 <img src="assets/images/icons/a.png" alt="img"> 1469 </div> 1470 <div class="content"> 1471 <h4>Open to All</h4> 1472 <p>We welcome every young person and ensure equal access for everyone.</p> 1473 </div> 1474 </div> 1475 1476 <!-- Icon Item 2 --> 1477 <div class="about-icon-item mb-0"> 1478 <div class="icon"> 1479 <img src="assets/images/icons/b.png" alt="img"> 1480 </div> 1481 <div class="content"> 1482 <h4>Inclusive</h4> 1483 <p>We celebrate diversity and create spaces where all voices are respected and represented.</p> 1484 </div> 1485 </div> 1486 1487 <div class="about-icon-item mb-0"> 1488 <div class="icon"> 1489 <img src="assets/images/icons/c.png" alt="img"> 1490 </div> 1491 <div class="content"> 1492 <h4>User Led</h4> 1493 <p>Young people shape what we do. Their needs, ideas, and experiences guide our decisions.</p> 1494 </div> 1495 </div> 1496 1497 <!-- Bottom Section --> 1498 <div class="about-bottom"> 1499 <a href="about-us/about" class="theme-btn">More About Us <i class="fa-solid fa-arrow-right-long"></i></a> 1500 </div> 1501 </div> 1502 </div> 1503 1504 1505 1506 </div> 1507 </div> 1508 </div> 1509</section> 1510 1511<!-- CSS --> 1512<style> 1513.about-section { 1514 padding: 120px 0 90px; 1515 position: relative; 1516 font-family: Arial, sans-serif; 1517 background: linear-gradient(180deg, #ffffff, #4169e1); 1518} 1519 1520.about-content .section-title .sub-title { 1521 font-weight: 600; 1522 font-size: 16px; 1523 color: royalblue; 1524 margin-bottom: 10px; 1525} 1526 1527.about-content .section-title h2 { 1528 font-size: 36px; 1529 font-weight: 700; 1530 margin-bottom: 20px; 1531 line-height: 1.3; 1532} 1533 1534.about-content .text { 1535 max-width: 645px; 1536 margin-top: 20px; 1537 margin-bottom: 40px; 1538 font-size: 16px; 1539 color: #333; 1540} 1541 1542.about-icon-item { 1543 display: flex; 1544 align-items: flex-start; 1545 gap: 20px; 1546 margin-bottom: 30px; 1547} 1548 1549.about-icon-item .icon img { 1550 display: inline-block; 1551 width: 60px; 1552 height: 60px; 1553 background: #D7B468; 1554 border-radius: 50%; 1555 padding: 8px; 1556} 1557 1558.about-icon-item .content h4 { 1559 font-size: 20px; 1560 margin-bottom: 5px; 1561 color: #fff; 1562} 1563 1564.about-icon-item .content p { 1565 max-width: 565px; 1566 font-size: 14px; 1567 color: #fff; 1568} 1569 1570.about-bottom { 1571 display: flex; 1572 align-items: center; 1573 gap: 35px; 1574 margin-top: 40px; 1575} 1576 1577.about-bottom .theme-btn { 1578 background-color: #1e3aa8; 1579 color: #fff; 1580 padding: 10px 20px; 1581 text-decoration: none; 1582 border-radius: 5px; 1583 font-weight: 600; 1584} 1585 1586.about-bottom .theme-btn:hover { 1587 background-color: #D7B468; 1588} 1589 1590.about-item { 1591 display: flex; 1592 justify-content: right; 1593} 1594 1595.about-item .about-image { 1596 position: relative; 1597 max-width: 100%; 1598} 1599 1600.about-item .about-image img.main-img { 1601 width: 100%; 1602 border-radius: 20px; 1603} 1604 1605.about-item .shape, 1606.about-item .about-image-2, 1607.about-item .about-image-3 { 1608 position: absolute; 1609} 1610 1611.about-item .shape img { 1612 right: 0; 1613 top: 0; 1614 max-width: 100px; 1615} 1616 1617.about-item .about-image-2 img {
1618 left: -180px; 1619 top: 40px; 1620 max-width: 300px; 1621 border-radius: 20px; 1622} 1623 1624.about-item .about-image-3 img { 1625 left: -190px; 1626 bottom: -90px; 1627 max-width: 360px; 1628 border-radius: 20px; 1629} 1630 1631/* Responsive Fix */ 1632@media (max-width: 1200px) { 1633 .about-item .about-image-2 img, 1634 .about-item .about-image-3 img { 1635 left: 0; 1636 top: 0; 1637 bottom: 0; 1638 max-width: 250px; 1639 } 1640} 1641 1642@media (max-width: 991px) { 1643 .about-section { 1644 padding: 20px 0 20px; 1645 } 1646 1647 .about-content .section-title h2 { 1648 font-size: 28px; 1649 } 1650 1651 .about-icon-item { 1652 gap: 15px; 1653 } 1654 1655 .about-icon-item .content h4 { 1656 font-size: 18px; 1657 } 1658 1659 .about-icon-item .content p { 1660 font-size: 13px; 1661 } 1662 1663 .about-item { 1664 justify-content: center; 1665 margin-top: 40px; 1666 } 1667 1668 .about-image { 1669 max-width: 350px; 1670 } 1671 1672 .about-image .about-image-2, 1673 .about-image .about-image-3 { 1674 display: none; 1675 } 1676} 1677 1678@media (max-width: 576px) { 1679 .about-section { 1680 padding: 20px 0 20px; 1681 } 1682 1683 .about-content .section-title h2 { 1684 font-size: 22px; 1685 line-height: 1.2; 1686 } 1687 1688 .about-content .text { 1689 font-size: 14px; 1690 margin-bottom: 25px; 1691 } 1692 1693 .about-icon-item { 1694 flex-direction: column; 1695 align-items: center; 1696 margin-bottom: 20px; 1697 text-align:center 1698 } 1699 1700 .about-icon-item .icon img { 1701 width: 60px; 1702 height: 60px; 1703 background: #096BC9; 1704 border-radius: 50%; 1705 padding: 10px; 1706 } 1707 1708 .about-bottom { 1709 flex-direction: column; 1710 align-items: center; 1711 gap: 20px; 1712 } 1713 1714 .about-item { 1715 justify-content: center; 1716 margin-top: 30px; 1717 } 1718 1719 .about-image { 1720 max-width: 100%; 1721 } 1722 1723 .about-image .shape, 1724 .about-image .about-image-2, 1725 .about-image .about-image-3 { 1726 display: none; 1727 } 1728} 1729</style> 1730<!-- Social Feeds Section --> 1731<section class="social-feeds py-5" style="background:#f2f2f2;"> 1732 <div class="container-fluid"> 1733 <h2 class="section-title-work text-royal-work text-center mb-5">Stay Connected</h2> 1734 <div class="row" style="text-align:center;margin-bottom:30px"> 1735 <div style="display:flex; gap:15px; justify-content:center; width:100%;"> 1736 <a href="https://www.facebook.com/newarkyl/" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center; 1737 width:40px; height:40px; border-radius:50%; 1738 background:#1DA1F2; color:#fff; font-size:1.2rem; 1739 border:3px solid #d9e6ff; 1740 box-shadow:0 4px 10px rgba(0,0,0,0.15); 1741 transition:0.3s;"> 1742 <i class="fab fa-facebook"></i> 1743 </a> 1744 <a href="https://www.instagram.com/newarkyouthldn?igsh=MXRiODk2ZXN3YTVqcw==" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center; 1745 width:40px; height:40px; border-radius:50%; 1746 background:#1DA1F2; color:#fff; font-size:1.2rem; 1747 color:#fff; font-size:1.2rem; 1748 border:3px solid #cceaff; 1749 box-shadow:0 4px 10px rgba(0,0,0,0.15); 1750 transition:0.3s;"> 1751 <i class="fab fa-instagram"></i> 1752 </a> 1753 <a href="https://www.youtube.com/@NewarkYL" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center; 1754 width:40px; height:40px; border-radius:50%; 1755 background:#1DA1F2; color:#fff; font-size:1.2rem; 1756 border:3px solid #cceaff; 1757 box-shadow:0 4px 10px rgba(0,0,0,0.15); 1758 transition:0.3s;"> 1759 <i class="fab fa-youtube"></i> 1760 </a> 1761 <a href="https://www.tiktok.com/@newark.youth.lond" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; justify-content:center; 1762 width:40px; height:40px; border-radius:50%; 1763 background:#1DA1F2; color:#fff; font-size:1.2rem; 1764 border:3px solid #cceaff; 1765 box-shadow:0 4px 10px rgba(0,0,0,0.15); 1766 transition:0.3s;"> 1767 <i class="fab fa-tiktok"></i> 1768 </a> 1769 </div> 1770 </div> 1771 <div class="row g-4 align-items-stretch"> 1772 <!-- Facebook Feed --> 1773 <div class="col-lg-4 col-md-4 col-sm-12"> 1774 <div class="feed-card"> 1775 <div class="feed-header bg-royal-feed text-white text-center py-2"> 1776 <i class="fab fa-facebook-f me-2"></i> Facebook 1777 </div> 1778 <div class="feed-body" class="ratio ratio-1x1"> 1779 <div id="fb-root"></div> 1780
1780<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v24.0&appId=934891490668105"></script>
1780 1781 <div class="fb-page" data-href="https://www.facebook.com/newarkyl/" data-tabs="timeline" data-width="500" data-height="480" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true"> 1782 <blockquote cite="https://www.facebook.com/newarkyl/" class="fb-xfbml-parse-ignore"> 1783 <a href="https://www.facebook.com/newarkyl/">Newark Youth London</a> 1784 </blockquote> 1785 </div> 1786 </div> 1787 </div> 1788 </div> 1789 <!-- Instagram Feed --> 1790<div class="col-lg-4 col-md-6 col-sm-12 mb-3"> 1791 <div class="feed-card"> 1792 <div class="feed-header bg-royal-feed text-white text-center py-2"> 1793 <i class="fab fa-instagram me-2"></i> Instagram 1794 </div> 1795 <div class="feed-body"> 1796 <div class="instagram-container" style="width:100%; overflow:hidden;"> 1797 <blockquote class="instagram-media" 1798 data-instgrm-permalink="https://www.instagram.com/newarkyouthldn/" 1799 data-instgrm-version="14" 1800 style="background:#FFF; border:0; margin:0 auto; max-width:100%; width:100%; padding:0;"> 1801 </blockquote> 1802 </div> 1803 </div> 1804 </div> 1805</div> 1806
1807<script async src="https://www.instagram.com/embed.js"></script>
1807 1808 1809<style> 1810/* Instagram blockquote responsive fix */ 1811.instagram-container blockquote.instagram-media { 1812 width: 100% !important; 1813 max-width: 100% !important; 1814 margin: 0 auto !important; 1815} 1816 1817/* Optional: keep aspect ratio */ 1818.instagram-container { 1819 position: relative; 1820 padding-bottom: 100%; /* 1:1 square ratio */ 1821 height: 0; 1822} 1823.instagram-container blockquote.instagram-media { 1824 position: absolute; 1825 top: 0; 1826 left: 0; 1827 width: 100% !important; 1828 height: 100% !important; 1829} 1830</style> 1831 1832 <div class="col-lg-4 col-md-4 col-sm-12"> 1833 <div class="feed-card"> 1834 <div class="feed-header bg-royal-feed text-white text-center py-2"> 1835 <i class="fab fa-tiktok"></i> TikTok 1836 </div> 1837 <div class="feed-body"> 1838 <blockquote style="" class="tiktok-embed" cite="https://www.tiktok.com/@newark.youth.lond" data-unique-id="newark.youth.lond" data-embed-type="creator" style="max-width: 780px; min-width: 288px;" > <section> <a target="_blank" href="https://www.tiktok.com/@newark.youth.lond?refer=creator_embed">@newark.youth.lond</a> </section> </blockquote>
1838<script async src="https://www.tiktok.com/embed.js"></script>
1838 1839 1840
1840<script async src="https://www.tiktok.com/embed.js"></script>
1840 1841 </div> 1842 </div> 1843 </div> 1844 </div> 1845 </div> 1846</section> 1847<style> 1848 .tiktok-embed{margin-top:0 !important} 1849 .bg-royal-feed { 1850 background-color: #4169e1 !important; 1851 /* Royal Blue */ 1852 } 1853 1854 .text-royal-feed { 1855 color: #4169e1; 1856 } 1857 1858 /* Hover effect */ 1859 .feed-card { 1860 transform: translateY(-8px) scale(1.02); 1861 } 1862 1863 .feed-header { 1864 font-weight: 600; 1865 font-size: 1.1rem; 1866 letter-spacing: .5px; 1867 } 1868 1869 .feed-body { 1870 padding: 0; 1871 } 1872 1873 .feed-iframe { 1874 width: 100% !important; 1875 height: 100% !important; 1876 border: none; 1877 display: block; 1878 } 1879 1880 /* Common title */ 1881 .section-title-feed { 1882 font-size: 4rem; 1883 font-weight: 700; 1884 line-height: 1.2; 1885 } 1886 1887 .section-text-feed { 1888 font-size: 1rem; 1889 line-height: 1.7; 1890 color: #333; 1891 } 1892 1893 /* Responsive adjustments */ 1894 @media (max-width: 991px) { 1895 .section-title-feed { 1896 font-size: 2.5rem; 1897 } 1898 } 1899 1900 @media (max-width: 575px) { 1901 .section-title-feed { 1902 font-size: 2rem; 1903 } 1904 1905 .feed-card { 1906 margin-bottom: 20px; 1907 } 1908 } 1909</style><!-- Our Work Section with Slick Slider --> 1910<section class="our-work py-5" style="background:linear-gradient(180deg, #ffffff, #4169e1)"> 1911 <div class="container"> 1912 <h2 class="section-title-work text-royal-work text-center mb-5">Our Work</h2> 1913 1914 <!-- Slick Slider Wrapper --> 1915 <div class="our-work-slider"> 1916 1917 1918<div class="work-card-wrapper"> 1919 <div class="work-card shadow-lg position-relative overflow-hidden"> 1920 1921 <!-- Image --> 1922 <img src="https://admin.newark.org.uk/uploads/2025/1766730130_Picture_7_.jpeg" 1923 class="card-img-top w-100 h-100" 1924 alt="Education & Employment"> 1925 1926 <div class="overlay"> 1927 1928 <!-- Title --> 1929 <h5 class="card-title-work text-royal-work"> 1930 Education & Employment </h5> 1931 1932 <div class="overlay-extra"> 1933 1934 <!-- 10-word content --> 1935 <p class="card-text-work"> 1936 Education & EmploymentWe firmly believe a persons life chance improves... </p> 1937 1938 <!-- Learn More --> 1939 <a href="work-details/Education--Employment" 1940 class="btn btn-royal-work"> 1941 Learn More 1942 </a> 1943 1944 </div> 1945 1946 </div> 1947 </div> 1948</div> 1949<div class="work-card-wrapper"> 1950 <div class="work-card shadow-lg position-relative overflow-hidden"> 1951 1952 <!-- Image --> 1953 <img src="https://admin.newark.org.uk/uploads/2025/1766730046_Picture_5.jpeg" 1954 class="card-img-top w-100 h-100" 1955 alt="Sports & Recreation"> 1956 1957 <div class="overlay"> 1958 1959 <!-- Title --> 1960 <h5 class="card-title-work text-royal-work"> 1961 Sports & Recreation </h5> 1962 1963 <div class="overlay-extra"> 1964 1965 <!-- 10-word content --> 1966 <p class="card-text-work"> 1967 Sports & RecreationStarting as a sports organisation, we believe sport... </p> 1968 1969 <!-- Learn More --> 1970 <a href="work-details/Sports--Recreation" 1971 class="btn btn-royal-work"> 1972 Learn More 1973 </a> 1974 1975 </div> 1976 1977 </div> 1978 </div> 1979</div> 1980<div class="work-card-wrapper"> 1981 <div class="work-card shadow-lg position-relative overflow-hidden"> 1982 1983 <!-- Image --> 1984 <img src="https://admin.newark.org.uk/uploads/2025/1766730069_Picture_3.jpeg" 1985 class="card-img-top w-100 h-100" 1986 alt="Community Projects"> 1987 1988 <div class="overlay"> 1989 1990 <!-- Title --> 1991 <h5 class="card-title-work text-royal-work"> 1992 Community Projects </h5> 1993 1994 <div class="overlay-extra"> 1995 1996 <!-- 10-word content --> 1997 <p class="card-text-work"> 1998 Community ProjectsNewark believes in being part of the wider community... </p> 1999 2000 <!-- Learn More --> 2001 <a href="work-details/Community-Projects" 2002 class="btn btn-royal-work"> 2003 Learn More 2004 </a> 2005 2006 </div> 2007 2008 </div> 2009 </div> 2010</div> 2011<div class="work-card-wrapper"> 2012 <div class="work-card shadow-lg position-relative overflow-hidden"> 2013 2014 <!-- Image --> 2015 <img src="https://admin.newark.org.uk/uploads/2025/1763622978_w3_(2).png" 2016 class="card-img-top w-100 h-100" 2017 alt="Youth Empowerment"> 2018 2019 <div class="overlay"> 2020 2021 <!-- Title --> 2022 <h5 class="card-title-work text-royal-work"> 2023 Youth Empowerment </h5> 2024 2025 <div class="overlay-extra"> 2026 2027 <!-- 10-word content --> 2028 <p class="card-text-work"> 2029 Youth Empowerment & LeadershipAt every step, we encourage young people... </p> 2030 2031 <!-- Learn More --> 2032 <a href="work-details/Youth-Empowerment" 2033 class="btn btn-royal-work"> 2034 Learn More 2035 </a> 2036 2037 </div> 2038 2039 </div> 2040 </div> 2041</div> 2042 2043 2044 2045 </div> 2046 </div> 2047</section> 2048 2049<!-- Custom CSS --> 2050<style> 2051.text-royal-work { color: #4169e1; } 2052 2053.work-card-wrapper { 2054 padding: 0 10px; 2055 box-sizing: border-box; 2056} 2057 2058.work-card { 2059 border-radius: 12px; 2060 overflow: hidden; 2061 background: #fff; 2062 position: relative; 2063 height: 350px; /* fixed height for uniform cards */ 2064} 2065 2066.work-card img { 2067 width: 100%; 2068 height: 100%; 2069 object-fit: cover; 2070 transition: transform 0.5s ease; 2071} 2072 2073.work-card:hover img { 2074 transform: scale(1.1); 2075} 2076 2077.overlay { 2078 position: absolute; 2079 bottom: 0; left: 0; 2080 width: 100%; 2081 background: rgba(0,0,0,0.6); 2082 color: #fff; 2083 padding: 20px; 2084 transition: all 0.4s ease; 2085} 2086 2087.overlay h5 { 2088 margin: 0; 2089 font-size: 1.4rem; 2090 font-weight: 600; 2091 color: #fff; 2092 text-align: center; 2093} 2094 2095.overlay-extra { 2096 max-height: 0; 2097 overflow: hidden; 2098 opacity: 0; 2099 transition: max-height 0.5s ease, opacity 0.5s ease; 2100 text-align: center; 2101 margin-top: 10px; 2102} 2103 2104.work-card:hover .overlay-extra { 2105 max-height: 200px; 2106 opacity: 1;
2107} 2108 2109.card-text-work { 2110 font-size: 1rem; 2111 line-height: 1.6; 2112 color: #fff; 2113} 2114 2115.btn-royal-work { 2116 background-color: #4169e1; 2117 color: #fff; 2118 border-radius: 35px; 2119 padding: 8px 20px; 2120 transition: background .3s ease, transform .3s ease; 2121} 2122.btn-royal-work:hover { 2123 background-color: #2a3daa; 2124 transform: translateY(-2px); 2125 color: #fff; 2126} 2127 2128.section-title-work { 2129 width: 100%; 2130 text-align: center; 2131 font-size: 3rem; 2132 font-weight: 700; 2133 padding-bottom: 20px; 2134 color: #4169e1; 2135} 2136 2137/* Title animation */ 2138.section-title-work::after { 2139 content: ""; 2140 position: absolute; 2141 bottom: 0; 2142 left: 50%; 2143 transform: translateX(-50%); 2144 width: 0; 2145 height: 10px; 2146 border-radius: 5px; 2147 background: linear-gradient(90deg, #4169e1, #87cefa, #4169e1); 2148 animation: border-expand 2s ease forwards infinite; 2149} 2150 2151@keyframes border-expand { 2152 0% { width: 50px; } 2153 50% { width: 150px; } 2154 100% { width: 50px; } 2155} 2156 2157/* ------ MOBILE RESPONSIVE FIX ------ */ 2158 2159@media (max-width: 992px) { 2160 .work-card { 2161 height: 320px; 2162 } 2163} 2164 2165@media (max-width: 768px) { 2166 .work-card { 2167 height: 300px; 2168 } 2169 .slick-prev { left: -20px !important; } 2170 .slick-next { right: -10px !important; } 2171} 2172 2173@media (max-width: 576px) { 2174 .section-title-work { font-size: 2.2rem; } 2175 2176 .work-card { 2177 height: 260px; 2178 } 2179 2180 .overlay h5 { 2181 font-size: 1.2rem; 2182 } 2183 2184 .slick-prev, .slick-next { 2185 display: none !important; /* hide arrows for mobile */ 2186 } 2187 2188 .our-work-slider { 2189 padding: 0 10px; /* center slider */ 2190 } 2191} 2192 2193/* Slick customization */ 2194.slick-next:before, .slick-prev:before{ 2195 font-size: 40px !important; 2196} 2197.slick-prev { left: -50px !important; } 2198.slick-next { right: -30px !important; } 2199 2200.slick-dots li button:before { 2201 font-family: 'slick'; 2202 font-size: 20px !important; 2203} 2204.slick-dots li.slick-active button:before { 2205 opacity: 1; 2206 color: #D7B468 !important; 2207} 2208 .slick-slide{height:auto !important} 2209 .slick-dots{bottom:-45px !important} 2210</style> 2211 2212<!-- Slick CSS & JS --> 2213<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> 2214<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
2215<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
vendor: 2 bytes, line 2215
2215
2216<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
2216 2217 2218<!-- Initialize Slick Slider -->
2219<script> 2220$(document).ready(function(){ 2221 $('.our-work-slider').slick({ 2222 slidesToShow: 3, 2223 slidesToScroll: 1, 2224 infinite: true, 2225 dots: true, 2226 autoplay: true, 2227 autoplaySpeed: 2500, 2228 responsive: [ 2229 { breakpoint: 992, settings: { slidesToShow: 2 } }, 2230 { breakpoint: 576, settings: { slidesToShow: 1, arrows: false } } 2231 ] 2232 }); 2233}); 2234 2235</script>
2235 2236<div class="feature_area d-none"> 2237 <div class="container"> 2238 <div class="row"> 2239 <div class="col-md-12"> 2240 <div class="text-center wow fadeInUp"> 2241 <h2 class="section-title-work text-royal-work text-center mb-5">Our Impact</h2> 2242 </div> 2243 </div> 2244 </div> 2245 <div class="row"> 2246 <!-- Feature 1 --> 2247 <div class="col-md-4 col-sm-6 col-12"> 2248 <div class="em-feature" style="background-image:url(assets/images/impact/1.png);"> 2249 <div class="feature_inner_box"> 2250 <div class="feature_inner"> 2251 <div class="em_feature-icon"> 2252 <span><i class="fa fa-location-arrow"></i></span> 2253 </div> 2254 <div class="em-feature-title"> 2255 <h2>Our Campaign</h2> 2256 </div> 2257 </div> 2258 <div class="em_content_text"> 2259 <div class="em-feature-desc"> 2260 <p>At Newark Youth London, we are more than just an organization â we are a force for positive transformation in the London Borough of Tower Hamlets. Since 1984, our roots have run deep, </p> 2261 </div> 2262 </div> 2263 <div class="f-readmore"> 2264 <div class="feature_button"> 2265 <a href="#">Read More<span><i class="fa fa-long-arrow-right"></i></span></a> 2266 </div> 2267 </div> 2268 </div> 2269 </div> 2270 </div> 2271 <!-- Feature 2 --> 2272 <div class="col-md-4 col-sm-6 col-12"> 2273 <div class="em-feature" style="background-image:url(assets/images/impact/2.png);"> 2274 <div class="feature_inner_box"> 2275 <div class="feature_inner"> 2276 <div class="em_feature-icon"> 2277 <span><i class="fa fa-volume-up"></i></span> 2278 </div> 2279 <div class="em-feature-title"> 2280 <h2>Become A Member</h2> 2281 </div> 2282 </div> 2283 <div class="em_content_text"> 2284 <div class="em-feature-desc"> 2285 <p>At Newark Youth London, we are more than just an organization â we are a force for positive transformation in the London Borough of Tower Hamlets. Since 1984, our roots have run deep, </p> 2286 </div> 2287 </div> 2288 <div class="f-readmore"> 2289 <div class="feature_button"> 2290 <a href="#">Read More<span><i class="fa fa-long-arrow-right"></i></span></a> 2291 </div> 2292 </div> 2293 </div> 2294 </div> 2295 </div> 2296 <!-- Feature 3 --> 2297 <div class="col-md-4 col-sm-6 col-12"> 2298 <div class="em-feature" style="background-image:url(assets/images/impact/3.png);"> 2299 <div class="feature_inner_box"> 2300 <div class="feature_inner"> 2301 <div class="em_feature-icon"> 2302 <span><i class="fa fa-mobile-phone"></i></span> 2303 </div> 2304 <div class="em-feature-title"> 2305 <h2>Energy Policy</h2> 2306 </div> 2307 </div> 2308 <div class="em_content_text"> 2309 <div class="em-feature-desc"> 2310 <p>At Newark Youth London, we are more than just an organization â we are a force for positive transformation in the London Borough of Tower Hamlets. Since 1984, our roots have run deep, </p> 2311 </div> 2312 </div> 2313 <div class="f-readmore"> 2314 <div class="feature_button"> 2315 <a href="#">Read More<span><i class="fa fa-long-arrow-right"></i></span></a> 2316 </div> 2317 </div> 2318 </div> 2319 </div> 2320 </div> 2321 </div> 2322 </div> 2323</div> 2324 2325<style> 2326 *, ::after, ::before{position:relative} 2327.feature_area { 2328 padding: 81px 0 100px; 2329} 2330 2331.em-feature { 2332 position: relative; 2333 transition: all 0.5s ease; 2334 border-radius: 10px; 2335 overflow: hidden; 2336 margin-bottom: 30px; 2337} 2338 2339.em-feature::before { 2340 position: absolute; 2341 inset: 0; 2342 background: rgba(0,0,0,.7); 2343 content: ""; 2344} 2345 2346.feature_inner_box { 2347 padding: 30px; 2348 background: linear-gradient(180deg, #ffffff, #4169e1); 2349 transition: all 0.5s ease; 2350 position: relative; 2351 box-shadow: 0px 10px 40px 0px rgba(148,146,245,0.2); 2352 border-radius: 10px; 2353} 2354 2355.em-feature:hover .feature_inner_box { 2356 background: transparent; 2357} 2358 2359.em-feature:hover { 2360 margin-top: -10px; 2361} 2362 2363.em_feature-icon { 2364 display: inline-block; 2365 font-size: 21px; 2366 height: 45px; 2367 width: 45px; 2368 line-height: 46px; 2369 border-radius: 50%; 2370 text-align: center; 2371 background: #f9f9f9; 2372 color: #333; 2373 float: left; 2374 margin-right: 20px; 2375 transition: .5s; 2376} 2377 2378.em_content_text { 2379 padding-top: 10px; 2380} 2381 2382.em-feature-title h2 { 2383 font-size: 18px; 2384 font-weight: 600; 2385 text-transform: capitalize; 2386 transition: all 0.5s ease; 2387} 2388 2389.feature_inner { 2390 overflow: hidden; 2391} 2392 2393.f-readmore { 2394 padding-top: 7px; 2395} 2396 2397.feature_button a { 2398 color: #333; 2399 display: inline-block; 2400 font-weight: 600; 2401} 2402 2403.feature_button a span i { 2404 margin-left: 10px; 2405 font-size: 11px; 2406} 2407 2408.em-feature:hover .em_feature-icon { 2409 background: #D7B468; 2410 color: #fff; 2411} 2412 2413.em-feature:hover .feature_button a, 2414.em-feature:hover h2, 2415.em-feature:hover .em-feature-desc { 2416 color: #fff; 2417} 2418 2419/* Mobile Responsive */ 2420@media (max-width: 767px) { 2421 .em-feature { 2422 margin-bottom: 20px; 2423 } 2424.feature_area { 2425 padding: 40px 0 30px !important; 2426} 2427 .feature_inner_box { 2428 text-align: center; 2429 } 2430 2431 .em_feature-icon { 2432 float: none; 2433 margin: 0 auto 15px; 2434 display: block; 2435 } 2436 2437 .em-feature-title h2 { 2438 font-size: 22px; 2439 } 2440 2441 .em_content_text p { 2442 font-size: 16px; 2443 } 2444 2445 .feature_button { 2446 text-align: center; 2447 } 2448} 2449</style> 2450<!-- Video Section --> 2451<section class="video-one"> 2452 <div class="video-one__bg" style="background-image:url('https://newark.org.uk/assets/images/background/home_overlay.png');"></div> 2453 <div class="container"> 2454 <div class="video-one__inner"> 2455 <div class="video-one__video-link"> 2456 <a href="https://www.youtube.com/embed/7PF7yu_xcuI?si=xU1AzpNB7Lf6GV8q" class="video-popup"> 2457 <div class="video-one__video-icon">
2458 <span class="fa fa-play"></span> 2459 </div> 2460 </a> 2461 </div> 2462 <h2 class="video-one__video-title" style="font-size:25px"> 2463 Since 1984, Newark has grown into a beacon of hope - driving positive change for young people and adults alike. 2464 </h2> 2465 </div> 2466 </div> 2467</section> 2468 2469<style> 2470 2471</style> 2472 2473<!-- Magnific Popup CSS & JS --> 2474<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
2475<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
2475 2476
2477<script> 2478$(document).ready(function() { 2479 $('.video-popup').magnificPopup({ 2480 type: 'iframe', 2481 iframe: { 2482 patterns: { 2483 youtube: { 2484 index: 'youtube.com/', 2485 id: function(url) { 2486 var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/); 2487 if (!m || !m[1]) return null; 2488 return m[1]; 2489 }, 2490 src: 'https://www.youtube.com/embed/7PF7yu_xcuI?si=xU1AzpNB7Lf6GV8q' 2491 } 2492 } 2493 } 2494 }); 2495}); 2496</script>
2496 2497<!-- Support Us Section --> 2498<section class="support-us py-5"> 2499 <div class="container"> 2500 <div class="row align-items-center g-4"> 2501 2502 <!-- Left Content --> 2503 <div class="col-lg-6 col-md-12"> 2504 <h2 class="section-title text-royal mb-4">Support Us</h2> 2505 <p class="section-text"> 2506 Your support helps us create meaningful opportunities for young people 2507 and build stronger, more resilient communities. By contributing, you 2508 enable us to offer safe spaces, training, and resources that empower 2509 individuals to thrive. 2510 </p> 2511 <p class="section-text"> 2512 Whether through donations, volunteering, or spreading the word, your 2513 involvement makes a real difference. Join us in shaping a brighter 2514 future for the next generation. 2515 </p> 2516 <!-- Buttons --> 2517 <a href="support-us/donate" class="btn btn-royal ">Donate Now</a> 2518 <a href="support-us/donate" class="btn btn-royal-outline">Support a Campaign</a> 2519 </div> 2520 2521 <!-- Right Image --> 2522 <div class="col-lg-6 col-md-12"> 2523 <img src="assets/images/background/support1.png" alt="Support Us" class="img-fluid rounded "> 2524 </div> 2525 2526 </div> 2527 2528 <!-- Counter Section --> 2529 <div class="grid-container" style="display:none"> 2530 <div class="grid"> 2531 <div class="card" data-target="1984"> 2532 <div class="nuLabel">Since</div> 2533 <div class="number"><span class="count-number">0</span></div> 2534 </div> 2535 <div class="card" data-target="40"> 2536 <div class="nuLabel">Years Running</div> 2537 <div class="number"><span class="count-number">0</span><span class="suffix">+</span></div> 2538 </div> 2539 <div class="card" data-target="1600"> 2540 <div class="nuLabel">Youth Mentored</div> 2541 <div class="number"><span class="count-number">0</span><span class="suffix">+</span></div> 2542 </div> 2543 <div class="card" data-target="1200"> 2544 <div class="nuLabel">Programs</div> 2545 <div class="number"><span class="count-number">0</span><span class="suffix">+</span></div> 2546 </div> 2547 </div> 2548 </div> 2549 2550 </div> 2551</section> 2552 2553<style> 2554 .support-us { 2555 background: linear-gradient(135deg, #4169e1, #87cefa); 2556 padding: 80px 0; 2557 } 2558 2559 .section-title { 2560 font-size: 4rem; 2561 font-weight: 700; 2562 } 2563 2564 .text-royal { color: #fff; } 2565 2566 .section-text { 2567 font-size: 1rem; 2568 line-height: 1.7; 2569 color: #f8faff; 2570 margin-bottom: 1rem; 2571 } 2572 2573 /* Buttons */ 2574 .btn-royal { 2575 background-color: #fff; 2576 color: #4169e1; 2577 border-radius: 35px; 2578 padding: 10px 30px; 2579 font-weight: 600; 2580 text-decoration: none; 2581 display: inline-block; 2582 transition: all 0.3s ease; 2583 } 2584 .btn-royal:hover { 2585 background-color: #e0e7ff; 2586 color: #2a3daa; 2587 transform: translateY(-2px); 2588 } 2589 2590 .btn-royal-outline { 2591 background-color: transparent; 2592 color: #fff; 2593 border: 2px solid #fff; 2594 border-radius: 35px; 2595 padding: 10px 30px; 2596 font-weight: 600; 2597 text-decoration: none; 2598 display: inline-block; 2599 transition: all 0.3s ease; 2600 } 2601 .btn-royal-outline:hover { 2602 background-color: #fff; 2603 color: #D7B468; 2604 transform: translateY(-2px); 2605 } 2606
2607 .support-us img { 2608 width: 100%; 2609 height: auto; 2610 object-fit: cover; 2611 } 2612 2613 /* Counter Section */ 2614 .grid-container { 2615 margin-top: 40px; 2616 display: flex; 2617 justify-content: center; 2618 padding-top: 30px; 2619 } 2620 2621 .grid { 2622 display: grid; 2623 gap: 18px; 2624 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 2625 width: 100%; 2626 max-width: 1000px; 2627 } 2628 2629 .card { 2630 /* background: linear-gradient(135deg, #ffc107, #156293); 2631 border: 1px solid rgba(255, 255, 255, 0.04); 2632 padding: 20px; 2633 border-radius: 12px; 2634 box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6); 2635 text-align: center; 2636 */ 2637 2638 } 2639 2640 .nuLabel { 2641 font-size: 1.5rem !important; 2642 color: #fff; 2643 } 2644 2645 .number { 2646 font-weight: 700; 2647 font-size: 2.5rem; 2648 color: #fff; 2649 } 2650 2651 .suffix { 2652 font-size: 1.5rem; 2653 font-weight: 700; 2654 margin-left: 2px; 2655 } 2656 2657 /* Responsive adjustments */ 2658 @media (max-width: 991px) { 2659 .section-title { font-size: 2.8rem; text-align: center; } 2660 .section-text { text-align: center; } 2661 .btn-royal, .btn-royal-outline { display: block; margin: 0 auto 10px; } 2662 } 2663 2664 @media (max-width: 768px) { 2665 .grid { grid-template-columns: repeat(2, 1fr); } 2666 } 2667 2668 @media (max-width: 575px) { 2669 .section-title { font-size: 2rem; } 2670 .section-text { font-size: 0.9rem; } 2671 .number { font-size: 1.8rem; } 2672 .grid-container{margin-top:20px;} 2673 .nuLabel { 2674 font-size: 1.5rem !important; 2675 color: #fff; 2676 } 2677 } 2678 2679</style> 2680
2681<script> 2682 document.addEventListener('DOMContentLoaded', () => { 2683 const cards = document.querySelectorAll('.cardsl'); 2684 const observer = new IntersectionObserver((entries, obs) => { 2685 entries.forEach(entry => { 2686 if (entry.isIntersecting) { 2687 startCounting(entry.target); 2688 obs.unobserve(entry.target); 2689 } 2690 }); 2691 }, { threshold: 0.5 }); 2692 2693 cards.forEach(card => observer.observe(card)); 2694 }); 2695 2696 function startCounting(cardElement) { 2697 const countElement = cardElement.querySelector('.count-number'); 2698 const target = parseInt(cardElement.getAttribute('data-target')); 2699 let current = 0; 2700 const duration = 2000; 2701 const step = target / (duration / 20); 2702 2703 function update() { 2704 current += step; 2705 if (current < target) { 2706 countElement.textContent = Math.ceil(current); 2707 setTimeout(update, 20); 2708 } else { 2709 countElement.textContent = target; 2710 } 2711 } 2712 update(); 2713 } 2714</script>
2714 2715<style> 2716 2717 /* Cookie Bar */ 2718 .cookie-bar { 2719 border:2px dashed royalblue; 2720 position: fixed; 2721 bottom: 20px; 2722 left: 50%; 2723 transform: translateX(-50%); 2724 width: 60%; 2725 max-width: 700px; 2726 background: #fff; 2727 box-shadow: 0 0 12px rgba(0,0,0,0.1); 2728 border-radius: 12px; 2729 padding: 20px; 2730 text-align: left; 2731 z-index: 10000; 2732 transition: all 0.5s ease; 2733 opacity: 1; 2734 } 2735 2736 .cookie-bar.hide { 2737 transform: translateX(-50%) translateY(100px); 2738 opacity: 0; 2739 pointer-events: none; 2740 } 2741 2742 .cookie-bar p { 2743 margin: 0 0 15px 0; 2744 font-size: 14px; 2745 color: #444; 2746 line-height: 1.5; 2747 } 2748 2749 .cookie-bar .actions { 2750 display: flex; 2751 gap: 10px; 2752 justify-content: flex-end; 2753 } 2754 2755 /* Buttons */ 2756 .cookie-btn { 2757 border: none; 2758 cursor: pointer; 2759 border-radius: 8px; 2760 font-size: 14px; 2761 padding: 10px 18px; 2762 transition: 0.3s ease; 2763 } 2764 2765 .btn-preferences { 2766 background: #e9ecef; 2767 color: #333; 2768 } 2769 2770 .btn-preferences:hover { 2771 background: #d6d8da; 2772 } 2773 2774 .btn-accept { 2775 background: #007bff; 2776 color: white; 2777 } 2778 2779 .btn-accept:hover { 2780 background: #0056b3; 2781 } 2782 2783 /* Modal Overlay */ 2784 .cookie-modal-overlay { 2785 position: fixed; 2786 inset: 0; 2787 background: rgba(0,0,0,0.5); 2788 display: none; 2789 justify-content: center; 2790 align-items: center; 2791 z-index: 10001; 2792 } 2793 2794 .cookie-modal-overlay.active { 2795 display: flex; 2796 } 2797 2798 /* Modal */ 2799 .cookie-modal { 2800 background: #fff; 2801 width: 90%; 2802 max-width: 600px; 2803 max-height: 80vh; 2804 border-radius: 14px; 2805 box-shadow: 0 4px 15px rgba(0,0,0,0.2); 2806 padding: 25px; 2807 overflow-y: auto; 2808 animation: slideUp 0.5s ease forwards; 2809 } 2810 2811 @keyframes slideUp { 2812 from { transform: translateY(100%); opacity: 0; } 2813 to { transform: translateY(0); opacity: 1; } 2814 } 2815 2816 .cookie-modal h2 { 2817 margin-top: 0; 2818 font-size: 20px; 2819 color: #222; 2820 } 2821 2822 .cookie-modal p { 2823 font-size: 14px; 2824 color: #555; 2825 margin-bottom: 20px; 2826 } 2827 2828 .cookie-category { 2829 border: 1px solid #eee; 2830 border-radius: 10px; 2831 padding: 15px; 2832 margin-bottom: 10px; 2833 } 2834 2835 .cookie-category h4 { 2836 display: flex; 2837 justify-content: space-between; 2838 align-items: center; 2839 font-size: 15px; 2840 color: #222; 2841 margin: 0; 2842 } 2843 2844 .cookie-category p { 2845 font-size: 13px; 2846 color: #555; 2847 margin-top: 8px; 2848 } 2849 2850 /* Toggle Switch */ 2851 .switch { 2852 position: relative; 2853 display: inline-block; 2854 width: 46px; 2855 height: 24px; 2856 } 2857 2858 .switch input { 2859 opacity: 0; 2860 width: 0; 2861 height: 0; 2862 } 2863 2864 .sliderx { 2865 position: absolute; 2866 cursor: pointer; 2867 top: 0; left: 0; 2868 right: 0; bottom: 0; 2869 background-color: #ccc; 2870 border-radius: 24px; 2871 transition: 0.4s; 2872 } 2873 2874 .sliderx:before { 2875 position: absolute; 2876 content: ""; 2877 height: 18px; 2878 width: 18px; 2879 left: 3px; 2880 bottom: 3px; 2881 background-color: white; 2882 border-radius: 50%; 2883 transition: 0.4s; 2884 } 2885 2886 input:checked + .sliderx { 2887 background-color: #28a745; 2888 } 2889 2890 input:checked + .sliderx:before { 2891 transform: translateX(22px); 2892 } 2893 2894 /* Modal Buttons */ 2895 .modal-actions { 2896 text-align: right; 2897 margin-top: 20px; 2898 } 2899 2900 .modal-actions button { 2901 margin-left: 10px; 2902 } 2903 2904 .btn-save { 2905 background: #007bff; 2906 color: #fff; 2907 } 2908 2909 .btn-save:hover { 2910 background: #0056b3; 2911 } 2912 2913 2914 2915 2916 2917/* Responsive Design for Mobile Devices */ 2918@media (max-width: 768px) { 2919 .cookie-bar { 2920 width: 95%; 2921 bottom: 10px; 2922 padding: 15px; 2923 } 2924 2925 .cookie-bar p { 2926 font-size: 13px; 2927 } 2928 2929 .cookie-btn { 2930 font-size: 13px; 2931 padding: 8px 14px; 2932 } 2933 2934 .cookie-modal { 2935 width: 95%; 2936 padding: 20px; 2937 } 2938 2939 .cookie-modal h2 { 2940 font-size: 18px; 2941 } 2942 2943 .cookie-modal p, 2944 .cookie-category p { 2945 font-size: 13px; 2946 } 2947 2948 .cookie-category h4 { 2949 font-size: 14px; 2950 } 2951 2952 .modal-actions button { 2953 font-size: 13px; 2954 padding: 8px 14px; 2955 } 2956} 2957 2958</style> 2959 2960<!-- Cookie Bar --> 2961<div class="cookie-bar" id="cookieBar"> 2962 <p> 2963 We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience and analyze website traffic. By clicking âAccept,â you agree to our website's cookie use as described
2963in our <a href="https://newark.org.uk/cookie-policy" style="color:#007bff;text-decoration:none;">Cookie Policy</a>. 2964 </p> 2965 <div class="actions"> 2966 <button class="cookie-btn btn-preferences" id="rejectAll">Reject All</button> 2967 <button class="cookie-btn btn-preferences d-none" id="openPrefs">Preferences</button> 2968 <button class="cookie-btn btn-accept" id="acceptCookies">I accept</button> 2969 </div> 2970</div> 2971 2972<!-- Cookie Preferences Modal --> 2973<div class="cookie-modal-overlay" id="cookieModal"> 2974 <div class="cookie-modal"> 2975 <h2>Cookie Preferences</h2> 2976 <p>You can choose which types of cookies to allow. Your preferences will be saved for 12 months under <b>YOUTH_LONDON_COOKIE_CONSENT</b>.</p> 2977 2978 <div class="cookie-category"> 2979 <h4>Essential Cookies 2980 <label class="switch"><input type="checkbox" checked disabled><span class="sliderx"></span></label> 2981 </h4> 2982 <p>These cookies are necessary for basic site functionality and cannot be disabled.</p> 2983 </div> 2984 2985 <div class="cookie-category"> 2986 <h4>Performance Cookies 2987 <label class="switch"><input type="checkbox" id="performance"><span class="sliderx"></span></label> 2988 </h4> 2989 <p>Help us improve website performance and functionality.</p> 2990 </div> 2991 2992 <div class="cookie-category"> 2993 <h4>Analytics Cookies 2994 <label class="switch"><input type="checkbox" id="analytics"><span class="sliderx"></span></label> 2995 </h4> 2996 <p>Used to understand how visitors interact with our site.</p> 2997 </div> 2998 2999 <div class="cookie-category"> 3000 <h4>Advertising Cookies 3001 <label class="switch"><input type="checkbox" id="advertising"><span class="sliderx"></span></label> 3002 </h4> 3003 <p>Used to personalize ads and track marketing effectiveness.</p> 3004 </div> 3005 3006 <div class="cookie-category"> 3007 <h4>Social Media Cookies 3008 <label class="switch"><input type="checkbox" id="social"><span class="sliderx"></span></label> 3009 </h4> 3010 <p>Enable content sharing on social media platforms.</p> 3011 </div> 3012 3013 <div class="modal-actions"> 3014 <button class="cookie-btn" id="closeModal">Cancel</button> 3015 <button class="cookie-btn btn-save" id="savePrefs">Save Preferences</button> 3016 </div> 3017 </div> 3018</div> 3019
3020<script> 3021 const bar = document.getElementById("cookieBar"); 3022 const modal = document.getElementById("cookieModal"); 3023 const TERM_KEY = "YOUTH_LONDON_COOKIE_CONSENT"; 3024 3025// hide bar for minimal setting 3026 // Accept all 3027 document.getElementById("rejectAll").onclick = () => { 3028 const data = { 3029 essential: true, 3030 performance: true, 3031 analytics: true, 3032 advertising: true, 3033 social: true, 3034 consent_date: new Date().toISOString(), 3035 duration_months: 12 3036 }; 3037 localStorage.setItem(TERM_KEY, JSON.stringify(data)); 3038 hideBarSmoothly(); 3039 }; 3040 3041 3042 // Show bar only first time 3043 if (localStorage.getItem(TERM_KEY)) { 3044 bar.style.display = "none"; 3045 } 3046 3047 // Open modal 3048 document.getElementById("openPrefs").onclick = () => modal.classList.add("active"); 3049 document.getElementById("closeModal").onclick = () => modal.classList.remove("active"); 3050 3051 // Smooth hide function 3052 function hideBarSmoothly() { 3053 bar.classList.add("hide"); 3054 setTimeout(() => { 3055 bar.style.display = "none"; 3056 }, 600); 3057 } 3058 3059 // Accept all 3060 document.getElementById("acceptCookies").onclick = () => { 3061 const data = { 3062 essential: true, 3063 performance: true, 3064 analytics: true, 3065 advertising: true, 3066 social: true, 3067 consent_date: new Date().toISOString(), 3068 duration_months: 12 3069 }; 3070 localStorage.setItem(TERM_KEY, JSON.stringify(data)); 3071 hideBarSmoothly(); 3072 }; 3073 3074 // Save preferences 3075 document.getElementById("savePrefs").onclick = () => { 3076 const data = { 3077 essential: true, 3078 performance: document.getElementById("performance").checked, 3079 analytics: document.getElementById("analytics").checked, 3080 advertising: document.getElementById("advertising").checked, 3081 social: document.getElementById("social").checked, 3082 consent_date: new Date().toISOString(), 3083 duration_months: 12 3084 }; 3085 localStorage.setItem(TERM_KEY, JSON.stringify(data)); 3086 modal.classList.remove("active"); 3087 hideBarSmoothly(); 3088 }; 3089</script>
3089<style> 3090/* =============================== 3091 FOOTER STYLING 3092================================ */ 3093footer { 3094 background: #002262; /* Royal Blue */ 3095 color: #ffffff; 3096 font-family: "Montserrat", sans-serif; 3097} 3098 a{ 3099 text-decoration:none; 3100 } 3101footer h5 { 3102 font-size: 1.1rem; 3103 font-weight: 700; 3104 margin-bottom: 1rem; 3105 text-transform: uppercase; 3106 color: #ffffff; 3107 position: relative; 3108 padding-bottom: 6px; 3109 overflow: hidden; 3110} 3111 3112footer h5::after { 3113 content: ""; 3114 position: absolute; 3115 bottom: 0; 3116 left: 0; 3117 width: 100px; 3118 height: 2px; 3119 background: linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0) 70%); 3120 background-size: 200% 100%; 3121 animation: slide-border 2s linear infinite; 3122} 3123 3124@keyframes slide-border { 3125 0% { background-position: 0 0; } 3126 100% { background-position: -200% 0; } 3127} 3128 3129.footer-link { 3130 color: #fff; 3131 text-decoration: none; 3132 display: inline-block; 3133 margin: 2px 0; 3134 font-size: 18px; 3135 transition: all 0.3s ease; 3136} 3137 3138.footer-link:hover { 3139 color: #fff; 3140} 3141 3142.footer-icon { 3143 display: inline-flex; 3144 align-items: center; 3145 justify-content: center; 3146 width: 42px; 3147 height: 42px; 3148 margin: 0 6px 6px 0; 3149 border-radius: 50%; 3150 font-size: 18px; 3151 background-color: #ffffff; 3152 color: #002262; 3153 transition: all 0.3s ease; 3154} 3155 3156.footer-icon:hover { 3157 background-color: #002262; 3158 color: #ffffff; 3159 transform: scale(1.15); 3160} 3161 3162footer hr { 3163 border-color: rgba(255, 255, 255, 0.3); 3164} 3165 3166footer p { 3167 font-size: 17px; 3168 margin-bottom: 0.5rem; 3169 color: #ffffff; 3170} 3171 3172/* WhatsApp Fixed Button */ 3173.whatsapp-btn { 3174 position: fixed; 3175 bottom: 90px; 3176 right: 20px; 3177 z-index: 1000; 3178} 3179 3180.whatsapp-img { 3181 width: 55px; 3182 border-radius: 50%; 3183 border: 2px solid #ffffff; 3184 box-shadow: 0 5px 15px rgba(0,0,0,0.3); 3185 transition: transform 0.3s ease, box-shadow 0.3s ease; 3186 animation: pulse 2.5s infinite; 3187} 3188 3189.whatsapp-btn:hover .whatsapp-img { 3190 transform: scale(1.1); 3191 box-shadow: 0 8px 20px rgba(0,0,0,0.4); 3192} 3193 3194@keyframes pulse { 3195 0%, 100% { transform: scale(1); } 3196 50% { transform: scale(1.15); } 3197} 3198 3199 3200 3201.link { text-decoration:none; } 3202 3203/* =============================== 3204 RESPONSIVE FOOTER 3205================================ */ 3206@media (max-width: 991.98px) { 3207 footer .row.text-center.text-md-start { 3208 text-align: center; 3209 } 3210 3211 footer .col-md-3 { 3212 margin-bottom: 2rem; 3213 } 3214 3215 footer h5 { 3216 font-size: 1rem; 3217 } 3218 3219 .footer-icon { 3220 margin: 6px 3px 6px 3px; 3221 } 3222 3223 footer p, .footer-link { 3224 font-size: 18px; 3225 } 3226 footer h5::after { 3227 width: 100%; /* smaller underline for mobile */ 3228 display:none !important; 3229 } 3230 3231} 3232 3233@media (max-width: 575.98px) { 3234 footer .container-fluid { 3235 padding: 40px 15px 20px 15px; 3236 } 3237 3238 3239 .whatsapp-img { 3240 width: 50px; 3241 } 3242 3243 .footertitle{ 3244 text-align:center; 3245 color:#fff !important; 3246 } 3247} 3248/* Mobile responsive */ 3249@media (max-width: 767px) { 3250 #backToTop { 3251 width: 40px; /* smaller circle */ 3252 height: 40px; 3253 font-size: 16px; 3254 line-height: 40px; 3255 bottom: 10px; 3256 right: 10px; 3257 } 3258} 3259</style> 3260 3261 3262<!-- Footer Start --> 3263<footer class="text-white" style="background: linear-gradient(0deg, #002262, #0a40a4, #002262);"> 3264 <div class="container-fluid" style="padding:50px 5% 10px 5%"> 3265 3266 <div class="row text-center text-md-start"> 3267 3268 <!-- About Section --> 3269 <div class="col-md-4 mb-4"> 3270 <div class="text-center mb-3"> 3271 <img src="https://newark.org.uk/assets/images/logo/logo.png" style="height:100px" alt="Logo"> 3272 </div> 3273 <div class="pb-2 d-flex gap-2" style="margin-top:10px; width:100%;display:flex;justify-content:center"> 3274 <a href="https://play.google.com/store/apps/details?id=uk.co.signsoft.newarkyouthlondon" target="_blank"> 3275 <img src="https://newark.org.uk/assets/images/icons/googlePlay.png" class="img img-fluid mt-1" style="height:;" alt=""> 3276 </a> 3277 <a href="https://apps.apple.com/us/app/newark-youth-london/id6758913891" target="_blank"> 3278 <img src="https://newark.org.uk/assets/images/icons/apple.png" class="img img-fluid mt-1" style="height:;" alt=""> 3279 </a> 3280 </div> 3281 </div> 3282 3283 3284<!-- Quick Links Section --> 3285<div class="col-md-4 mb-4"> 3286<div class="container"> 3287 <div class="row"> 3288 <div class="col-md-6 mb-1 p-1 col-6"> 3289 <img src="https://newark.org.uk/assets/images/logo/11.jpg" class="img-fluid rounded"> 3290 </div> 3291 <div class="col-md-6 mb-1 p-1 col-6"> 3292 <img src="https://newark.org.uk/assets/images/logo/22.jpg" class="img-fluid rounded"> 3293 </div> 3294 <div class="col-md-6 mb-1 p-1 col-6"> 3295 <img src="https://newark.org.uk/assets/images/logo/33.jpg" class="img-fluid rounded"> 3296 </div> 3297 <div class="col-md-6 mb-1 p-1 col-6"> 3298 <img src="https://newark.org.uk/assets/images/logo/44.jpg" class="img-fluid rounded"> 3299 </div> 3300 3301 </div> 3302</div> 3303</div> 3304 3305 3306 <!-- Contact Section --> 3307 <div class="col-md-4 mb-2"> 3308 <p style="color:#fff;margin:0"><i class="fas fa-map-marker-alt"></i> Unit S2, Whitechapel Centre, 85 Myrdle Street, London E1 1HL</p> 3309 <p style="margin-bottom:0"> 3310 <a class="footer-link" style="color:#fff" href="mailto:[email protected]"> 3311 <i class="fas fa-envelope"></i> [email protected] 3312 </a> 3313 </p> 3314 3315 <p style="margin-bottom:0"> 3316 <a class="footer-link" style="color:#fff" href="tel:+4407 392 2121"> 3317 <i class="fas fa-phone "></i> 0207 392 2121 3318 </a> 3319 </p> 3320 <p > 3321 <i class="fas fa-dot-circle" style="color:#fff;"></i> Charity Reg: 1112289 3322 </p> 3323 <div class="">
3324 <a href="https://newark.org.uk/privacy-policy" style="font-size:16px;color:#fff" class=""> 3325 <i class="fa fa-caret-right"></i> Privacy Policy 3326 </a> 3327 <span style="padding:0 15px"></span> 3328 <a href="https://newark.org.uk/cookie-policy" style="font-size:16px;color:#fff" class=""> 3329 <i class="fa fa-caret-right"></i> Cookie Policy 3330 </a> 3331 </div> 3332 <div class="text- mt-2"> 3333 <a href="https://www.facebook.com/newarkyl/" target="_blank" class="footer-icon"> 3334 <i class="fab fa-facebook-f"></i> 3335 </a> 3336 <a href="https://www.instagram.com/newarkyouthldn?igsh=MXRiODk2ZXN3YTVqcw==" target="_blank" class="footer-icon"> 3337 <i class="fab fa-instagram"></i> 3338 </a> 3339 <a href="https://www.youtube.com/@NewarkYL" target="_blank" class="footer-icon"> 3340 <i class="fab fa-youtube"></i> 3341 </a> 3342 <a href="https://www.tiktok.com/@newark.youth.lond" target="_blank" class="footer-icon"> 3343 <i class="fab fa-tiktok"></i> 3344 </a> 3345 </div> 3346 3347 3348 </div> 3349 3350 </div> 3351 3352 <hr style="border-color: #fff;"> 3353 3354 <!-- Footer Bottom --> 3355 <div class="row align-items-center"> 3356 <div class="col-md-12 text-center"> 3357 <div class="text-center"> 3358 <p class="mb-0 copywrite">© 2026 Newark Youth London</p> 3359 </div> 3360 </div> 3361 </div> 3362 </div> 3363</footer> 3364 3365<!-- WhatsApp Fixed Button 3366<a href="https://wa.me/" target="_blank" class="whatsapp-btn"> 3367 <img src="https://newark.org.uk/assets/images/icons/whatsapp2.png" class="whatsapp-img" alt="WhatsApp"> 3368</a>--> 3369 3370<a href="#" id="scroll_top" class="scrolltop hideOnApp" title="Back to top" style="display: none;"> 3371 <!-- SVG circular progress --> 3372 <svg class="progress-ring" width="56" height="56" viewBox="0 0 56 56" aria-hidden="true"> 3373 <circle class="ring-bg" cx="28" cy="28" r="24"></circle> 3374 <circle class="ring-progress" cx="28" cy="28" r="20.66568047337278" style="stroke-dasharray: 129.846, 129.846; stroke-dashoffset: 72.1582;"></circle> 3375 </svg> 3376 <i class="fa fa-arrow-up icon" aria-hidden="true"></i> 3377</a> 3378 3379<style> 3380.scrolltop { 3381 position: fixed; 3382 right: 10px; 3383 bottom: 50px; 3384 width: 56px; 3385 height: 56px; 3386 border-radius: 50%; 3387 background: #4169e1; 3388 color: #fff; 3389 z-index: 80; 3390 text-decoration: none; 3391 box-shadow: 0 4px 12px rgba(0,0,0,0.2); 3392 display: none; 3393 align-items: center; 3394 justify-content: center; 3395 overflow: hidden; /* ð¥ important */ 3396} 3397 3398.progress-ring { 3399 position: absolute; 3400 top: 0; 3401 left: 0; 3402 transform: rotate(-90deg); 3403 pointer-events: none; 3404} 3405 3406.ring-progress { 3407 fill: none; 3408 stroke: #ffc107; 3409 stroke-width: 4; 3410 stroke-linecap: round; 3411 transition: stroke-dashoffset 0.2s linear; 3412} 3413 3414.scrolltop .icon { 3415 position: relative; 3416 z-index: 2; 3417} 3418 3419</style>
3420<script> 3421document.addEventListener("DOMContentLoaded", function () { 3422 const scrollBtn = document.getElementById("scroll_top"); 3423 const progressCircle = scrollBtn.querySelector(".ring-progress"); 3424 3425 const radius = progressCircle.r.baseVal.value; 3426 const circumference = 2 * Math.PI * radius; 3427 3428 progressCircle.style.strokeDasharray = circumference; 3429 progressCircle.style.strokeDashoffset = circumference; 3430 3431 function updateProgress() { 3432 const scrollTop = window.scrollY; 3433 const docHeight = document.documentElement.scrollHeight - window.innerHeight; 3434 const progress = scrollTop / docHeight; 3435 3436 progressCircle.style.strokeDashoffset = 3437 circumference - progress * circumference; 3438 3439 scrollBtn.style.display = scrollTop > 50 ? "flex" : "none"; 3440 } 3441 3442 window.addEventListener("scroll", updateProgress); 3443 3444 scrollBtn.addEventListener("click", function (e) { 3445 e.preventDefault(); 3446 window.scrollTo({ top: 0, behavior: "smooth" }); 3447 }); 3448}); 3449</script>
3449 3450 3451 3452 3453 3454 3455 3456
3457<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
3457 3458<!-- WOW.js --> 3459 3460
3461<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
3461 3462
3463<script src="https://newark.org.uk/assets/js/jquery.waypoints.js"></script>
vendor: 1 bytes, line 3463
3463
3464<script src="https://newark.org.uk/assets/js/script.js"></script>
vendor: 1 bytes, line 3464
3464
3465<script src="https://newark.org.uk/assets/js/owl.js"></script>
3465 3466<!-- Google reCAPTCHA v3 script -->
vendor: 61 bytes, lines 3466-3467
3466 3467<script src="https://www.google.com/recaptcha/api.js?render=
34676LcwLQEVAAAAABvQvZ6J5sTC8K7scFUJXyNkjpLw
vendor: 13 bytes, lines 3467-3468
3467"></script> 3468
3469<script> 3470 new WOW().init(); 3471 // testimonial-slider 3472 $('.testimonial-slider').owlCarousel({ 3473 loop: true, 3474 margin: 10, 3475 nav: false, 3476 dots: true, 3477 autoplay: true, 3478 responsive: { 3479 0: { 3480 items: 1 3481 }, 3482 600: { 3483 items: 2 3484 }, 3485 1000: { 3486 items: 4 3487 } 3488 } 3489 }); 3490 3491 3492 // blog post 3493$('.blog_post').owlCarousel({ 3494 loop: true, 3495 margin: 10, 3496 nav: false, 3497 dots: false, 3498 autoplay: true, 3499 stagePadding: 30, // Pixel value, 30% হলৠwindow width à¦à¦° 30% 3500 responsive: { 3501 0: { 3502 items: 1, 3503 stagePadding: 30 // small screens 3504 }, 3505 600: { 3506 items: 2, 3507 stagePadding: 60 // adjust for bigger screen 3508 }, 3509 1000: { 3510 items: 4, 3511 stagePadding: 200 // adjust for large screen 3512 } 3513 } 3514}); 3515 3516</script>
3516 3517
3518<script> 3519 // Switch panels on hover 3520 document.querySelectorAll('.mega-menu-categories button').forEach(btn => { 3521 btn.addEventListener('mouseenter', () => { 3522 const parent = btn.closest('.mega-menu'); 3523 parent.querySelectorAll('.mega-menu-categories button').forEach(b => b.classList.remove('active')); 3524 parent.querySelectorAll('.content-panel').forEach(panel => panel.classList.remove('active')); 3525 btn.classList.add('active'); 3526 parent.querySelector('#' + btn.dataset.target).classList.add('active'); 3527 }); 3528 }); 3529 3530 3531 // update title 3532 const currentPath = window.location.pathname; 3533 let currentPageName = currentPath.split("/").pop(); 3534 3535 // if empty, default to home 3536 if (!currentPageName || currentPageName === "index.html") { 3537 currentPageName = "Home"; 3538 } else { 3539 currentPageName = currentPageName.split(".")[0]; 3540 } 3541 3542 // replace hyphen with space & capitalize each word 3543 currentPageName = currentPageName.replace(/-/g, " "); 3544 currentPageName = currentPageName 3545 .split(" ") 3546 .map(word => word.charAt(0).toUpperCase() + word.slice(1)) 3547 .join(" "); 3548 3549 document.title = `${currentPageName} - Newark Youth London`; 3550 3551</script>
vendor: 1 bytes, line 3551
3551
3552<script> 3553// Show button when scrolling 3554window.onscroll = function() { 3555 const btn = document.getElementById("backToTop"); 3556 if (!btn) return; // element না থাà¦à¦²à§ script stop 3557 3558 if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { 3559 btn.style.display = "block"; 3560 } else { 3561 btn.style.display = "none"; 3562 } 3563}; 3564 3565 3566// Scroll to top smoothly 3567document.addEventListener("DOMContentLoaded", function() { 3568 const backToTop = document.getElementById("backToTop"); 3569 if (backToTop) { 3570 backToTop.addEventListener("click", () => { 3571 window.scrollTo({ top: 0, behavior: 'smooth' }); 3572 }); 3573 } 3574}); 3575 3576</script>
vendor: 1 bytes, line 3576
3576
3577<script> 3578 // Get the current page URL 3579 const currentUrl = window.location.href; 3580 3581 // Select all nav links 3582 const navLinks = document.querySelectorAll('.navbar a'); // adjust selector to your navbar links 3583 3584 navLinks.forEach(link => { 3585 // If the link href matches the current URL, add 'active' class 3586 if(currentUrl.includes(link.href)) { 3587 link.classList.add('active'); 3588 } 3589 }); 3590</script>
3590 3591<style> 3592 .submenu .active{color:#000 !important} 3593</style> 3594 3595<!-- app helper -->
3596<script src="https://newark.org.uk/assets/js/app-helper.js?v=1.28"></script>
3596 3597
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.