add source

add source
This commit is contained in:
a-jie 2018-06-14 21:41:36 +08:00
commit d79a4c25c7
44 changed files with 14956 additions and 0 deletions

21
README.md Normal file
View File

@ -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)

BIN
logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

11
package.json Normal file
View File

@ -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"
}

21
source/.gitignore vendored Executable file
View File

@ -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*

5
source/babel.config.js Executable file
View File

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

13489
source/package-lock.json generated Executable file

File diff suppressed because it is too large Load Diff

46
source/package.json Executable file
View File

@ -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"
]
}

BIN
source/public/banner.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 KiB

93
source/public/data.yaml Normal file
View File

@ -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

BIN
source/public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

22
source/public/index.html Executable file
View File

@ -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>

28
source/src/App.vue Executable file
View File

@ -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>

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 KiB

BIN
source/src/assets/logo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

6
source/src/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

152
source/src/css/fonts.css Normal file
View File

@ -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;
}

692
source/src/css/style.css Normal file
View File

@ -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
**************************************/

12
source/src/main.js Executable file
View File

@ -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')

3
source/vue.config.js Normal file
View File

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