go-quasar-partial-ssr/test/home-test.html

236 lines
20 KiB
HTML

<!-- Topbar Section Start -->
<div class="topbar">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-9">
<!-- Topbar Contact Information Start -->
<div class="topbar-contact-info">
<ul>
<li><a href=""><i class="fa-solid fa-clock"></i> <span>Working Hour:</span> 08:00am to 09:00pm</a></li>
<li><a href=""><i class="fa-solid fa-envelope"></i> <span>Email:</span> info@domainname.com</a></li>
</ul>
</div>
<!-- Topbar Contact Information End -->
</div>
<div class="col-lg-6 col-md-3">
<!-- Topbar Social Details Start -->
<div class="topbar-social-details">
<!-- Header Social Icons Start -->
<div class="topbar-social-icons">
<ul>
<li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
<li><a href=""><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href=""><i class="fa-brands fa-dribbble"></i></a></li>
</ul>
</div>
<!-- Header Social Icons End -->
<!-- Topbar Contact Details Start -->
<div class="topbar-contact-info topbar-contact-details">
<ul>
<li><a href=""><span>Contact:</span> +123 (456) 789</a></li>
</ul>
</div>
<!-- Topbar Contact Details End -->
</div>
<!-- Topbar Social Details End -->
</div>
</div>
</div>
</div>
<!-- Topbar Section End -->
<!-- Header Start -->
<header class="main-header">
<div class="header-sticky">
<nav class="navbar navbar-expand-lg">
<div class="container">
<!-- Logo Start -->
<a class="navbar-brand" href="">
<img src="./resources/logo.svg" alt="Logo">
</a>
<!-- Logo End -->
<!-- Main Menu Start -->
<div class="collapse navbar-collapse main-menu">
<div class="nav-menu-wrapper">
<ul class="navbar-nav mr-auto" id="menu">
<li class="nav-item submenu"><a class="nav-link" href="">Home</a>
<ul>
<li class="nav-item"><a class="nav-link" href="index.html">Home - Main</a></li>
<li class="nav-item"><a class="nav-link" href="index-image.html">Home - Image</a></li>
<li class="nav-item"><a class="nav-link" href="index-video.html">Home - Video</a></li>
<li class="nav-item"><a class="nav-link" href="index-slider.html">Home - Slider</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item submenu"><a class="nav-link" href="">Pages</a>
<ul>
<li class="nav-item"><a class="nav-link" href="service-single.html">Service Details</a></li>
<li class="nav-item"><a class="nav-link" href="blog-single.html">Blog Details</a></li>
<li class="nav-item"><a class="nav-link" href="doctors.html">Doctors</a></li>
<li class="nav-item"><a class="nav-link" href="doctor-single.html">Doctor Details</a></li>
<li class="nav-item"><a class="nav-link" href="case-study.html">Case Study</a></li>
<li class="nav-item"><a class="nav-link" href="case-study-single.html">Case Study Details</a></li>
<li class="nav-item"><a class="nav-link" href="image-gallery.html">Image Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="video-gallery.html">Video Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="faqs.html">FAQs</a></li>
<li class="nav-item"><a class="nav-link" href="404.html">404</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li>
<li class="nav-item highlighted-menu"><a class="nav-link" href="book-appointment.html">book appointment</a></li>
</ul>
</div>
<!-- Header Button Start-->
<div class="header-btn">
<a href="book-appointment.html" class="btn-default">book appointment</a>
</div>
<!-- Header Button End-->
</div>
<!-- Main Menu End -->
<div class="navbar-toggle"><a href="" aria-haspopup="true" role="button" tabindex="0" class="slicknav_btn slicknav_collapsed" style="outline: none;"><span class="slicknav_menutxt"></span><span class="slicknav_icon slicknav_no-text"><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></a></div>
</div>
</nav>
<div class="responsive-menu"><div class="slicknav_menu"><ul class="slicknav_nav slicknav_hidden" aria-hidden="true" role="menu" style="display: none;">
<li class="nav-item submenu slicknav_collapsed slicknav_parent"><a href="" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;"><a class="nav-link" href="" tabindex="-1">Home</a>
<span class="slicknav_arrow"></span></a><ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;">
<li class="nav-item"><a class="nav-link" href="index.html" role="menuitem" tabindex="-1">Home - Main</a></li>
<li class="nav-item"><a class="nav-link" href="index-image.html" role="menuitem" tabindex="-1">Home - Image</a></li>
<li class="nav-item"><a class="nav-link" href="index-video.html" role="menuitem" tabindex="-1">Home - Video</a></li>
<li class="nav-item"><a class="nav-link" href="index-slider.html" role="menuitem" tabindex="-1">Home - Slider</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="about.html" role="menuitem" tabindex="-1">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="services.html" role="menuitem" tabindex="-1">Services</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html" role="menuitem" tabindex="-1">Blog</a></li>
<li class="nav-item submenu slicknav_collapsed slicknav_parent"><a href="" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;"><a class="nav-link" href="" tabindex="-1">Pages</a>
<span class="slicknav_arrow"></span></a><ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;">
<li class="nav-item"><a class="nav-link" href="service-single.html" role="menuitem" tabindex="-1">Service Details</a></li>
<li class="nav-item"><a class="nav-link" href="blog-single.html" role="menuitem" tabindex="-1">Blog Details</a></li>
<li class="nav-item"><a class="nav-link" href="doctors.html" role="menuitem" tabindex="-1">Doctors</a></li>
<li class="nav-item"><a class="nav-link" href="doctor-single.html" role="menuitem" tabindex="-1">Doctor Details</a></li>
<li class="nav-item"><a class="nav-link" href="case-study.html" role="menuitem" tabindex="-1">Case Study</a></li>
<li class="nav-item"><a class="nav-link" href="case-study-single.html" role="menuitem" tabindex="-1">Case Study Details</a></li>
<li class="nav-item"><a class="nav-link" href="image-gallery.html" role="menuitem" tabindex="-1">Image Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="video-gallery.html" role="menuitem" tabindex="-1">Video Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="faqs.html" role="menuitem" tabindex="-1">FAQs</a></li>
<li class="nav-item"><a class="nav-link" href="404.html" role="menuitem" tabindex="-1">404</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html" role="menuitem" tabindex="-1">Contact Us</a></li>
<li class="nav-item highlighted-menu"><a class="nav-link" href="book-appointment.html" role="menuitem" tabindex="-1">book appointment</a></li>
</ul></div></div>
</div>
</header>
<!-- Header End -->
<!-- Hero Section Start -->
<div class="hero bg-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<!-- Hero Content Start -->
<div class="hero-content">
<!-- Section Title Start -->
<div class="section-title">
<h3 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">your health our priority</h3>
<h1 class="text-anime-style-3" data-cursor="-opaque" style="perspective: 400px;"><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">E</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">x</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">p</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">t</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">m</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">d</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">i</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">l</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div></div> </div><div class="split-line" style="display: block; text-align: start; position: relative;"><div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">u</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">c</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">a</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">r</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">e</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">l</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">y</div></div> <div style="position:relative;display:inline-block;"><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">o</div><div style="position: relative; display: inline-block; transform: translate(0px, 0px); opacity: 1;">n</div></div></div></h1>
<p class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">Experience healthcare you can trust. Our dedicated team provides compassionate, high-quality care.</p>
</div>
<!-- Section Title End -->
<!-- Hero Buttons Start -->
<div class="hero-btn wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
<a href="book-appointment.html" class="btn-default">book a appointment</a>
<a href="about.html" class="btn-default">about us</a>
</div>
<!-- Hero Buttons End -->
<!-- Google Rating Start -->
<div class="google-rating wow fadeInUp" data-wow-delay="0.75s" style="visibility: visible; animation-delay: 0.75s; animation-name: fadeInUp;">
<ul>
<li>Google Rating <span>5.0</span></li>
<li>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</li>
<li>based on 500 reviews</li>
</ul>
</div>
<!-- Google Rating End -->
</div>
<!-- Hero Content End -->
</div>
<div class="col-lg-6">
<!-- Hero Image Start -->
<div class="hero-image">
<!-- Hero Img Start -->
<div class="hero-img">
<figure>
<img src="./resources/hero-img.png" alt="">
</figure>
</div>
<!-- Hero Img End -->
<!-- Excerpt Doctor Box Start -->
<div class="excerpt-doctor-box">
<!-- Excerpt Doctor Images Start -->
<div class="excerpt-doctor-images">
<div class="excerpt-doctor-image">
<figure class="image-anime">
<img src="./resources/excerpt-doctor-img-1.jpg" alt="">
</figure>
</div>
<div class="excerpt-doctor-image">
<figure class="image-anime">
<img src="./resources/excerpt-doctor-img-2.jpg" alt="">
</figure>
</div>
<div class="excerpt-doctor-image">
<figure class="image-anime">
<img src="./resources/excerpt-doctor-img-3.jpg" alt="">
</figure>
</div>
<div class="excerpt-doctor-image">
<figure class="image-anime">
<img src="./resources/excerpt-doctor-img-4.jpg" alt="">
</figure>
</div>
</div>
<!-- Excerpt Doctor Images End -->
<!-- Excerpt Doctor Content Start -->
<div class="excerpt-doctor-content">
<p>Talk to our <span class="counter">48</span>+ Doctors</p>
</div>
<!-- Excerpt Doctor Content End -->
</div>
<!-- Excerpt Doctor Box End -->
<!-- Satisfied Clients Box Start -->
<div class="satisfied-clients-box">
<div class="icon-box">
<img src="./resources/hero-satisfied-clients.svg" alt="">
</div>
<div class="satisfied-clients-content">
<h3><span class="counter">3500</span>+</h3>
<p>satisfied clients</p>
</div>
</div>
<!-- Satisfied Clients Box End -->
</div>
<!-- Hero Image End -->
</div>
</div>
</div>
</div>
<!-- Hero Section End -->