fix /sigh
3
.dockerignore
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
node_modules/
|
||||||
|
.idea/
|
||||||
|
.env
|
2
.env.prod
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
VITE_API_URL=https://api.bacfrederick.com
|
||||||
|
VITE_BUILD=1.0.0
|
25
.gitignore
vendored
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
.env
|
8
Dockerfile
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
FROM node:19.6.0 as build
|
||||||
|
|
||||||
|
ADD . .
|
||||||
|
RUN rm .env.local && cp .env.prod .env && npm i && npm run build
|
||||||
|
|
||||||
|
FROM caddy
|
||||||
|
|
||||||
|
COPY --from=build /dist /usr/share/caddy/
|
18
README.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Type Support For `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||||
|
|
||||||
|
1. Disable the built-in TypeScript Extension
|
||||||
|
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||||
|
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||||
|
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
40
index.html
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Beech Aero Club of Frederick</title>
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/site.webmanifest">
|
||||||
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
||||||
|
<meta name="msapplication-TileColor" content="#603cba">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
<meta name="description" content="Affordable Flying for Beechcraft Enthusiasts"/>
|
||||||
|
<meta name="keywords"
|
||||||
|
content="frederick, flying club, beechcraft, debonair, bonanaza, cheep flying, aircraft purchase">
|
||||||
|
<script
|
||||||
|
src="https://code.jquery.com/jquery-2.2.4.min.js"
|
||||||
|
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body data-spy="scroll" data-target="#navbarsspy" data-offset="57">
|
||||||
|
|
||||||
|
<div id="preloader">
|
||||||
|
<div id="preloader-inner"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-wrapper" style="height: 100%; display: none;">
|
||||||
|
<div id="app"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#" class="back-to-top hidden-xs-down" id="back-to-top">
|
||||||
|
<i style="margin-left: 20px;" class="fas fa-angle-up"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
<script src="/plugins/plugins.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
1264
package-lock.json
generated
Normal file
27
package.json
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"animate.css": "^3.7.0",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"bootstrap": "^4.0.0",
|
||||||
|
"bootstrap-notify": "^3.1.3",
|
||||||
|
"jquery": "^3.3.1",
|
||||||
|
"vue": "^3.3.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/jquery": "^3.5.25",
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"sass": "^1.69.5",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.4.5",
|
||||||
|
"vue-tsc": "^1.8.5"
|
||||||
|
}
|
||||||
|
}
|
BIN
public/apple-touch-icon.png
Executable file
After Width: | Height: | Size: 18 KiB |
BIN
public/favicon-16x16.png
Executable file
After Width: | Height: | Size: 1.4 KiB |
BIN
public/favicon-32x32.png
Executable file
After Width: | Height: | Size: 2.5 KiB |
BIN
public/favicon.ico
Executable file
After Width: | Height: | Size: 15 KiB |
BIN
public/images/favicon.png
Executable file
After Width: | Height: | Size: 21 KiB |
BIN
public/images/logo.png
Executable file
After Width: | Height: | Size: 29 KiB |
BIN
public/images/logo_app.png
Executable file
After Width: | Height: | Size: 100 KiB |
BIN
public/images/logo_white.png
Executable file
After Width: | Height: | Size: 40 KiB |
350
public/plugins/plugins.js
Executable file
BIN
public/video/27128760_492610754487667_4824731412490851473_n.mp4
Executable file
BIN
public/video/27128760_492610754487667_4824731412490851473_n.png
Executable file
After Width: | Height: | Size: 522 KiB |
BIN
public/video/27128760_492610754487667_4824731412490851473_n.webm
Executable file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
After Width: | Height: | Size: 1.5 KiB |
28
src/App.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<Video/>
|
||||||
|
<Navbar/>
|
||||||
|
<About/>
|
||||||
|
<Airplane/>
|
||||||
|
<Membership/>
|
||||||
|
<Footer />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
import Navbar from "./components/Navbar.vue";
|
||||||
|
import Video from "./components/Video.vue";
|
||||||
|
import About from "./components/About.vue";
|
||||||
|
import Airplane from "./components/Airplane.vue";
|
||||||
|
import Membership from "./components/Membership.vue";
|
||||||
|
import Footer from "./components/Footer.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {Footer, Membership, Airplane, About, Video, Navbar},
|
||||||
|
mounted() {
|
||||||
|
setTimeout(() => {
|
||||||
|
window.$('#preloader').hide()
|
||||||
|
window.$('.page-wrapper').show()
|
||||||
|
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
After Width: | Height: | Size: 496 B |
81
src/components/About.vue
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<section id="about" class="pt90 pb50 m-5">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 mb40">
|
||||||
|
<div class="section-title title-left mb40 text-left">
|
||||||
|
<span class="section-subTitle">who we are</span>
|
||||||
|
<p class='lead'>A high performance, low cost, flying flub for the Beechcraft Bonanza and its
|
||||||
|
variants, located at Frederick Municipal Airport in Frederick, Maryland. The club is
|
||||||
|
formed
|
||||||
|
to provide its members with cost effective access and ownership to aircraft they want to
|
||||||
|
fly.
|
||||||
|
</p>
|
||||||
|
<p v-if="!membershipsAvailable">
|
||||||
|
Beech Aero Club of Frederick membership has no open positions at this time, but we are
|
||||||
|
accepting
|
||||||
|
potential member applications for the waitlist.
|
||||||
|
</p>
|
||||||
|
<p v-else>
|
||||||
|
Beech Aero Club of Frederick <b>has</b> membership positions at this time! Please
|
||||||
|
contact us for more information!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
As a club member you will fly a complex high-performance Beechcraft Debonair. The
|
||||||
|
purpose of
|
||||||
|
the club is to provide aircraft for local and cross-country travel by its members, as
|
||||||
|
well
|
||||||
|
as create an environment where a group of like-minded individuals can socialize and
|
||||||
|
share
|
||||||
|
their passion for flying.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If you are interested in becoming a member of our club, or a member in a similar club in
|
||||||
|
another area, please send a message with your interest for more information.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 mb40">
|
||||||
|
<ContactUs />
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-md-4 mb40'>
|
||||||
|
<img src='https://i.siteworxpro.com/MgGDS08hwJxBR783-LU33bpCIn_-AGQgdhjYKQP19b8/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL0dYc1ZZLnBuZw' alt=''
|
||||||
|
class='img-fluid center-img shadow-card mb30'>
|
||||||
|
<h5 class='text-uppercase'>LED Lighting</h5>
|
||||||
|
<p>
|
||||||
|
All aircraft lighting has been upgraded with LED lighting, including the landing light,
|
||||||
|
beacon, navigation and strobe lights.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class='col-md-4 mb40'>
|
||||||
|
<img src='https://i.siteworxpro.com/9EUkRWShsUQ4lEc-jAbWY_AQGRPyjvRbh-1aao8J9Jk/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tLzBhQkJzLmpwZw' alt=''
|
||||||
|
class='img-fluid center-img shadow-card mb30'>
|
||||||
|
<h5 class='text-uppercase'>upgraded avionics</h5>
|
||||||
|
<p>
|
||||||
|
Upgraded avionics featuring an Aspen EFD1000 Pro. Transponder is also upgraded with
|
||||||
|
ADS-B out and is 2020 compliant!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class='col-md-4 mb40'>
|
||||||
|
<img src='https://i.siteworxpro.com/5oc6HNDtE_-b8Lj6VdgjSEfMlCx6hucPlyn3vMhOQpI/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL2o5WnNqLnBuZw' alt=''
|
||||||
|
class='img-fluid center-img shadow-card mb30'>
|
||||||
|
<h5 class='text-uppercase'>New Interior and Exterior</h5>
|
||||||
|
<p>
|
||||||
|
Looks like a brand new aircraft! New leather interior was installed in 2015. Painted in
|
||||||
|
2008 and still has a like new condition.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section><!--section end about-->
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ContactUs from "./Contact-Us.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {ContactUs},
|
||||||
|
data: () => ({
|
||||||
|
membershipsAvailable: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
52
src/components/Airplane.vue
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cta bg-dark pt90 angle-top mt70 pb60" id="airplane">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="wow fadeInLeft mb30" data-wow-delay=".1s">
|
||||||
|
<img src="https://i.siteworxpro.com/9PH661tMSb7cJvJBnzZkpEI9xxX6jwuc-jE-Rznt6Dw/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL3UxQTdYLnBuZw" alt="" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
<div class="wow fadeInLeft mb30" data-wow-delay=".2s">
|
||||||
|
<img src="https://i.siteworxpro.com/o62a1kvzhRhsRk9_MrWe_C-VVtDbZFUYHgz_GbW5e1s/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL3BiT1lvLnBuZw" alt="" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 pb40">
|
||||||
|
<h2 class="text-white font300 mb20">1963 Beechcraft Debonair 35-B33</h2>
|
||||||
|
<p class="lead text-white-gray">
|
||||||
|
75% Power @ 8,000 feet 13 gph 157 Knots<br>
|
||||||
|
80 gallons fuel / 74 useable<br>
|
||||||
|
Useful Load 1081 pounds<br>
|
||||||
|
</p>
|
||||||
|
<h5 class="h5 text-white">Engine</h5>
|
||||||
|
<p>
|
||||||
|
<b>Fresh Overhauled</b> IO-470K @ 225 hp<br>
|
||||||
|
Airframe 4810 Total Time<br>
|
||||||
|
</p>
|
||||||
|
<h5 class="h5 text-white">Avionics</h5>
|
||||||
|
<p>
|
||||||
|
PMA6000B Audio Panel<br>
|
||||||
|
Garmin 430W Nav/Com1 GPS<br>
|
||||||
|
Narco 12D Nav/Com2<br>
|
||||||
|
<b>NEW</b> JPI EDM 830 Engine Monitor<br>
|
||||||
|
Bendix King KT74 Transponder - ADS-B Out<br>
|
||||||
|
ASPEN EFD1000 Pro<br>
|
||||||
|
BF Goodrich WX-900 Stormscope<br>
|
||||||
|
STEC 40 Autopilot Coupled to ASPEN (GPSS)<br>
|
||||||
|
ACK Model E-04 406MHz ELT<br>
|
||||||
|
</p>
|
||||||
|
<h5 class="h5 text-white">Other Equipment</h5>
|
||||||
|
<p>
|
||||||
|
BAS Shoulder Harness<br>
|
||||||
|
New Side Glass 2015<br>
|
||||||
|
Dual Ram’s Horn Yokes<br>
|
||||||
|
LED Navigation and Recognition Lighting<br>
|
||||||
|
Four Place Wired for Ship Powered Headsets
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
132
src/components/Contact-Us.vue
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<div id="contact_form" v-if="!success">
|
||||||
|
<span class="section-subTitle">please contact us</span>
|
||||||
|
<label class="sr-only" for="name">name</label>
|
||||||
|
<div class="input-group mb-2 mr-sm-2">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<div class="input-group-text"><i class="far fa-user"></i></div>
|
||||||
|
</div>
|
||||||
|
<input type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="name"
|
||||||
|
:class="validation && nameValid ? 'error': ''"
|
||||||
|
placeholder="name"
|
||||||
|
v-model="formData.name"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="sr-only" for="email">email</label>
|
||||||
|
<div class="input-group mb-2 mr-sm-2">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<div class="input-group-text">@</div>
|
||||||
|
</div>
|
||||||
|
<input type="text"
|
||||||
|
class="form-control"
|
||||||
|
:class="validation && emailValid ? 'error': ''"
|
||||||
|
id="email"
|
||||||
|
placeholder="email"
|
||||||
|
v-model="formData.email"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="sr-only" for="phone">phone</label>
|
||||||
|
<div class="input-group mb-2 mr-sm-2">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<div class="input-group-text"><i class="fas fa-phone"></i></div>
|
||||||
|
</div>
|
||||||
|
<input maxlength="12" type="text"
|
||||||
|
class="form-control" id="phone" placeholder="phone" v-model="formData.phone">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="sr-only" for="message">message</label>
|
||||||
|
<div class="input-group mb-2 mr-sm-2">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<div class="input-group-text"><i class="far fa-comment"></i></div>
|
||||||
|
</div>
|
||||||
|
<textarea type="text" class="form-control" id="message" placeholder="message"
|
||||||
|
v-model="formData.message"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
If you would like to know more about the club please fill out the contact form below.
|
||||||
|
Let us know a little bit about yourself, and your interest. We will get back to you by
|
||||||
|
email or phone.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-lg btn-primary"
|
||||||
|
:class="loading ? 'disabled' : ''"
|
||||||
|
:disabled="loading"
|
||||||
|
@click="sendRequest()"
|
||||||
|
v-html="btnTxt"
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="contact_success" v-else class="text-center">
|
||||||
|
<h1>Request Sent!</h1>
|
||||||
|
<h4>
|
||||||
|
<i class="fas fa-check fa-5x text-success"></i>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
loading: false,
|
||||||
|
success: false,
|
||||||
|
validation: false,
|
||||||
|
formData: {
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
message: ''
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
btnTxt() {
|
||||||
|
if (this.loading) {
|
||||||
|
return '<i class="fa-solid fa-gear fa-spin"></i>'
|
||||||
|
}
|
||||||
|
return '<i class="far fa-envelope"></i> Send'
|
||||||
|
},
|
||||||
|
nameValid() {
|
||||||
|
return this.formData.name === ''
|
||||||
|
},
|
||||||
|
emailValid() {
|
||||||
|
return !String(this.formData.email)
|
||||||
|
.toLowerCase()
|
||||||
|
.match(
|
||||||
|
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
isValid() {
|
||||||
|
return !this.nameValid && !this.emailValid
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendRequest() {
|
||||||
|
this.validation = true
|
||||||
|
if (!this.isValid) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
axios.post(import.meta.env.VITE_API_URL + '/email-request', this.formData)
|
||||||
|
.then(() => {
|
||||||
|
this.success = true
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
38
src/components/Footer.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<footer class='footer'>
|
||||||
|
<div class='container'>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-md-6'>
|
||||||
|
<div class='clearfix socials'>
|
||||||
|
<a href="https://www.facebook.com/BACFrederick/" target="_blank"
|
||||||
|
class="social-icon si-border si-facebook">
|
||||||
|
<i class="fab fa-facebook-f" style="color: black"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://twitter.com/BeechAero" target="_blank"
|
||||||
|
class="social-icon si-border si-twitter">
|
||||||
|
<i class="fab fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='col-md-6 text-md-right text-center'>
|
||||||
|
<span>Content <i class="far fa-copyright"></i> {{ year }} Beech Aero Club of Frederick</span><br>
|
||||||
|
<span>Web Hosting and Design <i
|
||||||
|
class="far fa-copyright"></i> {{ year }} Siteworx Professionals, LLC</span><br>
|
||||||
|
<span>Build {{ build }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
build() {
|
||||||
|
return import.meta.env.VITE_BUILD ?? 'Development'
|
||||||
|
},
|
||||||
|
year() {
|
||||||
|
return (new Date()).getUTCFullYear()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
77
src/components/Membership.vue
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<section id="membership" class="bg-faded pt90 pb50">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 ml-auto mr-auto text-center mb30">
|
||||||
|
<div class="section-title">
|
||||||
|
<span class="section-subTitle">Ready to Join?</span>
|
||||||
|
<h3 class="mb0">Membership</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="margin-bottom: 20px;">
|
||||||
|
<div class="col text-center mb-3">
|
||||||
|
<h4 v-if="!membershipsAvailable">
|
||||||
|
While there are no open memberships at this time, please contact us to join our
|
||||||
|
wait-list.
|
||||||
|
</h4>
|
||||||
|
<h4 v-else>
|
||||||
|
Memberships are available! Contact us today to find out more!
|
||||||
|
</h4>
|
||||||
|
<a class="btn btn-dark" data-scroll href="#about">Contact us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h4>Monthly Dues based on number of members</h4>
|
||||||
|
<h5>${{ costPerMonth }} Per Month</h5>
|
||||||
|
<p>
|
||||||
|
With 5 Members monthly fixed costs are ${{ costPerMonth }} per month. This covers all fixed costs including
|
||||||
|
insurance, hangar and database fees.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h4>Hourly Rate to Fly</h4>
|
||||||
|
<h5>only ${{ perHour }} Per Hour Dry</h5>
|
||||||
|
<p>
|
||||||
|
The cost to fly is ${{ perHour }}/hr billed from the tach at a dry rate.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<h4>Minimum Pilot Requirements</h4>
|
||||||
|
<p>
|
||||||
|
Private Pilot Certificate SEL<br>
|
||||||
|
with an Instrument Rating<br>
|
||||||
|
A Minimum Amount Retract Time Required<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<h4>Beechcraft Flying Club Information</h4>
|
||||||
|
<p>
|
||||||
|
BAC of Frederick is a Flying Club of 5 members, each having equal access to a
|
||||||
|
high-performance aircraft for local and cross country flying. We invite potential members to
|
||||||
|
request more information and apply for one of our open positions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<h4>Beechcraft Flying Club Information</h4>
|
||||||
|
<p>
|
||||||
|
The club is formed as an equity club. In an equity club each member buys a share of the club
|
||||||
|
including the aircraft and all other assets, the buy-in can be financed through the club.
|
||||||
|
Contact us for more information on how this works. </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
membershipsAvailable: false,
|
||||||
|
costPerMonth: 350,
|
||||||
|
perHour: 125
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
62
src/components/Navbar.vue
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-nav" :class="stuck ? 'is-stuck' : ''">
|
||||||
|
<div class="container">
|
||||||
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
|
||||||
|
data-target="#navbarsspy" aria-controls="navbarsspy" aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" data-scroll href="#home">
|
||||||
|
<img class="img-fluid" src="https://i.siteworxpro.com/VnRbpfvE4AodnHHrq0-DmmbDJwxUwrl9cJZIIdUv8uk/h:50/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL0xVQm0wLnBuZw" alt=""></a>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="navbarsspy">
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
<li class="nav-item"><a data-scroll class="nav-link active" href="#home">home</a></li>
|
||||||
|
<li class="nav-item"><a data-scroll class="nav-link" href="#about">About</a></li>
|
||||||
|
<li class="nav-item"><a data-scroll class="nav-link" href="#airplane">The Airplane</a></li>
|
||||||
|
<li class="nav-item"><a data-scroll class="nav-link" href="#membership">Membership</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
data: () => ({
|
||||||
|
stuck: false
|
||||||
|
}),
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const height = $('#home').height()
|
||||||
|
const scroll = window.scrollY
|
||||||
|
|
||||||
|
if (!height) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const dist = scroll - height
|
||||||
|
this.stuck = dist > 0
|
||||||
|
})
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
stuck: (val) => {
|
||||||
|
if (val) {
|
||||||
|
$('body').css('margin-top', '69px')
|
||||||
|
} else {
|
||||||
|
$('body').css('margin-top', '0')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.is-stuck {
|
||||||
|
transition: box-shadow 500ms;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 5px 15px #9a9a9a;
|
||||||
|
}
|
||||||
|
</style>
|
40
src/components/Video.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<section id="home" class="bg-parallax fullscreen parallax-overlay"
|
||||||
|
style="height: 100vh;"
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
autoplay
|
||||||
|
muted
|
||||||
|
style="z-index: 0; position: relative; top: 0; height: 100%; width: 100%; object-fit: cover;"
|
||||||
|
>
|
||||||
|
<source src="/video/27128760_492610754487667_4824731412490851473_n.mp4" type="video/mp4" />
|
||||||
|
<source src="/video/27128760_492610754487667_4824731412490851473_n.webm" type="video/webm" />
|
||||||
|
</video>
|
||||||
|
<div class="content-table" style="z-index: 1; position: absolute; top: 0;">
|
||||||
|
<div class="content-middle pt80 ">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12 col-md-12 ml-auto mr-auto text-center">
|
||||||
|
<h2 class="hero-big-text text-white">
|
||||||
|
<img src="/images/logo_white.png" class="img-fluid" alt="logo">
|
||||||
|
</h2>
|
||||||
|
<p class="lead text-white-gray">
|
||||||
|
Affordable Flying for Beechcraft Enthusiasts
|
||||||
|
</p>
|
||||||
|
<div class="circle-button">
|
||||||
|
<a href="#about" data-scroll class="btn btn-white-outline btn-lg btn-rounded">Learn
|
||||||
|
More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mouse-down"><a data-scroll href="#about"><i class="fa fa-angle-down fa-3x"></i></a></div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({})
|
||||||
|
</script>
|
13
src/main.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './styles/style.scss'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
import $ from 'jquery';
|
||||||
|
//@ts-ignore
|
||||||
|
window.jQuery = $;
|
||||||
|
//@ts-ignore
|
||||||
|
window.$ = $;
|
||||||
|
|
||||||
|
let app = createApp(App)
|
||||||
|
|
||||||
|
app.mount('#app')
|
80
src/style.css
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
572
src/styles/_base.scss
Executable file
@@ -0,0 +1,572 @@
|
|||||||
|
/*
|
||||||
|
Basic of template
|
||||||
|
*/
|
||||||
|
html,body,.fullScreen{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: 0em;
|
||||||
|
font-family: $base-font;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
button, input, optgroup, select, textarea{
|
||||||
|
font-family: $base-font;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
&:focus{
|
||||||
|
outline: 0!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a,.simple-hover img,button,.btn{
|
||||||
|
transition: all 0.3s;
|
||||||
|
-webkit-transition: all 0.3s;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color:$primary-color;
|
||||||
|
text-decoration:none;
|
||||||
|
&:hover,&:focus{
|
||||||
|
text-decoration: none;
|
||||||
|
outline: 0!important;
|
||||||
|
color:#666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-family: $base-font;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
h4,.h4{
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
h5,.h5{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid rgba(0,0,0,.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.small,small {
|
||||||
|
font-size: 80%;
|
||||||
|
font-weight: 400
|
||||||
|
}
|
||||||
|
ul, ol{
|
||||||
|
margin: 0 0 1.5em 0;
|
||||||
|
}
|
||||||
|
.tritary-font{
|
||||||
|
font-family:$styled-font;
|
||||||
|
font-weight:400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.base-font{
|
||||||
|
font-family: $base-font;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.font300{
|
||||||
|
font-weight: 300!important;
|
||||||
|
}
|
||||||
|
.font400{
|
||||||
|
font-weight: 400!important;
|
||||||
|
}
|
||||||
|
.font500{
|
||||||
|
font-weight: 500!important;
|
||||||
|
}
|
||||||
|
.font700{
|
||||||
|
font-weight: 700!important;
|
||||||
|
}
|
||||||
|
.font900{
|
||||||
|
font-weight: 700!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 7px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size:10px;
|
||||||
|
}
|
||||||
|
.bg-faded{
|
||||||
|
background:#F9F9F9;
|
||||||
|
}
|
||||||
|
.badge-primary{
|
||||||
|
background: $primary-color!important;
|
||||||
|
}
|
||||||
|
.bg-primary{
|
||||||
|
background: $primary-color!important;
|
||||||
|
border-color:$primary-color;
|
||||||
|
}
|
||||||
|
.bg-success{
|
||||||
|
background: $success-color!important;
|
||||||
|
border-color:$success-color;
|
||||||
|
}
|
||||||
|
.bg-warning{
|
||||||
|
background: $warning-color;
|
||||||
|
border-color:$warning-color;
|
||||||
|
}
|
||||||
|
.bg-info{
|
||||||
|
background-color: $info-color;
|
||||||
|
border-color:$info-color;
|
||||||
|
}
|
||||||
|
.bg-danger{
|
||||||
|
background-color: $danger-color;
|
||||||
|
border-color:$danger-color;
|
||||||
|
}
|
||||||
|
.bg-dark{
|
||||||
|
border-color:$dark-color;
|
||||||
|
background-color:$dark-color!important;
|
||||||
|
}
|
||||||
|
.bg-white{
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.text-primary{
|
||||||
|
color: $primary-color!important;
|
||||||
|
}
|
||||||
|
.text-danger{
|
||||||
|
color: $danger-color!important;
|
||||||
|
}
|
||||||
|
.text-success{
|
||||||
|
color: $success-color!important;
|
||||||
|
}
|
||||||
|
.text-warning{
|
||||||
|
color: $warning-color!important;
|
||||||
|
}
|
||||||
|
.text-info{
|
||||||
|
color: $info-color!important;
|
||||||
|
}
|
||||||
|
.text-white{
|
||||||
|
color:rgba(#fff,1)!important;
|
||||||
|
}
|
||||||
|
.text-dark{
|
||||||
|
color:rgba(#222,1)!important;
|
||||||
|
}
|
||||||
|
.text-white-gray{
|
||||||
|
color:rgba(#fff,.8)!important;
|
||||||
|
}
|
||||||
|
.border-round{
|
||||||
|
border-radius: 6px;
|
||||||
|
-webkit-border-radius: 6px;
|
||||||
|
}
|
||||||
|
.pos-relative{
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead{
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
strong,b{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.fWidth{
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
.oHidden{
|
||||||
|
overflow: hidden!important;;
|
||||||
|
}
|
||||||
|
strong,b{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.mr0{
|
||||||
|
margin-right:0px!important;
|
||||||
|
}
|
||||||
|
.pt0{
|
||||||
|
padding-top: 0!important;
|
||||||
|
}
|
||||||
|
.pt10{
|
||||||
|
padding-top: 10px!important;;
|
||||||
|
}
|
||||||
|
.pt20{
|
||||||
|
padding-top: 20px!important;;
|
||||||
|
}
|
||||||
|
.pt30{
|
||||||
|
padding-top: 30px!important;;
|
||||||
|
}
|
||||||
|
.pt40{
|
||||||
|
padding-top: 40px!important;;
|
||||||
|
}
|
||||||
|
.pt50{
|
||||||
|
padding-top: 50px!important;;
|
||||||
|
}
|
||||||
|
.pt60{
|
||||||
|
padding-top: 60px!important;;
|
||||||
|
}
|
||||||
|
.pt70{
|
||||||
|
padding-top: 70px!important;;
|
||||||
|
}
|
||||||
|
.pt80{
|
||||||
|
padding-top: 80px!important;;
|
||||||
|
}
|
||||||
|
.pt90{
|
||||||
|
padding-top: 90px!important;;
|
||||||
|
}
|
||||||
|
.pt100{
|
||||||
|
padding-top: 100px!important;;
|
||||||
|
}
|
||||||
|
.pb0{
|
||||||
|
padding-bottom: 0!important;
|
||||||
|
}
|
||||||
|
.pb10{
|
||||||
|
padding-bottom: 10px!important;
|
||||||
|
}
|
||||||
|
.pb15{
|
||||||
|
padding-bottom: 15px!important;
|
||||||
|
}
|
||||||
|
.pb20{
|
||||||
|
padding-bottom: 20px!important;
|
||||||
|
}
|
||||||
|
.pb30{
|
||||||
|
padding-bottom: 30px!important;
|
||||||
|
}
|
||||||
|
.pb40{
|
||||||
|
padding-bottom: 40px!important;
|
||||||
|
}
|
||||||
|
.pb50{
|
||||||
|
padding-bottom: 50px!important;
|
||||||
|
}
|
||||||
|
.pb60{
|
||||||
|
padding-bottom: 60px!important;
|
||||||
|
}
|
||||||
|
.pb70{
|
||||||
|
padding-bottom: 70px!important;
|
||||||
|
}
|
||||||
|
.pb80{
|
||||||
|
padding-bottom: 80px!important;
|
||||||
|
}
|
||||||
|
.pb90{
|
||||||
|
padding-bottom: 90px!important;
|
||||||
|
}
|
||||||
|
.pb100{
|
||||||
|
padding-bottom: 100px!important;
|
||||||
|
}
|
||||||
|
.mb0{
|
||||||
|
margin-bottom: 0!important;
|
||||||
|
}
|
||||||
|
.mb5{
|
||||||
|
margin-bottom: 5px!important;
|
||||||
|
}
|
||||||
|
.mb10{
|
||||||
|
margin-bottom: 10px!important;
|
||||||
|
}
|
||||||
|
.mb20{
|
||||||
|
margin-bottom: 20px!important;
|
||||||
|
}
|
||||||
|
.mb30{
|
||||||
|
margin-bottom: 30px!important;
|
||||||
|
}
|
||||||
|
.mb40{
|
||||||
|
margin-bottom: 40px!important;
|
||||||
|
}
|
||||||
|
.mb50{
|
||||||
|
margin-bottom: 50px!important;
|
||||||
|
}
|
||||||
|
.mb60{
|
||||||
|
margin-bottom: 60px!important;
|
||||||
|
}
|
||||||
|
.mb70{
|
||||||
|
margin-bottom: 70px!important;
|
||||||
|
}
|
||||||
|
.mb80{
|
||||||
|
margin-bottom: 80px!important;
|
||||||
|
}
|
||||||
|
.mb90{
|
||||||
|
margin-bottom: 90px!important;
|
||||||
|
}
|
||||||
|
.mb100{
|
||||||
|
margin-bottom: 100px!important;
|
||||||
|
}
|
||||||
|
.mt5{
|
||||||
|
margin-top:5px!important;
|
||||||
|
}
|
||||||
|
.mt10{
|
||||||
|
margin-top:10px!important;
|
||||||
|
}
|
||||||
|
.mt20{
|
||||||
|
margin-top:20px!important;
|
||||||
|
}
|
||||||
|
.mt30{
|
||||||
|
margin-top:30px!important;
|
||||||
|
}
|
||||||
|
.mt40{
|
||||||
|
margin-top:40px!important;
|
||||||
|
}
|
||||||
|
.mt50{
|
||||||
|
margin-top:50px!important;
|
||||||
|
}
|
||||||
|
.mt60{
|
||||||
|
margin-top:60px!important;
|
||||||
|
}
|
||||||
|
.mt70{
|
||||||
|
margin-top:70px!important;
|
||||||
|
}
|
||||||
|
.mt80{
|
||||||
|
margin-top:80px!important;
|
||||||
|
}
|
||||||
|
.mt90{
|
||||||
|
margin-top:90px!important;
|
||||||
|
}
|
||||||
|
.mt100{
|
||||||
|
margin-top:100px!important;
|
||||||
|
}
|
||||||
|
.bg-default{
|
||||||
|
background-color: $default-color!important;
|
||||||
|
}
|
||||||
|
.bg-gray{
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
}
|
||||||
|
.pd-card{
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-to-top{
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
bottom: 10px;
|
||||||
|
left:10px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
line-height: 50px;
|
||||||
|
opacity:0;
|
||||||
|
visibility: hidden;
|
||||||
|
z-index:9;
|
||||||
|
-webkit-transition: -webkit-transform 0.2s ease-out;
|
||||||
|
-moz-transition: -moz-transform 0.2s ease-out;
|
||||||
|
transition: transform 0.2s ease-out;
|
||||||
|
transform: translate3d(0,15px, 0);
|
||||||
|
-webkit-transform: translate3d(0,15px, 0);
|
||||||
|
i{
|
||||||
|
display: block;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0px 3px 20px rgba(0,0,0,0.2);
|
||||||
|
color:#333;
|
||||||
|
}
|
||||||
|
&.show{
|
||||||
|
opacity:1;
|
||||||
|
visibility: visible;
|
||||||
|
transform: translate3d(0, 0px, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**preloader**/
|
||||||
|
.loader,
|
||||||
|
.loader:before,
|
||||||
|
.loader:after {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 2.5em;
|
||||||
|
height: 2.5em;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
-webkit-animation: load7 1.8s infinite ease-in-out;
|
||||||
|
animation: load7 1.8s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
.no-margin{
|
||||||
|
margin: 0!important;
|
||||||
|
}
|
||||||
|
.no-padding{
|
||||||
|
padding-left:0!important;
|
||||||
|
padding-right:0!important;
|
||||||
|
}
|
||||||
|
.content-table{
|
||||||
|
display:table;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
.content-middle{
|
||||||
|
display:table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
.content-bottom{
|
||||||
|
display:table-cell;
|
||||||
|
vertical-align: bottom;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-title{
|
||||||
|
padding-bottom:0px;
|
||||||
|
position:relative;
|
||||||
|
h3{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
letter-spacing: -3px;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 20px;
|
||||||
|
text-transform:capitalize;
|
||||||
|
font-weight:800;
|
||||||
|
&:before{
|
||||||
|
content: "";
|
||||||
|
width:40px;
|
||||||
|
height:5px;
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left:50%;
|
||||||
|
background-color: $primary-color;
|
||||||
|
margin-left:-20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.title-left{
|
||||||
|
h3{
|
||||||
|
&:before{
|
||||||
|
left:0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-subTitle{
|
||||||
|
color:#666;
|
||||||
|
font-size:.89rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display:block;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.center-img{
|
||||||
|
display:block;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
.shadow-card{
|
||||||
|
box-shadow: 0px 0px 28px rgba(0,0,0,0.1);
|
||||||
|
border-radius:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***angle style**/
|
||||||
|
.angle-top,.angle-bottom{
|
||||||
|
overflow: visible;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
.angle-top{
|
||||||
|
&:before{
|
||||||
|
background: none repeat scroll 0 0 #fff;
|
||||||
|
content: "";
|
||||||
|
margin-top: -149px;
|
||||||
|
min-height: 100px;
|
||||||
|
position: absolute;
|
||||||
|
-webkit-transform: skewY(-2deg);
|
||||||
|
-moz-transform: skewY(-2deg);
|
||||||
|
-ms-transform: skewY(-2deg);
|
||||||
|
-o-transform: skewY(-2deg);
|
||||||
|
transform: skewY(-2deg);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&.bg-dark:before{
|
||||||
|
background-color: $dark-color;
|
||||||
|
}
|
||||||
|
&.bg-primary:before{
|
||||||
|
background-color: $primary-color;
|
||||||
|
}
|
||||||
|
&.bg-info:before{
|
||||||
|
background-color: $info-color;
|
||||||
|
}
|
||||||
|
&.bg-success:before{
|
||||||
|
background-color: $success-color;
|
||||||
|
}
|
||||||
|
&.bg-warning:before{
|
||||||
|
background-color: $warning-color;
|
||||||
|
}
|
||||||
|
&.bg-white:before{
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-parallax{
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center center;
|
||||||
|
position:relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.parallax-overlay{
|
||||||
|
&:after{
|
||||||
|
content: "";
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&.overlay-primary{
|
||||||
|
&:after{
|
||||||
|
background-color:rgba($primary-color,0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Responsive Utilites Style (This css is removed from beta version)
|
||||||
|
*/
|
||||||
|
.hidden-xs-up {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575px) {
|
||||||
|
.hidden-xs-down {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.hidden-sm-up {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.hidden-sm-down {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.hidden-md-up {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.hidden-md-down {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.hidden-lg-up {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
.hidden-lg-down {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.hidden-xl-up {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-xl-down {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible-print-block {
|
||||||
|
display: none !important;
|
||||||
|
}
|
536
src/styles/_buttons.scss
Executable file
@@ -0,0 +1,536 @@
|
|||||||
|
/*
|
||||||
|
Buttons
|
||||||
|
*/
|
||||||
|
.form-control-lg, .input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn{
|
||||||
|
font-size:.8rem;
|
||||||
|
}
|
||||||
|
.btn,.button{
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
z-index:1;
|
||||||
|
border-radius:2px;
|
||||||
|
cursor:pointer;
|
||||||
|
font-weight:600!important;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
font-size:.8rem;
|
||||||
|
font-family:$base-font;
|
||||||
|
padding:10px 30px 10px!important;
|
||||||
|
text-transform:uppercase;
|
||||||
|
i{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right:8px;
|
||||||
|
}
|
||||||
|
&.btn-rounded{
|
||||||
|
border-radius:100px;
|
||||||
|
}
|
||||||
|
&:before{
|
||||||
|
content:"";
|
||||||
|
position:absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
width:0%;
|
||||||
|
height:100%;
|
||||||
|
z-index: -1;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
&:hover,&:focus{
|
||||||
|
box-shadow:none;
|
||||||
|
outline:0!important;
|
||||||
|
&:before{
|
||||||
|
transition: all .3s;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-link{
|
||||||
|
border:0px;
|
||||||
|
padding:0px!important;
|
||||||
|
}
|
||||||
|
&.btn-sm{
|
||||||
|
padding:9px 15px 9px!important;
|
||||||
|
font-size:.6rem;
|
||||||
|
}
|
||||||
|
&.btn-lg{
|
||||||
|
padding:14px 40px 14px!important;
|
||||||
|
font-size:.95rem;
|
||||||
|
}
|
||||||
|
&.btn-link{
|
||||||
|
color:$primary-color;
|
||||||
|
text-transform:capitalize;
|
||||||
|
&:after{
|
||||||
|
font-family: 'FontAwesome';
|
||||||
|
content: "\f101";
|
||||||
|
margin-left:5px;
|
||||||
|
font-size:12px;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
text-decoration:none;
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-white{
|
||||||
|
background-color:#fff;
|
||||||
|
color:#333;
|
||||||
|
}
|
||||||
|
.btn-white-outline{
|
||||||
|
border:2px solid #fff;
|
||||||
|
background-color:transparent;
|
||||||
|
color:#fff;
|
||||||
|
&:hover,&:focus{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:#fff;
|
||||||
|
}
|
||||||
|
color:#333;
|
||||||
|
border-color:#fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-outline-primary{
|
||||||
|
border:2px solid $primary-color;
|
||||||
|
background-color:transparent;
|
||||||
|
color:$primary-color!important;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:$primary-color;
|
||||||
|
}
|
||||||
|
color:#fff!important;;
|
||||||
|
border-color:$primary-color;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-outline-info{
|
||||||
|
border:2px solid $info-color;
|
||||||
|
background-color:transparent;
|
||||||
|
color:$info-color;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:$info-color;
|
||||||
|
}
|
||||||
|
color:#fff;
|
||||||
|
border-color:$info-color;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-outline-info{
|
||||||
|
border:2px solid $info-color;
|
||||||
|
background-color:transparent;
|
||||||
|
color:$info-color;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:$info-color;
|
||||||
|
}
|
||||||
|
color:#fff;
|
||||||
|
border-color:$info-color;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-outline-success{
|
||||||
|
border:2px solid $success-color;
|
||||||
|
background-color:transparent;
|
||||||
|
color:$success-color;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:$success-color;
|
||||||
|
}
|
||||||
|
color:#fff;
|
||||||
|
border-color:$success-color;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-outline-danger{
|
||||||
|
border:2px solid $danger-color;
|
||||||
|
background-color:transparent;
|
||||||
|
color:$danger-color;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:$danger-color;
|
||||||
|
}
|
||||||
|
color:#fff;
|
||||||
|
border-color:$danger-color;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-outline-warning{
|
||||||
|
border:2px solid $warning-color;
|
||||||
|
background-color:transparent;
|
||||||
|
color:$warning-color;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:$warning-color;
|
||||||
|
}
|
||||||
|
color:#fff;
|
||||||
|
border-color:$warning-color;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-outline-secondary{
|
||||||
|
border:2px solid #ccc;
|
||||||
|
background-color:transparent;
|
||||||
|
color:#ccc;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
&:before{
|
||||||
|
width:100%;
|
||||||
|
background-color:#ccc;
|
||||||
|
}
|
||||||
|
color:#fff;
|
||||||
|
border-color:#ccc;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**fill buttons**/
|
||||||
|
.btn-primary,.btn-success,.btn-warning,.btn-danger,.btn-info,.btn-secondary,.btn-dark{
|
||||||
|
box-shadow: 0 0.05em 0.1em rgba(0,0,0,0.18);
|
||||||
|
border:0px;
|
||||||
|
&:hover{
|
||||||
|
border:0px;
|
||||||
|
box-shadow: 0 0.05em 1em rgba(0,0,0,0.18);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-secondary{
|
||||||
|
background: #f5f5f5;
|
||||||
|
box-shadow:none;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
border:0px;
|
||||||
|
color:#333;
|
||||||
|
box-shadow:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-primary{
|
||||||
|
background: $primary-color;
|
||||||
|
color:#fff!important;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
background: $primary-color;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-dark{
|
||||||
|
background: #222;
|
||||||
|
color:#fff;
|
||||||
|
&:hover,&:focus,&:active{
|
||||||
|
background: #222;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-circle{
|
||||||
|
width:80px;
|
||||||
|
height:80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 80px;
|
||||||
|
text-align:center;
|
||||||
|
i{
|
||||||
|
display:block;
|
||||||
|
line-height: 80px;
|
||||||
|
margin:0 auto;
|
||||||
|
font-size:35px;
|
||||||
|
}
|
||||||
|
.btn-primary,.btn-success,.btn-warning,.btn-danger,.btn-info{
|
||||||
|
i{
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-sm-rounded{
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
display: inline-block!important;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $primary-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/****************
|
||||||
|
|
||||||
|
SOCIAL BUTTONS
|
||||||
|
|
||||||
|
**********************/
|
||||||
|
/**social icons default size**/
|
||||||
|
.social-icon {
|
||||||
|
margin: 0 5px 5px 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 40px !important;
|
||||||
|
color: #555;
|
||||||
|
text-shadow: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #AAA;
|
||||||
|
}
|
||||||
|
.social-icon:hover {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon i {
|
||||||
|
display: block;
|
||||||
|
-moz-transition: all 0.3s ease;
|
||||||
|
-o-transition: all 0.3s ease;
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
line-height: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.social-icon i:last-child {
|
||||||
|
color: #2f2424 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon:hover i:first-child {
|
||||||
|
//margin-top: -40px;
|
||||||
|
color: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***social icons lg (big)***/
|
||||||
|
.social-icon-lg {
|
||||||
|
margin: 0 5px 5px 0;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 60px !important;
|
||||||
|
color: #555;
|
||||||
|
text-shadow: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #AAA;
|
||||||
|
}
|
||||||
|
.social-icon-lg:hover {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon-lg i {
|
||||||
|
display: block;
|
||||||
|
-moz-transition: all 0.3s ease;
|
||||||
|
-o-transition: all 0.3s ease;
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
line-height: 60px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.social-icon-lg i:last-child {
|
||||||
|
color: #FFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon-lg:hover i:first-child {
|
||||||
|
margin-top: -60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/***social icons small***/
|
||||||
|
.social-icon-sm {
|
||||||
|
margin: 0 5px 5px 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 30px !important;
|
||||||
|
color: #555;
|
||||||
|
text-shadow: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #AAA;
|
||||||
|
}
|
||||||
|
.social-icon-sm:hover {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon-sm i {
|
||||||
|
display: block;
|
||||||
|
-moz-transition: all 0.3s ease;
|
||||||
|
-o-transition: all 0.3s ease;
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
line-height: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.social-icon-sm i:last-child {
|
||||||
|
color: #FFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon-sm:hover i:first-child {
|
||||||
|
margin-top: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
si-border {
|
||||||
|
border: 1px solid #AAA !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-border-round {
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
-ms-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-dark-round {
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
-ms-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-gray-round {
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
-ms-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-gray {
|
||||||
|
background: #f3f3f3;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-dark {
|
||||||
|
background-color: #333;
|
||||||
|
border: 0px !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**icons hover colored**/
|
||||||
|
.si-colored-facebook, .si-facebook:hover {
|
||||||
|
background-color: #3B5998 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-colored-twitter, .si-twitter:hover {
|
||||||
|
background-color: #00ACEE !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-colored-google-plus, .si-g-plus:hover {
|
||||||
|
background-color: #DD4B39 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-colored-skype, .si-skype:hover {
|
||||||
|
background-color: #00AFF0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-linkedin:hover, .si-colored-linkedin {
|
||||||
|
background-color: #0E76A8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-pin:hover, .si-colored-pinterest {
|
||||||
|
background-color: #C8232C !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-rss:hover, .si-colored-rss {
|
||||||
|
background-color: #EE802F !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-pinterest:hover, .si-colored-pinterest {
|
||||||
|
background-color: #C8232C !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-tumblr:hover, .si-colored-tumblr {
|
||||||
|
background-color: #34526F !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-vimeo:hover, .si-colored-vimeo {
|
||||||
|
background-color: #86C9EF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-digg:hover, .si-colored-digg {
|
||||||
|
background-color: #191919 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-instagram:hover, .si-colored-instagram {
|
||||||
|
background-color: #3F729B !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-flickr:hover, .si-colored-flickr {
|
||||||
|
background-color: #FF0084 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-paypal:hover, .si-colored-paypal {
|
||||||
|
background-color: #00588B !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-yahoo:hover, .si-colored-yahoo {
|
||||||
|
background-color: #720E9E !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-android:hover, .si-colored-andriod {
|
||||||
|
background-color: #A4C639 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-appstore:hover, .si-colored-apple {
|
||||||
|
background-color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-dropbox:hover {
|
||||||
|
background-color: #3D9AE8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-dribbble:hover, .si-colored-dribbble {
|
||||||
|
background-color: #EA4C89 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-soundcloud:hover, .si-colored-soundcoloud {
|
||||||
|
background-color: #F70 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-xing:hover, .si-colored-xing {
|
||||||
|
background-color: #126567 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-phone:hover, .si-colored-phone {
|
||||||
|
background-color: #444 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-behance:hover, .si-colored-behance {
|
||||||
|
background-color: #053eff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-github:hover, .si-colored-github {
|
||||||
|
background-color: #171515 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-stumbleupon:hover, .si-colored-stumbleupon {
|
||||||
|
background-color: #F74425 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-email:hover, .si-colored-email {
|
||||||
|
background-color: #6567A5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.si-wordpress:hover, .si-colored-wordpress {
|
||||||
|
background-color: #1E8CBE !important;
|
||||||
|
}
|
||||||
|
.circle-button{
|
||||||
|
display:inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
span{
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.circle-icon-button{
|
||||||
|
width: 3.92857rem;
|
||||||
|
height: 3.92857rem;
|
||||||
|
border-radius:50%;
|
||||||
|
font-size: 1.28571rem;
|
||||||
|
display:inline-block;
|
||||||
|
text-align:center;
|
||||||
|
vertical-align:middle;
|
||||||
|
>i{
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
display: block;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
-ms-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
padding-left: 3px;
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
}
|
27
src/styles/_cta-parallax.scss
Executable file
@@ -0,0 +1,27 @@
|
|||||||
|
/*
|
||||||
|
Call to action & parallax
|
||||||
|
*/
|
||||||
|
.contact-info{
|
||||||
|
>li{
|
||||||
|
padding-left:60px;
|
||||||
|
position:relative;
|
||||||
|
padding-bottom:30px;
|
||||||
|
font-size:1.2rem;
|
||||||
|
>i{
|
||||||
|
position:absolute;
|
||||||
|
left:0;
|
||||||
|
top:-5px;
|
||||||
|
width:40px;
|
||||||
|
height:40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color:#555;
|
||||||
|
border-bottom: 1px dashed #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
31
src/styles/_custom-smartForm.scss
Executable file
@@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
Smart forms custom style
|
||||||
|
*/
|
||||||
|
.smart-wrap{
|
||||||
|
padding:0px;
|
||||||
|
}
|
||||||
|
.smart-container{
|
||||||
|
box-shadow: none;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
margin-top:0px;
|
||||||
|
margin-bottom:0px;
|
||||||
|
}
|
||||||
|
.smart-forms .form-body{
|
||||||
|
padding:0px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.smart-forms .form-footer{
|
||||||
|
background-image: none;
|
||||||
|
background-color: transparent;
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-top: 0px;
|
||||||
|
}
|
||||||
|
.smart-forms .form-footer .button.btn-primary{
|
||||||
|
background-color: $primary-color;
|
||||||
|
}
|
||||||
|
.smart-forms .form-footer .button{
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.smart-forms label, .smart-forms input, .smart-forms button, .smart-forms select, .smart-forms textarea{
|
||||||
|
font-family: $base-font;
|
||||||
|
}
|
7
src/styles/_dropdown.scss
Executable file
@@ -0,0 +1,7 @@
|
|||||||
|
.dropdown-menu{
|
||||||
|
.dropdown-item{
|
||||||
|
font-size: .88rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-weight:300;
|
||||||
|
}
|
||||||
|
}
|
26
src/styles/_footer.scss
Executable file
@@ -0,0 +1,26 @@
|
|||||||
|
/*
|
||||||
|
Footer style
|
||||||
|
*/
|
||||||
|
.footer{
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
.footer-nav{
|
||||||
|
>li{
|
||||||
|
padding:0px .5em;
|
||||||
|
a{
|
||||||
|
color:#666;
|
||||||
|
&:hover{
|
||||||
|
color:$primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(max-width:767px){
|
||||||
|
.footer .socials{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
112
src/styles/_header-left.scss
Executable file
@@ -0,0 +1,112 @@
|
|||||||
|
/*
|
||||||
|
Left header style
|
||||||
|
*/
|
||||||
|
.nav-link{
|
||||||
|
font-size:.9rem;
|
||||||
|
font-weight:400;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-family:$base-font;
|
||||||
|
letter-spacing:0;
|
||||||
|
border-right: 3px solid transparent;
|
||||||
|
display: block;
|
||||||
|
padding: 10px 10px;
|
||||||
|
text-align:center;
|
||||||
|
&.active{
|
||||||
|
border-right-color: $primary-color;
|
||||||
|
color:$primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar.navbar-light.bg-white{
|
||||||
|
.navbar-nav .nav-link{
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(min-width:992px){
|
||||||
|
.navbar-brand{
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
.navbar-toggleable-md .navbar-nav .nav-link{
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
.navbar.navbar-dark.bg-dark {
|
||||||
|
.nav-link{
|
||||||
|
border-top: 1px solid rgba(#fff,.1);
|
||||||
|
&:active,&:hover,&:focus{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar.navbar-light.bg-white {
|
||||||
|
.nav-link{
|
||||||
|
border-top: 1px solid rgba(#000,.03);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-expand-lg .navbar-nav{
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
body.push-left{
|
||||||
|
padding-left: 250px;
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width:100%;
|
||||||
|
padding: 0px 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar.navbar-left.fixed-top{
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
left:0;
|
||||||
|
width:250px;
|
||||||
|
top:0;
|
||||||
|
display:block;
|
||||||
|
padding:0px;
|
||||||
|
box-shadow:0px 0px 20px rgba(0,0,0,.1);
|
||||||
|
.navbar-nav{
|
||||||
|
display: block;
|
||||||
|
width:100%;
|
||||||
|
>.nav-item{
|
||||||
|
display: block;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggleable-md .navbar-collapse{
|
||||||
|
display: block!important;
|
||||||
|
}
|
||||||
|
.navbar-brand{
|
||||||
|
display: block;
|
||||||
|
width:100%;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.socials-nav{
|
||||||
|
span{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
padding-top: 1.5em;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(max-width:991px){
|
||||||
|
.navbar-expand-lg .navbar-toggler{
|
||||||
|
position:absolute;
|
||||||
|
right:15px;
|
||||||
|
top:9px;
|
||||||
|
border:0px;
|
||||||
|
}
|
||||||
|
h2.display-4{
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
h2.display-4{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.nav-link{
|
||||||
|
text-align: left;
|
||||||
|
border-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
88
src/styles/_header.scss
Executable file
@@ -0,0 +1,88 @@
|
|||||||
|
.navbar .navbar-nav .nav-link,.navbar .btn{
|
||||||
|
font-size:.9rem;
|
||||||
|
font-weight:400;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-family:$base-font;
|
||||||
|
letter-spacing:0;
|
||||||
|
}
|
||||||
|
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open>.nav-link {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticky-wrapper.is-sticky .navbar.sticky-nav{
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||||
|
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
.navbar-light.sticky-nav{
|
||||||
|
z-index: 9999!important;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px){
|
||||||
|
.navbar-expand-lg .navbar-nav .nav-link {
|
||||||
|
padding-right: .9rem;
|
||||||
|
padding-left: .9rem;
|
||||||
|
}
|
||||||
|
.navbar-expand-lg.navbar .container{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.navbar-light.navbar.bg-white.navbar-transparent{
|
||||||
|
background-color: transparent!important;
|
||||||
|
position:absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
width:100%;
|
||||||
|
z-index:9999;
|
||||||
|
padding:1rem 1rem;
|
||||||
|
.navbar-nav .nav-link{
|
||||||
|
color: #fff;
|
||||||
|
&.active,&:hover,&:focus{
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-brand img{
|
||||||
|
position: absolute;
|
||||||
|
left: 15px;
|
||||||
|
top: 10px;
|
||||||
|
&.logo-dark{
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.fixed-top{
|
||||||
|
position: fixed;
|
||||||
|
animation: fadeInDown .5s;
|
||||||
|
-webkit-animation: fadeInDown .5s;
|
||||||
|
background-color: #fff!important;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||||
|
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||||
|
.navbar-brand img{
|
||||||
|
&.logo-dark{
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
&.logo-light{
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-nav .nav-link{
|
||||||
|
color: #111;
|
||||||
|
&.active,&:hover,&:focus{
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar .navbar-nav .nav-link{
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
@media(max-width:991px){
|
||||||
|
.navbar.navbar-light.navbar-transparent{
|
||||||
|
background-color: #fff!important;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||||
|
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||||
|
.navbar-brand .logo-light{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
26
src/styles/_hero.scss
Executable file
@@ -0,0 +1,26 @@
|
|||||||
|
/********Template hero styles***/
|
||||||
|
.fullscreen{
|
||||||
|
height:100%;
|
||||||
|
position:relative;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
.mouse-down{
|
||||||
|
position: absolute!important;
|
||||||
|
left:0;
|
||||||
|
width:100%;
|
||||||
|
bottom:0;
|
||||||
|
text-align: center;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
|
.hero-big-text{
|
||||||
|
font-family: $base-font;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
@media(min-width:768px){
|
||||||
|
.hero-big-text{
|
||||||
|
font-size: 4.5rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
text-transform:capitalize;
|
||||||
|
}
|
||||||
|
}
|
65
src/styles/_link-hovers.scss
Executable file
@@ -0,0 +1,65 @@
|
|||||||
|
/*
|
||||||
|
Link hover styles
|
||||||
|
*/
|
||||||
|
.hover-me1{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 45px;
|
||||||
|
line-height: 45px;
|
||||||
|
color:#fff;
|
||||||
|
text-transform:uppercase;
|
||||||
|
font-weight:600;
|
||||||
|
&:before,&:after{
|
||||||
|
position: absolute;
|
||||||
|
width: 45px;
|
||||||
|
height: 2px;
|
||||||
|
background: #fff;
|
||||||
|
content: '';
|
||||||
|
opacity: 0.2;
|
||||||
|
-webkit-transition: all 0.3s;
|
||||||
|
-moz-transition: all 0.3s;
|
||||||
|
transition: all 0.3s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-moz-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
-webkit-transform-origin: 0 0;
|
||||||
|
-moz-transform-origin: 0 0;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-moz-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
-webkit-transform-origin: 100% 0;
|
||||||
|
-moz-transform-origin: 100% 0;
|
||||||
|
transform-origin: 100% 0;
|
||||||
|
}
|
||||||
|
&:hover,&:focus{
|
||||||
|
outline: none;
|
||||||
|
color:#fff;
|
||||||
|
&:before{
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: rotate(0deg) translateX(-50%);
|
||||||
|
-moz-transform: rotate(0deg) translateX(-50%);
|
||||||
|
transform: rotate(0deg) translateX(-50%);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 50%;
|
||||||
|
-webkit-transform: rotate(0deg) translateX(50%);
|
||||||
|
-moz-transform: rotate(0deg) translateX(50%);
|
||||||
|
transform: rotate(0deg) translateX(50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover:before,&:focus:before,&:hover:after,&:focus:after{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
17
src/styles/_portfolio.scss
Executable file
@@ -0,0 +1,17 @@
|
|||||||
|
/*
|
||||||
|
Portfolio
|
||||||
|
*/
|
||||||
|
.cbp-l-grid-agency-title{
|
||||||
|
font-family: $title-font;
|
||||||
|
font-weight:700;
|
||||||
|
color:#111;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.cbp-l-grid-agency-desc{
|
||||||
|
font-family: $base-font;
|
||||||
|
}
|
||||||
|
.cbp-l-filters-text .cbp-filter-item{
|
||||||
|
font-family: $title-font;
|
||||||
|
}
|
53
src/styles/_preloader.scss
Executable file
@@ -0,0 +1,53 @@
|
|||||||
|
/*
|
||||||
|
Preloader style
|
||||||
|
*/
|
||||||
|
#preloader {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 99999; }
|
||||||
|
|
||||||
|
#preloader-inner {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
font-size: 5px;
|
||||||
|
width: 5em;
|
||||||
|
height: 5em;
|
||||||
|
margin: -25px 0 0 -25px;
|
||||||
|
text-indent: -9999em;
|
||||||
|
border-top: 0.5em solid $primary-color;
|
||||||
|
border-right: 0.5em solid rgba(245, 245, 245, 0.5);
|
||||||
|
border-bottom: 0.5em solid rgba(245, 245, 245, 0.5);
|
||||||
|
border-left: 0.5em solid rgba(245, 245, 245, 0.5);
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
-ms-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-animation: load8 1.1s infinite linear;
|
||||||
|
animation: load8 1.1s infinite linear; }
|
||||||
|
|
||||||
|
#preloader-inner,
|
||||||
|
#preloader-inner:after {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 10em;
|
||||||
|
height: 10em; }
|
||||||
|
|
||||||
|
@-webkit-keyframes load8 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
@keyframes load8 {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg); } }
|
||||||
|
|
82
src/styles/_pricing.scss
Executable file
@@ -0,0 +1,82 @@
|
|||||||
|
/*
|
||||||
|
Pricing tables
|
||||||
|
*/
|
||||||
|
|
||||||
|
.pricing-card{
|
||||||
|
|
||||||
|
border-radius: 6px;
|
||||||
|
-webkit-border-radius: 6px;
|
||||||
|
transition: all .3s;
|
||||||
|
-webkit-transition: all .3s;
|
||||||
|
-moz-transition: all .3s;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top:5px solid #ddd;
|
||||||
|
.pricing-header{
|
||||||
|
line-height:2rem;
|
||||||
|
padding: 30px 20px;
|
||||||
|
.price{
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight:600;
|
||||||
|
color:#000;
|
||||||
|
sup{
|
||||||
|
color:#999;
|
||||||
|
font-size: .9rem;
|
||||||
|
font-weight:400;
|
||||||
|
top:10px;
|
||||||
|
vertical-align:top;
|
||||||
|
}
|
||||||
|
sub{
|
||||||
|
color:#999;
|
||||||
|
font-size: .9rem;
|
||||||
|
font-weight:400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.price-title{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-family: $title-font;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
border-top: 5px solid $primary-color;
|
||||||
|
background-color: $primary-color;
|
||||||
|
color:#fff;
|
||||||
|
box-shadow: 0px 0px 25px rgba(0,0,0,0.1);
|
||||||
|
.pricing-features{
|
||||||
|
background-color: rgba(255,255,255,.1);
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
color:#fff;
|
||||||
|
sup,sub{
|
||||||
|
color: rgba(255,255,255,.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing-features{
|
||||||
|
padding: 30px 20px;
|
||||||
|
background-color:#fbfbfb;
|
||||||
|
ul{
|
||||||
|
margin-bottom: 0px;
|
||||||
|
li{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 30px;
|
||||||
|
margin-bottom:10px;
|
||||||
|
font-size:1rem;
|
||||||
|
text-transform:capitalize;
|
||||||
|
&:before{
|
||||||
|
position:absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
font-family: "FontAwesome";
|
||||||
|
content: "\f00c";
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
margin-bottom:0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing-footer{
|
||||||
|
padding: 20px;
|
||||||
|
}
|
101
src/styles/_team.scss
Executable file
@@ -0,0 +1,101 @@
|
|||||||
|
/*
|
||||||
|
Team style
|
||||||
|
*/
|
||||||
|
.team-card{
|
||||||
|
position:relative;
|
||||||
|
overflow:hidden;
|
||||||
|
h4{
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
.team-overlay{
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-flex-wrap: wrap;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position:absolute;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background-color:rgba(#000,.8);
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
opacity:0;
|
||||||
|
-webkit-transition:all 350ms;
|
||||||
|
-moz-transition:all 350ms;
|
||||||
|
-o-transition:all 350ms;
|
||||||
|
transition:all 350ms;
|
||||||
|
.team-detail{
|
||||||
|
-webkit-transform: scale(0.9);
|
||||||
|
-moz-transform: scale(0.9);
|
||||||
|
-o-transform: scale(0.9);
|
||||||
|
-ms-transform: scale(0.9);
|
||||||
|
transform: scale(0.9);
|
||||||
|
-webkit-transition:all 250ms;
|
||||||
|
-moz-transition:all 250ms;
|
||||||
|
-o-transition:all 250ms;
|
||||||
|
transition:all 250ms;
|
||||||
|
text-align:center;
|
||||||
|
width:100%;
|
||||||
|
h4{
|
||||||
|
color:#fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom:0px;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
color:rgba(#fff,.8);
|
||||||
|
display:block;
|
||||||
|
font-size:13px;
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
|
.seprator-overlay{
|
||||||
|
width:80px;
|
||||||
|
height:1px;
|
||||||
|
margin:10px auto;
|
||||||
|
background:rgba(#fff,.8);
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
li{
|
||||||
|
a{
|
||||||
|
color:#fff;
|
||||||
|
&:hover{
|
||||||
|
color:$primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
.team-overlay{
|
||||||
|
opacity:1;
|
||||||
|
.team-detail{
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
-o-transform: scale(1);
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
-webkit-transition:all 250ms;
|
||||||
|
-moz-transition:all 250ms;
|
||||||
|
-o-transition:all 250ms;
|
||||||
|
transition:all 250ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-card-default{
|
||||||
|
ul li {
|
||||||
|
&+li{
|
||||||
|
margin-left:5px;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: #999;
|
||||||
|
font-size: 20px;
|
||||||
|
&:hover{
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
16
src/styles/_testimonials.scss
Executable file
@@ -0,0 +1,16 @@
|
|||||||
|
/*
|
||||||
|
Testimonials
|
||||||
|
*/
|
||||||
|
.cbp-l-slider-testimonials-wrap{
|
||||||
|
background-color: transparent;
|
||||||
|
border:0px;
|
||||||
|
}
|
||||||
|
.cbp-l-grid-slider-testimonials-body{
|
||||||
|
font-family: $base-font;
|
||||||
|
}
|
||||||
|
.cbp-l-grid-slider-testimonials-footer{
|
||||||
|
font-family: $title-font;
|
||||||
|
}
|
||||||
|
.cbp-l-slider-testimonials-wrap{
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
10
src/styles/_variables.scss
Executable file
@@ -0,0 +1,10 @@
|
|||||||
|
$title-font:'Open Sans', sans-serif;
|
||||||
|
$styled-font:'Playfair Display', serif;
|
||||||
|
$base-font:'Open Sans', sans-serif;
|
||||||
|
$primary-color:#4683df;
|
||||||
|
$danger-color:#c9302c;
|
||||||
|
$success-color:#5cb85c;
|
||||||
|
$warning-color:#f0ad4e;
|
||||||
|
$default-color:#f7f7f7;
|
||||||
|
$dark-color:#333;
|
||||||
|
$info-color:#5bc0de;
|
41
src/styles/style-leftNavbar.scss
Executable file
@@ -0,0 +1,41 @@
|
|||||||
|
/*
|
||||||
|
Assan onepage style file
|
||||||
|
Version- 3.8
|
||||||
|
author - design_mylife
|
||||||
|
support - mylifedesign143@gmail.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'FontAwesome';
|
||||||
|
src: url("../bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0");
|
||||||
|
src: url("../bower_components/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format('embedded-opentype'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0") format('woff2'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0") format('woff'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0") format('truetype'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
/**et line icons**/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'et-line';
|
||||||
|
src: url("../et-line-font/fonts/et-line.eot");
|
||||||
|
src: url("../et-line-font/fonts/et-line.eot?#iefix") format("embedded-opentype"), url("../et-line-font/fonts/et-line.woff") format("woff"), url("../et-line-font/fonts/et-line.ttf") format("truetype"), url("../et-line-font/fonts/et-line.svg#et-line") format("svg");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal; }
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500,600');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i');
|
||||||
|
@import "src/styles/variables";
|
||||||
|
@import "src/styles/base";
|
||||||
|
@import "src/styles/preloader";
|
||||||
|
@import "src/styles/buttons";
|
||||||
|
@import "src/styles/header-left";
|
||||||
|
@import "src/styles/dropdown";
|
||||||
|
@import "src/styles/hero";
|
||||||
|
@import "src/styles/link-hovers";
|
||||||
|
@import "src/styles/portfolio";
|
||||||
|
@import "src/styles/pricing";
|
||||||
|
@import "src/styles/team";
|
||||||
|
@import "src/styles/cta-parallax";
|
||||||
|
@import "src/styles/testimonials";
|
||||||
|
@import "src/styles/custom-smartForm";
|
||||||
|
@import "src/styles/footer";
|
||||||
|
|
||||||
|
|
69
src/styles/style.scss
Executable file
@@ -0,0 +1,69 @@
|
|||||||
|
/*
|
||||||
|
Assan onepage style file
|
||||||
|
Version- 3.8
|
||||||
|
author - design_mylife
|
||||||
|
support - mylifedesign143@gmail.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "bootstrap/dist/css/bootstrap.css";
|
||||||
|
@import "animate.css";
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500,600');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i');
|
||||||
|
@import "src/styles/variables";
|
||||||
|
@import "src/styles/base";
|
||||||
|
@import "src/styles/preloader";
|
||||||
|
@import "src/styles/buttons";
|
||||||
|
@import "src/styles/header";
|
||||||
|
@import "src/styles/dropdown";
|
||||||
|
@import "src/styles/hero";
|
||||||
|
@import "src/styles/link-hovers";
|
||||||
|
@import "src/styles/portfolio";
|
||||||
|
@import "src/styles/pricing";
|
||||||
|
@import "src/styles/team";
|
||||||
|
@import "src/styles/cta-parallax";
|
||||||
|
@import "src/styles/testimonials";
|
||||||
|
@import "src/styles/custom-smartForm";
|
||||||
|
@import "src/styles/footer";
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
z-index: 9999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/******************
|
||||||
|
|
||||||
|
Template responsive css
|
||||||
|
|
||||||
|
*******************/
|
||||||
|
@media(max-width:991px){
|
||||||
|
.navbar .container{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
.navbar-expand-lg .navbar-toggler{
|
||||||
|
position:absolute;
|
||||||
|
right:15px;
|
||||||
|
border:0px;
|
||||||
|
top:3px;
|
||||||
|
}
|
||||||
|
h2.display-4{
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(max-width:991px){
|
||||||
|
h2.display-4{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control,select.form-control {
|
||||||
|
&.error{
|
||||||
|
border-color: $danger-color;
|
||||||
|
background-color:rgba($danger-color,.1);
|
||||||
|
box-shadow:0px 0px 5px 2px rgba($danger-color,.15);
|
||||||
|
}
|
||||||
|
}
|
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
26
tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true,
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
10
tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|