| Server IP : 104.21.21.239 / 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=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="one-page/css/et-line.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/swiper.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/modern-blog/modern-blog.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Modern Blog Demo | Canvas</title>
</head>
<body class="stretched overlay-menu">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<header id="header" class="transparent-header header-size-md dark" data-responsive-class="not-dark" data-sticky-shrink="false">
<div id="header-wrap">
<div class="container-fluid">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo">
<a href="demo-modern-blog.html">
<img class="logo-default" srcset="images/logo.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
<img class="logo-dark" srcset="images/logo-dark.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
</a>
</div><!-- #logo end -->
<div class="primary-menu-trigger">
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
</button>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu text-lg-center">
<ul class="menu-container">
<li class="menu-item current"><a class="menu-link" href="#"><div>Home</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Articles</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Events</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Videos</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Contact</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="slider" class="slider-element min-vh-60 min-vh-md-100">
<div class="fslider h-100 position-absolute" data-speed="1800" data-pause="5000" data-animation="fade" data-arrows="true" data-pagi="false">
<div class="flexslider">
<div class="slider-wrap">
<!-- Slide 1 -->
<div class="slide text-center" style="background: url('demos/modern-blog/images/slider/1.jpg') center center; background-size: cover;">
<div class="bg-overlay">
<div class="bg-overlay-content align-items-end">
<div class="slide-caption px-4 pb-4 dark">
<h3 class="mb-2 h1"><a href="#" class="text-white">Thing That Make You Love</a></h3>
<p class="h5">Credibly synthesize seamless</p>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="slide text-center" style="background: url('demos/modern-blog/images/slider/2.jpg') center center; background-size: cover;">
<div class="bg-overlay">
<div class="bg-overlay-content align-items-end">
<div class="slide-caption px-4 pb-4 dark">
<h3 class="mb-2 h1"><a href="#" class="text-white">The Ultimate Guide To Fashion</a></h3>
<p class="h5">Monotonectally foster cross</p>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="slide text-center" style="background: url('demos/modern-blog/images/slider/3.jpg') center center; background-size: cover;">
<div class="bg-overlay">
<div class="bg-overlay-content align-items-end">
<div class="slide-caption px-4 pb-4 dark">
<h3 class="mb-2 h1"><a href="#" class="text-white">Learn How We Made Fashion</a></h3>
<p class="h5">Intrinsicly embrace scalable</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #Slider end -->
<!-- Content
============================================= -->
<section id="content" class="bg-light">
<div class="content-wrap pt-lg-0 pt-xl-0 pb-0">
<div class="container">
<div class="heading-block border-bottom-0 text-center pt-4 mb-3">
<h3>Articles</h3>
</div>
<!-- Posts
============================================= -->
<div class="row grid-container infinity-wrapper">
<!-- ARTICLE NO. 1 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-image mb-3">
<a href="demos/modern-blog/images/items/lightbox/1.jpg" data-lightbox="image" style="background: url('demos/modern-blog/images/items/1.jpg') no-repeat center center; background-size: cover; height: 278px;"></a>
</div>
<div class="entry-title">
<h3><a href="#">How To Make More travel By Doing Less</a></h3>
</div>
<div class="entry-content">
<p>Distinctively unleash e-business testing procedures vis-a-vis future-proof leadership. Energistically synthesize leveraged e-business whereas proactive.</p>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>MockUp</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
<!-- ARTICLE NO. 2 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-user">
<img src="demos/modern-blog/images/user/semicolonweb-logo.png" alt="Image">
<h4>SemiColonWeb Tech.<span>Themeforest.net</span></h4>
</div>
<div class="entry-image mb-3">
<a href="demos/modern-blog/images/items/lightbox/2.jpg" data-lightbox="image" style="background: url('demos/modern-blog/images/items/2.jpg') no-repeat center center; background-size: cover; height: 190px;">
</a>
</div>
<div class="entry-title">
<h3><a href="#">This is a Standard post with a Preview Image</a></h3>
</div>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim.</p>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Article</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
<!-- ARTICLE NO. 3 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-image mb-3">
<iframe width="560" height="315" src="https://www.youtube.com/embed/P3Huse9K6Xs" allowfullscreen style="border: 0;"></iframe>
</div>
<div class="entry-title">
<h3><a href="#">This is a Standard post with a Youtube Video</a></h3>
</div>
<div class="entry-content">
<p>Distinctively unleash e-business testing procedures vis-a-vis future-proof leadership. Energistically synthesize leveraged e-business whereas proactive. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur!</p>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Vimeo</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
<!-- ARTICLE NO. 4 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-image mb-3">
<a href="#">
<video class="d-block w-100" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
<source src='images/videos/explore.mp4' type='video/mp4'>
</video>
</a>
</div>
<div class="entry-title">
<h3><a href="#">This is a Standard post with a HTML5 Video</a></h3>
</div>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, voluptatem, dolorem animi nisi autem blanditiis enim culpa reiciendis et explicabo tenetur.</p>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Vimeo</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
<!-- ARTICLE NO. 5 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-user pb-2 border-bottom">
<img src="demos/modern-blog/images/user/semicolonweb-logo.png" alt="Image">
<h4>SemiColonWeb Tech.<span>Themeforest.net</span></h4>
</div>
<div class="entry-title pt-2">
<h3><a href="#">This is a Standard post with Author Name</a></h3>
</div>
<div class="entry-image mb-3">
<a href="demos/modern-blog/images/items/lightbox/3.jpg" data-lightbox="image" style="background: url('demos/modern-blog/images/items/3.jpg') no-repeat center bottom; background-size: cover; height: 210px;">
</a>
</div>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit ratione, voluptatem.</p>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Nature</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
<!-- ARTICLE NO. 6 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-image mb-3">
<div class="fslider" data-arrows="false" data-lightbox="gallery">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="demos/modern-blog/images/items/lightbox/4-1.jpg" data-lightbox="gallery-item" style="background: url('demos/modern-blog/images/items/4-1.jpg') no-repeat center bottom; background-size: cover; height: 278px;"></a></div>
<div class="slide"><a href="demos/modern-blog/images/items/lightbox/4-2.jpg" data-lightbox="gallery-item" style="background: url('demos/modern-blog/images/items/4-2.jpg') no-repeat center bottom; background-size: cover; height: 278px;"></a></div>
<div class="slide"><a href="demos/modern-blog/images/items/lightbox/4-3.jpg" data-lightbox="gallery-item" style="background: url('demos/modern-blog/images/items/4-3.jpg') no-repeat center bottom; background-size: cover; height: 278px;"></a></div>
</div>
</div>
</div>
</div>
<div class="entry-title">
<h3><a href="#">This is a Standard post with Gallery Image</a></h3>
</div>
<div class="entry-content">
<p>Magni velit facilis donec quasi quidem error animi, rutrum sequi mi officia possimus fames, corporis culpa minim mollis tempora fuga, sed ipsam fugiat dictumst, nascetur aptent inceptos taciti. Natoque. Praesentium.</p>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Travel</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
<!-- ARTICLE NO. 7 -->
<div class="col-md-6 p-3">
<div class="entry mb-1 dark" style="background: url('demos/modern-blog/images/items/5.jpg') no-repeat center bottom; background-size: cover; height: 525px;">
<div class="entry-title pt-3">
<h3><a href="#" class="text-light">Standard Full Image</a></h3>
</div>
<div class="entry-content">
<p class="fw-light">Magni velit facilis donec quasi quidem error animi, rutrum sequi mi officia.</p>
</div>
<div style="position: absolute; left: 0; bottom: 0; width: 100%;">
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Tools</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul>
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- ARTICLE NO. 8 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-user">
<img src="demos/modern-blog/images/user/3.jpg" alt="Image">
<h4>Annie Spratt.<span>Apple Inc.</span></h4>
</div>
<div class="entry-title">
<h3><a href="#">This is a Standard post with Image/Author</a></h3>
</div>
<div class="entry-image" style="padding-left: 20px; padding-right: 20px;">
<a href="demos/modern-blog/images/items/lightbox/8.jpg" data-lightbox="image" style="background: url('demos/modern-blog/images/items/8.jpg') no-repeat center bottom; background-size: cover; height: 160px;">
</a>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Food</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
<!-- ARTICLE NO. 9 -->
<div class="col-md-6 p-3">
<div class="entry mb-1">
<div class="entry-title pt-3">
<h3><a href="#">This is a Standard post with Gallery Thumbs</a></h3>
</div>
<div class="entry-image">
<div class="masonry-thumbs row row-cols-4 grid-container" data-big="2" data-lightbox="gallery">
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-1.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-1.jpg" alt="Gallery Thumb 1"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-2.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-2.jpg" alt="Gallery Thumb 2"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-3.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-3.jpg" alt="Gallery Thumb 3"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-4.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-4.jpg" alt="Gallery Thumb 4"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-5.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-5.jpg" alt="Gallery Thumb 5"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-6.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-6.jpg" alt="Gallery Thumb 6"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-7.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-7.jpg" alt="Gallery Thumb 7"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-8.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-8.jpg" alt="Gallery Thumb 9"></a>
<a class="grid-item" href="demos/modern-blog/images/items/lightbox/9-9.jpg" data-lightbox="gallery-item"><img src="demos/modern-blog/images/items/9-9.jpg" alt="Gallery Thumb 10"></a>
</div>
</div>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit ratione, voluptatem. Luctus montes. Voluptatem dolorem parturient, egestas lacus nemo tempus reiciendis! Nihil provident. Nibh placeat</p>
</div>
<div class="entry-meta no-separator nohover">
<ul class="justify-content-between mx-0">
<li><i class="bi-calendar3"></i> 10th Feb 2021</li>
<li>Food</li>
</ul>
</div>
<div class="entry-meta no-separator hover">
<ul class="mx-0">
<li><a href="#">View More →</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Infinity Scroll Loader
============================================= -->
<div class="text-center">
<div class="page-load-status hovering-load-status">
<div class="css3-spinner infinite-scroll-request">
<div class="css3-spinner-ball-pulse-sync">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="alert alert-warning text-center infinite-scroll-last mx-auto" style="max-width: 20rem;">End of content</div>
<div class="alert alert-warning text-center infinite-scroll-error mx-auto" style="max-width: 20rem;">No more pages to load</div>
</div>
</div>
<div class="text-center d-none">
<a href="demo-modern-blog-2.html" class="load-next-posts"></a>
</div>
</div>
<div class="section bg-white pt-4 pb-0 mt-4 mb-0">
<div class="container">
<div class="heading-block d-flex justify-content-center text-center border-bottom-0 mb-4">
<img src="demos/modern-blog/images/instagram.png" class="align-self-center" alt="Image" height="28"><h3 class="ms-2 text-capitalize ls-0 align-self-center">Instagram Feed</h3>
</div>
</div>
<div class="instagram-button position-relative">
<div id="instagram-photos" class="instagram-photos masonry-thumbs grid-container row row-cols-6 customjs" data-user="blog.canvastemplate"></div>
<a href="#" class="button bg-white button-light button-rounded text-dark m-0">Follow us on Instagram</a>
</div>
</div>
</div>
<footer>
<!-- Copyrights
============================================= -->
<div id="copyrights" class="bg-dark dark">
<div class="container">
<div class="row col-mb-30">
<div class="col-12 text-center text-muted">
Copyrights © 2023 All Rights Reserved by Canvas Inc.<br>
</div>
<div class="col-12">
<div class="d-flex justify-content-center">
<a href="#" class="social-icon si-small rounded-circle text-white bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="social-icon si-small rounded-circle text-white bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="social-icon si-small rounded-circle text-white bg-google">
<i class="fa-brands fa-google"></i>
<i class="fa-brands fa-google"></i>
</a>
<a href="#" class="social-icon si-small rounded-circle text-white bg-pinterest">
<i class="fa-brands fa-pinterest-p"></i>
<i class="fa-brands fa-pinterest-p"></i>
</a>
<a href="#" class="social-icon si-small rounded-circle text-white bg-vimeo">
<i class="fa-brands fa-vimeo-v"></i>
<i class="fa-brands fa-vimeo-v"></i>
</a>
<a href="#" class="social-icon si-small rounded-circle text-white bg-instagram">
<i class="bi-instagram"></i>
<i class="bi-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up rounded-circle"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- Infinite Scroll -->
<script src="js/plugins.infinitescroll.js"></script>
<!-- ADD-ONS JS FILES -->
<script>
// Infinity Scroll
jQuery(window).on( 'load', function(){
var $container = jQuery('.infinity-wrapper');
$container.infiniteScroll({
path: '.load-next-posts',
history: false,
status: '.page-load-status',
});
$container.on( 'load.infiniteScroll', function( event, response, path ) {
var $items = jQuery( response ).find('.infinity-loader');
// append items after images loaded
$items.imagesLoaded( function() {
$container.append( $items );
$container.isotope( 'insert', $items );
setTimeout( function(){
SEMICOLON.Modules.resizeVideos();
SEMICOLON.Modules.lightbox();
SEMICOLON.Modules.flexSlider();
}, 1000 );
});
});
});
</script>
</body>
</html>