- Theme design pages (About, Contact, FAQ, blog list) use the page's Featured Image (Posts page for the blog) and fall back to the design photo; no teal tint over a custom image - Plugin hero (homepage [viator_hero], [viator_listing] pages) prefers the hosting page's Featured Image over the Settings hero image - Theme 1.0.12, plugin 1.9.4 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
305 lines
17 KiB
PHP
305 lines
17 KiB
PHP
<?php
|
|
/**
|
|
* FAQ page — markup from "new front/faq.html" (fixed copy).
|
|
* Routed by hoho_page_template() in inc/pages.php.
|
|
*/
|
|
defined( 'ABSPATH' ) || exit;
|
|
get_header();
|
|
?>
|
|
<main id="main" class="hoho-page">
|
|
<section class="hero hero--page hero--faq<?php echo has_post_thumbnail( get_queried_object_id() ) ? ' hero--has-thumb' : ''; ?>">
|
|
<div class="hero__media">
|
|
<img class="hero__img" src="<?php echo esc_url( hoho_banner_url( 'faq-hero' ) ); ?>" alt="" fetchpriority="high" />
|
|
</div>
|
|
|
|
<div class="container hero__content">
|
|
<nav class="crumbs" aria-label="Breadcrumb">
|
|
<ol class="crumbs__list">
|
|
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a></li>
|
|
<li aria-current="page">FAQ’s</li>
|
|
</ol>
|
|
</nav>
|
|
<h1 class="hero__title">FAQ’s</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section pagebody faqpage">
|
|
<div class="container faqpage__layout">
|
|
<aside class="catnav" aria-label="FAQ categories">
|
|
<p class="catnav__title"><svg class="icon" aria-hidden="true"><use href="#i-grid" /></svg>Categorize</p>
|
|
<ul class="catnav__list">
|
|
<li><a class="catnav__link is-active" href="#faq-general" aria-current="true"><span>General</span><svg class="icon" aria-hidden="true"><use href="#i-chev-right" /></svg></a></li>
|
|
<li><a class="catnav__link" href="#faq-tours"><span>Tours</span><svg class="icon" aria-hidden="true"><use href="#i-chev-right" /></svg></a></li>
|
|
<li><a class="catnav__link" href="#faq-accounts"><span>Accounts</span><svg class="icon" aria-hidden="true"><use href="#i-chev-right" /></svg></a></li>
|
|
<li><a class="catnav__link" href="#faq-other"><span>Other</span><svg class="icon" aria-hidden="true"><use href="#i-chev-right" /></svg></a></li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<div class="faqpage__main">
|
|
<section class="faqcard" id="faq-general" aria-labelledby="faq-general-t">
|
|
<h2 class="faqcard__title" id="faq-general-t">General</h2>
|
|
<div class="accordion" data-accordion>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="true">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="faqcard" id="faq-tours" aria-labelledby="faq-tours-t">
|
|
<h2 class="faqcard__title" id="faq-tours-t">Tours</h2>
|
|
<div class="accordion" data-accordion>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="true">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="faqcard" id="faq-accounts" aria-labelledby="faq-accounts-t">
|
|
<h2 class="faqcard__title" id="faq-accounts-t">Accounts</h2>
|
|
<div class="accordion" data-accordion>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="true">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="faqcard" id="faq-other" aria-labelledby="faq-other-t">
|
|
<h2 class="faqcard__title" id="faq-other-t">Other</h2>
|
|
<div class="accordion" data-accordion>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="true">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>How can i book a tour ?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
<div class="acc">
|
|
<h3>
|
|
<button class="acc__q" type="button" aria-expanded="false">
|
|
<span>is the booking process, full online?</span>
|
|
<svg class="icon icon--14 acc__plus" aria-hidden="true"><use href="#i-plus" /></svg>
|
|
<svg class="icon icon--14 acc__minus" aria-hidden="true"><use href="#i-minus" /></svg>
|
|
</button>
|
|
</h3>
|
|
<div class="acc__a">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<?php
|
|
get_footer();
|