happychin-web/components/Fix-area/index.vue

<template>
    <div class="fix-area">
		<div class="offcanvas__info">
			<div class="offcanvas__wrapper">
				<div class="offcanvas__content">
					<div class="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
						<div class="offcanvas__logo">
                            <a href="">
                            <img src="/picture/logo.svg" alt="logo-img">
                        </a>
						</div>
						<div class="offcanvas__close"><button><i class="fas fa-times"></i></button></div>
					</div>
					<p class="text d-none d-xl-block">Nullam dignissim,ante scelerisque the is euismod fermentum odio
						sem semper the is erat,a feugiat leo urna eget eros. Duis Aenean a imperdiet risus. </p>
					<div class="mobile-menu fix mb-3"></div>
					<div class="offcanvas__contact">
						<h4>Contact Info</h4>
						<ul>
							<li class="d-flex align-items-center">
								<div class="offcanvas__contact-icon"><i class="fal fa-map-marker-alt"></i></div>
								<div class="offcanvas__contact-text"><a target="_blank" href="#">Main
										Street,Melbourne,Australia</a></div>
							</li>
							<li class="d-flex align-items-center">
								<div class="offcanvas__contact-icon mr-15"><i class="fal fa-envelope"></i></div>
								<div class="offcanvas__contact-text"><a href="mailto:info@example.com"><span
											class="mailto:info@example.com">info@example.com</span></a></div>
							</li>
							<li class="d-flex align-items-center">
								<div class="offcanvas__contact-icon mr-15"><i class="fal fa-clock"></i></div>
								<div class="offcanvas__contact-text"><a target="_blank" href="#">Mod-friday,09am
										-05pm</a></div>
							</li>
							<li class="d-flex align-items-center">
								<div class="offcanvas__contact-icon mr-15"><i class="far fa-phone"></i></div>
								<div class="offcanvas__contact-text"><a href="tel:+11002345909">+11002345909</a></div>
							</li>
						</ul>
						<!-- <div class="header-button mt-4"><a href="contact.html" class="theme-btn text-center"><span>Get A
									Quote<i class="fa-solid fa-arrow-right-long"></i></span></a></div> -->
						<!-- <div class="social-icon d-flex align-items-center"><a href="#"><i
									class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a
								href="#"><i class="fab fa-youtube"></i></a><a href="#"><i
									class="fab fa-linkedin-in"></i></a></div> -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="offcanvas__overlay"></div>
</template>