Check Footer Style 11
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm.
<template>
<footer class="site-footer">
<div
class="footer-top"
:style="{
backgroundImage: 'url(/images/background/map-bg1.png)',
backgroundSize: 'contain',
}"
>
<div class="footer-contact-info service-box-slide text-white">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="icon-bx-wraper bx-style-1 p-a20 radius-sm br-col-w1">
<div class="icon-content">
<h5 class="dlab-tilte">
<span class="icon-sm">
<i class="ti-location-pin" />
</span>
Company Address
</h5>
<p class="op7">
Demo address #8901 Marmora Road Chi Minh City, Vietnam
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="icon-bx-wraper bx-style-1 p-a20 radius-sm br-col-w1">
<div class="icon-content">
<h5 class="dlab-tilte">
<span class="icon-sm">
<i class="ti-email" />
</span>
E-mail
</h5>
<p class="m-b0 op7">
<a href="mailto:someone@example.com">info@example.com</a>
</p>
<p class="op7">
<a href="mailto:someone@example.com">company@example.com</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="icon-bx-wraper bx-style-1 p-a20 radius-sm br-col-w1">
<div class="icon-content">
<h5 class="dlab-tilte">
<span class="icon-sm">
<i class="ti-mobile" />
</span>
Phone Numbers
</h5>
<p class="m-b0 op7">
Mobile : <a href="tel:+4733378901">+00 234 678 9012</a>
</p>
<p class="op7">
Phone : <a href="tel:+4733378901">+0 1234 5678 90</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="icon-bx-wraper bx-style-1 p-a20 radius-sm br-col-w1">
<div class="icon-content">
<h5 class="dlab-tilte">
<span class="icon-sm">
<i class="ti-alarm-clock" />
</span>
Office Hours
</h5>
<p class="m-b0 op7">Mon To Sat - 08.00-18.00</p>
<p class="op7">Sunday - Close</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row p-t30">
<div
class="col-lg-3 col-md-6 col-sm-6 wow fadeIn"
data-wow-delay="0.2s"
>
<div class="widget border-0">
<h6 class="m-b20 text-white font-weight-300 text-uppercase">
Quick Links
</h6>
<ul class="list-2">
<li v-for="(link, index) in footerLinks2" :key="index">
<nuxt-link :to="link.href">{{ link.label }}</nuxt-link>
</li>
</ul>
</div>
</div>
<div
class="col-lg-4 col-md-6 col-sm-6 wow fadeIn"
data-wow-delay="0.4s"
>
<div class="widget">
<h6 class="m-b20 text-white font-weight-300 text-uppercase">
Newsletter
</h6>
<div class="subscribe-form form-white m-b20 m-t30">
<form @submit.prevent="handleSubmit">
<div class="dzSubscribeMsg" />
<div class="input-group">
<input
name="dzEmail"
required
class="form-control radius-no"
placeholder="Your Email Id"
type="email"
/>
<span class="input-group-btn">
<button
name="submit"
value="Submit"
type="submit"
class="site-button radius-no"
>
SEND
</button>
</span>
</div>
</form>
</div>
<h6 class="m-b10 text-white font-weight-300 text-uppercase">
Connect with us
</h6>
<ul class="list-inline m-a0">
<li v-for="(link, index) in socialLinks" :key="index">
<a
:href="link.href"
:class="`site-button sharp ${link.className}`"
>
<i :class="link.iconClass" />
</a>
</li>
</ul>
</div>
</div>
<div
class="col-lg-5 col-md-12 col-sm-12 wow fadeIn"
data-wow-delay="0.6s"
>
<div
class="icon-bx-wraper bx-style-1 p-a30 radius-sm br-col-w1 bg-tpw1"
>
<h5 class="text-white font-weight-300">
Serving in 70+ countries for web, software and mobile app
development
</h5>
<p>
United States (USA), United Kingdom (UK), Singapore, Kenya,
South Africa Germany, Canada, Australia, Netherlands, Norway,
United Arab Emirates (UAE) , Finland etc.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- footer bottom part -->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 text-left">
<span>
Copyright ©
<span class="current-year">{{ new Date().getFullYear() }}</span>
<a href="https://dexignzone.com/" target="_blank"> DexignZone </a>
. all rights reserved.
</span>
</div>
<div class="col-md-6 col-sm-6 text-right">
<div class="widget-link">
<ul>
<li>
<nuxt-link to="/help-desk">Help Desk</nuxt-link>
</li>
<li>
<nuxt-link to="/privacy-policy">Refund Policy</nuxt-link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</template>
<script setup>
import { footerLinks2, socialLinks } from "@/data/footerLinks";
function handleSubmit(e) {
e.preventDefault();
// Handle form submission logic here
}
</script>
<style scoped>
/* Add your styles here */
</style>