添加关于我们和画廊页面
This commit is contained in:
parent
9a3169153b
commit
5c90216fd4
@ -19,8 +19,8 @@ const routes = [
|
||||
]
|
||||
},
|
||||
{ name: '关于我们', children: [
|
||||
{ name: '公司介绍', route: '' },
|
||||
{ name: '画廊', route: '' },
|
||||
{ name: '公司介绍', route: '/about' },
|
||||
{ name: '画廊', route: '/about/gallery' },
|
||||
{ name: '师资团队', route: '' },
|
||||
{ name: '联系我们', route: '' }
|
||||
]
|
||||
|
||||
@ -33,6 +33,20 @@ const router = createRouter({
|
||||
component: () => import('@/views/course/VipOrder.vue')
|
||||
}
|
||||
]
|
||||
}, {
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'about-us',
|
||||
component: () => import('@/views/about/AboutUs.vue')
|
||||
}, {
|
||||
path: 'gallery',
|
||||
name: 'about-gallery',
|
||||
component: () => import('@/views/about/Gallery.vue')
|
||||
}
|
||||
]
|
||||
}, {
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
|
||||
@ -18,3 +18,21 @@ export function formatTime(seconds) {
|
||||
// 返回格式化的时间字符串
|
||||
return `${formattedHours}小时 ${formattedMinutes}分 ${formattedSeconds}秒`;
|
||||
}
|
||||
|
||||
export function useCurrentTime(dateStr) {
|
||||
const startDate = new Date(dateStr);
|
||||
const endDate = new Date()
|
||||
const delta = endDate.getTime() - startDate.getTime()
|
||||
|
||||
const unitDay = 24 * 60 * 60 * 1000
|
||||
const unitHour = 60 * 60 * 1000
|
||||
const unitMinute = 60 * 1000
|
||||
const unitSecond = 1000
|
||||
|
||||
const days = Math.floor(delta / unitDay)
|
||||
const hours = Math.floor((delta % unitDay) / unitHour)
|
||||
const minutes = Math.floor((delta % unitHour) / unitMinute)
|
||||
const seconds = Math.floor((delta % unitMinute) / unitSecond)
|
||||
|
||||
return { days, hours, minutes, seconds }
|
||||
}
|
||||
@ -1,5 +1,26 @@
|
||||
<script setup>
|
||||
|
||||
const vips = [
|
||||
{
|
||||
id: 1,
|
||||
name: '普通会员',
|
||||
price: '35',
|
||||
limit: 1,
|
||||
disable: ['vip1', 'vip2', "vip3"],
|
||||
colorClass: [],
|
||||
desc: ['少儿编程基础课程免费学习', '线下老师一对一指导', '免费使用少儿编程开发器件', '全天候在线咨询服务', '更多在线直播课程']
|
||||
}, {
|
||||
id: 2,
|
||||
name: '黄金会员',
|
||||
price: '100',
|
||||
limit: 1,
|
||||
disable: ['vip2', "vip3"],
|
||||
colorClass: ['two'],
|
||||
desc: [
|
||||
'少儿编程全套课程免费学习', '线下老师一对一指导', '免费使用少儿编程开发器件', '全天候在线咨询服务', '更多在线直播课程',
|
||||
'每周一次家庭教育服务', '周一到周五放学托管服务'
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -138,61 +159,36 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="section-title-area cate-heading">
|
||||
<h6 class="wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">Popular categories</h6>
|
||||
<h2 class="wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">Start your journey today with Mark
|
||||
as your tutor.</h2>
|
||||
<p class="mb-5 wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">All membership plans come with a
|
||||
30-day satisfaction guarantee.</p>
|
||||
|
||||
<a class="btn-1 wow fadeInDown" data-wow-delay="1100ms" href="pricing.html" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInDown;">Learn More <span class="icon-right-arrow-11"></span></a>
|
||||
<h6 class="wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">欢迎加入我们</h6>
|
||||
<h2 class="wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">加入少儿编程俱乐部，让自己的孩子赢在起跑线</h2>
|
||||
<p class="mb-5 wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
|
||||
现在加入会员，还送价值288的入会大礼包，双十一特惠活动
|
||||
</p>
|
||||
<a class="btn-1 wow fadeInDown" data-wow-delay="1100ms" href="#" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInDown;">了解更多 <span class="icon-right-arrow-11"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="cate-price-card wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
|
||||
<div class="col-md-6 col-lg-4" v-for="vip in vips">
|
||||
<div class="cate-price-card wow fadeInUp" :class="vip.colorClass"
|
||||
data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
|
||||
<div class="cate-price-body">
|
||||
<h2>Mastery <span class="cate-price-title">$35 /</span> <span class="month-desc">m</span>
|
||||
<h2>
|
||||
{{ vip.name }} <br>
|
||||
<span class="cate-price-title">￥{{ vip.price }} /</span>
|
||||
<span class="month-desc">月</span>
|
||||
</h2>
|
||||
<h6>1 device/ One user</h6>
|
||||
|
||||
<h6>{{ vip.limit }} 个小朋友可用</h6>
|
||||
<ul>
|
||||
<li>Access to Core Curriculum</li>
|
||||
<li>Weekly Homework Assignments</li>
|
||||
<li>One-on-One Monthly Consultation</li>
|
||||
<li>24/7 Email Support</li>
|
||||
<li>Download for offline viewing</li>
|
||||
<li v-for="item in vip.desc">{{ item }}</li>
|
||||
</ul>
|
||||
|
||||
<div class="price-btn-area">
|
||||
<a class="price-btn" href="login.html">Get Started <span class="icon-right-arrow-11"></span></a>
|
||||
<a class="price-btn" href="/course/vip">
|
||||
立即购买 <span class="icon-right-arrow-11"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="cate-price-card two wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">
|
||||
<div class="cate-price-body">
|
||||
<h2>Mastery <span class="cate-price-title">$35 /</span> <span class="month-desc">m</span>
|
||||
</h2>
|
||||
<h6>1 device/ One user</h6>
|
||||
|
||||
<ul>
|
||||
<li>Access to Core Curriculum</li>
|
||||
<li>Weekly Homework Assignments</li>
|
||||
<li>One-on-One Monthly Consultation</li>
|
||||
<li>24/7 Email Support</li>
|
||||
<li>Download for offline viewing</li>
|
||||
</ul>
|
||||
|
||||
<div class="price-btn-area">
|
||||
<a class="price-btn" href="login.html">Get Started <span class="icon-right-arrow-11"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
263
src/views/about/AboutUs.vue
Normal file
263
src/views/about/AboutUs.vue
Normal file
@ -0,0 +1,263 @@
|
||||
<script setup>
|
||||
import HeaderBreadcrumb from "@/components/HeaderBreadcrumb.vue";
|
||||
import {useCurrentTime} from "@/utils/data.js";
|
||||
|
||||
const { days, hours, seconds, minutes } = useCurrentTime('2022-09-10')
|
||||
|
||||
const teachers = [
|
||||
{
|
||||
id: 1,
|
||||
name: '白马讲师',
|
||||
role: 'Java开发讲师'
|
||||
}, {
|
||||
id: 2,
|
||||
name: '绿马讲师',
|
||||
role: 'Python开发讲师'
|
||||
}, {
|
||||
id: 3,
|
||||
name: '蓝马讲师',
|
||||
role: 'C#开发讲师'
|
||||
}, {
|
||||
id: 1,
|
||||
name: '牛马讲师',
|
||||
role: 'Golang开发讲师'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<header-breadcrumb :path="['关于我们', '公司介绍']"/>
|
||||
<div class="about-us-area single-page">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<!-- title & image -->
|
||||
<div class="col-lg-7">
|
||||
<div class="about-single-image">
|
||||
<div class="about-single-1-img">
|
||||
<img src="/img/bg-img/inner/about-1.png" alt="">
|
||||
</div>
|
||||
<div class="about-single-2-img">
|
||||
<img class="about-info-img-1" src="/img/bg-img/inner/about-2.png" alt="">
|
||||
<img class="about-info-img-2" src="/img/bg-img/inner/about-3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About Text -->
|
||||
<div class="col-lg-5">
|
||||
<div class="about-us-title-img">
|
||||
<div class="wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<h6 class="about-sub-title"><span class="icon-open-book-1"></span> 公司介绍</h6>
|
||||
<h3>让每一个儿童都适应时代的发展</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-desc-info-area">
|
||||
<h6 class="mb-4">Engage learners in active learning activities such as discussions,
|
||||
problem-solving
|
||||
exercises, or hands-on demonstrations. Encourage participation and interaction to
|
||||
foster
|
||||
deeper learning and retention of details.</h6>
|
||||
<!-- Content Card Area -->
|
||||
<div class="about-content-card-area">
|
||||
<div class="row">
|
||||
<!-- Single Card -->
|
||||
<div class="col-md-6">
|
||||
<div class="about-single-card wow fadeInRight" data-wow-delay="1000ms" style="visibility: visible; animation-delay: 1000ms; animation-name: fadeInRight;">
|
||||
<div class="about-card-icon">
|
||||
<span class="icon-maps-and-flags3 text--primary"></span>
|
||||
</div>
|
||||
<h4>Flexible shedule</h4>
|
||||
<p>Offer ongoing support and feedback to learners throughout.</p>
|
||||
<span class="about-line-shape"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="col-md-6">
|
||||
<div class="about-single-card wow fadeInRight" data-wow-delay="1200ms" style="visibility: visible; animation-delay: 1200ms; animation-name: fadeInRight;">
|
||||
<div class="about-card-icon">
|
||||
<span class="icon-maps-and-flags2 text--second"></span>
|
||||
</div>
|
||||
<h4>Pocket friendly</h4>
|
||||
<p>Offer ongoing support and feedback to learners throughout.</p>
|
||||
<span class="about-line-shape"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-slider-section single-page">
|
||||
<div class="text-slider-box">
|
||||
<div class="slide-box">
|
||||
<h2><span>学习 .</span></h2>
|
||||
</div>
|
||||
<div class="slide-box">
|
||||
<h2>柏码 .</h2>
|
||||
</div>
|
||||
<div class="slide-box">
|
||||
<h2>少儿 .</h2>
|
||||
</div>
|
||||
<div class="slide-box">
|
||||
<h2>编程</h2>
|
||||
</div>
|
||||
|
||||
<div class="slide-box">
|
||||
<h2>快乐 .</h2>
|
||||
</div>
|
||||
<div class="slide-box">
|
||||
<h2>锻炼</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="counter-up-area single-page" style="background-image: url(/img/bg-img/popular.png);">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- title -->
|
||||
<div class="col-md-8 col-lg-7">
|
||||
<div class="section-title-area text-center wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<h6>公司成立了多久？</h6>
|
||||
<h2 class="mb-0">我们创立了柏码少儿编程已经</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- single card -->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="single-counter-card wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<div class="counter-info text-center bg--primary">
|
||||
<h2>{{ days }}</h2>
|
||||
<p>天</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- single card -->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="single-counter-card wow fadeInRight" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInRight;">
|
||||
<div class="counter-info text-center bg--second">
|
||||
<h2>{{ hours }}</h2>
|
||||
<p>小时</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- single card -->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="single-counter-card wow fadeInRight" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInRight;">
|
||||
<div class="counter-info text-center bg--dark">
|
||||
<h2>{{ minutes }}</h2>
|
||||
<p>分钟</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- single card -->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="single-counter-card wow fadeInRight" data-wow-delay="1100ms" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInRight;">
|
||||
<div class="counter-info text-center bg--navy">
|
||||
<h2>{{ seconds }}</h2>
|
||||
<p>秒</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="how-we-work-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="how-we-content">
|
||||
<div class="wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<h6 class="how-sub-title"><span class="icon-open-book-1"></span> 我们的教学流程</h6>
|
||||
<h2>努力让每一个学生都感受到编程开发带来的乐趣</h2>
|
||||
<p>Provide additional resources such as readings, articles, videos, or online
|
||||
tutorials for learners who want to explore the details further. Offer
|
||||
recommendations for reputable sources to ensure quality information. Assess
|
||||
learners' understanding of the details through quizzes, assessments, or
|
||||
assignments. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="how-it-work-content-3 single-page relative">
|
||||
<div class="side-video-img relative">
|
||||
<img src="/img/bg-img/home-3/how.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="play-btn course">
|
||||
<div class="video_player_btn">
|
||||
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" class="popup-video"><span class="icon-Polygon-1"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-area single-page">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-7">
|
||||
<div class="section-title-area text-center wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<h6>经验丰富的教学团队</h6>
|
||||
<h2 class="mb-0">我们的杰出教师列表广受学生好评</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- Single member -->
|
||||
<div class="col-sm-6 col-lg-3" v-for="teacher in teachers">
|
||||
<div class="team-block">
|
||||
<div class="single-team-card relative wow fadeInUp" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInUp;">
|
||||
<!-- Border shape -->
|
||||
<div class="border-s-1"></div>
|
||||
<div class="border-s-2"></div>
|
||||
<div class="border-s-3"></div>
|
||||
<div class="border-s-4"></div>
|
||||
<div class="border-s-5"></div>
|
||||
<!-- img -->
|
||||
<div class="team-img relative">
|
||||
<img class="relative" :src="`/img/bg-img/t-${teacher.id}.jpg`" alt="">
|
||||
|
||||
<!-- content text -->
|
||||
<div class="member-info text-center">
|
||||
<h3>{{ teacher.name }}</h3>
|
||||
<p>{{ teacher.role }}</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-social-icon">
|
||||
<div class="share-icon-area">
|
||||
<div class="share-icon"> <span class="icon-share-alt-solid-1 share--icon"></span>
|
||||
<div class="conatct-icon-">
|
||||
<ul>
|
||||
<li><a href="#"><span class="icon-facebook-f"></span></a>
|
||||
</li>
|
||||
<li><a href="#"><span class="icon-linkedin-in"></span></a>
|
||||
</li>
|
||||
<li><a href="#"><span class="icon-twitter"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
151
src/views/about/Gallery.vue
Normal file
151
src/views/about/Gallery.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<script setup>
|
||||
|
||||
import HeaderBreadcrumb from "@/components/HeaderBreadcrumb.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<header-breadcrumb :path="['关于我们', '画廊']"/>
|
||||
<div class="portfolio-area single-page-gallery">
|
||||
<div class="container">
|
||||
<div class="row g-4 g-lg-5 gallery-area" style="position: relative; height: 612.641px;">
|
||||
<!-- Card -->
|
||||
<div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 0%; top: 0px;">
|
||||
<div class="portfolio-card">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-1.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center venobox-area">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-1.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-card mt-20">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-2.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-2.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 25%; top: 0px;">
|
||||
<div class="portfolio-card">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-3.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-3.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-card mt-20">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-4.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-4.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 50%; top: 0px;">
|
||||
<div class="portfolio-card">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-5.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-5.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-card mt-20">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-5.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-5.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 75%; top: 0px;">
|
||||
<div class="portfolio-card">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-6.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="/img/bg-img/inner/g-6.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-card mt-20">
|
||||
<div class="portfolio-image wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">
|
||||
<img src="/img/bg-img/inner/g-7.png" alt="">
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div class="overlay-content d-flex align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<a class="venobox mb-3 vbox-item" data-maxwidth="800px" data-gall="portfolio" href="//img/bg-img/inner/g-7.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user