mirror of
https://github.com/caojiezi2003/clock-shop.git
synced 2024-11-10 05:29:46 +00:00
add source
add source
This commit is contained in:
commit
d79a4c25c7
21
README.md
Normal file
21
README.md
Normal 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)
|
11
package.json
Normal file
11
package.json
Normal 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
21
source/.gitignore
vendored
Executable 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
5
source/babel.config.js
Executable file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
13489
source/package-lock.json
generated
Executable file
13489
source/package-lock.json
generated
Executable file
File diff suppressed because it is too large
Load Diff
46
source/package.json
Executable file
46
source/package.json
Executable 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
BIN
source/public/banner.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 500 KiB |
93
source/public/data.yaml
Normal file
93
source/public/data.yaml
Normal 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
BIN
source/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
BIN
source/public/font/1Ptrg8zYS_SKggPNwIYqWqhPANqczVsq4A.woff2
Normal file
BIN
source/public/font/1Ptrg8zYS_SKggPNwIYqWqhPANqczVsq4A.woff2
Normal file
Binary file not shown.
BIN
source/public/font/lW-5wjwOK3Ps5GSJlNNkMalnqg6vBMjoPg.woff2
Normal file
BIN
source/public/font/lW-5wjwOK3Ps5GSJlNNkMalnqg6vBMjoPg.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
source/public/font/lW-mwjwOK3Ps5GSJlNNkMalvESu6KerlFAke7w.woff2
Normal file
BIN
source/public/font/lW-mwjwOK3Ps5GSJlNNkMalvESu6KerlFAke7w.woff2
Normal file
Binary file not shown.
BIN
source/public/font/lW-mwjwOK3Ps5GSJlNNkMalvdSq6KerlFAke7w.woff2
Normal file
BIN
source/public/font/lW-mwjwOK3Ps5GSJlNNkMalvdSq6KerlFAke7w.woff2
Normal file
Binary file not shown.
BIN
source/public/font/lW-nwjwOK3Ps5GSJlNNkMalnrz6tDs_KPAMW.woff2
Normal file
BIN
source/public/font/lW-nwjwOK3Ps5GSJlNNkMalnrz6tDs_KPAMW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OUehpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OUehpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OVuhpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OVuhpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OX-hpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OX-hpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OXehpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UN_r8OXehpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2
Normal file
Binary file not shown.
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2
Normal file
BIN
source/public/font/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2
Normal file
Binary file not shown.
22
source/public/index.html
Executable file
22
source/public/index.html
Executable 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
28
source/src/App.vue
Executable 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>
|
98
source/src/assets/data.yaml
Normal file
98
source/src/assets/data.yaml
Normal 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
|
BIN
source/src/assets/image/banner.jpg
Normal file
BIN
source/src/assets/image/banner.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 500 KiB |
BIN
source/src/assets/logo.png
Executable file
BIN
source/src/assets/logo.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 6.7 KiB |
27
source/src/components/Banner.vue
Normal file
27
source/src/components/Banner.vue
Normal 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>
|
47
source/src/components/Btn.vue
Normal file
47
source/src/components/Btn.vue
Normal 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>
|
109
source/src/components/Content.vue
Normal file
109
source/src/components/Content.vue
Normal 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>
|
27
source/src/components/Footer.vue
Normal file
27
source/src/components/Footer.vue
Normal 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>
|
47
source/src/components/Header.vue
Normal file
47
source/src/components/Header.vue
Normal 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
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
152
source/src/css/fonts.css
Normal 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
692
source/src/css/style.css
Normal 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
12
source/src/main.js
Executable 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
3
source/vue.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user