| 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&family=PT+Serif:ital@0;1&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/components/datepicker.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/hostel/hostel.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Hostel | Canvas</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<header id="header" class="full-header border-0 header-size-custom" data-sticky-shrink="false">
<div id="header-wrap">
<div class="container-fluid pe-0">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo" class="col col-sm-auto">
<a href="index.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>
<div class="header-misc">
<a href="demo-hostel-tour.html" class="button fw-semibold">Book Now</a>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu">
<ul class="menu-container border-end-0 me-0">
<li class="menu-item current">
<a class="menu-link" href="demo-hostel.html"><div>Home</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="demo-hostel-about.html"><div>About Us</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="demo-hostel-tour.html"><div>Tour</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="demo-hostel-single.html"><div>Single</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="demo-hostel-contact.html"><div>Contact Us</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" style="background: linear-gradient(to right, rgba(0,0,0, 0.4) 20%, transparent 100%), url('demos/hostel/images/hero1.jpg') no-repeat center center / cover;">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-6 col-md-7 dark mb-5 mb-md-0 py-5">
<h2 class="display-4" style="font-weight: 600;">Your Home<br>Away From Home</h2>
<p class="mb-5 lead text-white op-07">Objectively matrix exceptional paradigms via strategic testing procedures. Enthusiastically repurpose impactful.</p>
<a href="demo-hostel-tour.html" class="button button-xlarge bg-color fw-normal text-transform-none ls-0">Book Now</a>
<a href="demo-hostel-contact.html" class="button button-xlarge button-white button-light fw-normal text-transform-none ls-0">Contact Us</a>
</div>
<div class="col-md-5 d-flex align-self-end align-items-center align-items-lg-end col-form">
<div class="card bg-white border-0 w-100 shadow p-3 rounded-0">
<div class="card-body">
<h3 class="mb-0">Check Availability</h3>
<div class="line line-sm mt-3"></div>
<div class="widget mt-0 form-widget" data-alert-type="inline">
<div class="form-result"></div>
<div class="form-availability-loader css3-spinner" style="position: absolute;">
<div class="css3-spinner-double-bounce1"></div>
<div class="css3-spinner-double-bounce2"></div>
</div>
<form id="form-availability" name="form-availability" action="include/form.php" method="post" class="form-availability mb-0">
<div class="input-daterange travel-date-group">
<div class="row">
<div class="col-6 col-md-12 col-lg-6 form-group">
<label class="text-transform-none fw-medium h6" for="form-availability-from">Check-In<small class="text-danger">*</small></label>
<input type="text" value="" class="form-control rounded-0 text-start required" id="form-availability-from" name="form-availability-from" placeholder="MM/DD/YYYY">
</div>
<div class="col-6 col-md-12 col-lg-6 form-group">
<label class="text-transform-none fw-medium h6" for="form-availability-to">Check-Out<small class="text-danger">*</small></label>
<input type="text" value="" class="form-control rounded-0 text-start required" id="form-availability-to" name="form-availability-to" placeholder="MM/DD/YYYY">
</div>
</div>
</div>
<div class="form-group">
<label class="text-transform-none fw-medium h6" for="form-availability-guests">Number of Guests<small class="text-danger">*</small></label>
<input type="number" class="required form-control rounded-0" id="form-availability-guests" name="form-availability-guests" min="1" max="10" value="" placeholder="1-19">
</div>
<div class="form-group">
<label class="text-transform-none fw-medium h6" for="form-availability-email">Email Address<small class="text-danger">*</small></label>
<input type="email" class="required form-control rounded-0 email" id="form-availability-email" name="form-availability-email" value="" placeholder="[email protected]">
</div>
<input type="text" class="d-none" id="form-availability-botcheck" name="form-availability-botcheck" value="">
<input type="hidden" name="prefix" value="form-availability-">
<button type="submit" id="form-availability-submit" name="form-availability-submit" class="button button-xlarge w-100 fw-normal text-transform-none ls-0 ms-0 mt-2" value="submit">Send Email</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap pb-0">
<div class="container">
<div class="row mt-5">
<div class="col-md-5 offset-md-1">
<h3 class="text-dark"><i class="bi-check-circle-fill color me-1 position-relative" style="top: 2px"></i> Why do you choose Canvas?</h3>
<p>Dramatically re-engineer integrated e-tailers without interoperable growth strategies. Collaboratively create customer directed "outside the box" thinking with world-class e-commerce.</p>
</div>
<div class="col-md-5 ps-md-5">
<h3 class="text-dark"><i class="bi-check-circle-fill color me-1 position-relative" style="top: 2px"></i> How we do</h3>
<p>Intrinsicly recaptiualize state of the art information for interactive applications. Dynamically optimize proactive convergence and timely value.</p>
</div>
</div>
<div class="clear my-5"></div>
<div class="row align-items-center">
<div class="col-lg-4 col-md-7 offset-lg-1 mb-5 mb-lg-0">
<h3 class="text-dark text-n-right mb-0">Bed, Breakfast<br>& Workspace</h3>
<div id="oc-testi" class="owl-carousel testimonials-carousel carousel-widget mt-3" data-margin="0" data-items="1" data-pagi="true" data-nav="false">
<div class="oc-item text-md-end">
<h4 class="fw-normal text-size-sm">"Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum repellendus!"</h4>
<h4 class="testi-meta mb-0 text-uppercase">- John Doe</h4>
<span class="mb-4 d-block">XYZ Inc.</span>
</div>
<div class="oc-item text-md-end">
<h4 class="fw-normal text-size-sm">"Natus voluptatum enim quod necessitatibus quis expedita harum provident eos obcaecati id culpa corporis molestias."</h4>
<h4 class="testi-meta mb-0 text-uppercase">- Collis Ta'eed</h4>
<span class="mb-4 d-block">Envato Inc.</span>
</div>
<div class="oc-item text-md-end">
<h4 class="fw-normal text-size-sm">"Fugit officia dolor sed harum excepturi ex iusto magnam asperiores molestiae qui natus obcaecati facere sint amet."</h4>
<h4 class="testi-meta mb-0 text-uppercase">- Mary Jane</h4>
<span class="mb-4 d-block">Google Inc.</span>
</div>
</div>
<div class="row justify-content-end align-items-center mt-4">
<div class="col text-end"><img src="demos/conference/images/sponcors/amazon.svg" alt="Image" width="80"></div>
<div class="col text-end"><img src="demos/conference/images/sponcors/google.svg" alt="Image" width="80"></div>
<div class="col text-end"><img src="demos/conference/images/sponcors/linkedin.svg" alt="Image" width="80"></div>
</div>
</div>
<div class="col-lg-5 col-md-5 ps-lg-4">
<img src="demos/hostel/images/section-1.jpg" alt="Image">
</div>
</div>
</div>
<div class="clear"></div>
<div class="section text-center studio-tab mb-0" style="background-color: #D6EBEE">
<div class="container mx-auto" style="max-width: 800px">
<div class="heading-block border-0">
<h3 class="text-dark">Check out your Comforts</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, perspiciatis.</span>
</div>
<div id="studio-tab-nav" class="nav canvas-alt-tabs tabs-alt tabs-bb tabs nav-tabs justify-content-center border-bottom-0 mb-4" role="tablist">
<a class="nav-link active" id="studio-lobby-tab" data-bs-toggle="tab" href="#studio-lobby" role="tab" aria-controls="studio-lobby" aria-selected="true" data-bg="#D6EBEE">Lobby</a>
<a class="nav-link" id="studio-deluxe-twin-room-tab" data-bs-toggle="tab" href="#studio-deluxe-twin-room" role="tab" aria-controls="studio-deluxe-twin-room" aria-selected="false" data-bg="#E4E4E4">Deluxe Twin Rooms</a>
<a class="nav-link" id="studio-dormitory-room-tab" data-bs-toggle="tab" href="#studio-dormitory-room" role="tab" aria-controls="studio-dormitory-room" aria-selected="false" data-bg="#EFF1FE">Dormitory Rooms</a>
<a class="nav-link" id="studio-4-mixed-bed-tab" data-bs-toggle="tab" href="#studio-4-mixed-bed" role="tab" aria-controls="studio-4-mixed-bed" aria-selected="false" data-bg="#EDF4EA">4 Bed Mixed</a>
</div>
<div class="tab-content mb-5">
<div class="tab-pane show active" id="studio-lobby" role="tabpanel" aria-labelledby="studio-lobby-tab">
<div class="fslider" data-smooth-height="false" data-pagi="false" data-arrows="false" data-thumbs="true">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide" data-thumb="demos/hostel/images/studios/1/thumbs/1.jpg"><img src="demos/hostel/images/studios/1/1.jpg" alt="Lobby"></div>
<div class="slide" data-thumb="demos/hostel/images/studios/1/thumbs/2.jpg"><img src="demos/hostel/images/studios/1/2.jpg" alt="Lobby"></div>
<div class="slide" data-thumb="demos/hostel/images/studios/1/thumbs/3.jpg"><img src="demos/hostel/images/studios/1/3.jpg" alt="Lobby"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="studio-deluxe-twin-room" role="tabpanel" aria-labelledby="studio-deluxe-twin-room-tab">
<div class="fslider" data-smooth-height="false" data-pagi="false" data-arrows="false" data-thumbs="true">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide" data-thumb="demos/hostel/images/studios/2/thumbs/1.jpg"><img src="demos/hostel/images/studios/2/1.jpg" alt="Deluxe Twin Room"></div>
<div class="slide" data-thumb="demos/hostel/images/studios/2/thumbs/2.jpg"><img src="demos/hostel/images/studios/2/2.jpg" alt="Deluxe Twin Room"></div>
<div class="slide" data-thumb="demos/hostel/images/studios/2/thumbs/3.jpg"><img src="demos/hostel/images/studios/2/3.jpg" alt="Deluxe Twin Room"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="studio-dormitory-room" role="tabpanel" aria-labelledby="studio-dormitory-room-tab">
<div class="fslider" data-smooth-height="false" data-pagi="false" data-arrows="false" data-thumbs="true">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide" data-thumb="demos/hostel/images/studios/3/thumbs/1.jpg"><img src="demos/hostel/images/studios/3/1.jpg" alt="Dormitory Room"></div>
<div class="slide" data-thumb="demos/hostel/images/studios/3/thumbs/2.jpg"><img src="demos/hostel/images/studios/3/2.jpg" alt="Dormitory Room"></div>
<div class="slide" data-thumb="demos/hostel/images/studios/3/thumbs/3.jpg"><img src="demos/hostel/images/studios/3/3.jpg" alt="Dormitory Room"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="studio-4-mixed-bed" role="tabpanel" aria-labelledby="studio-4-mixed-bed-tab">
<div class="fslider" data-smooth-height="false" data-pagi="false" data-arrows="false" data-thumbs="true">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide" data-thumb="demos/hostel/images/studios/4/thumbs/1.jpg"><img src="demos/hostel/images/studios/4/1.jpg" alt="4 Bed Mixed"></div>
<div class="slide" data-thumb="demos/hostel/images/studios/4/thumbs/2.jpg"><img src="demos/hostel/images/studios/4/2.jpg" alt="4 Bed Mixed"></div>
</div>
</div>
</div>
</div>
</div>
<a href="demo-hostel-single.html" class="button button-large bg-color text-transform-none fw-semibold ls-0">View Full Gallery</a>
<a href="demo-hostel-tour.html" class="button button-large bg-color text-transform-none fw-semibold ls-0">Book Now</a>
</div>
</div>
<div class="section my-5 bg-transparent section-counter">
<div class="container">
<div class="heading-block text-center mx-auto" style="max-width: 800px">
<h3 class="text-dark">Check out your Comforts</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, perspiciatis.</span>
</div>
<div class="clear"></div>
<div class="row justify-content-between mt-5">
<div class="col-md-3 col-sm-6 mb-5 mb-lg-0">
<h2 class="display-3">4.8</h2>
<div class="product-rating mb-1 color">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
<span class="d-block">2,0321 Ratings</span>
<a href="#" class="btn-link">See reviews<i class="bi-arrow-right"></i></a>
</div>
<div class="col-md-3 col-sm-6 mb-5 mb-lg-0">
<h2 class="counter"><span data-from="1" data-to="3" data-refresh-interval="1" data-speed="600"></span>.<span data-from="0" data-to="75" data-refresh-interval="100" data-speed="2000"></span><small>M</small></h2>
<span class="mb-2 d-block">People Liked and Follows our Hostels in Social Media.</span>
<div class="d-flex">
<a href="#" class="social-icon si-small me-1 h-op-09 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 me-1 h-op-09 text-white bg-instagram">
<i class="bi-instagram"></i>
<i class="bi-instagram"></i>
</a>
<a href="#" class="social-icon si-small me-1 h-op-09 text-white bg-pinterest">
<i class="fa-brands fa-pinterest-p"></i>
<i class="fa-brands fa-pinterest-p"></i>
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-5 mb-lg-0">
<h2 class="counter"><span data-from="10" data-to="4304" data-comma="true"></span>+</h2>
<span class="d-block">New People Comes Every Year.</span>
<a href="#" class="btn-link">https://google.com<i class="bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<div class="section m-0" style="background-color: #fcf5ed">
<div class="container">
<div class="row justify-content-between">
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-4">
<i class="bi-wifi color ms-0 mb-4 i-plain d-block float-none"></i>
<h4 class="mb-3">WiFi Available</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-4">
<i class="bi-cup color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">Cafeteria</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-4">
<i class="bi-display color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">Workspace Area</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-4">
<i class="bi-lock color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">Lockers</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-4">
<i class="bi-shield color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">100% Secured</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-4">
<i class="bi-printer color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">Printers & Fax</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-2">
<i class="bi-inbox color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">Well Furnished</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-2">
<i class="bi-clock color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">24x7 Access</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<!-- Feature Box
============================================= -->
<div class="col-lg-4 col-md-6 mb-2">
<i class="bi-controller color ms-0 mb-3 i-plain d-block float-none"></i>
<h4 class="mb-3">Other Activities</h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
</div>
</div>
</div>
<div class="section bg-transparent my-5">
<div class="container">
<div class="row align-items-center flex-md-row-reverse col-mb-50 mb-0">
<div class="col-lg-6">
<img class="box-img shadow-left" src="demos/hostel/images/box-img/1.jpg" alt="Image">
</div>
<div class="col-lg-6 pe-0 pe-md-5">
<h5 class="color fw-normal mb-2"><i class="bi-geo-alt"></i> Spain</h5>
<h3 class="text-dark h1 fw-semibold ls-0 mb-4">Canvas Penthouse</h3>
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius explicabo, optio repellat saepe inventore dicta quibusdam minima quia, ratione minus a consectetur dolorum, nulla provident tenetur.</p>
<h3 class="title-pricing mb-5">$39.99 <span>per week</span></h3>
<div class="row">
<div class="col-6">
<ul class="list-group list-group-flush">
<li class="list-group-item ps-0"><i class="bi-wifi me-2"></i>WiFi Availbale</li>
<li class="list-group-item ps-0"><i class="bi-cup me-2"></i>Breakfast Included</li>
<li class="list-group-item ps-0"><i class="bi-clock me-2"></i>24x7 access</li>
</ul>
</div>
<div class="col-6">
<ul class="list-group list-group-flush">
<li class="list-group-item ps-0"><i class="bi-lock me-2"></i>Lockers Available</li>
<li class="list-group-item ps-0"><i class="bi-boxes me-2"></i>Laundry Available</li>
<li class="list-group-item ps-0"><i class="bi-controller me-2"></i>Other Aminities</li>
</ul>
</div>
</div>
<a href="demo-hostel-single.html" class="button bg-color text-transform-none ls-0 mt-4 mx-0">View More Details</a>
</div>
</div>
<div class="clear"></div>
<div class="row align-items-center mt-6 col-mb-50 mb-lg-5">
<div class="col-lg-6">
<img class="box-img" src="demos/hostel/images/box-img/2.jpg" alt="Image">
</div>
<div class="col-lg-6 ps-md-5 mb-5 mb-md-0">
<h5 class="color fw-normal mb-2"><i class="bi-geo-alt"></i> Denmark</h5>
<h3 class="text-dark h1 fw-semibold ls-0 mb-4">Canvas Delux Bed</h3>
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius explicabo, optio repellat dolorum, nulla provident tenetur.</p>
<h3 class="title-pricing mb-5">$45.99 <span>per week</span></h3>
<div class="row">
<div class="col-6">
<ul class="list-group list-group-flush">
<li class="list-group-item ps-0"><i class="bi-wifi me-2"></i>WiFi Availbale</li>
<li class="list-group-item ps-0"><i class="bi-cup me-2"></i>Breakfast Included</li>
<li class="list-group-item ps-0"><i class="bi-clock me-2"></i>24x7 access</li>
</ul>
</div>
<div class="col-6">
<ul class="list-group list-group-flush">
<li class="list-group-item ps-0"><i class="bi-lock me-2"></i>Lockers Available</li>
<li class="list-group-item ps-0"><i class="bi-boxes me-2"></i>Laundry Available</li>
<li class="list-group-item ps-0"><i class="bi-controller me-2"></i>Other Aminities</li>
</ul>
</div>
</div>
<a href="demo-hostel-single.html" class="button bg-color text-transform-none ls-0 mt-4 mx-0">View More Details</a>
</div>
</div>
<div class="clear"></div>
<div class="row align-items-center flex-md-row-reverse mt-6 col-mb-50">
<div class="col-lg-6">
<img class="box-img shadow-left" src="demos/hostel/images/box-img/3.jpg" alt="Image">
</div>
<div class="col-lg-6 pe-0 pe-md-5 mb-5 mb-lg-0">
<h5 class="color fw-normal mb-2"><i class="bi-geo-alt"></i> Amsterdam</h5>
<h3 class="text-dark h1 fw-semibold ls-0 mb-4">Canvas Mixed Bed</h3>
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius explicabo, optio repellat saepe inventore ratione minus a consectetur dolorum, nulla provident tenetur.</p>
<h3 class="title-pricing mb-5">$29.99 <span>per week</span></h3>
<div class="row">
<div class="col-6">
<ul class="list-group list-group-flush">
<li class="list-group-item ps-0"><i class="bi-wifi me-2"></i>WiFi Availbale</li>
<li class="list-group-item ps-0"><i class="bi-cup me-2"></i>Breakfast Included</li>
<li class="list-group-item ps-0"><i class="bi-clock me-2"></i>24x7 access</li>
</ul>
</div>
<div class="col-6">
<ul class="list-group list-group-flush">
<li class="list-group-item ps-0"><i class="bi-lock me-2"></i>Lockers Available</li>
<li class="list-group-item ps-0"><i class="bi-boxes me-2"></i>Laundry Available</li>
<li class="list-group-item ps-0"><i class="bi-controller me-2"></i>Other Aminities</li>
</ul>
</div>
</div>
<a href="demo-hostel-single.html" class="button bg-color text-transform-none ls-0 mt-4 mx-0">View More Details</a>
</div>
</div>
</div>
</div>
<div class="section m-0 text-center dark parallax" style="background: url('demos/hostel/images/hero.jpg') center center / cover; padding: 170px 0;">
<div class="container">
<h3 class="h1 mb-5">More than 100,000<br>Travellers Visit Our Hostels.</h3>
<a href="demo-hostel-tour.html" class="button button-xlarge fw-semibold bg-color text-transform-none ls-0 px-5">Book Now</a>
</div>
</div>
<div class="section m-0 bg-transparent">
<div class="container">
<div class="heading-block text-center border-bottom-0 mb-6">
<h3 class="text-dark">Frequently asked Questions</h3>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="toggle">
<div class="toggle-header justify-content-between flex-row-reverse">
<div class="toggle-icon">
<i class="toggle-closed uil uil-plus"></i>
<i class="toggle-open uil uil-minus"></i>
</div>
<div class="toggle-title fw-semibold">
How do I become an author?
</div>
</div>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
</div>
<div class="toggle">
<div class="toggle-header justify-content-between flex-row-reverse">
<div class="toggle-icon">
<i class="toggle-closed uil uil-plus"></i>
<i class="toggle-open uil uil-minus"></i>
</div>
<div class="toggle-title fw-semibold">
Helpful Resources for Authors
</div>
</div>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
</div>
<div class="toggle">
<div class="toggle-header justify-content-between flex-row-reverse">
<div class="toggle-icon">
<i class="toggle-closed uil uil-plus"></i>
<i class="toggle-open uil uil-minus"></i>
</div>
<div class="toggle-title fw-semibold">
How much money can I make?
</div>
</div>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
</div>
<div class="toggle">
<div class="toggle-header justify-content-between flex-row-reverse">
<div class="toggle-icon">
<i class="toggle-closed uil uil-plus"></i>
<i class="toggle-open uil uil-minus"></i>
</div>
<div class="toggle-title fw-semibold">
Can I offer my items for free on a promotional basis?
</div>
</div>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
</div>
<div class="toggle">
<div class="toggle-header justify-content-between flex-row-reverse">
<div class="toggle-icon">
<i class="toggle-closed uil uil-plus"></i>
<i class="toggle-open uil uil-minus"></i>
</div>
<div class="toggle-title fw-semibold">
An Introduction to the Marketplaces for Authors
</div>
</div>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
</div>
<div class="toggle">
<div class="toggle-header justify-content-between flex-row-reverse">
<div class="toggle-icon">
<i class="toggle-closed uil uil-plus"></i>
<i class="toggle-open uil uil-minus"></i>
</div>
<div class="toggle-title fw-semibold">
How does the Tuts+ Premium affiliate program work?
</div>
</div>
<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="bg-transparent">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap">
<div class="row">
<div class="col-lg-2 col-md-2 col-6 mb-5 mb-md-0">
<div class="widget widget_links widget-li-noicon">
<h4 class="ls-0 mb-4 text-transform-none">Features</h4>
<ul class="list-unstyled iconlist ms-0">
<li><a href="#">Help Center</a></li>
<li><a href="#">Paid with Moblie</a></li>
<li><a href="#">Status</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-6 mb-5 mb-md-0">
<div class="widget widget_links widget-li-noicon">
<h4 class="ls-0 mb-4 text-transform-none">Support</h4>
<ul class="list-unstyled iconlist ms-0">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-6 mb-5 mb-md-0">
<div class="widget widget_links widget-li-noicon">
<h4 class="ls-0 mb-4 text-transform-none">Trending</h4>
<ul class="list-unstyled iconlist ms-0">
<li><a href="#">Shop</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-6 mb-5 mb-md-0">
<div class="widget widget_links widget-li-noicon">
<h4 class="ls-0 mb-4 text-transform-none">Get to Know us</h4>
<ul class="list-unstyled iconlist ms-0">
<li><a href="#">eCommerce</a></li>
<li><a href="#">Personal</a></li>
<li><a href="#">OnePage</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 text-md-end">
<div class="widget">
<div>
<address>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
</address>
<h3 class="mb-3"><a href="tel:111223344" class="text-dark"><i class="bi-headphones me-1"></i> +00-22-33-44</a></h3>
<div class="d-flex justify-content-md-end">
<a href="#" class="social-icon si-small h-bg-facebook" title="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 h-bg-instagram" title="instagram">
<i class="bi-instagram"></i>
<i class="bi-instagram"></i>
</a>
<a href="#" class="social-icon si-small h-bg-pinterest" title="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 h-bg-wikipedia" title="Apple Pay">
<i class="fa-brands fa-apple-pay"></i>
<i class="fa-brands fa-apple-pay"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- .footer-widgets-wrap end -->
</div>
<!-- Copyrights
============================================= -->
<div id="copyrights" class="bg-light">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-md-6 text-black-50">
Copyrights © 2023 All Rights Reserved by Canvas Inc.
</div>
<div class="col-md-6 d-md-flex flex-md-column align-items-md-end mt-4 mt-md-0">
<div class="copyrights-menu copyright-links text-black-50">
<a href="#">About</a>/<a href="#">Cities</a>/<a href="#">FAQs</a>/<a href="#">Contact</a>
</div>
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer 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>
<!-- Travel Demo Specific Script -->
<script src="js/components/datepicker.js"></script>
<script>
jQuery(function() {
jQuery('.travel-date-group').datepicker({
autoclose: true,
startDate: "today"
});
});
jQuery(document).ready(function() {
var studioTab = jQuery('#studio-tab-nav'),
sectionBg = jQuery('.studio-tab');
studioTab.on('shown.bs.tab', function (e) {
var bgcolor = studioTab.find('.active').attr('data-bg');
sectionBg.css({ 'background-color': bgcolor }).fadeIn();
e.preventDefault();
jQuery('.tab-pane .fslider').resize();
});
});
</script>
</body>
</html>