<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="utf-8">
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
<title>EGG-Demo-成都小C</title>
|
<meta content="" name="descriptison">
|
<meta content="" name="keywords">
|
<!-- Favicons -->
|
<!-- Google Fonts -->
|
<link href="/public/static/css/css-OpenSans300300i400400i600600.css" rel="stylesheet">
|
<!-- Vendor CSS Files -->
|
<link href="/public/static/css/bootstrap.min.css" rel="stylesheet">
|
<link href="/public/static/css/font-awesome.min.css" rel="stylesheet">
|
<link href="/public/static/css/animate.min.css" rel="stylesheet">
|
<link href="/public/static/css/ionicons.min.css" rel="stylesheet">
|
<link href="/public/static/css/owl.carousel.min.css" rel="stylesheet">
|
<link href="/public/static/css/venobox.css" rel="stylesheet">
|
|
<!-- Template Main CSS File -->
|
<link href="/public/static/css/style.css" rel="stylesheet">
|
|
|
</head>
|
|
<body>
|
<div class="adcenter">
|
<script src="/public/static/js/ggad2_728x90.js"></script>
|
</div>
|
|
<!-- ======= Header ======= -->
|
<header id="header" class="fixed-top">
|
<div class="container">
|
|
<div class="logo float-left">
|
<!-- Uncomment below if you prefer to use an text logo -->
|
<!-- <h1 class="text-light"><a href="#header"><span>NewBiz</span></a></h1> -->
|
<a href="#intro" class="scrollto"><img src="/public/static/picture/logo.png" alt=""
|
class="img-fluid"></a>
|
</div>
|
|
<nav class="main-nav float-right d-none d-lg-block">
|
<ul>
|
<li class="active"><a href="#intro">首页</a></li>
|
<li><a href="#about">关于本项目</a></li>
|
<li><a href="#services">Services</a></li>
|
<li><a href="#portfolio">Portfolio</a></li>
|
<li><a href="#team">Team</a></li>
|
<li class="drop-down"><a href="">Drop Down</a>
|
<ul>
|
<li><a href="#">Drop Down 1</a></li>
|
<li class="drop-down"><a href="#">Drop Down 2</a>
|
<ul>
|
<li><a href="#">Deep Drop Down 1</a></li>
|
<li><a href="#">Deep Drop Down 2</a></li>
|
<li><a href="#">Deep Drop Down 3</a></li>
|
<li><a href="#">Deep Drop Down 4</a></li>
|
<li><a href="#">Deep Drop Down 5</a></li>
|
</ul>
|
</li>
|
<li><a href="#">Drop Down 3</a></li>
|
<li><a href="#">Drop Down 4</a></li>
|
<li><a href="#">Drop Down 5</a></li>
|
</ul>
|
</li>
|
<li><a href="#contact">Contact Us</a></li>
|
</ul>
|
</nav><!-- .main-nav -->
|
|
</div>
|
</header><!-- #header -->
|
|
<!-- ======= Intro Section ======= -->
|
<section id="intro" class="clearfix">
|
<div class="container">
|
|
<div class="intro-img">
|
<img src="/public/static/picture/intro-img.svg" alt="" class="img-fluid">
|
</div>
|
|
<div class="intro-info">
|
<h2>EGG+TYPESCRIPTS<br>VUE技术交流组实战DEMO</h2>
|
<div>
|
<a href="#about" class="btn-get-started scrollto">了解一下</a>
|
<a href="#services" class="btn-services scrollto">接口相关</a>
|
</div>
|
</div>
|
|
</div>
|
</section><!-- End Intro Section -->
|
|
<main id="main">
|
|
<!-- ======= About Section ======= -->
|
<section id="about">
|
<div class="container">
|
|
<header class="section-header">
|
<h3>关于本项目</h3>
|
<p>VUE技术交流组：“ 我们不生产代码，我们只是代码的搬运工 ”</p>
|
</header>
|
|
<div class="row about-container">
|
|
<div class="col-lg-6 content order-lg-1 order-2">
|
<p>
|
欢迎刚接触VUE，或经验丰富的大佬，加入我们。（致力于VUE技术底层开发做拓展，延伸交流技术细节。群内更有大厂的大佬，让大家学习技术的路上再与大厂之间打交道）
|
</br>相关博客：<a href="https://www.microanswer.cn" target="_blank">microanswer技术博客</a>
|
</p>
|
|
<div class="icon-box wow fadeInUp">
|
<div class="icon"><i class="fa fa-shopping-bag"></i></div>
|
<h4 class="title"><a href="">EGG--MVC架构（Model）</a></h4>
|
<p class="description">
|
Service：在复杂业务场景下用于做业务逻辑封装的一个抽象层(主要用于操作数据库)</br>
|
保持 Controller 中的逻辑更加简洁</br>
|
保持业务逻辑的独立性，抽象出来的 Service 可以被多个 Controller 重复调用
|
</p>
|
</div>
|
|
<div class="icon-box wow fadeInUp" data-wow-delay="0.2s">
|
<div class="icon"><i class="fa fa-photo"></i></div>
|
<h4 class="title"><a href="">EGG--MVC架构（View）</a></h4>
|
<p class="description">
|
您现在看到的为使用egg-view-nunjucks进行模板渲染的视图层</br>
|
当然，您可以选择其他的模板渲染插件</br>
|
</p>
|
</div>
|
|
<div class="icon-box wow fadeInUp" data-wow-delay="0.4s">
|
<div class="icon"><i class="fa fa-bar-chart"></i></div>
|
<h4 class="title"><a href="">EGG--MVC架构（Controller）</a></h4>
|
<p class="description">
|
获取用户通过 HTTP 传递过来的请求参数</br>
|
校验、组装参数</br>
|
调用 Service 进行业务处理，必要时处理转换 Service 的返回结果，让它适应用户的需求</br>
|
通过 HTTP 将结果响应给用户
|
</p>
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 background order-lg-2 order-1 wow fadeInUp">
|
<img src="/public/static/picture/about-img.svg" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="row about-extra">
|
<div class="col-lg-6 wow fadeInUp">
|
<img src="/public/static/picture/about-extra-1.svg" class="img-fluid" alt="">
|
</div>
|
<div class="col-lg-6 wow fadeInUp pt-5 pt-lg-0">
|
<h4>您需要掌握的基础知识</h4>
|
<p>
|
1.原生node.js</br>
|
2.node框架-koa</br>
|
3.TYPESCRIPTS</br>
|
4.ES6语法</br>
|
5.VUE2.x全家桶</br>
|
6.VUE3.X全家桶</br>
|
7.mysql的基本操作</br>
|
8.sql基础语法
|
</p>
|
<p>
|
我们将会用上述知识基于vue-cli4进行构建全栈项目
|
</p>
|
</div>
|
</div>
|
|
<div class="row about-extra">
|
<div class="col-lg-6 wow fadeInUp order-1 order-lg-2">
|
<img src="/public/static/picture/about-extra-2.svg" class="img-fluid" alt="">
|
</div>
|
|
<div class="col-lg-6 wow fadeInUp pt-4 pt-lg-0 order-2 order-lg-1">
|
<h4>项目所使用的的具体技术栈
|
</h4>
|
<p>
|
一.后台管理系统(采用开源框架：ant-design-pro-vue)</br>
|
1. <a href="https://github.com/vueComponent/ant-design-vue" target="_blank">ant-design-vue</a> - Ant Design Of Vue 实现</br>
|
2. <a href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a> - 头像裁剪组件</br>
|
3. <a href="https://antv.gitee.io/zh" target="_blank">@antv/g2</a> - Alipay AntV 数据可视化图表</br>
|
4. <a href="https://viserjs.gitee.io/" target="_blank">Viser-vue</a> - antv/g2 封装实现</br>
|
5. node、yarn、webpack、eslint、@vue/cli ~3、vue2.x全家桶
|
</p>
|
<p>
|
二.接口实现</br>
|
1.EGG框架</br>
|
2.mysql</br>
|
3.typescript
|
</p>
|
<p>
|
三.商城系统</br>
|
1.vue3全家桶</br>
|
2.axios</br>
|
3...等等（还未规划）
|
</p>
|
</div>
|
|
</div>
|
|
</div>
|
</section><!-- End About Section -->
|
|
<!-- ======= Services Section ======= -->
|
<section id="services" class="section-bg">
|
<div class="container">
|
|
<header class="section-header">
|
<h3>Services</h3>
|
<p>Laudem latine persequeris id sed, ex fabulas delectus quo. No vel partiendo abhorreant
|
vituperatoribus.</p>
|
</header>
|
|
<div class="row">
|
|
<div class="col-md-6 col-lg-5 offset-lg-1 wow bounceInUp" data-wow-duration="1.4s">
|
<div class="box">
|
<div class="icon"><i class="ion-ios-analytics-outline" style="color: #ff689b;"></i></div>
|
<h4 class="title"><a href="">Lorem Ipsum</a></h4>
|
<p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias
|
excepturi sint occaecati cupiditate non provident</p>
|
</div>
|
</div>
|
<div class="col-md-6 col-lg-5 wow bounceInUp" data-wow-duration="1.4s">
|
<div class="box">
|
<div class="icon"><i class="ion-ios-bookmarks-outline" style="color: #e9bf06;"></i></div>
|
<h4 class="title"><a href="">Dolor Sitema</a></h4>
|
<p class="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
aliquip ex ea commodo consequat tarad limino ata</p>
|
</div>
|
</div>
|
|
<div class="col-md-6 col-lg-5 offset-lg-1 wow bounceInUp" data-wow-delay="0.1s"
|
data-wow-duration="1.4s">
|
<div class="box">
|
<div class="icon"><i class="ion-ios-paper-outline" style="color: #3fcdc7;"></i></div>
|
<h4 class="title"><a href="">Sed ut perspiciatis</a></h4>
|
<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
dolore eu fugiat nulla pariatur</p>
|
</div>
|
</div>
|
<div class="col-md-6 col-lg-5 wow bounceInUp" data-wow-delay="0.1s" data-wow-duration="1.4s">
|
<div class="box">
|
<div class="icon"><i class="ion-ios-speedometer-outline" style="color:#41cf2e;"></i></div>
|
<h4 class="title"><a href="">Magni Dolores</a></h4>
|
<p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
officia deserunt mollit anim id est laborum</p>
|
</div>
|
</div>
|
|
<div class="col-md-6 col-lg-5 offset-lg-1 wow bounceInUp" data-wow-delay="0.2s"
|
data-wow-duration="1.4s">
|
<div class="box">
|
<div class="icon"><i class="ion-ios-world-outline" style="color: #d6ff22;"></i></div>
|
<h4 class="title"><a href="">Nemo Enim</a></h4>
|
<p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui
|
blanditiis praesentium voluptatum deleniti atque</p>
|
</div>
|
</div>
|
<div class="col-md-6 col-lg-5 wow bounceInUp" data-wow-delay="0.2s" data-wow-duration="1.4s">
|
<div class="box">
|
<div class="icon"><i class="ion-ios-clock-outline" style="color: #4680ff;"></i></div>
|
<h4 class="title"><a href="">Eiusmod Tempor</a></h4>
|
<p class="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero
|
tempore, cum soluta nobis est eligendi</p>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</section><!-- End Services Section -->
|
|
<!-- ======= Why Us Section ======= -->
|
<section id="why-us" class="wow fadeIn">
|
<div class="container">
|
<header class="section-header">
|
<h3>Why choose us?</h3>
|
<p>Laudem latine persequeris id sed, ex fabulas delectus quo. No vel partiendo abhorreant
|
vituperatoribus.</p>
|
</header>
|
|
<div class="row row-eq-height justify-content-center">
|
|
<div class="col-lg-4 mb-4">
|
<div class="card wow bounceInUp">
|
<i class="fa fa-diamond"></i>
|
<div class="card-body">
|
<h5 class="card-title">Corporis dolorem</h5>
|
<p class="card-text">Deleniti optio et nisi dolorem debitis. Aliquam nobis est
|
temporibus sunt ab inventore officiis aut voluptatibus.</p>
|
<a href="#" class="readmore">Read more </a>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 mb-4">
|
<div class="card wow bounceInUp">
|
<i class="fa fa-language"></i>
|
<div class="card-body">
|
<h5 class="card-title">Voluptates dolores</h5>
|
<p class="card-text">Voluptates nihil et quis omnis et eaque omnis sint aut. Ducimus
|
dolorum aspernatur.</p>
|
<a href="#" class="readmore">Read more </a>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 mb-4">
|
<div class="card wow bounceInUp">
|
<i class="fa fa-object-group"></i>
|
<div class="card-body">
|
<h5 class="card-title">Eum ut aspernatur</h5>
|
<p class="card-text">Autem quod nesciunt eos ea aut amet laboriosam ab. Eos quis porro
|
in non nemo ex. </p>
|
<a href="#" class="readmore">Read more </a>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
<div class="row counters">
|
|
<div class="col-lg-3 col-6 text-center">
|
<span data-toggle="counter-up">274</span>
|
<p>Clients</p>
|
</div>
|
|
<div class="col-lg-3 col-6 text-center">
|
<span data-toggle="counter-up">421</span>
|
<p>Projects</p>
|
</div>
|
|
<div class="col-lg-3 col-6 text-center">
|
<span data-toggle="counter-up">1,364</span>
|
<p>Hours Of Support</p>
|
</div>
|
|
<div class="col-lg-3 col-6 text-center">
|
<span data-toggle="counter-up">18</span>
|
<p>Hard Workers</p>
|
</div>
|
|
</div>
|
|
</div>
|
</section><!-- End Why Us Section -->
|
|
<!-- ======= Portfolio Section ======= -->
|
<section id="portfolio" class="clearfix">
|
<div class="container">
|
|
<header class="section-header">
|
<h3 class="section-title">Our Portfolio</h3>
|
</header>
|
|
<div class="row">
|
<div class="col-lg-12">
|
<ul id="portfolio-flters">
|
<li data-filter="*" class="filter-active">All</li>
|
<li data-filter=".filter-app">App</li>
|
<li data-filter=".filter-card">Card</li>
|
<li data-filter=".filter-web">Web</li>
|
</ul>
|
</div>
|
</div>
|
|
<div class="row portfolio-container">
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/app1.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">App 1</a></h4>
|
<p>App</p>
|
<div>
|
<a href="files/app1.jpg" data-gall="portfolioGallery" title="App 1"
|
class="venobox link-preview"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-web" data-wow-delay="0.1s">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/web3.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">Web 3</a></h4>
|
<p>Web</p>
|
<div>
|
<a href="files/web3.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="Web 3"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-app" data-wow-delay="0.2s">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/app2.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">App 2</a></h4>
|
<p>App</p>
|
<div>
|
<a href="files/app2.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="App 2"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/card2.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">Card 2</a></h4>
|
<p>Card</p>
|
<div>
|
<a href="files/card2.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="Card 2"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-web" data-wow-delay="0.1s">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/web2.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">Web 2</a></h4>
|
<p>Web</p>
|
<div>
|
<a href="files/web2.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="Web 2"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-app" data-wow-delay="0.2s">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/app3.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">App 3</a></h4>
|
<p>App</p>
|
<div>
|
<a href="files/app3.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="App 3"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/card1.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">Card 1</a></h4>
|
<p>Card</p>
|
<div>
|
<a href="files/card1.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="Card 1"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-card" data-wow-delay="0.1s">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/card3.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">Card 3</a></h4>
|
<p>Card</p>
|
<div>
|
<a href="files/card3.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="Card 3"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-web" data-wow-delay="0.2s">
|
<div class="portfolio-wrap">
|
<img src="/public/static/picture/web1.jpg" class="img-fluid" alt="">
|
<div class="portfolio-info">
|
<h4><a href="#">Web 1</a></h4>
|
<p>Web</p>
|
<div>
|
<a href="files/web1.jpg" class="venobox link-preview" data-gall="portfolioGallery"
|
title="Web 1"><i class="ion ion-eye"></i></a>
|
<a href="#" class="link-details" title="More Details"><i
|
class="ion ion-android-open"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</section><!-- End Portfolio Section -->
|
|
<!-- ======= Testimonials Section ======= -->
|
<section id="testimonials" class="section-bg">
|
<div class="container">
|
|
<header class="section-header">
|
<h3>Testimonials</h3>
|
</header>
|
|
<div class="row justify-content-center">
|
<div class="col-lg-8">
|
|
<div class="owl-carousel testimonials-carousel wow fadeInUp">
|
|
<div class="testimonial-item">
|
<img src="/public/static/picture/testimonial-1.jpg" class="testimonial-img" alt="">
|
<h3>Saul Goodman</h3>
|
<h4>Ceo & Founder</h4>
|
<p>
|
Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit
|
rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam,
|
risus at semper.
|
</p>
|
</div>
|
|
<div class="testimonial-item">
|
<img src="/public/static/picture/testimonial-2.jpg" class="testimonial-img" alt="">
|
<h3>Sara Wilsson</h3>
|
<h4>Designer</h4>
|
<p>
|
Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid
|
cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet
|
legam anim culpa.
|
</p>
|
</div>
|
|
<div class="testimonial-item">
|
<img src="/public/static/picture/testimonial-3.jpg" class="testimonial-img" alt="">
|
<h3>Jena Karlis</h3>
|
<h4>Store Owner</h4>
|
<p>
|
Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem
|
veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint
|
minim.
|
</p>
|
</div>
|
|
<div class="testimonial-item">
|
<img src="/public/static/picture/testimonial-4.jpg" class="testimonial-img" alt="">
|
<h3>Matt Brandon</h3>
|
<h4>Freelancer</h4>
|
<p>
|
Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim
|
fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem
|
dolore labore illum veniam.
|
</p>
|
</div>
|
|
<div class="testimonial-item">
|
<img src="/public/static/picture/testimonial-5.jpg" class="testimonial-img" alt="">
|
<h3>John Larson</h3>
|
<h4>Entrepreneur</h4>
|
<p>
|
Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster
|
veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam
|
culpa fore nisi cillum quid.
|
</p>
|
</div>
|
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
</section><!-- End Testimonials Section -->
|
|
<!-- ======= Team Section ======= -->
|
<section id="team">
|
<div class="container">
|
<div class="section-header">
|
<h3>Team</h3>
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-6 wow fadeInUp">
|
<div class="member">
|
<img src="/public/static/picture/team-1.jpg" class="img-fluid" alt="">
|
<div class="member-info">
|
<div class="member-info-content">
|
<h4>Walter White</h4>
|
<span>Chief Executive Officer</span>
|
<div class="social">
|
<a href=""><i class="fa fa-twitter"></i></a>
|
<a href=""><i class="fa fa-facebook"></i></a>
|
<a href=""><i class="fa fa-google-plus"></i></a>
|
<a href=""><i class="fa fa-linkedin"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
|
<div class="member">
|
<img src="/public/static/picture/team-2.jpg" class="img-fluid" alt="">
|
<div class="member-info">
|
<div class="member-info-content">
|
<h4>Sarah Jhonson</h4>
|
<span>Product Manager</span>
|
<div class="social">
|
<a href=""><i class="fa fa-twitter"></i></a>
|
<a href=""><i class="fa fa-facebook"></i></a>
|
<a href=""><i class="fa fa-google-plus"></i></a>
|
<a href=""><i class="fa fa-linkedin"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
|
<div class="member">
|
<img src="/public/static/picture/team-3.jpg" class="img-fluid" alt="">
|
<div class="member-info">
|
<div class="member-info-content">
|
<h4>William Anderson</h4>
|
<span>CTO</span>
|
<div class="social">
|
<a href=""><i class="fa fa-twitter"></i></a>
|
<a href=""><i class="fa fa-facebook"></i></a>
|
<a href=""><i class="fa fa-google-plus"></i></a>
|
<a href=""><i class="fa fa-linkedin"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
|
<div class="member">
|
<img src="/public/static/picture/team-4.jpg" class="img-fluid" alt="">
|
<div class="member-info">
|
<div class="member-info-content">
|
<h4>Amanda Jepson</h4>
|
<span>Accountant</span>
|
<div class="social">
|
<a href=""><i class="fa fa-twitter"></i></a>
|
<a href=""><i class="fa fa-facebook"></i></a>
|
<a href=""><i class="fa fa-google-plus"></i></a>
|
<a href=""><i class="fa fa-linkedin"></i></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</section><!-- End Team Section -->
|
|
<!-- ======= Clients Section ======= -->
|
<section id="clients" class="section-bg">
|
|
<div class="container">
|
|
<div class="section-header">
|
<h3>Our CLients</h3>
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque dere
|
santome nida.</p>
|
</div>
|
|
<div class="row no-gutters clients-wrap clearfix wow fadeInUp">
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-1.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-2.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-3.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-4.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-5.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-6.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-7.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
<div class="col-lg-3 col-md-4 col-xs-6">
|
<div class="client-logo">
|
<img src="/public/static/picture/client-8.png" class="img-fluid" alt="">
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><!-- End Clients Section -->
|
|
<!-- ======= Contact Section ======= -->
|
<section id="contact">
|
<div class="container-fluid">
|
|
<div class="section-header">
|
<h3>Contact Us</h3>
|
</div>
|
|
<div class="row wow fadeInUp">
|
|
<div class="col-lg-6">
|
<div class="map mb-4 mb-lg-0">
|
<iframe src="javascript:;" frameborder="0" style="border:0; width: 100%; height: 312px;"
|
allowfullscreen=""></iframe>
|
</div>
|
</div>
|
|
<div class="col-lg-6">
|
<div class="row">
|
<div class="col-md-5 info">
|
<i class="ion-ios-location-outline"></i>
|
<p>A108 Adam Street, NY 535022</p>
|
</div>
|
<div class="col-md-4 info">
|
<i class="ion-ios-email-outline"></i>
|
<p>info@example.com</p>
|
</div>
|
<div class="col-md-3 info">
|
<i class="ion-ios-telephone-outline"></i>
|
<p>+1 5589 55488 55</p>
|
</div>
|
</div>
|
|
<div class="form">
|
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
<div class="form-row">
|
<div class="form-group col-lg-6">
|
<input type="text" name="name" class="form-control" id="name"
|
placeholder="Your Name" data-rule="minlen:4"
|
data-msg="Please enter at least 4 chars">
|
<div class="validate"></div>
|
</div>
|
<div class="form-group col-lg-6">
|
<input type="email" class="form-control" name="email" id="email"
|
placeholder="Your Email" data-rule="email"
|
data-msg="Please enter a valid email">
|
<div class="validate"></div>
|
</div>
|
</div>
|
<div class="form-group">
|
<input type="text" class="form-control" name="subject" id="subject"
|
placeholder="Subject" data-rule="minlen:4"
|
data-msg="Please enter at least 8 chars of subject">
|
<div class="validate"></div>
|
</div>
|
<div class="form-group">
|
<textarea class="form-control" name="message" rows="5" data-rule="required"
|
data-msg="Please write something for us" placeholder="Message"></textarea>
|
<div class="validate"></div>
|
</div>
|
<div class="mb-3">
|
<div class="loading">Loading</div>
|
<div class="error-message"></div>
|
<div class="sent-message">Your message has been sent. Thank you!</div>
|
</div>
|
<div class="text-center"><button type="submit" title="Send Message">Send
|
Message</button></div>
|
</form>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</section><!-- End Contact Section -->
|
|
</main><!-- End #main -->
|
|
<!-- ======= Footer ======= -->
|
<footer id="footer">
|
<div class="footer-top">
|
<div class="container">
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6 footer-info">
|
<h3>NewBiz</h3>
|
<p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita
|
valies darta donna mare fermentum iaculis eu non diam phasellus. Scelerisque felis imperdiet
|
proin fermentum leo. Amet volutpat consequat mauris nunc congue.</p>
|
</div>
|
|
<div class="col-lg-2 col-md-6 footer-links">
|
<h4>Useful Links</h4>
|
<ul>
|
<li><a href="#">Home</a></li>
|
<li><a href="#">About us</a></li>
|
<li><a href="#">Services</a></li>
|
<li><a href="#">Terms of service</a></li>
|
<li><a href="#">Privacy policy</a></li>
|
</ul>
|
</div>
|
|
<div class="col-lg-3 col-md-6 footer-contact">
|
<h4>Contact Us</h4>
|
<p>
|
A108 Adam Street <br>
|
New York, NY 535022<br>
|
United States <br>
|
<strong>Phone:</strong> +1 5589 55488 55<br>
|
<strong>Email:</strong> info@example.com<br>
|
</p>
|
|
<div class="social-links">
|
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
|
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
|
<a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
|
<a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
|
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 footer-newsletter">
|
<h4>Our Newsletter</h4>
|
<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna veniam enim veniam
|
illum dolore legam minim quorum culpa amet magna export quem marada parida nodela caramase
|
seza.</p>
|
<form action="" method="post">
|
<input type="email" name="email"><input type="submit" value="Subscribe">
|
</form>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
<div class="container">
|
<div class="copyright">
|
© Copyright <strong>NewBiz</strong>. All Rights Reserved
|
</div>
|
<div class="credits">
|
|
Designed by <a href="javascript:;" target="_blank" title="模板之家">模板之家</a> - Collect from <a
|
href="javascript:;" title="网页模板" target="_blank">网页模板</a>
|
</div>
|
</div>
|
</footer><!-- End Footer -->
|
|
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
|
|
<!-- Vendor JS Files -->
|
<script src="/public/static/js/jquery.min.js"></script>
|
<script src="/public/static/js/bootstrap.bundle.min.js"></script>
|
<script src="/public/static/js/jquery.easing.min.js"></script>
|
<script src="/public/static/js/validate.js"></script>
|
<script src="/public/static/js/counterup.min.js"></script>
|
<script src="/public/static/js/mobile-nav.js"></script>
|
<script src="/public/static/js/wow.min.js"></script>
|
<script src="/public/static/js/isotope.pkgd.min.js"></script>
|
<script src="/public/static/js/owl.carousel.min.js"></script>
|
<script src="/public/static/js/jquery.waypoints.min.js"></script>
|
<script src="/public/static/js/venobox.min.js"></script>
|
|
<!-- Template Main JS File -->
|
<script src="/public/static/js/main.js"></script>
|
|
</body>
|
|
</html>
|
