add source

add source

README.md

@@ -0,0 +1,21 @@
+![Clock Shop](logo.jpg)
+
+## Introduction
+On a weekend, I saw a great clock code on the [codepen](https://codepen.io/) website. So I had an idea, why not collect these beautiful clocks and share them with everyone? Good things always have to be enjoyed by more people!
+
+All the code comes from the [codepen](https://codepen.io/) site. They are really great. I want to pay tribute to the original author.
+
+## Content
+Clock Shop include some innovative clock animations, beautifully shaped classic clocks, and electronic clocks that are already full of science and technology. I again declare that all these codes come from the [codepen](https://codepen.io/) website
+
+## How to Contribute
+If you want to share your watch code, you can follow this step
+1. Sign up to the codepen.io website [https://codepen.io/accounts/signup/user/free](https://codepen.io/accounts/signup/user/free)
+2. Write your code at [https://codepen.io/pen/](https://codepen.io/pen/)
+3. modify the data.yaml file to add your demo address, and submit a Pull requests
+
+## Thanks
+The website template comes from [https://bootstrapmade.com/](https://bootstrapmade.com/), thanks to the great contributions of the webmaster
+
+## License
+The MIT License (MIT) 

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "clock-shop",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

source/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

source/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

source/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "clock-shops",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "start": "npm run serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "ppo": "^1.3.5",
+    "vue": "^2.5.16"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
+    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
+    "@vue/cli-service": "^3.0.0-beta.15",
+    "vue-template-compiler": "^2.5.16"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

source/public/data.yaml

@@ -0,0 +1,93 @@
+-
+  - https://codepen.io/msurguy/pen/qIFaw
+  - https://codepen.io/kenjiSpecial/pen/gbrvpK 
+  - https://codepen.io/chrisnager/pen/ceBEj
+  - https://codepen.io/kristofferh/pen/LpNGqE
+  - https://codepen.io/danielgivens/pen/geKrRx
+  - https://codepen.io/ganglio/pen/KBbyj
+  - https://codepen.io/Griggy/pen/yJkQWY
+  - https://codepen.io/dokdeleon/pen/mRMeOJ
+  - https://codepen.io/gbnikolov/pen/LjpQPP
+  - https://codepen.io/Alca/pen/OpKvMz
+  - https://codepen.io/gbnikolov/pen/AXPJWv
+  - https://codepen.io/mikel301292/pen/ggrrxQ
+  - https://codepen.io/gbnikolov/pen/bZmEWo
+  - https://codepen.io/rlemon/pen/vofKF
+  - https://codepen.io/MaxXiong/pen/wxfdg
+  - https://codepen.io/gbnikolov/pen/YNqwpW
+  - https://codepen.io/hankuro/pen/EvdYqx
+  - https://codepen.io/enxaneta/pen/oWobdO
+
+-
+  - https://codepen.io/iliadraznin/pen/JcqbE
+  - https://codepen.io/rassadin/pen/cvJmb
+  - https://codepen.io/ky0suke/pen/MyNXWX
+  - https://codepen.io/maggiben/pen/DpuBl
+  - https://codepen.io/elrumordelaluz/pen/wurfC
+  - https://codepen.io/HughDai/pen/MKKXJp
+  - https://codepen.io/chrisota/pen/LERyjb
+  - https://codepen.io/opheliafl/pen/RaYbvL
+  - https://codepen.io/dnaibaf/pen/rckKg
+  - https://codepen.io/mohebifar/pen/KwdeMz
+  - https://codepen.io/underclouds/pen/yxCnq
+  - https://codepen.io/vaskopetrov/pen/yVEXjz
+  - https://codepen.io/vineethtr/pen/GvROZV
+  - https://codepen.io/Siddharth11/pen/rrrgZN
+  - https://codepen.io/sparcut/pen/QEVkRj
+  - https://codepen.io/igstudio/pen/WjdwrO
+  - https://codepen.io/jaredkhan/pen/Elrsx
+  - https://codepen.io/TyStelmach/pen/ZGqYBp
+  - https://codepen.io/tylerbre/pen/gqdnA
+  - https://codepen.io/jh3y/pen/vKQZpJ
+  - https://codepen.io/hexagoncircle/pen/RLeQZj
+  - https://codepen.io/martingrand/pen/aAldc
+  - https://codepen.io/monkeyraptor/pen/BKegab
+  - https://codepen.io/nDav/pen/zvPJem
+  - https://codepen.io/rodnylobos/pen/KoJxq
+  - https://codepen.io/dtinth/pen/tDihg
+  - https://codepen.io/oknoblich/pen/GBhbD
+  - https://codepen.io/RobVermeer/pen/EyOzva
+  - https://codepen.io/webandapp/pen/OWwZeq
+  - https://codepen.io/soulchainer/pen/YNpJwy
+  - https://codepen.io/kowlor/pen/bdRzML
+  - https://codepen.io/Griggy/pen/yJkQWY
+  - https://codepen.io/lifeng1893/pen/ALPamR
+  - https://codepen.io/backoefer/pen/WxYbXk
+  - https://codepen.io/Griggy/pen/bEawmM
+  - https://codepen.io/kmatylla/pen/mLZdrZ
+  - https://codepen.io/V17h3m/pen/XdYEjR
+  - https://codepen.io/Supercopra/pen/qZvoeB
+  - https://codepen.io/josephshambrook/pen/xmtco
+  - https://codepen.io/gssxgss/pen/avVRGb
+  - https://codepen.io/ivantw08/pen/WOEvOw
+  - https://codepen.io/Wujek_Greg/pen/KRXYpg
+  - https://codepen.io/evgen/pen/GqaYqZ
+  - https://codepen.io/icebob/pen/JYoQZg
+  - https://codepen.io/mikechen2017/pen/ZJxjpX
+  - https://codepen.io/gbnikolov/pen/dorwRY
+  - https://codepen.io/patryk1303/pen/epRNwR
+  - https://codepen.io/micoylagan/pen/aJPrmw
+  - https://codepen.io/rl/pen/gwpjyk
+  - https://codepen.io/arkaik/pen/HCgai
+  - https://codepen.io/ph1p/pen/WOxxZR
+
+- 
+  - https://codepen.io/RazvanDH/pen/ojLWOB
+  - https://codepen.io/museum404/pen/FsGtu
+  - https://codepen.io/swartkrans/pen/gaode
+  - https://codepen.io/maneeshc/pen/jrMpwg
+  - https://codepen.io/bsmith/pen/drElg
+  - https://codepen.io/nathantaylor/pen/eBNepW
+  - https://codepen.io/msurguy/pen/pxIEz
+  - https://codepen.io/eehayman/pen/jVPKpN
+  - https://codepen.io/mattlitzinger/pen/ysowF
+  - https://codepen.io/wilson1315/pen/ikcKl
+  - https://codepen.io/codetrail/pen/jGBKk
+  - https://codepen.io/MoorLex/pen/NAEvNd
+  - https://codepen.io/tdhorwood/pen/gbWdvZ
+  - https://codepen.io/creativeocean/pen/pWXgNG
+  - https://codepen.io/joshuaward/pen/pWXrGM
+  - https://codepen.io/k3no/pen/akEQJB
+  - https://codepen.io/jkantner/pen/KQaZdp
+  - https://codepen.io/nate437/pen/jExdEB
+  - https://codepen.io/xgad/pen/YwgyQj

source/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="a-jie">
+
+  <title>Clockshops</title>
+  <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but clock-shops doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

source/src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <Header/>
+    <Banner/>
+    <Content/>
+    <Footer/>
+  </div>
+</template>
+
+<script>
+import Header from './components/Header.vue'
+import Banner from './components/Banner.vue'
+import Footer from './components/Footer.vue'
+import Content from './components/Content.vue'
+
+export default {
+  name: 'app',
+  components: {
+    Banner,
+    Header,
+    Footer,
+    Content
+  }
+}
+</script>
+
+<style>
+</style>

source/src/assets/data.yaml

@@ -0,0 +1,98 @@
+-
+  - https://codepen.io/msurguy/pen/qIFaw
+  - https://codepen.io/msurguy/pen/tDCvp
+  - https://codepen.io/chrisnager/pen/ceBEj
+  - https://codepen.io/kristofferh/pen/LpNGqE
+  - https://codepen.io/danielgivens/pen/geKrRx
+  - https://codepen.io/ganglio/pen/KBbyj
+  - https://codepen.io/Griggy/pen/yJkQWY
+  - https://codepen.io/dokdeleon/pen/mRMeOJ
+  - https://codepen.io/ph1p/pen/WOxxZR
+  - https://codepen.io/gbnikolov/pen/LjpQPP
+  - https://codepen.io/Alca/pen/OpKvMz
+  - https://codepen.io/gbnikolov/pen/AXPJWv
+  - https://codepen.io/mikel301292/pen/ggrrxQ
+  - https://codepen.io/gbnikolov/pen/bZmEWo
+  - https://codepen.io/rlemon/pen/vofKF
+  - https://codepen.io/MaxXiong/pen/wxfdg
+  - https://codepen.io/gbnikolov/pen/YNqwpW
+  - https://codepen.io/hankuro/pen/EvdYqx
+
+-
+  - https://codepen.io/iliadraznin/pen/JcqbE
+  - https://codepen.io/rassadin/pen/cvJmb
+  - https://codepen.io/ky0suke/pen/MyNXWX
+  - https://codepen.io/maggiben/pen/DpuBl
+  - https://codepen.io/elrumordelaluz/pen/wurfC
+  - https://codepen.io/HughDai/pen/MKKXJp
+  - https://codepen.io/chrisota/pen/LERyjb
+  - https://codepen.io/opheliafl/pen/RaYbvL
+  - https://codepen.io/dnaibaf/pen/rckKg
+  - https://codepen.io/mohebifar/pen/KwdeMz
+  - https://codepen.io/underclouds/pen/yxCnq
+  - https://codepen.io/vaskopetrov/pen/yVEXjz
+  - https://codepen.io/vineethtr/pen/GvROZV
+  - https://codepen.io/Siddharth11/pen/rrrgZN
+  - https://codepen.io/sparcut/pen/QEVkRj
+  - https://codepen.io/igstudio/pen/WjdwrO
+  - https://codepen.io/jaredkhan/pen/Elrsx
+  - https://codepen.io/TyStelmach/pen/ZGqYBp
+  - https://codepen.io/tylerbre/pen/gqdnA
+  - https://codepen.io/jh3y/pen/vKQZpJ
+  - https://codepen.io/hexagoncircle/pen/RLeQZj
+  - https://codepen.io/martingrand/pen/aAldc
+  - https://codepen.io/monkeyraptor/pen/BKegab
+  - https://codepen.io/nDav/pen/zvPJem
+  - https://codepen.io/rodnylobos/pen/KoJxq
+  - https://codepen.io/dtinth/pen/tDihg
+  - https://codepen.io/oknoblich/pen/GBhbD
+  - https://codepen.io/RobVermeer/pen/EyOzva
+  - https://codepen.io/webandapp/pen/OWwZeq
+  - https://codepen.io/soulchainer/pen/YNpJwy
+  - https://codepen.io/kowlor/pen/bdRzML
+  - https://codepen.io/Griggy/pen/yJkQWY
+  - https://codepen.io/lifeng1893/pen/ALPamR
+  - https://codepen.io/backoefer/pen/WxYbXk
+  - https://codepen.io/Griggy/pen/bEawmM
+  - https://codepen.io/kmatylla/pen/mLZdrZ
+  - https://codepen.io/V17h3m/pen/XdYEjR
+  - https://codepen.io/Supercopra/pen/qZvoeB
+  - https://codepen.io/josephshambrook/pen/xmtco
+  - https://codepen.io/gssxgss/pen/avVRGb
+  - https://codepen.io/ivantw08/pen/WOEvOw
+  - https://codepen.io/Wujek_Greg/pen/KRXYpg
+  - https://codepen.io/evgen/pen/GqaYqZ
+  - https://codepen.io/icebob/pen/JYoQZg
+  - https://codepen.io/mikechen2017/pen/ZJxjpX
+  - https://codepen.io/gbnikolov/pen/dorwRY
+  - https://codepen.io/patryk1303/pen/epRNwR
+  - https://codepen.io/micoylagan/pen/aJPrmw
+  - https://codepen.io/rl/pen/gwpjyk
+  - https://codepen.io/arkaik/pen/HCgai
+
+- 
+  - https://codepen.io/RazvanDH/pen/ojLWOB
+  - https://codepen.io/museum404/pen/FsGtu
+  - https://codepen.io/swartkrans/pen/gaode
+  - https://codepen.io/maneeshc/pen/jrMpwg
+  - https://codepen.io/bsmith/pen/drElg
+  - https://codepen.io/nathantaylor/pen/eBNepW
+  - https://codepen.io/msurguy/pen/pxIEz
+  - https://codepen.io/eehayman/pen/jVPKpN
+  - https://codepen.io/mattlitzinger/pen/ysowF
+  - https://codepen.io/wilson1315/pen/ikcKl
+  - https://codepen.io/codetrail/pen/jGBKk
+  - https://codepen.io/MoorLex/pen/NAEvNd
+  - https://codepen.io/tdhorwood/pen/gbWdvZ
+  - https://codepen.io/creativeocean/pen/pWXgNG
+  - https://codepen.io/joshuaward/pen/pWXrGM
+  - https://codepen.io/k3no/pen/akEQJB
+  - https://codepen.io/jkantner/pen/KQaZdp
+  - https://codepen.io/nate437/pen/jExdEB
+  - https://codepen.io/xgad/pen/YwgyQj
+  - https://codepen.io/enxaneta/pen/oWobdO
+
+- 
+  - https://codepen.io/Yuschick/pen/ZYLdmQ
+  - https://codepen.io/hugo/pen/xIbnz
+  - https://codepen.io/MarcMalignan/pen/kfxnB

source/src/components/Banner.vue

@@ -0,0 +1,27 @@
+<template>
+<div id="banner" class="section-padding">
+    <div class="container">
+      <div class="row">
+        <div class="jumbotron">
+          <h1 class="small">Welcome To <span class="bold">Clock Shop</span></h1>
+          <p class="big">There are a variety of beautiful and unusual clock codes.</p>
+          <a href="#" class="btn btn-banner">Star Me<i class="fa fa-send"></i></a>
+        </div>
+      </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'Banner',
+    props: {
+        
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

source/src/components/Btn.vue

@@ -0,0 +1,47 @@
+<template>
+<li class="nbtn"
+    @click="click()"
+    v-bind:class="{ 'btn-active' : isActive}"
+>
+    <slot></slot>
+    </li>
+</template>
+
+<script>
+import ppo from 'ppo';
+import Vue from 'vue';
+const bus = new Vue();
+
+export default {
+    name: 'Btn',
+    props: ['active'],
+    created: function () {
+        bus.$on('BTN_CLICK', id => {
+            if (id !== this.id) {
+                this.isActive = false;
+            }
+        });
+
+        if(this.active){
+            this.isActive = true;
+        }
+    },
+    data() {
+        return {
+            id: ppo.uuid(),
+            isActive: false
+        }
+    },
+    methods: {
+        click() {
+            this.isActive = true;
+            bus.$emit('BTN_CLICK', this.id);
+        }
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

source/src/components/Content.vue

@@ -0,0 +1,109 @@
+<template>
+<div id="portfolio">
+    <div class="container">
+        <div class="page-title text-center">
+            <h1>Clock Exhibition Counter</h1>
+            <p>All the code comes from the codepen site. They are really great. 
+                <br>I want to pay tribute to the original author. </p>
+            <hr class="pg-titl-bdr-btm" />
+        </div>
+        <div class="row">
+            <div class="col-lg-12">
+                <ul id="portfolio-flters">
+                    <Btn @click.native="tabClick(0)" active=true>Creative Clock</Btn>
+                    <Btn @click.native="tabClick(1)">Beautiful Clock</Btn>
+                    <Btn @click.native="tabClick(2)">Electronic Clock</Btn>
+                </ul>
+            </div>
+        </div>
+
+        <div class="row" id="portfolio-wrapper">
+            <div class="col-lg-4 col-md-6 portfolio-item filter-app" :key="item" v-for="item in items">
+                <iframe height='265' scrolling='no' :src="getHash(item)" frameborder='no' allowtransparency='true' allowfullscreen='true'
+                    style='width: 100%;'></iframe>
+            </div>
+        </div>
+    </div>
+
+    <footer class="container">
+        <div class="float-left nbtn" @click="prevPage()" v-bind:class="{ 'nbtn-disabled':!isEnabled('prev') }">
+            Prev Page
+        </div>
+        
+        <div class="float-right nbtn" @click="nextPage()" v-bind:class="{ 'nbtn-disabled':!isEnabled('next') }">
+            Next Page
+        </div>
+    </footer>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import yaml from 'js-yaml';
+import Btn from './Btn.vue'
+
+const PAGES = 9;
+
+export default {
+    name: 'Content',
+    components: {
+        Btn
+    },
+    data: function () {
+        return {
+            currentTab: 0,
+            pageNum: 0,
+            data: [],
+            get items() {
+                const frist = this.pageNum * PAGES;
+                const num = frist + PAGES;
+
+                return this.allItems ? this.allItems.slice(frist, num) : null;
+            },
+            get allItems() {
+                return this.data[this.currentTab]||[]
+            }
+        }
+    },
+    created: function () {
+        this.loadData();
+    },
+    methods: {
+        loadData() {
+            axios.get("./data.yaml").then(res => {
+                const doc = yaml.safeLoad(res['data'] || res['_body']);
+                doc.forEach(arr => {
+                    arr.forEach((val, index, orArr) => orArr[index] = val.replace('https://codepen.io/', '').replace(/^.{1,30}\/pen\//ig, ''));
+                    arr.sort(() => 0.5 - Math.random());
+                });
+
+                this.data = doc;
+            });
+        },
+        tabClick(index) {
+            this.pageNum = 0;
+            this.currentTab = parseInt(index);
+        },
+        getHash(item) {
+            return `//codepen.io/scorch/embed/${item}/?rerun-position=hidden&class=scale&height=265&theme-id=dark&default-tab=result&embed-version=2`;
+        },
+        isEnabled(type){
+            if(type === 'prev') {
+                if (this.pageNum <= 0) return false;
+                return true;
+            } else {
+                if ((this.pageNum + 1) * PAGES >= this.allItems.length) return;
+                return true;
+            }
+        },
+        prevPage() {
+            if (this.pageNum <= 0) return;
+            this.pageNum--;
+        },
+        nextPage() {
+            if ((this.pageNum + 1) * PAGES >= this.allItems.length) return;
+            this.pageNum++;
+        }
+    }
+}
+</script>

source/src/components/Footer.vue

@@ -0,0 +1,27 @@
+<template>
+<div class="footer-bottom">
+    <div class="container">
+      <div style="visibility: visible; animation-name: zoomIn;" class="col-md-12 text-center wow zoomIn">
+        <div class="footer_copyright">
+          <p> © Copyright, a-jie All Rights Reserved.</p>
+          <div class="credits">
+            WebSite designed by <a href="https://bootstrapmade.com/">BootstrapMade.com</a>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'Footer',
+    props: { 
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

source/src/components/Header.vue

@@ -0,0 +1,47 @@
+<template>
+<div class="main-navigation navbar-fixed-top">
+    <nav class="navbar navbar-default">
+        <div class="container">
+            <div class="navbar-header">
+                <button
+                    type="button"
+                    class="navbar-toggle"
+                    data-toggle="collapse"
+                    data-target="#myNavbar"
+                >
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    </button>
+                    <a
+                        class="navbar-brand"
+                        href="index.html"
+                    >Clock Shop</a>
+            </div>
+            <div
+                class="collapse navbar-collapse"
+                id="myNavbar"
+            >
+                <ul class="nav navbar-nav navbar-right">
+                    <li><a href="#portfolio">Visit</a></li>
+                    <li><a href="#contact">Star Me</a></li>
+                </ul>
+        </div>
+</div>
+</nav>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'Header',
+    props: {
+
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

source/src/css/fonts.css

@@ -0,0 +1,152 @@
+/* latin */
+@font-face {
+    font-family: 'Josefin Slab';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Josefin Slab Italic'), local('JosefinSlab-Italic'), url(/font/lW-nwjwOK3Ps5GSJlNNkMalnrz6tDs_KPAMW.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Josefin Slab';
+    font-style: italic;
+    font-weight: 600;
+    src: local('Josefin Slab SemiBold Italic'), local('JosefinSlab-SemiBoldItalic'), url(/font/lW-kwjwOK3Ps5GSJlNNkMalnrzZyKtrnHg487Znv.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Josefin Slab';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Josefin Slab Regular'), local('JosefinSlab-Regular'), url(/font/lW-5wjwOK3Ps5GSJlNNkMalnqg6vBMjoPg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Josefin Slab';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Josefin Slab SemiBold'), local('JosefinSlab-SemiBold'), url(/font/lW-mwjwOK3Ps5GSJlNNkMalvdSq6KerlFAke7w.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Josefin Slab';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Josefin Slab Bold'), local('JosefinSlab-Bold'), url(/font/lW-mwjwOK3Ps5GSJlNNkMalvESu6KerlFAke7w.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(/font/mem5YaGs126MiZpBA-UN_r8OX-hpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(/font/mem5YaGs126MiZpBA-UN_r8OVuhpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(/font/mem5YaGs126MiZpBA-UN_r8OXuhpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(/font/mem5YaGs126MiZpBA-UN_r8OUehpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(/font/mem5YaGs126MiZpBA-UN_r8OXehpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(/font/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Open Sans Light'), local('OpenSans-Light'), url(/font/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/font/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/font/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/font/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/font/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/font/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/font/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/font/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }

source/src/css/style.css

@@ -0,0 +1,692 @@
+/*
+    Theme Name: Tempo
+    Theme URL: https://bootstrapmade.com/tempo-free-onepage-bootstrap-theme/
+    Author: BootstrapMade.com
+    Author URL: https://bootstrapmade.com
+*/
+
+/**************************************
+link & button
+**************************************/
+.white
+{
+	color:#fff !important;
+}
+h1.cta-title
+{
+	font-size: 43px;
+}
+h1
+{
+	font-size: 36px;
+}
+/**************************************
+Header
+**************************************/
+.section-padding
+{
+	padding: 40px 0px;
+}
+.main-navigation
+{
+    border-bottom: 1px solid #eee;
+}
+.navbar-default {
+    background-color: #fff;
+    border-color: rgba(231, 231, 231, 0.33);
+    padding: 20px 0px;
+}
+
+.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
+    color: #354242;
+    background-color: #fff;
+}
+.navbar-nav {
+    padding-top: 5px;
+}
+
+.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
+{
+	border-bottom: 2px solid #E74C3C;
+    outline: none;
+}
+.navbar {
+	min-height: inherit;
+	margin-bottom: 0px;
+}
+.navbar-brand {
+	height: inherit;
+	font-family: 'Josefin Slab', serif;
+	font-weight: 700;
+	text-transform: uppercase;
+	padding: 5px;
+    font-size: 42px;
+    margin-top: 5px;
+}
+
+.navbar-default .navbar-brand {
+    color: #ffb200;
+}
+
+.navbar-default .navbar-nav > li > a {
+	color: #354242;
+	font-weight: 500;
+	text-transform: uppercase;
+	margin: 0px 10px;
+	padding-bottom: 5px;
+	font-size: 14px;
+}
+.nav > li > a
+{
+	padding: 0px;
+}
+.jumbotron
+{
+    background-color: transparent;
+    padding-top: 90px;
+}
+.jumbotron p.big
+{
+    line-height: 21px;
+    border-width: 0px;
+    margin: 0px;
+    padding: 0px;
+    letter-spacing: 6px;
+    font-size: 15px;
+    color: #fff;
+    text-transform: uppercase;
+    font-weight: 400;
+    color: #ffffff;
+    -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    -moz-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    -ms-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    padding-top: 10px;
+}
+a.btn-banner {
+    border: 1px solid #cdcdcd;
+    padding: 18px 32px;
+    line-height: 0px;
+    border-radius: 3px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 11px;
+    text-transform: uppercase;
+    color: #ffffff;
+    letter-spacing: 1px;
+    display: inline-block;
+    margin-top: 95px;
+}
+a.btn-banner i
+{
+    padding-left: 10px;
+}
+a.btn-banner:hover, a.btn-banner:focus
+{
+    background-color: #ffb200;
+    color: #fff;
+    border-color: #E74C3C;
+    display: inline-block;
+}
+.bold
+{
+    font-weight: bold;
+}
+.bor-btm
+{
+    width: 100px;
+    height: 1px;
+    background-color: #ddd;
+    margin-bottom: 85px;
+}
+.jumbotron h1.small
+{
+    line-height: 88px;
+    border-width: 0px;
+    margin: 0px;
+    padding: 0px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 62px;
+    letter-spacing: 6px;
+    text-transform: uppercase;
+    font-weight: 400;
+    color: #ffffff;
+    -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    -moz-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    -ms-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
+}
+.container .jumbotron, .container-fluid .jumbotron {
+    padding-right: 60px;
+    padding-left: 0px;
+}
+.bgblue-dark
+{
+    background-color: #2C3E50;
+}
+.bgblue-light
+{
+    background-color: #3498DB;
+}
+.bgred
+{
+    background-color: #E74C3C;
+}
+.wrk-title
+{
+    cursor: pointer;
+}
+.cta-1, .cta2
+{
+	background-color: #ffb200;
+	padding: 40px 0px;
+}
+p.cta-sub-title
+{
+	font-size: 28px;
+}
+.pg-titl-bdr-btm
+{
+	width: 100px;
+	height: 3px;
+	background-color: #ffb200;
+}
+.service-box {
+    margin: 0 0 60px;
+    display: inline-block;
+}
+.service-box .service-icon {
+    width: 75px;
+    height: 75px;
+    border-radius: 50px;
+    overflow: hidden;
+    border: 1px solid #e9e9e9;
+    line-height: 75px;
+    text-align: center;
+    color: #ffb200;
+    font-size: 30px;
+    margin-right: 23px;
+    float: left;
+    -webkit-transition: all 0.5s ease 0s;
+    -moz-transition: all 0.5s ease 0s;
+    -ms-transition: all 0.5s ease 0s;
+    transition: all 0.5s ease 0s;
+}
+.service-box .service-text {
+    width: 70%;
+    float: left;
+    margin-bottom: 20px;
+}
+.service-box .service-text h3 {
+    margin: 0 0 20px 0;
+    padding: 0 0 0 0;
+    font-size: 18px;
+    line-height: 24px;
+    color: #333333;
+    font-weight: 400;
+    -webkit-transition: all 0.5s ease 0s;
+    -moz-transition: all 0.5s ease 0s;
+    -ms-transition: all 0.5s ease 0s;
+    transition: all 0.5s ease 0s;
+}
+.page-title
+{
+	margin-bottom: 40px;
+}
+
+
+
+.fil-btn .active
+{
+	background-color: #ffb200;
+}
+.img-sec, .fig-caption
+{
+	width: 50%;
+	float: left;
+}
+.team-info
+{
+	border: 1px solid rgba(204, 204, 204, 0.33);
+	float: left;
+	width: 100%;
+	border-radius: 3px;
+}
+.fig-caption
+{
+	padding: 56px 20px 0px;
+}
+.fig-caption h3
+{
+	font-size: 20px;
+	font-family: 'Josefin Slab', serif;
+}
+.fig-caption p
+{
+	font-size: 14px;
+}
+.team-social li
+{
+	display: inline-block;
+}
+.team-social li
+{
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	text-align: center;
+}
+.team-social li a
+{
+	color: #fff;
+}
+.blue-light{
+	background-color: #3498DB;
+}
+.blue-dark
+{
+	background-color: #2C3E50;
+}
+.red
+{
+	background-color: #E74C3C;
+}
+.marb-20
+{
+	margin-bottom: 20px;
+}
+.wd75
+{
+	width: 75%;
+	float: left;
+}
+.cta2 a
+{
+margin-top: 5px;
+}
+.fnt-24
+{
+	font-size: 24px;
+}
+
+/* Portfolio */
+#portfolio {
+  background: #fff;
+  padding: 40px 0;
+}
+
+#portfolio #portfolio-wrapper {
+  padding-right: 15px;
+}
+
+#portfolio #portfolio-flters {
+  padding: 0;
+  margin: 0 0 45px 0;
+  list-style: none;
+  text-align: center;
+}
+
+
+.btn-active{
+  background: #ffb200 !important;
+  color: #fff!important;
+}
+
+.nbtn{
+  cursor: pointer;
+  margin: 0 10px;
+  display: inline-block;
+  padding: 10px 62px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #333;
+  border-radius: 4px;
+  text-transform: uppercase;
+  background: #ccc;
+  margin-bottom: 5px;
+  transition: all 0.3s ease-in-out;
+}
+
+.nbtn:hover{
+    background: #ffb200;
+    color: #fff;
+}
+
+.nbtn-disabled{
+    opacity: 0.2 ;
+    pointer-events: none;
+}
+
+.float-left{
+    float: left;
+}
+
+.float-right{
+    float: right;
+}
+
+#portfolio .portfolio-item {
+  position: relative;
+  
+  overflow: hidden !important;
+  margin-bottom: 15px;
+  transition: all 350ms ease;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+#portfolio .portfolio-item a {
+  display: block;
+  margin-right: 15px;
+}
+
+#portfolio .portfolio-item img {
+  position: relative;
+  top: 0;
+  transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+#portfolio .portfolio-item .details {
+  height: 50px;
+  background: #ffb200;
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  bottom: -50px;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+#portfolio .portfolio-item .details h4 {
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+  padding: 8px 0 2px 8px;
+  margin: 0;
+}
+
+#portfolio .portfolio-item .details span {
+  display: block;
+  color: #fff;
+  font-size: 13px;
+  padding-left: 8px;
+}
+
+#portfolio .portfolio-item:hover .details {
+  bottom: 0;
+}
+
+#portfolio .portfolio-item:hover img {
+  top: -30px;
+}
+
+/* Contact Form */
+.text-field-box {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 40px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    color: #666;
+    font-size: 14px;
+    padding: 0 35px;
+    margin-bottom: 30px;
+    width: 100%;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+}
+.form-sec textarea {
+    height: 220px;
+}
+
+.validation {
+    color: red;
+    display:none;
+    margin: 0 0 20px;
+    font-weight:400;
+    font-size:13px;
+}
+
+#sendmessage {
+    color: green;
+    border:1px solid green;
+    display:none;
+    text-align:center;
+    padding:15px;
+    font-weight:600;
+    margin-bottom:15px;
+}
+
+#errormessage {
+    color: red;
+    display:none;
+    border:1px solid red;
+    text-align:center;
+    padding:15px;
+    font-weight:600;
+    margin-bottom:15px;
+}
+
+#sendmessage.show, #errormessage.show, .show {
+	display:block;
+}
+
+.button-medium {
+    background: #ffb200;
+    border-radius: 40px;
+    color: #ffffff;
+    cursor: pointer;
+    display: block;
+    font-family: "Montserrat", sans-serif;
+    font-size: 18px;
+    font-weight: 400;
+    height: 48px;
+    line-height: 48px;
+    margin: 0 auto;
+    overflow: hidden;
+    text-align: center;
+    width: 200px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: 1px solid #ffb200;
+    box-shadow: none;
+    outline: none;
+    -webkit-transition: all 0.5s ease 0s;
+    -moz-transition: all 0.5s ease 0s;
+    -ms-transition: all 0.5s ease 0s;
+    transition: all 0.5s ease 0s;
+}
+.footer {
+    background-color: #040E18;
+}
+.footer h3 {
+    color: #fff;
+    padding-bottom: 30px;
+}
+.footer_social ul {
+    list-style: outside none none;
+    margin: 0;
+    padding: 0;
+}
+.footer_social ul li {
+    margin: 2px;
+    display: inline-block;
+}
+.footer_social ul li a {
+    background: #2e3537 none repeat scroll 0 0;
+    border: 1px solid #2e3537;
+    box-shadow: 0 0 0 7px transparent;
+    color: #aaa;
+    display: block;
+    font-size: 14px;
+    height: 40px;
+    line-height: 21px;
+    padding: 9px 13px;
+    -webkit-transition: all 0.4s ease 0s;
+    transition: all 0.4s ease 0s;
+    width: 40px;
+}
+.footer-bottom {
+    background: #09121B;
+    padding: 20px 0;
+}
+.footer_copyright {
+    color: #eee;
+    font-size: 14px;
+    margin-bottom: 0;
+}
+.footer_copyright a {
+    color: #666;
+}
+.footer_copyright .credits{
+    font-size: 12px;
+    color: #aaa;
+}
+#banner
+{
+    background: url('/banner.jpg') no-repeat;
+    background-size: cover;
+    background-position: center center;
+    min-height: 500px;
+}
+.cta2 .btn-default,.cta2 .btn-default:hover,.cta2 .btn-default:focus
+{
+    padding: 10px 25px;
+    background-color: #fff;
+    border: 0px;
+}
+/**************************************
+cta
+**************************************/
+/** media queries**/
+@media (min-width: 480px) and (max-width: 1023px) {
+    .img-sec, .fig-caption {
+    width: 100%;
+    float: left;
+}
+.fig-caption {
+    padding: 56px 20px 20px;
+}
+}
+@media (min-width: 451px) and (max-width: 768px) {
+.filter {
+    padding: 5px 18px;
+    margin-bottom: 3px;
+}
+.wd75
+{
+    width: 100%;
+}
+.fig-caption {
+    padding: 56px 20px 20px;
+}
+}
+@media (min-width: 301px) and (max-width: 450px) {
+.filter {
+    padding: 3px 14px;
+    margin-bottom: 3px;
+}
+.jumbotron
+{
+    padding-right: 30px;
+    padding-left: 30px;
+}
+.fig-caption {
+    padding: 13px 20px 0px;
+}
+.team-social li {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+}
+.fig-caption h3 {
+    font-size: 19px;
+    font-family: 'Josefin Slab', serif;
+}
+.wd75
+{
+    width: 100%;
+}
+.service-box .service-text h3
+{
+    padding-top: 15px;
+}
+.jumbotron h1.small {
+    font-size: 44px;
+}
+h1.cta-title {
+    font-size: 30px;
+}
+p.cta-sub-title {
+    font-size: 20px;
+}
+.button-medium {
+    font-size: 15px;
+    height: 40px;
+    line-height: 40px;
+    width: 150px;
+}
+.jumbotron
+{
+    padding: 90px 0px 0px 20px !important;
+}
+}
+.footer_copyright a
+{
+    text-decoration: none;
+}
+@media (min-width: 100px) and (max-width: 300px) {
+.filter {
+    padding: 3px 14px;
+    margin-bottom: 3px;
+}
+.img-sec, .fig-caption {
+    width: 100%;
+    float: left;
+}
+.fig-caption {
+    padding: 56px 20px 20px;
+}
+.jumbotron h1.small {
+    font-size: 44px;
+}
+h1.cta-title {
+    font-size: 30px;
+}
+p.cta-sub-title {
+    font-size: 20px;
+}
+.button-medium {
+    font-size: 15px;
+    height: 40px;
+    line-height: 40px;
+    width: 150px;
+}
+.jumbotron
+{
+    padding: 90px 0px 0px 20px !important;
+}
+.service-box .service-text h3 {
+    padding-top: 15px;
+}
+.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a{
+    text-align: center;
+}
+}
+@media (min-width: 300px) and (max-width: 768px) {
+.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > li > a{
+    text-align: center;
+    border: 0px;
+}
+.navbar-default .navbar-nav > li > a:hover
+{
+    border: 0px;
+}
+}
+/**************************************
+form element
+**************************************/

source/src/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+import './css/bootstrap.min.css'
+import './css/fonts.css'
+import './css/style.css'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

source/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    
+}