编写首页数据
This commit is contained in:
parent
e98df58ed7
commit
caf6093e1f
232
src/App.vue
232
src/App.vue
@ -1,235 +1,17 @@
|
||||
<script setup>
|
||||
import {useHeaderSticky} from "@/utils/header.js";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
onMounted(useHeaderSticky)
|
||||
import TopHeader from "@/components/TopHeader.vue";
|
||||
import IndexHeader from "@/components/IndexHeader.vue";
|
||||
import IndexFooter from "@/components/IndexFooter.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="top-header">
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col-md-6 col-lg-7">
|
||||
<div class="contact-info d-flex align-items-center">
|
||||
<a href="mailto:info@doorsoft"><span class="icon-mail"></span> <span class="text-white contact-desc">alma.lawson@example.com</span></a>
|
||||
<a href=""><span class="icon-phone-alt-solid-11"></span> <span class="text-white contact-desc">123 - 456 - 7890</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="d-flex align-items-center top-social-conatct">
|
||||
<!-- Dropdown -->
|
||||
<div class="top-social-icon">
|
||||
<ul class="header-icon">
|
||||
<li><span class="text-white">加入我们:</span></li>
|
||||
<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>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<a class="login-btn" href="#"><span class="icon-user-plus-solid-1"></span> 注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<header class="header-area home-2 bg--navy" id="header">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container menu-area-">
|
||||
<!-- Navbar Brand -->
|
||||
<div class="mobile-menu">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="@/assets/img/core-img/logo-2.png" alt="Brand">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Navbar Toggler -->
|
||||
<button class="navbar-toggler" id="navbarToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="icon-menu"></span>
|
||||
</button>
|
||||
|
||||
<!-- Navbar -->
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav navbar-nav-scroll mb-3 mb-lg-0" id="SupportHiveNav">
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Home</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="index.html">Education</a></li>
|
||||
<li><a href="index-kid-education.html">KidEducation</a></li>
|
||||
<li><a href="index-marketplaxe.html">Marketplace</a></li>
|
||||
<li><a href="index-university.html">University Classic</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Course</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="course-list.html">Course list</a></li>
|
||||
<li><a href="all-course.html">all Course</a></li>
|
||||
<li><a href="course-details.html">Course Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Pages</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
<li><a href="faq.html">Faq</a></li>
|
||||
<li><a href="pricing.html">Price</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="login.html">Login</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Event</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="event.html">Event list</a></li>
|
||||
<li><a href="event-sidebar.html">Event Sidebar</a></li>
|
||||
<li><a href="event-details.html">Event Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Shop</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="shop.html">Shop</a></li>
|
||||
<li><a href="shop-details.html">Shop Details</a></li>
|
||||
<li><a href="cart.html">Cart</a></li>
|
||||
<li><a href="checkout.html">Checkout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Blog</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="blog-details.html">Blog Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="cart-search-area ml-auto d-flex align-items-center">
|
||||
<div class="search-home-2">
|
||||
<div class="header-action">
|
||||
<div class="search-toggle-open header-search">
|
||||
<div class="search-icon">
|
||||
<span class="icon-icon_search2"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-btn-area relative">
|
||||
<a href="#" class="relative"><span class="icon-icon_cart_alt"></span></a>
|
||||
<div class="cart-badge bg--dark">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<top-header/>
|
||||
<index-header/>
|
||||
<div class="smooth-body">
|
||||
<div style="height: 500px"></div>
|
||||
<div class="smooth-content">
|
||||
<footer class="footer-wrap bg--dark">
|
||||
<!-- Shape -->
|
||||
<div class="f-shape-1 wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">
|
||||
<img src="@/assets/img/bg-img/f-shap-1.png" alt="">
|
||||
</div>
|
||||
<!-- Shape -->
|
||||
<div class="f-shape-2 wow fadeInRight" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInRight;">
|
||||
<img src="@/assets/img/bg-img/f-shap-2.png" alt="">
|
||||
</div>
|
||||
<!-- Shape -->
|
||||
<div class="f-shape-3 wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<img src="@/assets/img/bg-img/f-shape-3.png" alt="">
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="me-4">
|
||||
<a class="mb-4 d-block footer-logo" href="#">
|
||||
<img src="@/assets/img/core-img/logo-2.png" alt="">
|
||||
</a>
|
||||
<p class="footer-desc">超过 18,000+ 小朋友在我们这学习算竟</p>
|
||||
|
||||
<div class="footer-contact-info wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
|
||||
<ul>
|
||||
<li><a href="#"><span class="icon-facebook-f"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin-in"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-2">
|
||||
<div class="quick-links-nav">
|
||||
<h5 class="mb-3 text-white">探索</h5>
|
||||
<span class="footer-shape-1"></span>
|
||||
<span class="footer-shape-2"></span>
|
||||
<ul>
|
||||
<li><a href="#">GMAT Coaching</a></li>
|
||||
<li><a href="#">GRE Coaching</a></li>
|
||||
<li><a href="#">IELTS Coaching</a></li>
|
||||
<li><a href="#">TOEFL Coaching</a></li>
|
||||
<li><a href="#">SAT Coaching</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-2">
|
||||
<div class="quick-links-nav">
|
||||
<h5 class="mb-3 text-white">友情链接</h5>
|
||||
<ul>
|
||||
<li><a href="#">SAT Coaching</a></li>
|
||||
<li><a href="#">IELTS Coaching</a></li>
|
||||
<li><a href="#">GRE Coaching</a></li>
|
||||
<li><a href="#">GMAT Coaching</a></li>
|
||||
<li><a href="#">TOEFL Coaching</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="quick-contact-nav">
|
||||
<h5 class="mb-3 text-white">联系我们</h5>
|
||||
<span class="footer-shape-1"></span>
|
||||
<span class="footer-shape-2"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="icon-incoming-call"></span> + 1 (246) 333-0088</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="icon-email"></span> alma.lawson@example.com</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="icon-map"></span> 4140 四川省成都市 XXX 宾馆</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="copy-right-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="copy-right-text text-center wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
|
||||
<p class="mb-0"> © Copyright 2024 by <a href="https://www.bootstrapmb.com">bootstrapMB</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<router-view/>
|
||||
<index-footer/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
107
src/components/IndexFooter.vue
Normal file
107
src/components/IndexFooter.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="footer-wrap bg--dark">
|
||||
<!-- Shape -->
|
||||
<div class="f-shape-1 wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">
|
||||
<img src="@/assets/img/bg-img/f-shap-1.png" alt="">
|
||||
</div>
|
||||
<!-- Shape -->
|
||||
<div class="f-shape-2 wow fadeInRight" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInRight;">
|
||||
<img src="@/assets/img/bg-img/f-shap-2.png" alt="">
|
||||
</div>
|
||||
<!-- Shape -->
|
||||
<div class="f-shape-3 wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<img src="@/assets/img/bg-img/f-shape-3.png" alt="">
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="me-4">
|
||||
<a class="mb-4 d-block footer-logo" href="#">
|
||||
<img src="@/assets/img/core-img/logo-2.png" alt="">
|
||||
</a>
|
||||
<p class="footer-desc">超过 18,000+ 小朋友在我们这学习算竟</p>
|
||||
|
||||
<div class="footer-contact-info wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
|
||||
<ul>
|
||||
<li><a href="#"><span class="icon-facebook-f"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
<li><a href="#"><span class="icon-linkedin-in"></span></a></li>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-2">
|
||||
<div class="quick-links-nav">
|
||||
<h5 class="mb-3 text-white">探索</h5>
|
||||
<span class="footer-shape-1"></span>
|
||||
<span class="footer-shape-2"></span>
|
||||
<ul>
|
||||
<li><a href="#">GMAT Coaching</a></li>
|
||||
<li><a href="#">GRE Coaching</a></li>
|
||||
<li><a href="#">IELTS Coaching</a></li>
|
||||
<li><a href="#">TOEFL Coaching</a></li>
|
||||
<li><a href="#">SAT Coaching</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-2">
|
||||
<div class="quick-links-nav">
|
||||
<h5 class="mb-3 text-white">友情链接</h5>
|
||||
<ul>
|
||||
<li><a href="#">SAT Coaching</a></li>
|
||||
<li><a href="#">IELTS Coaching</a></li>
|
||||
<li><a href="#">GRE Coaching</a></li>
|
||||
<li><a href="#">GMAT Coaching</a></li>
|
||||
<li><a href="#">TOEFL Coaching</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="quick-contact-nav">
|
||||
<h5 class="mb-3 text-white">联系我们</h5>
|
||||
<span class="footer-shape-1"></span>
|
||||
<span class="footer-shape-2"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="icon-incoming-call"></span> + 1 (246) 333-0088</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="icon-email"></span> alma.lawson@example.com</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="icon-map"></span> 4140 四川省成都市 XXX 宾馆</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="copy-right-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="copy-right-text text-center wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
|
||||
<p class="mb-0"> © Copyright 2024 by <a href="https://www.bootstrapmb.com">bootstrapMB</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
107
src/components/IndexHeader.vue
Normal file
107
src/components/IndexHeader.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<script setup>
|
||||
import {onMounted} from "vue";
|
||||
import {useHeaderSticky} from "@/utils/header.js";
|
||||
|
||||
onMounted(useHeaderSticky)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header-area home-2 bg--navy" id="header">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container menu-area-">
|
||||
<!-- Navbar Brand -->
|
||||
<div class="mobile-menu">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="@/assets/img/core-img/logo-2.png" alt="Brand">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Navbar Toggler -->
|
||||
<button class="navbar-toggler" id="navbarToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="icon-menu"></span>
|
||||
</button>
|
||||
|
||||
<!-- Navbar -->
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav navbar-nav-scroll mb-3 mb-lg-0" id="SupportHiveNav">
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Home</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="index.html">Education</a></li>
|
||||
<li><a href="index-kid-education.html">KidEducation</a></li>
|
||||
<li><a href="index-marketplaxe.html">Marketplace</a></li>
|
||||
<li><a href="index-university.html">University Classic</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Course</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="course-list.html">Course list</a></li>
|
||||
<li><a href="all-course.html">all Course</a></li>
|
||||
<li><a href="course-details.html">Course Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Pages</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
<li><a href="faq.html">Faq</a></li>
|
||||
<li><a href="pricing.html">Price</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="login.html">Login</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Event</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="event.html">Event list</a></li>
|
||||
<li><a href="event-sidebar.html">Event Sidebar</a></li>
|
||||
<li><a href="event-details.html">Event Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Shop</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="shop.html">Shop</a></li>
|
||||
<li><a href="shop-details.html">Shop Details</a></li>
|
||||
<li><a href="cart.html">Cart</a></li>
|
||||
<li><a href="checkout.html">Checkout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown-list">
|
||||
<a href="#">Blog</a>
|
||||
<div class="dropdown-toggler"><i class="icon-down-arrow-1"></i></div><ul>
|
||||
<li><a href="blog.html">Blog</a></li>
|
||||
<li><a href="blog-details.html">Blog Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="cart-search-area ml-auto d-flex align-items-center">
|
||||
<div class="search-home-2">
|
||||
<div class="header-action">
|
||||
<div class="search-toggle-open header-search">
|
||||
<div class="search-icon">
|
||||
<span class="icon-icon_search2"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-btn-area relative">
|
||||
<a href="#" class="relative"><span class="icon-icon_cart_alt"></span></a>
|
||||
<div class="cart-badge bg--dark">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
39
src/components/TopHeader.vue
Normal file
39
src/components/TopHeader.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="top-header">
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col-md-6 col-lg-7">
|
||||
<div class="contact-info d-flex align-items-center">
|
||||
<a href="mailto:info@doorsoft"><span class="icon-mail"></span> <span class="text-white contact-desc">alma.lawson@example.com</span></a>
|
||||
<a href=""><span class="icon-phone-alt-solid-11"></span> <span class="text-white contact-desc">123 - 456 - 7890</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="d-flex align-items-center top-social-conatct">
|
||||
<!-- Dropdown -->
|
||||
<div class="top-social-icon">
|
||||
<ul class="header-icon">
|
||||
<li><span class="text-white">加入我们:</span></li>
|
||||
<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>
|
||||
<li><a href="#"><span class="icon-instagram"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<a class="login-btn" href="#"><span class="icon-user-plus-solid-1"></span> 注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -3,7 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
|
||||
{
|
||||
path: '',
|
||||
name: 'welcome',
|
||||
component: () => import('@/views/Welcome.vue'),
|
||||
}
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
804
src/views/Welcome.vue
Normal file
804
src/views/Welcome.vue
Normal file
@ -0,0 +1,804 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="hero-area-2">
|
||||
<!-- Shape -->
|
||||
<div class="hero-2-curbe-shape">
|
||||
<img src="@/assets/img/bg-img/hero-2-shape.png" alt="">
|
||||
</div>
|
||||
<div class="hero-2-shape-1 wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-1.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="hero-2-shape-2">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-2.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="hero-2-shape-3">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-4.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center justify-content-between">
|
||||
<div class="col-lg-5">
|
||||
<!-- Content text -->
|
||||
<div class="hero-content-text">
|
||||
<h6 class="wow fadeInUp" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInUp;"><i class="icon-icon_document_alt"></i>
|
||||
欢迎加入柏码</h6>
|
||||
<h2 class="wow fadeInUp" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInUp;">开心少儿编程俱乐部
|
||||
</h2>
|
||||
<div class="hero-btn-area mt-5 wow fadeInUp" data-wow-delay="1300ms" style="visibility: visible; animation-delay: 1300ms; animation-name: fadeInUp;">
|
||||
<a class="btn-1" href="about.html">了解更多 <span class="icon-right-arrow-11"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<div class="welcome-img-2 text-center relative">
|
||||
<img class="wel-img-2 wow fadeInUp" data-wow-delay="500ms" src="@/assets/img/bg-img/hero-2.png" alt="" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInUp;">
|
||||
<div class="shape-box">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-5.png" alt="">
|
||||
</div>
|
||||
<div class="bag-shape wow fadeInLeft" data-wow-delay="1000ms" style="visibility: visible; animation-delay: 1000ms; animation-name: fadeInLeft;">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care-program-area">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- title -->
|
||||
<div class="col-lg-6">
|
||||
<div class="section-title-area text-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
|
||||
<h6>能学到什么？</h6>
|
||||
<h2 class="mb-0">少儿编程课程安排</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Single Card -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="single-care-card relative text-center wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
|
||||
<div class="care-shape wow fadeInDown" data-wow-delay="1400ms" style="visibility: visible; animation-delay: 1400ms; animation-name: fadeInDown;">
|
||||
<img src="@/assets/img/bg-img/home-2/care-shap.png" alt="">
|
||||
</div>
|
||||
<div class="care-card-img-content">
|
||||
<div class="care-img">
|
||||
<img src="@/assets/img/bg-img/care-1.jpeg.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="care-content-text">
|
||||
<h4>Java全套实战路线</h4>
|
||||
<p>从JavaSE入门开始学习，接着是JavaWeb网页后端开发，JSP大学课设折磨，SSM框架学习，SpringBoot一步到位，SpringCloud天天更新</p>
|
||||
<div class="care-count-info">
|
||||
<p class="mb-0"><span>课时:</span> 约2小时45分钟</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="single-care-card relative text-center wow fadeInLeft" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInLeft;">
|
||||
<div class="care-shape wow fadeInDown" data-wow-delay="1400ms" style="visibility: visible; animation-delay: 1400ms; animation-name: fadeInDown;">
|
||||
<img src="@/assets/img/bg-img/home-2/care-shap.png" alt="">
|
||||
</div>
|
||||
<div class="care-card-img-content">
|
||||
<div class="care-img">
|
||||
<img src="@/assets/img/bg-img/care-2.jpeg.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="care-content-text">
|
||||
<h4>Scratch模块编程</h4>
|
||||
<p>适用于中国宝宝体制的，少儿编程软件，像拼图一样进行程序开发和设计，网页上可以出现动画实时交互</p>
|
||||
<div class="care-count-info">
|
||||
<p class="mb-0"><span>课时:</span> 约2小时45分钟</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="single-care-card relative text-center wow fadeInLeft" data-wow-delay="1100ms" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInLeft;">
|
||||
<div class="care-shape wow fadeInDown" data-wow-delay="1400ms" style="visibility: visible; animation-delay: 1400ms; animation-name: fadeInDown;">
|
||||
<img src="@/assets/img/bg-img/home-2/care-shap.png" alt="">
|
||||
</div>
|
||||
<div class="care-card-img-content">
|
||||
<div class="care-img">
|
||||
<img src="@/assets/img/bg-img/care-3.jpeg.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div class="care-content-text">
|
||||
<h4>树莓派单片机编程</h4>
|
||||
<p>使用Python加树莓派进行编程开发，学习机器视觉，AI人工智能，制造智能小车，编写小车循迹算法</p>
|
||||
<div class="care-count-info">
|
||||
<p class="mb-0"><span>课时:</span> 约2小时45分钟</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popular-cate-2-area bg-img bg-overlay relative" style="background-image: url(@/assets/img/bg-img/popular.png);">
|
||||
<div class="cate-2-shape wow fadeInRight" data-wow-delay="1200ms" style="visibility: visible; animation-delay: 1200ms; animation-name: fadeInRight;">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-6.png" alt="">
|
||||
</div>
|
||||
<div class="container">
|
||||
<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>
|
||||
</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="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 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>
|
||||
<div class="certificate-area relative">
|
||||
<!-- Shape -->
|
||||
<div class="gra-shape-1 wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-7.png" alt="">
|
||||
</div>
|
||||
<div class="gra-shape-2">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-8.png" alt="">
|
||||
</div>
|
||||
<div class="gra-shape-3 wow fadeInRight" data-wow-delay="1000ms" style="visibility: visible; animation-delay: 1000ms; animation-name: fadeInRight;">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-9.png" alt="">
|
||||
</div>
|
||||
<div class="gra-shape-4">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-10.png" alt="">
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="gra-cert-image-area relative">
|
||||
<div class="certi-img relative wow fadeInRight" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInRight;">
|
||||
<div class="gra-img-1 relative">
|
||||
<img src="@/assets/img/bg-img/home-2/g-1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="certi-img-2 wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
|
||||
<div class="gra-img-2">
|
||||
<img src="@/assets/img/bg-img/home-2/g-2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="play-btn">
|
||||
<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 class="col-lg-6">
|
||||
<div class="certi-title-area wow fadeInRight" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInRight;">
|
||||
<h6 class="certi-sub-title"><span class="icon-open-book-1"></span> Guaranteed and
|
||||
certified</h6>
|
||||
<h2>Online Learning Wherever & whenever.</h2>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="certi-single-card d-flex align-items-center">
|
||||
<div class="certi-border border--primary">
|
||||
<div class="certi-icon bg--primary">
|
||||
<img src="@/assets/img/bg-img/icons/g-1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="certi-card-info">
|
||||
<h4>Full day session</h4>
|
||||
<p>All membership plans come with a 30-day satisfaction guarantee.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="certi-single-card d-flex align-items-center">
|
||||
<div class="certi-border border--second">
|
||||
<div class="certi-icon bg--second">
|
||||
<img src="@/assets/img/bg-img/icons/g-2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="certi-card-info">
|
||||
<h4>Knowledge Classes</h4>
|
||||
<p>All membership plans come with a 30-day satisfaction guarantee.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="certi-single-card d-flex align-items-center">
|
||||
<div class="certi-border border--navy">
|
||||
<div class="certi-icon bg--navy">
|
||||
<img src="@/assets/img/bg-img/icons/g-1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="certi-card-info">
|
||||
<h4>Last minute request</h4>
|
||||
<p>All membership plans come with a 30-day satisfaction guarantee.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="partner-area-2 wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Slider -->
|
||||
<div class="partner-slider owl-carousel owl-loaded owl-drag">
|
||||
<!-- Single Slider -->
|
||||
|
||||
<!-- Single Slider -->
|
||||
|
||||
<!-- Single Slider -->
|
||||
|
||||
<!-- Single Slider -->
|
||||
|
||||
<!-- Single Slider -->
|
||||
|
||||
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1220px, 0px, 0px); transition: 1s; width: 3965px;"><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-2.png" alt=""></a>
|
||||
</div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
|
||||
</div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-4.png" alt=""></a>
|
||||
</div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
|
||||
</div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-1.png" alt=""></a>
|
||||
</div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-2.png" alt=""></a>
|
||||
</div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
|
||||
</div></div><div class="owl-item active" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-4.png" alt=""></a>
|
||||
</div></div><div class="owl-item" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
|
||||
</div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-1.png" alt=""></a>
|
||||
</div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-2.png" alt=""></a>
|
||||
</div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-3.png" alt=""></a>
|
||||
</div></div><div class="owl-item cloned" style="width: 205px; margin-right: 100px;"><div class="single-slider">
|
||||
<a href="#"><img src="@/assets/img/bg-img/home-2/s-4.png" alt=""></a>
|
||||
</div></div></div></div><div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button><button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button></div><div class="owl-dots disabled"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="counter-area-home-2">
|
||||
<div class="counter-shape wow fadeInLeft" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInLeft;">
|
||||
<img src="@/assets/img/bg-img/counter-shape.png" alt="">
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Single card -->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="single-counter-2-card d-flex align-items-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
|
||||
<!-- icon -->
|
||||
<div class="counter-2-icon">
|
||||
<span class="icon-ruler-combined-solid-1"></span>
|
||||
</div>
|
||||
<!-- text -->
|
||||
<div class="counter-2-text">
|
||||
<h2><span class="counter">23</span><span>k</span></h2>
|
||||
<p>Online Courses</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single card -->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="single-counter-2-card d-flex align-items-center wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
|
||||
<!-- icon -->
|
||||
<div class="counter-2-icon">
|
||||
<span class="icon-book-solid-11"></span>
|
||||
</div>
|
||||
<!-- text -->
|
||||
<div class="counter-2-text">
|
||||
<h2><span class="counter">5</span><span>k+</span></h2>
|
||||
<p>Online Courses</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single card -->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="single-counter-2-card d-flex align-items-center wow fadeInDown" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInDown;">
|
||||
<!-- icon -->
|
||||
<div class="counter-2-icon">
|
||||
<span class="icon-ruler-combined-solid-1"></span>
|
||||
</div>
|
||||
<!-- text -->
|
||||
<div class="counter-2-text">
|
||||
<h2><span class="counter">58</span><span>k+</span></h2>
|
||||
<p>Online Student</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-area">
|
||||
<!-- Shape -->
|
||||
<div class="gallery-curbe-shape">
|
||||
<img src="@/assets/img/bg-img/hero-2-shape.png" alt="">
|
||||
</div>
|
||||
<div class="g-shape-2 wow fadeInDown animated" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: spin;">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-20.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="g-shape-3">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-19.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="g-shape-1 wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-18.png" alt="">
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- title -->
|
||||
<div class="col-lg-7">
|
||||
<div class="section-title-area text-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
|
||||
<h6>Portfolio</h6>
|
||||
<h2 class="mb-0">Our Colourful Journey</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 g-lg-5 gallery-area" style="position: relative; height: 419.008px;">
|
||||
<!-- Card -->
|
||||
<div class="col-12 col-sm-6 col-lg-3" style="position: absolute; left: 0%; top: 0px;">
|
||||
<div class="portfolio-card border--pri-1">
|
||||
<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="@/assets/img/bg-img/home-2/p-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/home-2/p-1.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-card border--pri-1 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="@/assets/img/bg-img/home-2/p-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/home-2/p-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 border--dark-1">
|
||||
<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="@/assets/img/bg-img/home-2/p-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/home-2/p-3.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-card border--navy-1 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="@/assets/img/bg-img/home-2/p-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/home-2/p-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 border--pri-2">
|
||||
<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="@/assets/img/bg-img/home-2/p-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/home-2/p-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 border--pri-1">
|
||||
<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="@/assets/img/bg-img/home-2/p-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/home-2/p-6.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-card border--navy-1 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="@/assets/img/bg-img/home-2/p-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/home-2/p-7.png">
|
||||
<span class="icon-Arrow-1"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upcoming-event-area relative">
|
||||
<!-- all shape img -->
|
||||
<div class="up-shape-1">
|
||||
<img src="@/assets/img/bg-img/home-2/shpe-11.png" alt="">
|
||||
</div>
|
||||
<div class="up-shape-2 wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
|
||||
<img src="@/assets/img/bg-img/home-2/shpe-12.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="up-shape-3 wow fadeInUp" data-wow-delay="1500ms" style="visibility: visible; animation-delay: 1500ms; animation-name: fadeInUp;">
|
||||
<img src="@/assets/img/bg-img/home-2/shpe-13.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<!-- title -->
|
||||
<div class="col-lg-6">
|
||||
<div class="section-title-area text-center wow fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
|
||||
<h6>Events</h6>
|
||||
<h2 class="mb-0">Upcoming Event</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-5">
|
||||
<!-- Image -->
|
||||
<div class="event-image wow fadeInUp" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
|
||||
<img src="@/assets/img/bg-img/event.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-1"></div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="event-content-text">
|
||||
<!-- Single Card -->
|
||||
<div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInRight;">
|
||||
<div class="event-price">
|
||||
<h5>$30</h5>
|
||||
</div>
|
||||
<div class="event-card-content">
|
||||
<p>Age: 2-4 Years Time: 9.00 - 11.00</p>
|
||||
<h4>Magic Princess Birthday Party </h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="1100ms" style="visibility: visible; animation-delay: 1100ms; animation-name: fadeInRight;">
|
||||
<div class="event-price">
|
||||
<h5>$100</h5>
|
||||
</div>
|
||||
<div class="event-card-content">
|
||||
<p>Age: 2-4 Years Time: 9.00 - 11.00</p>
|
||||
<h4>Sports Day Carnival</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="1300ms" style="visibility: visible; animation-delay: 1300ms; animation-name: fadeInRight;">
|
||||
<div class="event-price">
|
||||
<h5>$10</h5>
|
||||
</div>
|
||||
<div class="event-card-content">
|
||||
<p>Age: 2-4 Years Time: 9.00 - 11.00</p>
|
||||
<h4>Cultural Diversity Week </h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Card -->
|
||||
<div class="single-event-card d-flex align-items-center wow fadeInRight" data-wow-delay="1500ms" style="visibility: hidden; animation-delay: 1500ms; animation-name: none;">
|
||||
<div class="event-price">
|
||||
<h5>$30</h5>
|
||||
</div>
|
||||
<div class="event-card-content">
|
||||
<p>Magic Paper Plates Art Gallery</p>
|
||||
<h4>Magic Princess Birthday Party </h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="client-area-home-2 relative">
|
||||
<!-- Curbe shape -->
|
||||
<div class="client-curbe-shape">
|
||||
<img src="@/assets/img/bg-img/home-2/shape-14.png" alt="">
|
||||
</div>
|
||||
<div class="client-2-shape-1">
|
||||
<img src="@/assets/img/bg-img/home-4/shape-6.png" alt="">
|
||||
</div>
|
||||
<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 fadeInDown" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
|
||||
<h6>Our Client Feedback</h6>
|
||||
<h2 class="mb-0">What they’re saying about our courses</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Image -->
|
||||
<div class="col-md-4">
|
||||
<div class="client-image-home-2 relative wow fadeInLeft" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;">
|
||||
<img class="relative" src="@/assets/img/bg-img/home-2/client.jpeg.jpg" alt="">
|
||||
<div class="c-2-border-1"></div>
|
||||
<div class="c-2-border-2"></div>
|
||||
<div class="c-2-border-3"></div>
|
||||
<div class="c-2-border-4"></div>
|
||||
<div class="c-2-border-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="swiper client-active-2 wow fadeInRight swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-wow-delay="900ms" style="visibility: visible; animation-delay: 900ms; animation-name: fadeInRight;">
|
||||
<!-- If we need navigation buttons -->
|
||||
<div class="testimonials-3-navigation-wrapper position-relative">
|
||||
<div class="common-slider-navigation">
|
||||
<button class="client-active-1-button-prev" tabindex="0" aria-label="Previous slide" aria-controls="swiper-wrapper-bab3cf46d0795ae5"><span class="icon-arrow-right"></span></button>
|
||||
<button class="client-active-1-button-next" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-bab3cf46d0795ae5"><span class="icon-right"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-wrapper" id="swiper-wrapper-bab3cf46d0795ae5" aria-live="off" style="transition-duration: 3000ms; transform: translate3d(-1076px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 468px; margin-right: 70px;">
|
||||
<div class="client-slider-home-2">
|
||||
|
||||
<!-- Single Slider -->
|
||||
<div class="clinet-single-slider">
|
||||
<div class="footer-icon-home-2">
|
||||
<span class="icon-search-soli1d-1"></span>
|
||||
</div>
|
||||
<div class="client-info-meta-home-2">
|
||||
<div class="client-img-rating-2">
|
||||
<div class="clinet-rating">
|
||||
<ul>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>"Edumastery has been an amazing experience for our daughter,
|
||||
Lily. The
|
||||
inclusive and enriching atmosphere has not only helped her
|
||||
academic
|
||||
growth but has also fostered her social and emotional
|
||||
development. We
|
||||
are grateful for the caring and dedicated staff."</p>
|
||||
<!-- client info -->
|
||||
<div class="client-footer d-flex align-items-end justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="user-icon">
|
||||
<span class="icon-Frame"></span>
|
||||
</div>
|
||||
<div class="client-info">
|
||||
<h4>Bessie Cooper</h4>
|
||||
<p>Nintendo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- single block -->
|
||||
<div class="swiper-slide swiper-slide-duplicate-active swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 468px; margin-right: 70px;">
|
||||
<div class="client-slider-home-2">
|
||||
|
||||
<!-- Single Slider -->
|
||||
<div class="clinet-single-slider">
|
||||
<div class="footer-icon-home-2">
|
||||
<span class="icon-search-soli1d-1"></span>
|
||||
</div>
|
||||
<div class="client-info-meta-home-2">
|
||||
<div class="client-img-rating-2">
|
||||
<div class="clinet-rating">
|
||||
<ul>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>"Edumastery has been an amazing experience for our daughter,
|
||||
Lily. The
|
||||
inclusive and enriching atmosphere has not only helped her
|
||||
academic
|
||||
growth but has also fostered her social and emotional
|
||||
development. We
|
||||
are grateful for the caring and dedicated staff."</p>
|
||||
<!-- client info -->
|
||||
<div class="client-footer d-flex align-items-end justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="user-icon">
|
||||
<span class="icon-Frame"></span>
|
||||
</div>
|
||||
<div class="client-info">
|
||||
<h4>Bessie Cooper</h4>
|
||||
<p>Nintendo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide swiper-slide-duplicate swiper-slide-active swiper-slide-duplicate-prev" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 468px; margin-right: 70px;">
|
||||
<div class="client-slider-home-2">
|
||||
|
||||
<!-- Single Slider -->
|
||||
<div class="clinet-single-slider">
|
||||
<div class="footer-icon-home-2">
|
||||
<span class="icon-search-soli1d-1"></span>
|
||||
</div>
|
||||
<div class="client-info-meta-home-2">
|
||||
<div class="client-img-rating-2">
|
||||
<div class="clinet-rating">
|
||||
<ul>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
<li><span class="icon-star1"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>"Edumastery has been an amazing experience for our daughter,
|
||||
Lily. The
|
||||
inclusive and enriching atmosphere has not only helped her
|
||||
academic
|
||||
growth but has also fostered her social and emotional
|
||||
development. We
|
||||
are grateful for the caring and dedicated staff."</p>
|
||||
<!-- client info -->
|
||||
<div class="client-footer d-flex align-items-end justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="user-icon">
|
||||
<span class="icon-Frame"></span>
|
||||
</div>
|
||||
<div class="client-info">
|
||||
<h4>Bessie Cooper</h4>
|
||||
<p>Nintendo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user