| Server IP : 172.67.201.108 / Your IP : 216.73.216.11 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="https://bmsvieira.github.io/letmescroll.js/css/letmescroll.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/magazine/magazine.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Magazine Demo | Canvas</title>
</head>
<body class="stretched dark">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<header id="header" class="d-none">
<div id="header-wrap"></div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap pt-3 pb-0 overflow-visible">
<div class="container-fluid">
<div class="row g-2">
<div class="col-md-2">
<div class="w-100 canvas-custom-scroll position-sticky top-0" data-height="100vh">
<div class="logo text-center">
<a href="#"><img src="images/[email protected]" alt=".." height="120"></a>
</div>
<div class="text-center live-date-time mb-5">
<div id="date-today" class="fs-5"></div>
<div id="time-today" class="fs-5"></div>
</div>
<div class="row gx-0 gy-2 grid-container">
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/1.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">TDC Awards Winner</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/2.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Production</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/3.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Logo Design</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/4.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Code Developer</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/5.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Book Writer</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/6.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Metaverse</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/7.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Graphics Design</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/8.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Book Writer</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/2.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Metaverse</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
<div class="col-12">
<div class="entry d-flex px-2 py-3">
<img src="demos/magazine/images/thumbs/10.jpeg" alt=".." class="rounded-6" width="70" height="70">
<div class="d-flex ms-3 flex-column">
<h5 class="mb-2"><a class="text-light" href="#">Graphics Design</a></h5>
<small class="text-smaller">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-10 post-grid-wrap">
<div class="position-relative mb-2">
<section id="slider" class="slider-element swiper_wrapper min-vh-75" data-autoplay="6000" data-nav="false" data-effect="fade" data-loop="true" data-speed="1000">
<div class="slider-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider-caption slider-caption-center">
<h3 class="display-4 fw-bold mb-1">Top 10 Destination for Spring</h3>
<div class="entry-meta align-icon-baseline">
<ul class="justify-content-center">
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
</div>
<div class="swiper-slide-bg" style="background-image: url('demos/magazine/images/slider/1.jpg'); background-position: 50% 30%;"></div>
</div>
<div class="swiper-slide">
<div class="slider-caption slider-caption-center">
<h3 class="display-4 fw-bold mb-1">Choose perfect for your health </h3>
<div class="entry-meta align-icon-baseline">
<ul class="justify-content-center">
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
</div>
<div class="swiper-slide-bg" style="background-image: url('demos/magazine/images/slider/2.jpg'); background-position: 50% 30%;"></div>
</div>
<div class="swiper-slide">
<div class="slider-caption slider-caption-center">
<h3 class="display-4 fw-bold mb-1">Know your steps</h3>
<div class="entry-meta align-icon-baseline">
<ul class="justify-content-center">
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
</div>
<div class="swiper-slide-bg" style="background-image: url('demos/magazine/images/slider/3.jpg'); background-position: 50% 30%;"></div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
</div>
<div class="row masonry-thumbs row-cols-2 row-cols-sm-3 gutter-10 grid-container">
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/1.jpg" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content m-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/2.jpg" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/3.gif" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/4.jpg" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content m-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="https://cms.portorocha.com/uploads/Google_VISD_Its_Nice_That_article_header2_fab2bae770.gif" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/11.jpg" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/6.jpg" alt="..." class="rounded-6"></a>
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/7.jpg" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/8.jpg" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/5.gif" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
GIF by <a href="https://pixabay.com/users/u_mey4kjj5ww-31374144/?utm_source=link-attribution&utm_medium=referral&utm_campaign=animation&utm_content=2498">u_mey4kjj5ww</a> from <a href="https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=animation&utm_content=2498">Pixabay</a>. <br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#" class="px-6"><img src="demos/magazine/images/cards/13.gif" alt="..." class="rounded-6 p-3"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/9.jpg" alt="..." class="rounded-6"></a>
</div>
<div class="entry-content mt-0">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit nobis veritatis possimus hic, placeat perspiciatis laboriosam suscipit cum ipsa id.
</div>
</div>
</div>
<div class="col">
<div class="entry">
<div class="entry-title title-sm">
<h3><a href="#">TDC Awards Winner: Logo Design</a></h3>
</div>
<div class="entry-meta align-icon-baseline">
<ul>
<li><i class="bi-calendar-event-fill"></i> 10th Feb 2021</li>
<li><a href="#"><i class="bi-chat-fill"></i> 13</a></li>
</ul>
</div>
<div class="entry-image my-4">
<a href="#"><img src="demos/magazine/images/cards/12.jpg" alt="..." class="rounded-6"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<script src="js/plugins.letmescroll.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const scrollPanels = document.querySelectorAll( '.canvas-custom-scroll' );
scrollPanels.forEach( (element) => {
let panelHeight = element.getAttribute('data-height') || "250px";
let panelWidth = element.getAttribute('data-width') || "auto";
let panelAutohide = element.getAttribute('data-autohide') || "true";
if( panelAutohide == "false" ) {
panelAutohide = false;
} else {
panelAutohide = true;
}
new LetMeScroll({
selector: element,
config : {
dimensions : {
width : panelWidth,
height : panelHeight,
},
scroll : {
autoHide: panelAutohide
}
}
});
});
});
document.addEventListener("DOMContentLoaded", function() {
setInterval('updateClock()', 1000);
});
function updateClock (){
// Current Date
var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
currentTime = new Date();
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
jQuery('#date-today').html( weekday[currentTime.getDay()] + ', ' + month[currentTime.getMonth()] + ' ' + currentTime.getDate() );
jQuery("#time-today").html(currentTimeString);
}
jQuery('.dark-mode').on( 'click', function() {
jQuery("body").toggleClass('dark');
return false;
});
</script>
</body>
</html>