first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
+38
@@ -0,0 +1,38 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
import logo from './logo.svg';
|
||||
// import './App.css';
|
||||
import Header from './components/Header';
|
||||
import Footer from './components/Footer';
|
||||
import Home from './pages/Home';
|
||||
import Faqs from './pages/Faqs';
|
||||
import Features from './pages/Features';
|
||||
import More_apps from './pages/More_apps';
|
||||
import Pricing from './pages/Pricing';
|
||||
import Reviews from './pages/Reviews';
|
||||
import Single_post from './pages/Single_post';
|
||||
import Terms from './pages/Terms';
|
||||
import Demo from './pages/Demo';
|
||||
import About from './pages/About';
|
||||
import Blog_listing from './pages/Blog_listing';
|
||||
import Contacts from './pages/Contacts';
|
||||
import Home_2 from './pages/Home_2';
|
||||
import Home_3 from './pages/Home_3';
|
||||
import Home_4 from './pages/Home_4';
|
||||
import Home_5 from './pages/Home_5';
|
||||
import Home_6 from './pages/Home_6';
|
||||
import Home_7 from './pages/Home_7';
|
||||
import Home_8 from './pages/Home_8';
|
||||
import Home_9 from './pages/Home_9';
|
||||
import Home_10 from './pages/Home_10';
|
||||
import Home_11 from './pages/Home_11';
|
||||
import Home_12 from './pages/Home_12';
|
||||
|
||||
import FloatHome from './pages/FloatHome';
|
||||
|
||||
|
||||
// import {
|
||||
// BrowserRouter as Router,
|
||||
// Routes,
|
||||
// Route
|
||||
// } from "react-router-dom";
|
||||
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
|
||||
<Header/>
|
||||
<Routes>
|
||||
<Route path="/" element={<FloatHome/>} />
|
||||
<Route path="/about" element={<About/>} />
|
||||
<Route path="/faqs" element={<Faqs/>} />
|
||||
<Route path="/features" element={<Features/>} />
|
||||
<Route path="/more_apps" element={<More_apps/>} />
|
||||
<Route path="/pricing" element={<Pricing/>} />
|
||||
<Route path="/reviews" element={<Reviews/>} />
|
||||
<Route path="/single_post" element={<Single_post/>} />
|
||||
<Route path="/terms" element={<Terms/>} />
|
||||
<Route path="/demo" element={<Demo/>} />
|
||||
<Route path="/about" element={<About/>} />
|
||||
<Route path="/blog_listing" element={<Blog_listing/>} />
|
||||
<Route path="/contacts" element={<Contacts/>} />
|
||||
<Route path="/home_2" element={<Home_2/>} />
|
||||
<Route path="/home_3" element={<Home_3/>} />
|
||||
<Route path="/home_4" element={<Home_4/>} />
|
||||
<Route path="/home_5" element={<Home_5/>} />
|
||||
<Route path="/home_6" element={<Home_6/>} />
|
||||
<Route path="/home_7" element={<Home_7/>} />
|
||||
<Route path="/home_8" element={<Home_8/>} />
|
||||
<Route path="/home_9" element={<Home_9/>} />
|
||||
<Route path="/home_10" element={<Home_10/>} />
|
||||
<Route path="/home_11" element={<Home_11/>} />
|
||||
<Route path="/home_12" element={<Home_12/>} />
|
||||
</Routes>
|
||||
<Footer/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
import React, {component} from 'react';
|
||||
|
||||
class Banner extends React.Component {
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
|
||||
<div id="banner_cover" className="owl-carousel owl-theme" >
|
||||
<div className="item">
|
||||
<div className="banner_text">
|
||||
<h1>Great Taste Knows <br/>No Boundaries</h1>
|
||||
<a className="custom_button" href="product.html">View Products</a>
|
||||
</div>
|
||||
<img src="assets/images/banner_01.jpg" alt="..."/>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="banner_text white_text">
|
||||
<h1>Great Taste Knows <br/>No Boundaries</h1>
|
||||
<a className="custom_button" href="product.html">View Products</a>
|
||||
</div>
|
||||
<img src="assets/images/banner_02.jpg" alt="..."/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Banner
|
||||
@@ -0,0 +1,19 @@
|
||||
import React, {component} from 'react';
|
||||
|
||||
class Breadcrumb extends React.Component {
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
|
||||
<div class="bread_cover">
|
||||
<div class="container">
|
||||
<h2>Contact</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Breadcrumb
|
||||
@@ -0,0 +1,73 @@
|
||||
import React, {component} from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
class Footer extends React.Component {
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
<footer id="footer-3" className="footer division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="row">
|
||||
<div className="col-sm-6 col-md-4 col-lg-3">
|
||||
<div className="footer-links mb-40">
|
||||
<ul className="foo-links clearfix">
|
||||
<li><p className="p-md"><Link to="/#">App Features</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Integrations</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">App Updates</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Customer Stories</Link></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-4 col-lg-3">
|
||||
<div className="footer-links mb-40">
|
||||
<ul className="foo-links clearfix">
|
||||
<li><p className="p-md"><Link to="/#">Our Blog</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Customer Stories</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Life Chatting</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Resources</Link></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-4 col-lg-3">
|
||||
<div className="footer-links mb-40">
|
||||
<ul className="foo-links clearfix">
|
||||
<li><p className="p-md"><Link to="/#">About Us</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Press & Media</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Advertising</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Privacy Policy</Link></p></li>
|
||||
<li><p className="p-md"><Link to="/#">Terms & Privacy</Link></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-8 col-lg-3">
|
||||
<div className="footer-store-badges text-right mb-40">
|
||||
<Link to="/#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
||||
</Link>
|
||||
<Link to="/#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="bottom-footer footer-copyright text-center">
|
||||
<p>© 2023 Float Mobility with Intelligence. All Rights Reserved</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Footer
|
||||
@@ -0,0 +1,112 @@
|
||||
import React, {component} from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
class Header extends React.Component {
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
|
||||
<header id="header" className="header white-menu navbar-dark">
|
||||
|
||||
<div className="header-wrapper">
|
||||
|
||||
<div className="wsmobileheader clearfix">
|
||||
<span className="smllogo"><img src="assets/images/logo-01.png" alt="mobile-logo"/></span>
|
||||
<Link to="#" id="wsnavtoggle" className="wsanimated-arrow"><span></span></Link>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="wsmainfull menu clearfix">
|
||||
<div className="wsmainwp clearfix">
|
||||
|
||||
|
||||
|
||||
<div className="desktoplogo"><Link to="/demo" className="logo-black"><img src="assets/images/logo-01.png" alt="header-logo"/></Link></div>
|
||||
<div className="desktoplogo"><Link to="/demo" className="logo-white"><img src="assets/images/logo-white.png" alt="header-logo"/></Link></div>
|
||||
|
||||
|
||||
|
||||
<nav className="wsmenu clearfix">
|
||||
<ul className="wsmenu-list nav-rose-hover">
|
||||
|
||||
<li aria-haspopup="true"><Link to="/">Home</Link>
|
||||
{/* <div className="wsmegamenu clearfix halfmenu">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<ul className="col-lg-6 link-list">
|
||||
<li><Link to="/">Home</Link></li>
|
||||
<li><Link to="/home_2">Home 2</Link></li>
|
||||
<li><Link to="/home_3">Home 3</Link></li>
|
||||
<li><Link to="/home_4">Home 4</Link></li>
|
||||
<li><Link to="/home_5">Home 5</Link></li>
|
||||
<li><Link to="/home_6">Home 6</Link></li>
|
||||
</ul>
|
||||
<ul className="col-lg-6 link-list">
|
||||
<li><Link to="/home_7">Home 7</Link></li>
|
||||
<li><Link to="/home_8">Home 8</Link></li>
|
||||
<li><Link to="/home_9">Home 9</Link></li>
|
||||
<li><Link to="/home_10">Home 10</Link></li>
|
||||
<li><Link to="/home_11">Home 11</Link></li>
|
||||
<li><Link to="/home_12">Home 12</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li className="nl-simple" aria-haspopup="true"><Link to="/about">About NordEx</Link></li>
|
||||
<li aria-haspopup="true"><Link to="#">Pages <span className="wsarrow"></span></Link>
|
||||
<div className="wsmegamenu clearfix halfmenu">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
|
||||
<ul className="col-lg-6 link-list">
|
||||
<li><Link to="features">Features</Link></li>
|
||||
<li><Link to="/pricing">Pricing Plans</Link></li>
|
||||
<li><Link to="/more_apps">More Apps</Link></li>
|
||||
<li><Link to="/faqs">FAQs Page</Link></li>
|
||||
</ul>
|
||||
|
||||
<ul className="col-lg-6 link-list">
|
||||
<li><Link to="/blog_listing">Blog Listing</Link></li>
|
||||
<li><Link to="/single_post">Single Blog Post</Link></li>
|
||||
<li><Link to="/terms">Terms & Privacy</Link></li>
|
||||
<li><Link to="/contacts">Contact Us</Link></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nl-simple" aria-haspopup="true"><Link to="/faqs">FAQs</Link></li>
|
||||
<li className="nl-simple" aria-haspopup="true"><Link to="/more_apps">More Apps</Link></li>
|
||||
<li className="nl-simple" aria-haspopup="true"><Link to="/blog_listing">Blog</Link></li>
|
||||
<li className="nl-simple" aria-haspopup="true">
|
||||
<Link to="/contacts" className="btn btn-rose tra-grey-hover last-link">Let's Started</Link>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Header
|
||||
@@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
ReactDOM.render(
|
||||
// basename='/usr/src/app/build'
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>,
|
||||
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,653 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class About extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
|
||||
{/* PAGE HERO
|
||||
============================================= */}
|
||||
<div id="about-page" className="rel purple_gradient bg_shape_01 page-hero-section division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8 offset-lg-2">
|
||||
<div className="hero-txt text-center white-color">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Some Words About Us</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END PAGE HERO */}
|
||||
{/* ABOUT-2
|
||||
============================================= */}
|
||||
<div id="about-2" className="wide-90 about-section division">
|
||||
<div className="container">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="about-2-txt pc-50">
|
||||
{/* SMALL TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="txt-block mb-35">
|
||||
<h5 className="h5-lg">We believe in the power of simple design</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* LEFT COLUMN */}
|
||||
<div className="col-md-6">
|
||||
<div className="txt-block top-box">
|
||||
{/* Text */}
|
||||
<p className="p-lg">Gravida porta velna vitae auctor congue undo impedit nihil ligula risus. Mauris
|
||||
donec and ligula magnis sapien. Sagittis congue augue egestas volutpat egestas suscipit egestas a magna ipsum vitae a purus efficitur ipsum
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Gravida porta and vitae auctor congue magna an impedit nihil ligula risus mauris
|
||||
donec ligula magnis aliqum undo mullam at ligula risus. Vitae donec ligula magnis
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END LEFT COLUMN */}
|
||||
{/* RIGHT COLUMN */}
|
||||
<div className="col-md-6">
|
||||
<div className="txt-block">
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida a donec ipsum, porta justo.
|
||||
Velna vitae auctor a congue magna and donec nihil impedit ligula risus.mauris donec
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod and pretium
|
||||
purus pretium ligula rutrum tempor
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien an euismod purus blandit purus ipsum primis in
|
||||
cubilia laoreet augue luctus dolor
|
||||
</p>
|
||||
</li>
|
||||
</ul> {/* End List */}
|
||||
</div>
|
||||
</div> {/* END RIGHT COLUMN */}
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="img-block mt-50 mb-70">
|
||||
<img className="img-fluid" src="assets/images/about-2-img.jpg" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="about-2-txt pc-50">
|
||||
<div className="row">
|
||||
{/* LEFT COLUMN */}
|
||||
<div className="col-md-6">
|
||||
<div className="txt-block top-box">
|
||||
{/* Title */}
|
||||
<h5 className="h5-lg">We care about the details</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Gravida porta velna vitae auctor congue undo impedit nihil ligula risus. Mauris
|
||||
donec and ligula magnis sapien. Sagittis congue augue egestas volutpat egestas suscipit egestas a magna ipsum vitae a purus efficitur ipsum
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Gravida porta and vitae auctor congue magna an impedit nihil ligula risus mauris
|
||||
donec ligula magnis aliqum undo mullam at ligula risus. Vitae donec ligula magnis
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END LEFT COLUMN */}
|
||||
{/* RIGHT COLUMN */}
|
||||
<div className="col-md-6">
|
||||
<div className="txt-block">
|
||||
{/* Title */}
|
||||
<h5 className="h5-lg">With knowledge, skill and hard work</h5>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida a donec ipsum, porta justo.
|
||||
Velna vitae auctor a congue magna and donec nihil impedit ligula risus.mauris donec
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod and pretium
|
||||
purus pretium ligula rutrum tempor
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien an euismod purus blandit purus ipsum primis in
|
||||
cubilia laoreet augue luctus dolor
|
||||
</p>
|
||||
</li>
|
||||
</ul> {/* End List */}
|
||||
</div>
|
||||
</div> {/* END RIGHT COLUMN */}
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* BUTTON */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="about-2-btn text-center mt-40">
|
||||
<a href="#" className="btn btn-md btn-skyblue tra-skyblue-hover">Read the Reviews</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BUTTON */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END ABOUT-2 */}
|
||||
{/* TESTIMONIALS-1
|
||||
============================================= */}
|
||||
<section id="reviews-1" className="rel bg_whitesmoke wide-100 reviews-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-60">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Why Customers Love Us</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* TESTIMONIALS CONTENT */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="owl-carousel owl-theme reviews-1-wrapper">
|
||||
{/* TESTIMONIAL #1 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Great Flexibility!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Etiam sapien sem at sagittis congue an augue massa varius egestas
|
||||
undo suscipit magna tempus undo aliquet
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Scott Boxer</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #1 */}
|
||||
{/* TESTIMONIAL #2 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Simple and Useful!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">At sagittis congue augue undo egestas magna ipsum vitae purus and
|
||||
ipsum primis suscipit
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Wendy T.</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #2 */}
|
||||
{/* TESTIMONIAL #3 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">I love this App!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Mauris donec ociis magnis and sapien etiam sapien congue undo
|
||||
augue pretium and ligula augue a lectus aenean magna
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- pebz13</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #3 */}
|
||||
{/* TESTIMONIAL #4 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-1" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Best App for iOS!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">An augue in cubilia laoreet magna and suscipit egestas magna
|
||||
ipsum purus ipsum and suscipit
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Scott Boxer</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #4 */}
|
||||
{/* TESTIMONIAL #5 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Awesome Design!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Mauris donec magnis sapien undo etiam sapien and congue augue
|
||||
egestas ultrice a vitae purus velna integer tempor
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- John Sweet</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #5 */}
|
||||
{/* TESTIMONIAL #6 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Simply Amazing App!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">An augue cubilia laoreet undo magna a suscipit undo egestas
|
||||
magna ipsum ligula vitae purus ipsum primis cubilia blandit
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Leslie D.</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #6 */}
|
||||
{/* TESTIMONIAL #7 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Powerful Features!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Augue egestas volutpat and egestas augue in cubilia laoreet
|
||||
magna undo suscipit luctus
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Marisol19</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #7 */}
|
||||
{/* TESTIMONIAL #8 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Super Support!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Aliquam augue suscipit luctus neque purus ipsum neque dolor
|
||||
primis libero tempus at blandit posuere varius magna
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- AJ</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #8 */}
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIALS CONTENT */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END TESTIMONIALS-1 */}
|
||||
{/* CONTENT-2
|
||||
============================================= */}
|
||||
<section id="content-2" className="wide-50 content-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6">
|
||||
<div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-02.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6">
|
||||
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id grey-color">Beauty of Simplicity</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">All we do is dream and craft amazing digital products</h2>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia
|
||||
laoreet augue luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and
|
||||
turpis dolores aliquam quaerat sodales a sapien
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-2 */}
|
||||
{/* BRANDS-2
|
||||
============================================= */}
|
||||
<section id="brands-2" className="pb-60 brands-section division">
|
||||
<div className="container">
|
||||
{/* BRANDS TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-8 offset-lg-2">
|
||||
<div className="brands-title text-center">
|
||||
<h4 className="h4-md">You might know NordEx from:</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* BRANDS-2 WRAPPER */}
|
||||
<div className="brands-2-wrapper">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-1.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-2.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-3.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-4.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-5.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-6.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-7.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-8.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-9.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-10.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BRANDS-2 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END BRANDS-2 */}
|
||||
{/* SECTION DIVIDER
|
||||
============================================= */}
|
||||
<div className="divider-wrapper text-center"><div className="section-divider" /></div>
|
||||
{/* TEAM-1
|
||||
============================================= */}
|
||||
<section id="team-1" className="wide-60 team-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">One Team Many Talents</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* TEAM MEMBERS HOLDER */}
|
||||
<div className="team-members-holder pc-20 text-center">
|
||||
<div className="row">
|
||||
{/* TEAM MEMBER #1 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-1.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm">Jonathan Barnes</h5>
|
||||
<p>Founder and CEO</p>
|
||||
<span><a href="#" className="grey-color">@jonatanbarnes</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #1 */}
|
||||
{/* TEAM MEMBER #2 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-2.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm">Jamie Bartlett</h5>
|
||||
<p>Software Engineer</p>
|
||||
<span><a href="#" className="grey-color">@jamiebartlett</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #2 */}
|
||||
{/* TEAM MEMBER #3 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-3.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm">Matthew Anderson</h5>
|
||||
<p>Software Engineer</p>
|
||||
<span><a href="#" className="grey-color">@matthewanderson</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #3 */}
|
||||
{/* TEAM MEMBER #4 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-4.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm">Megan Coleman</h5>
|
||||
<p>UX / UI Designer</p>
|
||||
<span><a href="#" className="grey-color">@megancoleman</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #4 */}
|
||||
{/* TEAM MEMBER #5 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-5.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm">Charlotte Johnson</h5>
|
||||
<p>Quality Assurance</p>
|
||||
<span><a href="#" className="grey-color">@charlottejohnson</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #5 */}
|
||||
{/* TEAM MEMBER #6 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-6.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm">Olivia Steiner</h5>
|
||||
<p>Head of Marketing</p>
|
||||
<span><a href="#" className="grey-color">@oliviasteiner</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #6 */}
|
||||
{/* TEAM MEMBER #7 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-7.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm">Mark Brayton</h5>
|
||||
<p>Customer Care</p>
|
||||
<span><a href="#" className="grey-color">@markbrayton</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #7 */}
|
||||
{/* TEAM MEMBER #8 */}
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="team-member wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Team Member Photo */}
|
||||
<div className="team-member-photo pc-10">
|
||||
<img className="img-fluid" src="assets/images/team-8.jpg" alt="team-member-foto" />
|
||||
</div>
|
||||
{/* Team Member Data */}
|
||||
<div className="team-member-data">
|
||||
<h5 className="h5-sm ">Grow With Us</h5>
|
||||
<span><a href="mailto:youremail@mail.com" className="grey-color">hireme@domain.com</a></span>
|
||||
<span><a href="mailto:youremail@mail.com" className="grey-color">hireme1@domain.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEAM MEMBER #8 */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* TEAM MEMBERS HOLDER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END TEAM-1 */}
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
<section id="newsletter-1" className="pb-20 newsletter-section division">
|
||||
<div className="container">
|
||||
<div className="newsletter-wrapper bg-white">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-txt">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Subscribe to Our Newsletter</span>
|
||||
{/* Title */}
|
||||
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* NEWSLETTER FORM */}
|
||||
<div className="col-lg-6">
|
||||
<form className="newsletter-form">
|
||||
<div className="input-group">
|
||||
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
||||
<span className="input-group-btn">
|
||||
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
|
||||
</span>
|
||||
</div>
|
||||
{/* Newsletter Form Notification */}
|
||||
<label htmlFor="s-email" className="form-notification" />
|
||||
</form>
|
||||
</div> {/* END NEWSLETTER FORM */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End newsletter-holder */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END NEWSLETTER-1 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default About
|
||||
@@ -0,0 +1,311 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Blog_listing extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
{/* HEADER
|
||||
============================================= */}
|
||||
|
||||
{/* BLOG POSTS LISTING
|
||||
============================================= */}
|
||||
<section id="blog-page" className="bg_whitesmoke hero-offset-nav pb-60 blog-page-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-md-10 offset-md-1">
|
||||
<div className="section-title text-center pc-50 mb-70">
|
||||
{/* Title */}
|
||||
<h3 className="h3-lg">Relevant news, tech stuff, and more for you. Welcome to our blog</h3>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURED POST */}
|
||||
<div className="rel blog-post featured-post wide-post">
|
||||
<div className="row d-flex align-items-center">
|
||||
<div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="col-lg-7 blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="col-lg-5 blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">NordEx News</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-xl">
|
||||
<a href="single-post.html">Tempor sapien donec gravida a suscipit and porta justo vitae</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta
|
||||
undo velna dolor in cubilia laoreet
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>12 min read</p>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END FEATURED POST */}
|
||||
{/* POSTS WRAPPER */}
|
||||
<div className="posts-wrapper">
|
||||
{/* BLOG POSTS CATEGORY */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<h5 className="h5-lg posts-category">Latest Articles</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* BLOG POST #1 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">NordEx News</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-xs">
|
||||
<a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida
|
||||
porta undo velna dolor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>12 min read</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BLOG POST #1 */}
|
||||
{/* BLOG POST #2 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">Inspiration</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-xs">
|
||||
<a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
||||
dolor vitae auctor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>8 min read</p>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #2 */}
|
||||
{/* BLOG POST #3 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">Tutorials</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-xs">
|
||||
<a href="single-post.html">Tempor sapien donec gravida ipsum and porta justo</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
||||
dolor vitae auctor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>22 min read</p>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #3 */}
|
||||
{/* BLOG POST #4 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-5-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">Extensions</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-xs">
|
||||
<a href="single-post.html">Neque purus an ipsum neque and dolor libero risus mullam blandit at tempor sapien</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
||||
dolor vitae auctor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>1 day read</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BLOG POST #4 */}
|
||||
{/* BLOG POST #5 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-6-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">Community</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-xs">
|
||||
<a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
||||
dolor vitae auctor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>54 min read</p>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #5 */}
|
||||
{/* BLOG POST #6 */}
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">Extensions</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-xs">
|
||||
<a href="single-post.html">Lipsum gravida porta velna NordEx, donec gravida ipsum a
|
||||
porta justo tempor
|
||||
</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
||||
dolor vitae auctor
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>4 hours read</p>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #6 */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END POSTS WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END BLOG POSTS LISTING */}
|
||||
{/* PAGE PAGINATION
|
||||
============================================= */}
|
||||
<div className="bg_whitesmoke pb-100 page-pagination division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul className="pagination ico-20 justify-content-center">
|
||||
<li className="page-item disabled"><a className="page-link" href="#" tabIndex={-1}>
|
||||
<span className="flaticon-chevron-pointing-to-the-left" />
|
||||
</a></li>
|
||||
<li className="page-item active"><a className="page-link" href="#">1 <span className="sr-only">(current)</span></a></li>
|
||||
<li className="page-item"><a className="page-link" href="#">2</a></li>
|
||||
<li className="page-item"><a className="page-link" href="#">3</a></li>
|
||||
<li className="page-item"><a className="page-link" href="#">4</a></li>
|
||||
<li className="page-item"><a className="page-link" href="#"><span className="flaticon-right-chevron" /></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END PAGE PAGINATION */}
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
<section id="newsletter-1" className="bg_whitesmoke pb-20 newsletter-section division">
|
||||
<div className="container">
|
||||
<div className="newsletter-wrapper bg-white">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-txt">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Subscribe to Our Newsletter</span>
|
||||
{/* Title */}
|
||||
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* NEWSLETTER FORM */}
|
||||
<div className="col-lg-6">
|
||||
<form className="newsletter-form">
|
||||
<div className="input-group">
|
||||
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
||||
<span className="input-group-btn">
|
||||
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
|
||||
</span>
|
||||
</div>
|
||||
{/* Newsletter Form Notification */}
|
||||
<label htmlFor="s-email" className="form-notification" />
|
||||
</form>
|
||||
</div> {/* END NEWSLETTER FORM */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End newsletter-holder */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END NEWSLETTER-1 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Blog_listing
|
||||
@@ -0,0 +1,102 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Contacts extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
{/* HEADER
|
||||
============================================= */}
|
||||
{/* CONTACTS-2
|
||||
============================================= */}
|
||||
<section id="contacts-2" className="bg_whitesmoke hero-offset-nav pb-50 contacts-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">How Can We Help?</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* CONTACT FORM */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
|
||||
<div className="form-holder">
|
||||
<form name="contactform" className="row contact-form">
|
||||
{/* Form Select */}
|
||||
<div id="input-subject" className="col-md-12 input-subject">
|
||||
<p className="p-lg">This question is about: </p>
|
||||
<span>Choose a topic, so we know who to send your request to: </span>
|
||||
<select id="inlineFormCustomSelect1" name="Subject" className="custom-select subject">
|
||||
<option>This question is about...</option>
|
||||
<option>Registering/Authorising</option>
|
||||
<option>Using Application</option>
|
||||
<option>Troubleshooting</option>
|
||||
<option>Backup/Restore</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* Contact Form Input */}
|
||||
<div id="input-name" className="col-md-12">
|
||||
<p className="p-lg">Your Name: </p>
|
||||
<span>Please enter your real name: </span>
|
||||
<input type="text" name="name" className="form-control name" placeholder="Your Name*" />
|
||||
</div>
|
||||
<div id="input-email" className="col-md-12">
|
||||
<p className="p-lg">Your Email Address: </p>
|
||||
<span>Please carefully check your email address for accuracy</span>
|
||||
<input type="text" name="email" className="form-control email" placeholder="Email Address*" />
|
||||
</div>
|
||||
<div id="input-message" className="col-md-12 input-message">
|
||||
<p className="p-lg">Explain your question in details: </p>
|
||||
<span>Your OS version, NordEx version & build, steps you did. Be VERY precise!</span>
|
||||
<textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." defaultValue={""} />
|
||||
</div>
|
||||
{/* Contact Form Button */}
|
||||
<div className="col-md-12 mt-15 form-btn text-right">
|
||||
<button type="submit" className="btn btn-skyblue tra-skyblue-hover submit">Submit Request</button>
|
||||
</div>
|
||||
{/* Contact Form Message */}
|
||||
<div className="col-lg-12 contact-form-msg">
|
||||
<span className="loading" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END CONTACT FORM */}
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END CONTACTS-2 */}
|
||||
{/* SECTION DIVIDER
|
||||
============================================= */}
|
||||
<div className="divider-wrapper text-center bg_whitesmoke"><div className="section-divider" /></div>
|
||||
{/* FOOTER-3
|
||||
============================================= */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Contacts
|
||||
@@ -0,0 +1,358 @@
|
||||
import React, {Component} from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
|
||||
class Demo extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page-wrapper">
|
||||
|
||||
|
||||
{/* HERO
|
||||
============================================= */}
|
||||
<section id="hero" className="bg-fixed hero-section division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
{/* HERO TEXT */}
|
||||
<div className="hero-txt white-color text-center">
|
||||
<span className="version">HTML</span>
|
||||
<h2>Premium HTML5 App Landing Pages Pack</h2>
|
||||
<p>A great collection of flexible, ultra modern & creative landing page templates to promote your mobile App, services or business projects
|
||||
</p>
|
||||
</div>
|
||||
{/* HERO IMAGE */}
|
||||
<div className="hero-img"><img className="img-fluid" src="assets/images-demo/hero-img.png" alt="hero-image" /></div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END HERO */}
|
||||
{/* FEATURES
|
||||
============================================= */}
|
||||
|
||||
{/* SECTION DIVIDER
|
||||
============================================= */}
|
||||
<div className="divider-wrapper text-center"><div className="section-divider" /></div>
|
||||
{/* SELECT
|
||||
============================================= */}
|
||||
<section id="select" className="bg-scroll select-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1 section-title">
|
||||
<h2>Simple. Creative. Powerful</h2>
|
||||
<p>NordEx offers you 12 customizable layouts, with which you can build your website. Choose the one you like best
|
||||
and start customize it to your website
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* DEMOS WRAPPER */}
|
||||
<div className="row">
|
||||
{/* LAYOUT-1 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-1.jpg" alt="layout-1-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #1</h4>
|
||||
</div>
|
||||
{/* LAYOUT-2 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="0.6s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_2" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-2.jpg" alt="layout-2-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #2</h4>
|
||||
</div>
|
||||
{/* LAYOUT-3 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="0.8s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_3" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-3.jpg" alt="layout-3-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #3</h4>
|
||||
</div>
|
||||
{/* LAYOUT-4 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_4" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-4.jpg" alt="layout-4-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #4</h4>
|
||||
</div>
|
||||
{/* LAYOUT-5 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.2s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_5" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-5.jpg" alt="layout-5-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #5</h4>
|
||||
</div>
|
||||
{/* LAYOUT-6 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.4s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_6" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-6.jpg" alt="layout-6-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #6</h4>
|
||||
</div>
|
||||
{/* LAYOUT-7 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.6s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_7" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-7.jpg" alt="layout-7-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #7</h4>
|
||||
</div>
|
||||
{/* LAYOUT-8 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.8s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_8" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-8.jpg" alt="layout-8-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #8</h4>
|
||||
</div>
|
||||
{/* LAYOUT-9 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="2s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_9" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-9.jpg" alt="layout-9-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #9</h4>
|
||||
</div>
|
||||
{/* LAYOUT-10 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="2.2s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_10" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-10.jpg" alt="layout-10-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #10</h4>
|
||||
</div>
|
||||
{/* LAYOUT-11 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="2.4s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_11" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-11.jpg" alt="layout-11-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #11</h4>
|
||||
</div>
|
||||
{/* LAYOUT-12 */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="2.6s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/Home_12" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/layout-12.jpg" alt="layout-12-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Layout #12</h4>
|
||||
</div>
|
||||
</div> {/* END DEMOS WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END SELECT */}
|
||||
{/* BANNER-2
|
||||
============================================= */}
|
||||
<div id="banner-2" className="banner-section division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{/* TEXT*/}
|
||||
<div className="col-lg-6 offset-lg-6">
|
||||
<div className="banner-2-txt white-color">
|
||||
<span className="section-id">Fully Responsive</span>
|
||||
<h2>Works Perfectly on Any Device</h2>
|
||||
<p>NordEx is fully responsive, adapt the device size, pixel perfect and all elements look beautiful in all standard and
|
||||
Retina devices and resolutions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* IMAGE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-11">
|
||||
<div className="banner-2-img">
|
||||
<img className="img-fluid" src="assets/images-demo/banner-2-img.png" alt="banner-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BANNER-2 */}
|
||||
{/* INNER PAGES
|
||||
============================================= */}
|
||||
<section id="i-pages" className="ip-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1 section-title">
|
||||
<h2>10 Amazing Inner Pages</h2>
|
||||
<p>NordEx offers a vast number of pre-made inner pages which will save your time when building a website. Select a page and check it out!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* ABOUT PAGE */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/about" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/about.jpg" alt="about-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>About Page</h4>
|
||||
</div>
|
||||
{/* FEATURES PAGE */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="0.6s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/features" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/features.jpg" alt="features-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Features Page</h4>
|
||||
</div>
|
||||
{/* PRICING PLANS */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="0.8s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/pricing" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/pricing.jpg" alt="pricing-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Pricing Page</h4>
|
||||
</div>
|
||||
{/* REVIEWS PAGE */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/reviews" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/reviews.jpg" alt="reviews-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Reviews Page</h4>
|
||||
</div>
|
||||
{/* MORE APPS */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.2s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/more_apps" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/more-apps.jpg" alt="more-apps-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>More Apps</h4>
|
||||
</div>
|
||||
{/* FAQs PAGE */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.4s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/faqs" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/faqs.jpg" alt="faqs-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>FAQs Page</h4>
|
||||
</div>
|
||||
{/* TERMS & PRIVACY */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.6s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/terms" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/terms.jpg" alt="terms-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Terms & Privacy</h4>
|
||||
</div>
|
||||
{/* BLOG LISTING */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="1.8s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/blog_listing" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/blog-listing.jpg" alt="blog-listing-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Blog Listing</h4>
|
||||
</div>
|
||||
{/* SINGLE POST */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="2s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/single_post" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/single-post.jpg" alt="single-post-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Single Post</h4>
|
||||
</div>
|
||||
{/* CONTACTS PAGE */}
|
||||
<div className="col-md-6 col-lg-4 select_link wow fadeInUp" data-wow-delay="2.2s">
|
||||
<div className="hover-overlay">
|
||||
<Link to="/contacts" target="_blank">
|
||||
<img className="img-fluid" src="assets/images-demo/contacts.jpg" alt="contacts-preview" />
|
||||
</Link>
|
||||
</div>
|
||||
<h4>Contacts Page</h4>
|
||||
</div>
|
||||
{/* EMPTY */}
|
||||
<div className="col-md-6 col-lg-4 select_link empty_link wow fadeInUp" data-wow-delay="2.4s">
|
||||
<div className="hover-overlay">
|
||||
<img className="img-fluid" src="assets/images-demo/empty.png" alt="" />
|
||||
</div>
|
||||
<h4>Coming Soon</h4>
|
||||
</div>
|
||||
{/* EMPTY */}
|
||||
<div className="col-md-6 col-lg-4 select_link empty_link wow fadeInUp" data-wow-delay="2.6s">
|
||||
<div className="hover-overlay">
|
||||
<img className="img-fluid" src="assets/images-demo/empty.png" alt="" />
|
||||
</div>
|
||||
<h4>Coming Soon</h4>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END INNER PAGES */}
|
||||
{/* SECTION DIVIDER
|
||||
============================================= */}
|
||||
<div className="divider-wrapper text-center"><div className="section-divider" /></div>
|
||||
{/* BANNER-1
|
||||
============================================= */}
|
||||
<div id="banner-1" className="banner-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* TEXT*/}
|
||||
<div className="col-lg-6">
|
||||
<div className="banner-1-txt mb-40">
|
||||
<span className="section-id">Perfect Integration</span>
|
||||
<h2>Create your awesome website with NordEx</h2>
|
||||
<p>NordEx includes well designed components which always gives you best results as you wanted.
|
||||
Each content element has been crafted with terrific attention to details and offers multiple options.
|
||||
Combine the content elements to create unique websites in minutes. You are free to move the blocks between demos
|
||||
</p>
|
||||
<Link className="btn btn-rose tra-rose-hover" to="/" >See All Pages In Action</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* IMAGE */}
|
||||
<div className="col-lg-6">
|
||||
<div className="banner-1-img mb-40">
|
||||
<img className="img-fluid" src="assets/images-demo/banner-1-img.png" alt="banner-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BANNER-1 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Demo
|
||||
@@ -0,0 +1,230 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Faqs extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
{/* HEADER
|
||||
============================================= */}
|
||||
|
||||
{/* FAQs-2
|
||||
============================================= */}
|
||||
<section id="faqs-2" className="bg_whitesmoke hero-offset-nav pb-100 faqs-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Got Questions? Look Here</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FAQs-2 QUESTIONS */}
|
||||
<div className="faqs-2-questions pc-15">
|
||||
<div className="row">
|
||||
{/* QUESTIONS HOLDER */}
|
||||
<div className="col-lg-6">
|
||||
<div className="questions-holder pc-10">
|
||||
{/* QUESTION #1 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">How do I get started?</h5>
|
||||
{/* Answer */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet
|
||||
augue luctus
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* QUESTION #2 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">Can I see NordEx in action before purchasing it?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit
|
||||
ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #3 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">What are the requirements for using NordEx?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna
|
||||
vitae auctor integer congue undo magna at pretium purus pretium ligula
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #4 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">Can I use NordEx on different devices?</h5>
|
||||
{/* Answer */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus ligula euismod pretium purus
|
||||
pretium rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
|
||||
pretium a purus
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* QUESTION #5 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="1.2s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">Do you have a free trial?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and
|
||||
quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END QUESTIONS HOLDER */}
|
||||
{/* QUESTIONS HOLDER */}
|
||||
<div className="col-lg-6">
|
||||
<div className="questions-holder pc-10">
|
||||
{/* QUESTION #6 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">Troubles with verification</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and
|
||||
quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #7 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">How does NordEx handle my privacy?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Etiam amet mauris suscipit sit amet in odio. Integer congue leo metus. Vitae arcu mollis
|
||||
blandit ultrice ligula
|
||||
</p>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">An enim nullam tempor sapien gravida donec congue leo metus. Vitae arcu mollis blandit
|
||||
integer at velna
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #8 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">I have an issue with my account</h5>
|
||||
{/* Answer */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet
|
||||
augue luctus
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* QUESTION #9 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">What is the NordEx Membership?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit
|
||||
ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #10 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="1.2s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">How do I cancel my Membership?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna
|
||||
vitae auctor integer congue undo magna at pretium purus pretium ligula
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END QUESTIONS HOLDER */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END FAQs-2 QUESTIONS */}
|
||||
{/* MORE QUESTIONS BUTTON */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="more-questions text-center mt-40">
|
||||
<h5 className="h5-sm"><span className="flaticon-check" />
|
||||
Have more questions? <a href="contacts.html" className="skyblue-color">Ask your question here</a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END FAQs-2 */}
|
||||
{/* DOWNLOAD-2
|
||||
============================================= */}
|
||||
<section id="download-2" className="bg_whitesmoke pb-20 download-section division">
|
||||
<div className="container white-color">
|
||||
<div className="rel purple_gradient bg_shape_01 downloads-2-wrapper">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* DOWNLOAD TEXT */}
|
||||
<div className="col-lg-7 col-lg-7">
|
||||
<div className="download-2-txt white-color">
|
||||
{/* Icon */}
|
||||
<div className="download-2-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<div className="d2-txt">
|
||||
<h4 className="h4-md">Download NordEx to create your beautiful landing page</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* STORE BADGES */}
|
||||
<div className="col-lg-5 text-right">
|
||||
<div className="stores-badge">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore-white.png" alt="appstore-logo" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay-white.png" alt="googleplay-logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div> {/* END STORE BADGES */}
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END DOWNLOAD-2 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Faqs
|
||||
@@ -0,0 +1,433 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Features extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
|
||||
{/* CONTENT-3
|
||||
============================================= */}
|
||||
<section id="content-3" className="bg_whitesmoke hero-offset-nav pb-60 content-section division">
|
||||
<div className="container">
|
||||
{/* CONTENT BOX-1 */}
|
||||
<div id="cb-1-1" className="cbox-1 pb-25">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6 m-bottom">
|
||||
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id grey-color">Register in 30 Seconds</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Lightning fast and super powerful</h2>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
|
||||
luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
|
||||
sodales a sapien
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6 m-top">
|
||||
<div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-01.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END CONTENT BOX-1 */}
|
||||
{/* CONTENT BOX-2 */}
|
||||
<div id="cb-1-2" className="cbox-1">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6">
|
||||
<div className="img-block left-column pc-25 mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-02.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6">
|
||||
<div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id grey-color">Perfect Integration</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Work smarter with powerful features</h2>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
|
||||
ligula rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
|
||||
pretium a purus mauris
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END CONTENT BOX-2 */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-3 */}
|
||||
{/* CONTENT-1
|
||||
============================================= */}
|
||||
<section id="content-1" className="bg_whitesmoke pb-60 content-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6 m-bottom">
|
||||
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id grey-color">Beauty of Simplicity</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Beautiful, award-winning design</h2>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
|
||||
ligula rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
|
||||
pretium a purus mauris
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6 m-top">
|
||||
<div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-03.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-1 */}
|
||||
{/* FEATURES-5
|
||||
============================================= */}
|
||||
<section id="features-5" className="bg_whitesmoke pb-50 features-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Get Ready to Be Surprised</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURES-5 WRAPPER */}
|
||||
<div className="fbox-5-wrapper pc-30">
|
||||
<div className="row">
|
||||
{/* FEATURE BOX #1 */}
|
||||
<div id="fb-5-1" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 stateblue-color"><span className="flaticon-ads" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Friendly Interface</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #2 */}
|
||||
<div id="fb-5-2" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 stateblue-color"><span className="flaticon-switch" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Powerful Options</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #3 */}
|
||||
<div id="fb-5-3" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 stateblue-color"><span className="flaticon-pantone" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Customization</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #4 */}
|
||||
<div id="fb-5-4" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 stateblue-color"><span className="flaticon-user-1" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Multiple Accounts</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #5 */}
|
||||
<div id="fb-5-5" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 stateblue-color"><span className="flaticon-browser" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Online Verification</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #6 */}
|
||||
<div id="fb-5-6" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 stateblue-color"><span className="flaticon-spam" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Spam Protection</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END FEATURES-5 HOLDER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END FEATURES-5 */}
|
||||
{/* CONTENT-13
|
||||
============================================= */}
|
||||
<section id="content-13" className="bg_purple_img wide-60 content-section division">
|
||||
<div className="container white-color">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-6 col-xl-6">
|
||||
<div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Totally Optimized</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Intuitive features, powerful results</h2>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
|
||||
ligula rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
|
||||
pretium a purus mauris
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Button */}
|
||||
<a href="#content-11" className="btn btn-tra-white skyblue-hover">Find Out More</a>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-6 col-xl-6">
|
||||
<div className="content-13-img wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/tablet.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-13 */}
|
||||
{/* CONTENT-11
|
||||
============================================= */}
|
||||
<section id="content-11" className="bg_whitesmoke wide-100 content-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-60">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Accessible for All Platforms</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/browsers.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* DOWNLOAD BUTTON */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="content-11-btn ico-20 ico-right mt-60 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Button */}
|
||||
<a href="https://www.youtube.com/watch?v=7e90gBu4pas" className="video-popup2 btn btn-md btn-tra-grey skyblue-hover">
|
||||
See NordEx in Action <span className="flaticon-play-button" />
|
||||
</a>
|
||||
{/* OS Prerequisite */}
|
||||
<span className="os-version">Available on Android, iOS and macOS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END DOWNLOAD BUTTON */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-11 */}
|
||||
{/* CONTENT-2
|
||||
============================================= */}
|
||||
<section id="content-2" className="bg_whitesmoke pb-50 content-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6">
|
||||
<div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-08.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6">
|
||||
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
{/* CONTENT BOX #1 */}
|
||||
<div className="cbox mb-30">
|
||||
{/* Icon */}
|
||||
<div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-tasks" /></div>
|
||||
{/* Text */}
|
||||
<div className="cbox-txt">
|
||||
<h5 className="h5-sm">Add Notes & Tags</h5>
|
||||
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
|
||||
suscipit quaerat ultrice tellus viverra
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* CONTENT BOX #2 */}
|
||||
<div className="cbox mb-30">
|
||||
{/* Icon */}
|
||||
<div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-sync" /></div>
|
||||
{/* Text */}
|
||||
<div className="cbox-txt">
|
||||
<h5 className="h5-sm">Convert Photo & Video</h5>
|
||||
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
|
||||
suscipit quaerat ultrice tellus viverra
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* CONTENT BOX #3 */}
|
||||
<div className="cbox">
|
||||
{/* Icon */}
|
||||
<div className="cbox-ico ico-65 stateblue-color"><span className="flaticon-image" /></div>
|
||||
{/* Text */}
|
||||
<div className="cbox-txt">
|
||||
<h5 className="h5-sm">Share Files & Media</h5>
|
||||
<p className="p-lg">Ligula risus auctor tempus dolor feugiat undo lacinia purus lipsum primis potenti at
|
||||
suscipit quaerat ultrice tellus viverra
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-2 */}
|
||||
{/* DOWNLOAD-6
|
||||
============================================= */}
|
||||
<section id="download-6" className="bg_mobile wide-100 download-section division">
|
||||
<div className="container white-color">
|
||||
<div className="row">
|
||||
{/* DOWNLOAD TXT */}
|
||||
<div className="col-lg-6">
|
||||
<div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Powerful Settings</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Take Full Advantage of Smart Features</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
|
||||
posuere orci auctor purus euismod an aliquam quaerat purus
|
||||
</p>
|
||||
{/* STORE BADGES */}
|
||||
<div className="stores-badge">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
||||
</a>
|
||||
{/* Aamazon Market
|
||||
<a href="#" class="store">
|
||||
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
|
||||
</a> */}
|
||||
{/* Mac AppStore
|
||||
<a href="#" class="store">
|
||||
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
|
||||
</a> */}
|
||||
{/* Microsoft Store
|
||||
<a href="#" class="store">
|
||||
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
|
||||
</a> */}
|
||||
</div> {/* END STORE BADGES */}
|
||||
</div>
|
||||
</div> {/* END DOWNLOAD TXT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END DOWNLOAD-6 */}
|
||||
{/* FOOTER-2
|
||||
============================================= */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Features
|
||||
File diff suppressed because it is too large
Load Diff
+1664
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+1181
File diff suppressed because it is too large
Load Diff
+1300
File diff suppressed because it is too large
Load Diff
+1029
File diff suppressed because it is too large
Load Diff
+1285
File diff suppressed because it is too large
Load Diff
+1062
File diff suppressed because it is too large
Load Diff
+1008
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,994 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Home_8 extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
|
||||
{/* HERO-8
|
||||
============================================= */}
|
||||
<section id="hero-8" className="bg_fixed hero-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* HERO TEXT */}
|
||||
<div className="col-lg-6 col-xl-6 m-bottom">
|
||||
<div className="hero-8-txt pc-25 wow fadeInRight" data-wow-delay="0.6s">
|
||||
{/* Text */}
|
||||
<h4 className="h4-sm">NordEx®</h4>
|
||||
<h2 className="h2-sm">Your Activity Feed</h2>
|
||||
<h5 className="h5-xl">Stay Connected with Your Friends</h5>
|
||||
{/* STORE BADGES */}
|
||||
<div className="stores-badge">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
||||
</a>
|
||||
{/* Aamazon Market
|
||||
<a href="#" class="store">
|
||||
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
|
||||
</a> */}
|
||||
{/* Mac AppStore
|
||||
<a href="#" class="store">
|
||||
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
|
||||
</a> */}
|
||||
{/* Microsoft Store
|
||||
<a href="#" class="store">
|
||||
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
|
||||
</a> */}
|
||||
</div> {/* END STORE BADGES */}
|
||||
{/* Rating */}
|
||||
<div className="txt-block-rating">
|
||||
<div className="stars-rating dark-color">
|
||||
All Versions Rating
|
||||
<span className="flaticon-star ml-5" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
<p className="txt-rating">Based on 7.296 user reviews</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END HERO TEXT */}
|
||||
{/* HERO IMAGE */}
|
||||
<div className="col-lg-6 col-xl-6 11offset-xl-1 m-top">
|
||||
<div className="hero-8-img pr-20 text-center wow fadeInDown" data-wow-delay="0.4s">
|
||||
<img className="img-fluid" src="assets/images/hero-8-img.png" alt="hero-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END HERO-8 */}
|
||||
{/* FEATURES-5
|
||||
============================================= */}
|
||||
<section id="features-5" className="wide-50 features-section division">
|
||||
<div className="container">
|
||||
{/* FEATURES-5 WRAPPER */}
|
||||
<div className="fbox-5-wrapper pc-30">
|
||||
<div className="row">
|
||||
{/* FEATURE BOX #1 */}
|
||||
<div id="fb-5-1" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 grey-color"><span className="flaticon-user-1" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Multiple Accounts</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #2 */}
|
||||
<div id="fb-5-2" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 grey-color"><span className="flaticon-smartphone-1" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Text, Voice & Video Calls</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #3 */}
|
||||
<div id="fb-5-3" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 grey-color"><span className="flaticon-image" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Share Files & Media</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #4 */}
|
||||
<div id="fb-5-4" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 grey-color"><span className="flaticon-chat-4" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Alerts & Notifications</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #5 */}
|
||||
<div id="fb-5-5" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.2s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 grey-color"><span className="flaticon-fingerprint" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Online Verification</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURE BOX #6 */}
|
||||
<div id="fb-5-6" className="col-md-6">
|
||||
<div className="fbox-5 pc-25 mb-40 wow fadeInUp" data-wow-delay="1.4s">
|
||||
{/* Icon */}
|
||||
<div className="fbox-ico ico-70 grey-color"><span className="flaticon-spam" /></div>
|
||||
{/* Text */}
|
||||
<div className="fbox-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Spam Protection</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Porta semper lacus cursus feugiat primis ultrice ligula risus auctor tempus feugiat
|
||||
at impedit felis undo auctor augue mauris
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END FEATURES-5 HOLDER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END FEATURES-5 */}
|
||||
{/* SECTION DIVIDER
|
||||
============================================= */}
|
||||
<div className="divider-wrapper text-center"><div className="section-divider" /></div>
|
||||
{/* CONTENT-11
|
||||
============================================= */}
|
||||
<section id="content-11" className="pt-100 content-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-60 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Chat with Your Friends Easily</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="img-block text-center wow fadeInUp" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/socials.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-11 */}
|
||||
{/* STATISTIC-2
|
||||
============================================= */}
|
||||
<div id="statistic-2" className="wide-60 statistic-section division">
|
||||
<div className="container">
|
||||
{/* STATISTIC-2 WRAPPER */}
|
||||
<div className="statistic-2-wrapper pc-35 text-center">
|
||||
<div className="row">
|
||||
{/* STATISTIC BLOCK #1 */}
|
||||
<div id="sb-2-1" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Digit */}
|
||||
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">28</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">Faster Access</h5>
|
||||
</div>
|
||||
</div>
|
||||
{/* STATISTIC BLOCK #2 */}
|
||||
<div id="sb-2-2" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Digit */}
|
||||
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">47</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">App Productivity</h5>
|
||||
</div>
|
||||
</div>
|
||||
{/* STATISTIC BLOCK #3 */}
|
||||
<div id="sb-2-3" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Digit */}
|
||||
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">54</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">Secure Access</h5>
|
||||
</div>
|
||||
</div>
|
||||
{/* STATISTIC BLOCK #4 */}
|
||||
<div id="sb-2-4" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block mb-40 wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Digit */}
|
||||
<h2 className="h2-title-sm statistic-number text-purple-gradient"><span className="count-element">36</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">Battery Saving</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END STATISTIC-2 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END STATISTIC-2 */}
|
||||
{/* CONTENT-12
|
||||
============================================= */}
|
||||
<section id="content-12" className="mb-60 content-section division">
|
||||
<div className="container">
|
||||
<div className="lavender_gradient content-12-wrapper">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-lg-5">
|
||||
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
{/* Title */}
|
||||
<h2 className="h2-xs">Work smarter with powerful automation</h2>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus at blandit and purus ipsum primis and cubilia laoreet
|
||||
augue a luctus magna dolor luctus mauris pretium a sapien egestas luctus
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Fringilla risus, luctus mauris auctor a purus euismod orci pretium purus pretium undo ligula
|
||||
rutrum tempor magna dolor
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-lg-7">
|
||||
<div className="content-12-img right-column wow fadeInLeft" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-12.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-12 */}
|
||||
{/* CONTENT-3
|
||||
============================================= */}
|
||||
<section id="content-3" className="wide-60 content-section division">
|
||||
<div className="container">
|
||||
{/* CONTENT BOX-1 */}
|
||||
<div id="cb-1-1" className="cbox-1 pb-25">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6">
|
||||
<div className="img-block left-column pc-25 mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-07.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6">
|
||||
<div className="txt-block right-column pc-30 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id grey-color">Unlimited Access</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Spend your time with loved ones</h2>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
|
||||
luctus magna dolor luctus at egestas sapien vitae. Nemo egestas volute and turpis dolores aliquam quaerat
|
||||
sodales a sapien
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
|
||||
luctus magna dolor luctus and egestas sapien egestas vitae nemo volute
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END CONTENT BOX-1 */}
|
||||
{/* CONTENT BOX-2 */}
|
||||
<div id="cb-1-2" className="cbox-1 rel">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6 m-bottom">
|
||||
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Fastest Messaging</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Unlimited calling, texting and picture messaging</h2>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit and tempor sapien donec ipsum gravida porta. Velna vitae auctor
|
||||
congue magna impedit ligula risus. Mauris donec ligula and magnis undo sapien sagittis sapien pretium
|
||||
enim gravida purus ligula
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6 m-top">
|
||||
<div className="img-block right-column pc-15 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-05.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
{/* Transparent Background Elements */}
|
||||
<div className="tra-bkg-wrapper">
|
||||
<div className="bg_el_01 wow fadeInRight" data-wow-delay="1s" />
|
||||
<div className="bg_el_05 wow fadeInRight" data-wow-delay="1s" />
|
||||
</div>
|
||||
</div> {/* END CONTENT BOX-2 */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-3 */}
|
||||
{/* FEATURES-4
|
||||
============================================= */}
|
||||
<section id="features-4" className="pb-100 features-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Get Ready to Be Surprised</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FEATURES-4 WRAPPER */}
|
||||
<div className="fbox-4-wrapper">
|
||||
<div className="row">
|
||||
{/* FEATURE BOX #1 */}
|
||||
<div id="fb-4-1" className="col-md-6">
|
||||
<div className="fbox-4 bg_whitesmoke mb-30 wow fadeInUp" data-wow-delay="0.4s">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT */}
|
||||
<div className="col-lg-8 m-bottom">
|
||||
<div className="fbox-4-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Dark & Light Modes</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
|
||||
sapien magna at vitae congue tempus
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* ICON */}
|
||||
<div className="col-lg-4 m-top">
|
||||
<div className="fbox-4-ico ico-100 grey-color text-center">
|
||||
<span className="flaticon-paint-brush" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End fbox-4 */}
|
||||
</div> {/* END FEATURE BOX #1 */}
|
||||
{/* FEATURE BOX #2 */}
|
||||
<div id="fb-4-2" className="col-md-6">
|
||||
<div className="fbox-4 bg_whitesmoke mb-30 wow fadeInUp" data-wow-delay="0.6s">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT */}
|
||||
<div className="col-lg-8 m-bottom">
|
||||
<div className="fbox-4-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Auto-Link Opening</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
|
||||
sapien magna at vitae congue gravida
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* ICON */}
|
||||
<div className="col-lg-4 m-top">
|
||||
<div className="fbox-4-ico ico-100 grey-color text-center">
|
||||
<span className="flaticon-smartphone-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End fbox-4 */}
|
||||
</div> {/* END FEATURE BOX #2 */}
|
||||
{/* FEATURE BOX #3 */}
|
||||
<div id="fb-4-3" className="col-md-6">
|
||||
<div className="fbox-4 bg_whitesmoke wow fadeInUp" data-wow-delay="0.8s">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT */}
|
||||
<div className="col-lg-8 m-bottom">
|
||||
<div className="fbox-4-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Voice Assistant</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
|
||||
sapien magna at vitae congue gravida
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* ICON */}
|
||||
<div className="col-lg-4 m-top">
|
||||
<div className="fbox-4-ico ico-100 grey-color text-center">
|
||||
<span className="flaticon-voice-message-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End fbox-4 */}
|
||||
</div> {/* END FEATURE BOX #3 */}
|
||||
{/* FEATURE BOX #4 */}
|
||||
<div id="fb-4-4" className="col-md-6">
|
||||
<div className="fbox-4 bg_whitesmoke wow fadeInUp" data-wow-delay="1s">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT */}
|
||||
<div className="col-lg-8 m-bottom">
|
||||
<div className="fbox-4-txt">
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Task Scheduling</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md grey-color">Porta semper lacus cursus risus and feugiat primis undo sodales a
|
||||
sapien magna at vitae congue gravida
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* ICON */}
|
||||
<div className="col-lg-4 m-top">
|
||||
<div className="fbox-4-ico ico-100 grey-color text-center">
|
||||
<span className="flaticon-tasks" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End fbox-4 */}
|
||||
</div> {/* END FEATURE BOX #4 */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END FEATURES-4 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END FEATURES-4 */}
|
||||
{/* DOWNLOAD-6
|
||||
============================================= */}
|
||||
<section id="download-6" className="bg_chat wide-100 download-section division">
|
||||
<div className="container white-color">
|
||||
<div className="row">
|
||||
{/* DOWNLOAD TXT */}
|
||||
<div className="col-lg-6">
|
||||
<div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Voice & Video Calls</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Keep Your Favorite People Close to You</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
|
||||
posuere orci auctor purus euismod an aliquam quaerat purus
|
||||
</p>
|
||||
{/* STORE BADGES */}
|
||||
<div className="stores-badge">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
||||
</a>
|
||||
{/* Aamazon Market
|
||||
<a href="#" class="store">
|
||||
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
|
||||
</a> */}
|
||||
{/* Mac AppStore
|
||||
<a href="#" class="store">
|
||||
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
|
||||
</a> */}
|
||||
{/* Microsoft Store
|
||||
<a href="#" class="store">
|
||||
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
|
||||
</a> */}
|
||||
</div> {/* END STORE BADGES */}
|
||||
</div>
|
||||
</div> {/* END DOWNLOAD TXT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END DOWNLOAD-6 */}
|
||||
{/* CONTENT-2
|
||||
============================================= */}
|
||||
<section id="content-2" className="wide-50 content-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6">
|
||||
<div className="img-block left-column pc-20 mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-02.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6">
|
||||
<div className="txt-block right-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id grey-color">Beauty of Simplicity</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Beautiful, award-winning design</h2>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
|
||||
ligula rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
|
||||
pretium a purus mauris
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-2 */}
|
||||
{/* CONTENT-13
|
||||
============================================= */}
|
||||
<section id="content-13" className="pb-60 content-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-6 col-xl-6">
|
||||
<div className="txt-block left-column mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Totally Optimized</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Intuitive features, powerful results</h2>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod pretium purus pretium
|
||||
ligula rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
|
||||
pretium a purus mauris
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Button */}
|
||||
<a href="#content-1" className="btn btn-tra-grey rose-hover">Find Out More</a>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-6 col-xl-6">
|
||||
<div className="content-13-img wow fadeInRight" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/tablet.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-13 */}
|
||||
{/* TESTIMONIALS-4
|
||||
============================================= */}
|
||||
<section id="reviews-4" className="bg_aliceblue wide-60 reviews-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-60">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Our Happy Customers</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* TESTIMONIALS-4 WRAPPER */}
|
||||
<div className="reviews-4-wrapper">
|
||||
<div className="row">
|
||||
{/* TESTIMONIALS LEFT COLUMN */}
|
||||
<div className="col-lg-6">
|
||||
<div className="reviews-4-column">
|
||||
{/* TESTIMONIAL #1 */}
|
||||
<div className="review-4 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>Etiam sapien sem at sagittis congue an augue massa varius an egestas suscipit magna a tempus aliquet
|
||||
blandit <span className="txt-highlight">tempor sapien gravida donec</span> ipsum porta
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">John Sweet</h5>
|
||||
<p>Mac Store Review, USA</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #1 */}
|
||||
{/* TESTIMONIAL #2 */}
|
||||
<div className="review-4 wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>An augue cubilia laoreet undo magna a suscipit egestas magna ipsum at ligula vitae
|
||||
<span className="txt-highlight">purus ipsum primis</span> cubilia
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">Mark Hodges</h5>
|
||||
<p>Marketing Manager, Company</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #2 */}
|
||||
</div>
|
||||
</div> {/* END TESTIMONIALS LEFT COLUMN */}
|
||||
{/* TESTIMONIALS RIGHT COLUMN */}
|
||||
<div className="col-lg-6">
|
||||
<div className="reviews-4-column">
|
||||
{/* TESTIMONIAL #3 */}
|
||||
<div className="review-4 mt-25 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>Mauris donec ociis magnis undo sapien etiam sapien congue augue pretium and ligula augue lectus
|
||||
aenean ociis magna donec and magnis sapien sagittis ipsum <span className="txt-highlight">sapien congue tempor gravida </span> a donec ipsum porta justo integer a velna mollis laoreet vitae mauris undo
|
||||
tortor tempor sapien gravida donec ipsum porta
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">Dominic Johnson</h5>
|
||||
<p>Chief Strategist, Company</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #3 */}
|
||||
</div>
|
||||
</div> {/* END TESTIMONIALS RIGHT COLUMN */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END TESTIMONIALS-4 WRAPPER */}
|
||||
{/* DOWNLOAD BUTTON */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="reviews-download-btn wow fadeInUp" data-wow-delay="1s">
|
||||
{/* STORE BADGES */}
|
||||
<div className="stores-badge mb-5">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
||||
</a>
|
||||
{/* Aamazon Market
|
||||
<a href="#" class="store">
|
||||
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
|
||||
</a> */}
|
||||
{/* Mac AppStore
|
||||
<a href="#" class="store">
|
||||
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
|
||||
</a> */}
|
||||
{/* Microsoft Store
|
||||
<a href="#" class="store">
|
||||
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
|
||||
</a> */}
|
||||
</div> {/* END STORE BADGES */}
|
||||
{/* OS Prerequisite */}
|
||||
<span className="os-version">Available for iOS 8 and Android Devices From 5.5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END DOWNLOAD BUTTON */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END TESTIMONIALS-4 */}
|
||||
{/* CONTENT-1
|
||||
============================================= */}
|
||||
<section id="content-1" className="wide-60 content-section division">
|
||||
<div className="container">
|
||||
<div className="row d-flex align-items-center m-row">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="col-md-7 col-lg-6 m-bottom">
|
||||
<div className="txt-block left-column mb-40 wow fadeInRight" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id grey-color">Register in 30 Seconds</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Lightning fast and super powerful</h2>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Quaerat sodales sapien euismod purus blandit a purus ipsum primis in cubilia laoreet augue
|
||||
luctus magna dolor luctus at egestas sapien vitae nemo egestas volute and turpis dolores aliquam quaerat
|
||||
sodales a sapien
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
{/* IMAGE BLOCK */}
|
||||
<div className="col-md-5 col-lg-6 m-top">
|
||||
<div className="img-block right-column pc-20 mb-40 wow fadeInLeft" data-wow-delay="0.6s">
|
||||
<img className="img-fluid" src="assets/images/img-01.png" alt="content-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTENT-1 */}
|
||||
{/* BRANDS-2
|
||||
============================================= */}
|
||||
<section id="brands-2" className="pb-70 brands-section division">
|
||||
<div className="container">
|
||||
{/* BRANDS TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-8 offset-lg-2">
|
||||
<div className="brands-title text-center">
|
||||
<h4 className="h4-sm">You might know us from:</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* BRANDS-2 WRAPPER */}
|
||||
<div className="brands-2-wrapper">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-1.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-2.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-3.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-4.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-5.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-6.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-7.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-8.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-9.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
{/* BRAND LOGO IMAGE */}
|
||||
<div className="brand-logo">
|
||||
<a href="#">
|
||||
<img className="img-fluid" src="assets/images/brand-10.png" alt="brand-logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BRANDS-2 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END BRANDS-2 */}
|
||||
{/* SECTION DIVIDER
|
||||
============================================= */}
|
||||
<div className="divider-wrapper text-center"><div className="section-divider" /></div>
|
||||
{/* BLOG-1
|
||||
============================================= */}
|
||||
<section id="blog-1" className="wide-60 blog-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Our Tips and Latest News</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* BLOG POSTS */}
|
||||
<div className="row">
|
||||
{/* BLOG POST #1 */}
|
||||
<div id="b-post-1" className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">NordEx News</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-sm">
|
||||
<a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
|
||||
congue
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>12 min read</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END BLOG POST #1 */}
|
||||
{/* BLOG POST #2 */}
|
||||
<div id="b-post-2" className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">Inspiration</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-sm">
|
||||
<a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
|
||||
congue
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>8 min read</p>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #2 */}
|
||||
{/* BLOG POST #3 */}
|
||||
<div id="b-post-3" className="col-md-6 col-lg-4">
|
||||
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* BLOG POST IMAGE */}
|
||||
<div className="blog-post-img">
|
||||
<img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="blog-post-txt">
|
||||
{/* Post Tag */}
|
||||
<p className="p-md post-tag">Tutorials</p>
|
||||
{/* Post Link */}
|
||||
<h5 className="h5-sm">
|
||||
<a href="single-post.html">Tempor sapien NordEx, donec gravida ipsum a porta justo</a>
|
||||
</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
|
||||
congue
|
||||
</p>
|
||||
{/* Post Meta */}
|
||||
<div className="post-meta">
|
||||
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
||||
<p>22 min read</p>
|
||||
</div>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
</div>
|
||||
</div> {/* END BLOG POST #3 */}
|
||||
</div> {/* END BLOG POSTS */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END BLOG-1 */}
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
<section id="newsletter-1" className="pb-20 newsletter-section division">
|
||||
<div className="container">
|
||||
<div className="newsletter-wrapper bg_white">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-txt">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Subscribe to Our Newsletter</span>
|
||||
{/* Title */}
|
||||
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* NEWSLETTER FORM */}
|
||||
<div className="col-lg-6">
|
||||
<form className="newsletter-form">
|
||||
<div className="input-group">
|
||||
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
||||
<span className="input-group-btn">
|
||||
<button type="submit" className="btn btn-md btn-rose tra-rose-hover">Subscribe Now</button>
|
||||
</span>
|
||||
</div>
|
||||
{/* Newsletter Form Notification */}
|
||||
<label htmlFor="s-email" className="form-notification" />
|
||||
</form>
|
||||
</div> {/* END NEWSLETTER FORM */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End newsletter-holder */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END NEWSLETTER-1 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Home_8
|
||||
+1207
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,494 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class More_apps extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
|
||||
{/* MORE APPS-1
|
||||
============================================= */}
|
||||
<section id="more-apps-1" className="bg_whitesmoke hero-offset-nav pb-70 moreapps-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Other Apps by DSAThemes</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* MORE APPS-1 WRAPPER */}
|
||||
<div className="abox-1-wrapper">
|
||||
<div className="row">
|
||||
{/* APP #1 LINK */}
|
||||
<div className="col-md-6 wow fadeInUp" data-wow-delay="0.4s">
|
||||
<a href="#">
|
||||
<div className="row abox-1 d-flex align-items-center">
|
||||
{/* App Version */}
|
||||
<div className="app-version"><span>2.0.1</span></div>
|
||||
{/* Logo */}
|
||||
<div className="col-sm-3 col-md-4 col-lg-3 abox-1-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo-1.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Text */}
|
||||
<div className="col-sm-9 col-md-8 col-lg-9 abox-1-txt">
|
||||
<h5 className="h5-xs">FastChat 2</h5>
|
||||
<p>Aliquam an augue luctus undo purus</p>
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty mr-5" />
|
||||
4.3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> {/* END APP #1 LINK */}
|
||||
{/* APP #2 LINK */}
|
||||
<div className="col-md-6 wow fadeInUp" data-wow-delay="0.6s">
|
||||
<a href="#">
|
||||
<div className="row abox-1 d-flex align-items-center">
|
||||
{/* App Version */}
|
||||
<div className="app-version"><span>1.3.9</span></div>
|
||||
{/* Logo */}
|
||||
<div className="col-sm-3 col-md-4 col-lg-3 abox-1-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo-2.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Text */}
|
||||
<div className="col-sm-9 col-md-8 col-lg-9 abox-1-txt">
|
||||
<h5 className="h5-xs">MuMemos</h5>
|
||||
<p>Aliquam an augue luctus undo purus</p>
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star mr-5" />
|
||||
5.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> {/* END APP #2 LINK */}
|
||||
{/* APP #3 LINK */}
|
||||
<div className="col-md-6 wow fadeInUp" data-wow-delay="0.8s">
|
||||
<a href="#">
|
||||
<div className="row abox-1 d-flex align-items-center">
|
||||
{/* App Version */}
|
||||
<div className="app-version"><span>4.1.6</span></div>
|
||||
{/* Logo */}
|
||||
<div className="col-sm-3 col-md-4 col-lg-3 abox-1-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo-4.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Text */}
|
||||
<div className="col-sm-9 col-md-8 col-lg-9 abox-1-txt">
|
||||
<h5 className="h5-xs">Music Player</h5>
|
||||
<p>Aliquam an augue luctus undo purus</p>
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty mr-5" />
|
||||
4.65
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> {/* END APP #3 LINK */}
|
||||
{/* APP #4 LINK */}
|
||||
<div className="col-md-6 wow fadeInUp" data-wow-delay="1s">
|
||||
<a href="#">
|
||||
<div className="row abox-1 d-flex align-items-center">
|
||||
{/* App Version */}
|
||||
<div className="app-version"><span>14.1.0</span></div>
|
||||
{/* Logo */}
|
||||
<div className="col-sm-3 col-md-4 col-lg-3 abox-1-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo-3.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Text */}
|
||||
<div className="col-sm-9 col-md-8 col-lg-9 abox-1-txt">
|
||||
<h5 className="h5-xs">PowerSaver</h5>
|
||||
<p>Aliquam an augue luctus undo purus</p>
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty mr-5" />
|
||||
4.21
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> {/* END APP #4 LINK */}
|
||||
{/* APP #5 LINK */}
|
||||
<div className="col-md-6 wow fadeInUp" data-wow-delay="1.2s">
|
||||
<a href="#">
|
||||
<div className="row abox-1 d-flex align-items-center">
|
||||
{/* App Version */}
|
||||
<div className="app-version"><span>2.2.1</span></div>
|
||||
{/* Logo */}
|
||||
<div className="col-sm-3 col-md-4 col-lg-3 abox-1-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo-5.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Text */}
|
||||
<div className="col-sm-9 col-md-8 col-lg-9 abox-1-txt">
|
||||
<h5 className="h5-xs">StocksHub</h5>
|
||||
<p>Aliquam an augue luctus undo purus</p>
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty mr-5" />
|
||||
4.45
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> {/* END APP #5 LINK */}
|
||||
{/* APP #6 LINK */}
|
||||
<div className="col-md-6 wow fadeInUp" data-wow-delay="1.4s">
|
||||
<a href="#">
|
||||
<div className="row abox-1 d-flex align-items-center">
|
||||
{/* App Version */}
|
||||
<div className="app-version"><span>2.3.5</span></div>
|
||||
{/* Logo */}
|
||||
<div className="col-sm-3 col-md-4 col-lg-3 abox-1-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo-6.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Text */}
|
||||
<div className="col-sm-9 col-md-8 col-lg-9 abox-1-txt">
|
||||
<h5 className="h5-xs">Equalizer 2</h5>
|
||||
<p>Aliquam an augue luctus undo purus</p>
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star mr-5" />
|
||||
4.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div> {/* END APP #6 LINK */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END MORE APPS-1 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END MORE APPS-1 */}
|
||||
{/* DOWNLOAD-6
|
||||
============================================= */}
|
||||
<section id="download-6" className="bg_mobile wide-100 download-section division">
|
||||
<div className="container white-color">
|
||||
<div className="row">
|
||||
{/* DOWNLOAD TXT */}
|
||||
<div className="col-lg-6">
|
||||
<div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Best Solutions</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Solutions Rooted in Code and Design</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
|
||||
posuere orci auctor purus euismod an aliquam quaerat purus
|
||||
</p>
|
||||
{/* STORE BADGES */}
|
||||
<div className="stores-badge">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
||||
</a>
|
||||
{/* Aamazon Market
|
||||
<a href="#" class="store">
|
||||
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
|
||||
</a> */}
|
||||
{/* Mac AppStore
|
||||
<a href="#" class="store">
|
||||
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
|
||||
</a> */}
|
||||
{/* Microsoft Store
|
||||
<a href="#" class="store">
|
||||
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
|
||||
</a> */}
|
||||
</div> {/* END STORE BADGES */}
|
||||
</div>
|
||||
</div> {/* END DOWNLOAD TXT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END DOWNLOAD-6 */}
|
||||
{/* TESTIMONIALS-1
|
||||
============================================= */}
|
||||
<section id="reviews-1" className="bg_whitesmoke wide-100 reviews-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-60">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Why Customers Love Us</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* TESTIMONIALS CONTENT */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="owl-carousel owl-theme reviews-1-wrapper">
|
||||
{/* TESTIMONIAL #1 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Great Flexibility!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Etiam sapien sem at sagittis congue an augue massa varius egestas undo
|
||||
suscipit magna tempus undo aliquet
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Scott Boxer</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #1 */}
|
||||
{/* TESTIMONIAL #2 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Simple and Useful!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">At sagittis congue augue undo egestas magna ipsum vitae purus and ipsum
|
||||
primis suscipit
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Wendy T.</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #2 */}
|
||||
{/* TESTIMONIAL #3 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">I love this App!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Mauris donec ociis magnis and sapien etiam sapien congue undo augue pretium
|
||||
and ligula augue a lectus aenean magna
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- pebz13</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #3 */}
|
||||
{/* TESTIMONIAL #4 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-1" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Best App for iOS!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">An augue in cubilia laoreet magna and suscipit egestas magna ipsum purus ipsum
|
||||
and suscipit
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Scott Boxer</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #4 */}
|
||||
{/* TESTIMONIAL #5 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Awesome Design!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Mauris donec magnis sapien undo etiam sapien and congue augue egestas ultrice
|
||||
a vitae purus velna integer tempor
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- John Sweet</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #5 */}
|
||||
{/* TESTIMONIAL #6 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Simply Amazing App!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">An augue cubilia laoreet undo magna a suscipit undo egestas magna ipsum ligula
|
||||
vitae purus ipsum primis cubilia blandit
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Leslie D.</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #6 */}
|
||||
{/* TESTIMONIAL #7 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Powerful Features!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Augue egestas volutpat and egestas augue in cubilia laoreet magna undo
|
||||
suscipit luctus
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- Marisol19</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #7 */}
|
||||
{/* TESTIMONIAL #8 */}
|
||||
<div className="review-1 radius-08">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<h5 className="h5-sm">Super Support!</h5>
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-1-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg grey-color">Aliquam augue suscipit luctus neque purus ipsum neque dolor primis libero tempus
|
||||
at blandit posuere varius magna
|
||||
</p>
|
||||
{/* Testimonial Author */}
|
||||
<h5 className="h5-xs">- AJ</h5>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #8 */}
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIALS CONTENT */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END TESTIMONIALS-1 */}
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
<section id="newsletter-1" className="bg_whitesmoke pb-20 newsletter-section division">
|
||||
<div className="container">
|
||||
<div className="newsletter-wrapper bg-white">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-txt">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Subscribe to Our Newsletter</span>
|
||||
{/* Title */}
|
||||
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* NEWSLETTER FORM */}
|
||||
<div className="col-lg-6">
|
||||
<form className="newsletter-form">
|
||||
<div className="input-group">
|
||||
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
||||
<span className="input-group-btn">
|
||||
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
|
||||
</span>
|
||||
</div>
|
||||
{/* Newsletter Form Notification */}
|
||||
<label htmlFor="s-email" className="form-notification" />
|
||||
</form>
|
||||
</div> {/* END NEWSLETTER FORM */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End newsletter-holder */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END NEWSLETTER-1 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default More_apps
|
||||
@@ -0,0 +1,520 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Pricing extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
{/* HEADER
|
||||
============================================= */}
|
||||
|
||||
{/* PRICING-3
|
||||
============================================= */}
|
||||
<section id="pricing-3" className="bg_whitesmoke hero-offset-nav pb-50 pricing-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Simple and Flexible Pricing</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* PRICING TABLES */}
|
||||
<div className="row text-center">
|
||||
{/* FREE PLAN */}
|
||||
<div className="col-md-4">
|
||||
<div className="pricing-table mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Plan Price */}
|
||||
<div className="pricing-plan bg_white">
|
||||
<h5 className="h5-md">NordEx Free</h5>
|
||||
<sup className="dark-color">$</sup>
|
||||
<span className="dark-color">0.00</span>
|
||||
<p className="dark-color">Get NordEx For Free</p>
|
||||
<p className="p-sm">The price per one user. Change or cancel your plan anytime</p>
|
||||
{/* Pricing Table Button */}
|
||||
<a href="#" className="btn btn-tra-grey skyblue-hover mb-15">Download Now</a>
|
||||
{/* Pricing Trial Link */}
|
||||
<a href="#" className="pricing-trial-link">Read the FAQs</a>
|
||||
</div>
|
||||
{/* Plan Description */}
|
||||
<div className="pricing-description bg_white">
|
||||
<ul className="features">
|
||||
<li><p className="p-lg">Sync 1 Account</p></li>
|
||||
<li><p className="p-lg">2 GB of Cloud Storage</p></li>
|
||||
<li><p className="p-lg">Weekly Data Backup</p></li>
|
||||
<li><p className="p-lg">Files Sharing</p></li>
|
||||
<li><p className="p-lg">SPAM Protection</p></li>
|
||||
<li><p className="p-lg">12/5 Email Support</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END PFREE PLAN */}
|
||||
{/* MONTHLY PLAN */}
|
||||
<div className="col-md-4">
|
||||
<div className="pricing-table mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Plan Price */}
|
||||
<div className="pricing-plan bg-white">
|
||||
<h5 className="h5-md">Monthly Billing</h5>
|
||||
<sup className="dark-color">$</sup>
|
||||
<span className="dark-color">6.25</span>
|
||||
<p className="dark-color">Per Month</p>
|
||||
<p className="p-sm">The price per one user. Change or cancel your plan anytime</p>
|
||||
{/* Pricing Table Button */}
|
||||
<a href="#" className="btn btn-tra-grey skyblue-hover mb-15">Select Plan</a>
|
||||
{/* Pricing Trial Link */}
|
||||
<a href="#" className="pricing-trial-link">Download 14-day trial</a>
|
||||
</div>
|
||||
{/* Plan Description */}
|
||||
<div className="pricing-description bg-white">
|
||||
<ul className="features">
|
||||
<li><p className="p-lg">Sync Unlimited Accounts</p></li>
|
||||
<li><p className="p-lg">20 GB of Cloud Storage</p></li>
|
||||
<li><p className="p-lg">Daily Data Backup</p></li>
|
||||
<li><p className="p-lg">Files Sharing</p></li>
|
||||
<li><p className="p-lg">SPAM Protection</p></li>
|
||||
<li><p className="p-lg">No Ads. No Trackers</p></li>
|
||||
<li><p className="p-lg">24/7 Email Support</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END MONTHLY PLAN */}
|
||||
{/* ANNUAL PLAN */}
|
||||
<div className="col-md-4">
|
||||
<div className="pricing-table mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Plan Price */}
|
||||
<div className="pricing-plan highlight crocus_gradient white-color">
|
||||
<h5 className="h5-md">Annual Billing</h5>
|
||||
<sup>$</sup>
|
||||
<span>5.69</span>
|
||||
<p>Per Month</p>
|
||||
<p className="p-sm">The price per one user. Change or cancel your plan anytime</p>
|
||||
{/* Pricing Table Button */}
|
||||
<a href="#" className="btn btn-tra-white white-hover mb-15">Select Plan</a>
|
||||
{/* Pricing Trial Link */}
|
||||
<a href="#" className="pricing-trial-link">Download 14-day trial</a>
|
||||
</div>
|
||||
{/* Plan Description */}
|
||||
<div className="pricing-description bg-white">
|
||||
<ul className="features">
|
||||
<li><p className="p-lg">Sync Unlimited Accounts</p></li>
|
||||
<li><p className="p-lg">20 GB of Cloud Storage</p></li>
|
||||
<li><p className="p-lg">Daily Data Backup</p></li>
|
||||
<li><p className="p-lg">Files Sharing</p></li>
|
||||
<li><p className="p-lg">SPAM Protection</p></li>
|
||||
<li><p className="p-lg">No Ads. No Trackers</p></li>
|
||||
<li><p className="p-lg">24/7 Email Support</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END ANNUAL PLAN */}
|
||||
</div> {/* END PRICING TABLES */}
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END PRICING-3*/}
|
||||
{/* ABOUT-2
|
||||
============================================= */}
|
||||
<div id="about-2" className="bg_whitesmoke pb-80 about-section division">
|
||||
<div className="container">
|
||||
{/* TEXT BLOCK */}
|
||||
<div className="about-2-txt pc-50">
|
||||
{/* SMALL TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="txt-block text-center mb-40">
|
||||
<h5 className="h5-xl">All of our pricing plans include:</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* LEFT COLUMN */}
|
||||
<div className="col-md-6">
|
||||
<div className="txt-block top-box">
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod and pretium purus pretium ligula
|
||||
rutrum tempor
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida a donec ipsum, porta justo. Velna vitae
|
||||
auctor a congue magna and donec nihil impedit ligula risus.mauris donec
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien an euismod purus blandit purus ipsum primis in cubilia laoreet
|
||||
augue luctus dolor
|
||||
</p>
|
||||
</li>
|
||||
</ul> {/* End List */}
|
||||
</div>
|
||||
</div> {/* END LEFT COLUMN */}
|
||||
{/* RIGHT COLUMN */}
|
||||
<div className="col-md-6">
|
||||
<div className="txt-block">
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida a donec ipsum, porta justo. Velna vitae
|
||||
auctor a congue magna and donec nihil impedit ligula risus.mauris donec
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus euismod and pretium purus pretium ligula
|
||||
rutrum tempor
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien an euismod purus blandit purus ipsum primis in cubilia laoreet
|
||||
augue luctus dolor
|
||||
</p>
|
||||
</li>
|
||||
</ul> {/* End List */}
|
||||
</div>
|
||||
</div> {/* END RIGHT COLUMN */}
|
||||
</div>
|
||||
</div> {/* END TEXT BLOCK */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END ABOUT-2 */}
|
||||
{/* STATISTIC-1
|
||||
============================================= */}
|
||||
<div id="statistic-1" className="bg_whitesmoke pb-100 statistic-section division">
|
||||
<div className="container">
|
||||
{/* STATISTIC-1 WRAPPER */}
|
||||
<div className="statistic-1-wrapper text-center">
|
||||
<div className="row">
|
||||
{/* STATISTIC BLOCK #1 */}
|
||||
<div id="sb-1-1" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Icon */}
|
||||
<div className="statistic-1-ico ico-70 grey-color"><span className="flaticon-mobile-phone" /></div>
|
||||
{/* Digit */}
|
||||
<h2 className="h2-xl statistic-number"><span className="count-element">28</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">Faster Access</h5>
|
||||
</div>
|
||||
</div>
|
||||
{/* STATISTIC BLOCK #2 */}
|
||||
<div id="sb-1-2" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Icon */}
|
||||
<div className="statistic-1-ico ico-70 grey-color"><span className="flaticon-analytics-1" /></div>
|
||||
{/* Digit */}
|
||||
<h2 className="h2-xl statistic-number"><span className="count-element">47</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">App Productivity</h5>
|
||||
</div>
|
||||
</div>
|
||||
{/* STATISTIC BLOCK #3 */}
|
||||
<div id="sb-1-3" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Icon */}
|
||||
<div className="statistic-1-ico ico-70 grey-color"><span className="flaticon-padlock" /></div>
|
||||
{/* Digit */}
|
||||
<h2 className="h2-xl statistic-number"><span className="count-element">54</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">Secure Access</h5>
|
||||
</div>
|
||||
</div>
|
||||
{/* STATISTIC BLOCK #4 */}
|
||||
<div id="sb-1-4" className="col-sm-6 col-lg-3">
|
||||
<div className="statistic-block wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Icon */}
|
||||
<div className="statistic-1-ico ico-70 grey-color"><span className="flaticon-phone-2" /></div>
|
||||
{/* Digit */}
|
||||
<h2 className="h2-xl statistic-number"><span className="count-element">36</span>%</h2>
|
||||
{/* Text */}
|
||||
<h5 className="h5-xs">Battery Saving</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END STATISTIC-1 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END STATISTIC-1 */}
|
||||
{/* FAQs-2
|
||||
============================================= */}
|
||||
<section id="faqs-2" className="bg_whitesmoke pb-100 faqs-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-70">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Got Questions? Look Here</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* FAQs-2 QUESTIONS */}
|
||||
<div className="faqs-2-questions pc-15">
|
||||
<div className="row">
|
||||
{/* QUESTIONS HOLDER */}
|
||||
<div className="col-lg-6">
|
||||
<div className="questions-holder pc-10">
|
||||
{/* QUESTION #1 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">Can I see NordEx in action before purchasing it?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Etiam amet mauris suscipit in odio integer congue metus vitae arcu mollis blandit
|
||||
ultrice ligula egestas and magna suscipit lectus magna suscipit luctus blandit vitae
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #2 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">What are the requirements for using NordEx?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">An enim nullam tempor sapien gravida donec ipsum enim an porta justo integer at velna
|
||||
vitae auctor integer congue undo magna at pretium purus pretium ligula
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #3 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">Can I use NordEx on different devices?</h5>
|
||||
{/* Answer */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus ligula euismod pretium purus
|
||||
pretium rutrum tempor sapien
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien undo
|
||||
pretium a purus
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END QUESTIONS HOLDER */}
|
||||
{/* QUESTIONS HOLDER */}
|
||||
<div className="col-lg-6">
|
||||
<div className="questions-holder pc-10">
|
||||
{/* QUESTION #4 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">Do you have a free trial?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Cubilia laoreet augue egestas and luctus donec curabite diam vitae dapibus libero and
|
||||
quisque gravida donec neque. Blandit justo aliquam molestie nunc sapien justo
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #5 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="1.2s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">How does NordEx handle my privacy?</h5>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">Etiam amet mauris suscipit sit amet in odio. Integer congue leo metus. Vitae arcu mollis
|
||||
blandit ultrice ligula
|
||||
</p>
|
||||
{/* Answer */}
|
||||
<p className="p-lg">An enim nullam tempor sapien gravida donec congue leo metus. Vitae arcu mollis blandit
|
||||
integer at velna
|
||||
</p>
|
||||
</div>
|
||||
{/* QUESTION #6 */}
|
||||
<div className="question wow fadeInUp" data-wow-delay="1.4s">
|
||||
{/* Question */}
|
||||
<h5 className="h5-sm">I have an issue with my account</h5>
|
||||
{/* Answer */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus, luctus mauris orci auctor purus</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien euismod blandit purus and ipsum primis in cubilia laoreet
|
||||
augue luctus
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END QUESTIONS HOLDER */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END FAQs-2 QUESTIONS */}
|
||||
{/* MORE QUESTIONS BUTTON */}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="more-questions text-center mt-40">
|
||||
<h5 className="h5-sm"><span className="flaticon-check" />
|
||||
Have more questions? <a href="contacts.html" className="skyblue-color">Ask your question here</a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End container */}
|
||||
</section> {/* END FAQs-2 */}
|
||||
{/* DOWNLOAD-6
|
||||
============================================= */}
|
||||
<section id="download-6" className="bg_mobile wide-100 download-section division">
|
||||
<div className="container white-color">
|
||||
<div className="row">
|
||||
{/* DOWNLOAD TXT */}
|
||||
<div className="col-lg-6">
|
||||
<div className="download-6-txt pl-20 wow fadeInUp" data-wow-delay="0.6s">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Powerful Settings</span>
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Take Full Advantage of Smart Features</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque at purus ipsum neque dolor primis libero tempus, blandit
|
||||
posuere orci auctor purus euismod an aliquam quaerat purus
|
||||
</p>
|
||||
{/* STORE BADGES */}
|
||||
<div className="stores-badge">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore.png" alt="appstore-badge" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay.png" alt="googleplay-badge" />
|
||||
</a>
|
||||
{/* Aamazon Market
|
||||
<a href="#" class="store">
|
||||
<img class="amazon" src="assets/images/amazon.png" alt="amazon-badge" />
|
||||
</a> */}
|
||||
{/* Mac AppStore
|
||||
<a href="#" class="store">
|
||||
<img class="mac-appstore" src="assets/images/macstore.png" alt="macstore-badge" />
|
||||
</a> */}
|
||||
{/* Microsoft Store
|
||||
<a href="#" class="store">
|
||||
<img class="microsoft" src="assets/images/microsoft.png" alt="microsoft-badge" />
|
||||
</a> */}
|
||||
</div> {/* END STORE BADGES */}
|
||||
</div>
|
||||
</div> {/* END DOWNLOAD TXT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END DOWNLOAD-6 */}
|
||||
{/* FOOTER-2
|
||||
============================================= */}
|
||||
<footer id="footer-2" className="bg_whitesmoke footer division">
|
||||
<div className="container">
|
||||
{/* FOOTER CONTENT */}
|
||||
<div className="row">
|
||||
{/* FOOTER INFO */}
|
||||
<div className="col-lg-4">
|
||||
<div className="footer-info mb-40">
|
||||
{/* Footer Logo */}
|
||||
<img className="footer-logo mb-25" src="assets/images/logo-01.png" alt="footer-logo" />
|
||||
{/* Text */}
|
||||
<p className="p-md">Aliquam nullam tempor sapien donec gravida congue ipsum and porta justo undo velna auctor a
|
||||
magna laoreet
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* FOOTER LINKS */}
|
||||
<div className="col-sm-6 col-md-3 col-lg-2">
|
||||
<div className="footer-links mb-40">
|
||||
{/* Title */}
|
||||
<h5 className="h5-xs">Company</h5>
|
||||
{/* Footer Links */}
|
||||
<ul className="foo-links clearfix">
|
||||
<li><p className="p-md"><a href="#">About Us</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Careers</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Terms & Privacy</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Privacy Policy</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* FOOTER LINKS */}
|
||||
<div className="col-sm-6 col-md-3 col-lg-2">
|
||||
<div className="footer-links mb-40">
|
||||
{/* Title */}
|
||||
<h5 className="h5-xs">Discover</h5>
|
||||
{/* Footer List */}
|
||||
<ul className="foo-links clearfix">
|
||||
<li><p className="p-md"><a href="#">Our Blog</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Press & Media</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Advertising</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Site Map</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* FOOTER LINKS */}
|
||||
<div className="col-sm-6 col-md-3 col-lg-2">
|
||||
<div className="footer-links mb-40">
|
||||
{/* Title */}
|
||||
<h5 className="h5-xs">Download</h5>
|
||||
{/* Footer List */}
|
||||
<ul className="foo-links clearfix">
|
||||
<li><p className="p-md"><a href="#">Android</a></p></li>
|
||||
<li><p className="p-md"><a href="#">iPhone & iPad</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Windows</a></p></li>
|
||||
<li><p className="p-md"><a href="#">MacOS</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* FOOTER LINKS */}
|
||||
<div className="col-sm-6 col-md-3 col-lg-2">
|
||||
<div className="footer-links mb-40">
|
||||
{/* Title */}
|
||||
<h5 className="h5-xs">Help</h5>
|
||||
{/* Footer Links */}
|
||||
<ul className="foo-links clearfix">
|
||||
<li><p className="p-md"><a href="#">Support</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Community</a></p></li>
|
||||
<li><p className="p-md"><a href="#">Life Chatting</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END FOOTER CONTENT */}
|
||||
{/* BOTTOM FOOTER */}
|
||||
<div className="bottom-footer">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* FOOTER COPYRIGHT */}
|
||||
<div className="col-md-6">
|
||||
<div className="footer-copyright">
|
||||
<p>© 2021 NordEx. All Rights Reserved</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* BOTTOM FOOTER LINKS */}
|
||||
<div className="col-md-6">
|
||||
<ul className="bottom-footer-list text-right clearfix">
|
||||
<li className="first-li"><a href="#">Facebook</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">LinkedIn</a></li>
|
||||
<li className="last-li"><a href="#">Dribbble</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END BOTTOM FOOTER */}
|
||||
</div> {/* End container */}
|
||||
</footer> {/* END FOOTER-2 */}
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Pricing
|
||||
@@ -0,0 +1,286 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Reviews extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
|
||||
{/* TESTIMONIALS-4
|
||||
============================================= */}
|
||||
<section id="reviews-4" className="bg_whitesmoke hero-offset-nav pb-60 reviews-section division">
|
||||
<div className="container">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="section-title text-center mb-60">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Why People Use NordEx®</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
||||
tempus, blandit and cursus varius magna tempus a dolor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* TESTIMONIALS-4 WRAPPER */}
|
||||
<div className="reviews-4-wrapper">
|
||||
<div className="row">
|
||||
{/* TESTIMONIALS LEFT COLUMN */}
|
||||
<div className="col-lg-6">
|
||||
<div className="reviews-4-column">
|
||||
{/* TESTIMONIAL #1 */}
|
||||
<div className="review-4 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>Etiam sapien sem at sagittis congue an augue massa varius an egestas suscipit magna a tempus aliquet
|
||||
blandit <span className="txt-highlight">tempor sapien gravida donec</span> ipsum porta
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">John Sweet</h5>
|
||||
<p>Mac Store Review, USA</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #1 */}
|
||||
{/* TESTIMONIAL #2 */}
|
||||
<div className="review-4 wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>An augue cubilia laoreet undo magna a suscipit egestas magna ipsum at ligula vitae
|
||||
<span className="txt-highlight">purus ipsum primis</span> cubilia
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">Mark Hodges</h5>
|
||||
<p>Marketing Manager, Company</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #2 */}
|
||||
{/* TESTIMONIAL #3 */}
|
||||
<div className="review-4 wow fadeInUp" data-wow-delay="0.4s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>Etiam sapien sem at sagittis congue an <span className="txt-highlight">augue massa and varius </span>
|
||||
undo egestas suscipit magna a tempus aliquet blandit tempor sapien gravida donec ipsum
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">John W. Stucky</h5>
|
||||
<p>Mac Store Review, UK</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #3 */}
|
||||
{/* TESTIMONIAL #4 */}
|
||||
<div className="review-4 wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>An augue cubilia laoreet undo magna a suscipit <span className="txt-highlight">egestas magna ipsum</span>
|
||||
at ligula vitae purus ipsum primis cubilia
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">Justin T. Roberto</h5>
|
||||
<p>Marketing Manager, Company</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #4 */}
|
||||
</div>
|
||||
</div> {/* END TESTIMONIALS LEFT COLUMN */}
|
||||
{/* TESTIMONIALS RIGHT COLUMN */}
|
||||
<div className="col-lg-6">
|
||||
<div className="reviews-4-column">
|
||||
{/* TESTIMONIAL #5 */}
|
||||
<div className="review-4 mt-25 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>Mauris donec ociis magnis undo sapien etiam sapien congue augue pretium and ligula augue lectus
|
||||
aenean ociis magna donec and magnis sapien sagittis ipsum <span className="txt-highlight">sapien congue tempor gravida </span> a donec ipsum porta justo integer a velna mollis laoreet vitae mauris undo
|
||||
tortor tempor sapien gravida donec ipsum porta
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">Dominic Johnson</h5>
|
||||
<p>Chief Strategist, Company</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #5 */}
|
||||
{/* TESTIMONIAL #6 */}
|
||||
<div className="review-4 wow fadeInUp" data-wow-delay="1s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>An augue cubilia laoreet undo <span className="txt-highlight">magna a suscipit egestas magna ipsum</span>
|
||||
at ligula vitae purus ipsum primis cubilia
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">Becky Sterling</h5>
|
||||
<p>Interior Designer</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #6 */}
|
||||
{/* TESTIMONIAL #7 */}
|
||||
<div className="review-4 mt-25 wow fadeInUp" data-wow-delay="0.8s">
|
||||
{/* Testimonial Text */}
|
||||
<div className="review-4-txt">
|
||||
<p>Mauris donec ociis magnis undo sapien etiam sapien congue augue pretium and ligula augue lectus
|
||||
aenean ociis magna donec and magnis sapien sagittis ipsum <span className="txt-highlight">sapien congue tempor gravida </span> a donec ipsum porta justo integer a velna mollis laoreet vitae mauris undo
|
||||
tortor tempor sapien gravida donec ipsum porta
|
||||
</p>
|
||||
</div>
|
||||
{/* Testimonial Data */}
|
||||
<div className="review-4-data">
|
||||
{/* App Rating */}
|
||||
<div className="app-rating ico-20 yellow-color">
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star" />
|
||||
<span className="flaticon-star-half-empty" />
|
||||
</div>
|
||||
{/* Author */}
|
||||
<h5 className="h5-sm">Kally Brooks</h5>
|
||||
<p>Web Developer</p>
|
||||
</div>
|
||||
</div> {/* END TESTIMONIAL #7 */}
|
||||
</div>
|
||||
</div> {/* END TESTIMONIALS RIGHT COLUMN */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* END TESTIMONIALS-4 WRAPPER */}
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END TESTIMONIALS-4 */}
|
||||
{/* PAGE PAGINATION
|
||||
============================================= */}
|
||||
<div className="bg_whitesmoke pb-100 page-pagination division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul className="pagination ico-20 justify-content-center">
|
||||
<li className="page-item disabled"><a className="page-link" href="#" tabIndex={-1}>
|
||||
<span className="flaticon-chevron-pointing-to-the-left" />
|
||||
</a></li>
|
||||
<li className="page-item active"><a className="page-link" href="#">1 <span className="sr-only">(current)</span></a></li>
|
||||
<li className="page-item"><a className="page-link" href="#">2</a></li>
|
||||
<li className="page-item"><a className="page-link" href="#">3</a></li>
|
||||
<li className="page-item"><a className="page-link" href="#">4</a></li>
|
||||
<li className="page-item"><a className="page-link" href="#"><span className="flaticon-right-chevron" /></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</div> {/* END PAGE PAGINATION */}
|
||||
{/* DOWNLOAD-2
|
||||
============================================= */}
|
||||
<section id="download-2" className="bg_whitesmoke pb-20 download-section division">
|
||||
<div className="container white-color">
|
||||
<div className="rel purple_gradient bg_shape_01 downloads-2-wrapper">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* DOWNLOAD TEXT */}
|
||||
<div className="col-lg-7 col-lg-7">
|
||||
<div className="download-2-txt white-color">
|
||||
{/* Icon */}
|
||||
<div className="download-2-logo">
|
||||
<img className="img-fluid" src="assets/images/app-logo.png" alt="app-logo" />
|
||||
</div>
|
||||
{/* Title */}
|
||||
<div className="d2-txt">
|
||||
<h4 className="h4-md">Download NordEx to create your beautiful landing page</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* STORE BADGES */}
|
||||
<div className="col-lg-5 text-right">
|
||||
<div className="stores-badge">
|
||||
{/* AppStore */}
|
||||
<a href="#" className="store">
|
||||
<img className="appstore" src="assets/images/appstore-white.png" alt="appstore-logo" />
|
||||
</a>
|
||||
{/* Google Play */}
|
||||
<a href="#" className="store">
|
||||
<img className="googleplay" src="assets/images/googleplay-white.png" alt="googleplay-logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div> {/* END STORE BADGES */}
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END DOWNLOAD-2 */}
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Reviews
|
||||
@@ -0,0 +1,434 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Single_post extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
|
||||
{/* SINGLE POST
|
||||
============================================= */}
|
||||
<section id="single-post" className="bg_whitesmoke hero-offset-nav pb-80 single-post-section division">
|
||||
<div className="container">
|
||||
{/* SINGLE POST CONTENT */}
|
||||
<div className="row">
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="single-post-wrapper">
|
||||
{/* SINGLE POST TITLE */}
|
||||
<div className="single-post-title">
|
||||
{/* CATEGORY */}
|
||||
<p className="p-lg post-tag skyblue-color">NordEx News</p>
|
||||
{/* TITLE */}
|
||||
<h4 className="h4-xl">Aliquam augue NordEx, luctus neque purus an ipsum and neque dolor libero</h4>
|
||||
{/* POST DATA */}
|
||||
<div className="post-data clearfix">
|
||||
{/* Author Avatar */}
|
||||
<div className="post-author-avatar">
|
||||
<img src="assets/images/post-author-1.jpg" alt="author-avatar" />
|
||||
</div>
|
||||
{/* Author Data */}
|
||||
<div className="post-author">
|
||||
<span>Gordon Wright <a href="#" className="follow-author">Follow</a></span>
|
||||
<span>April 05 - 12 min read</span>
|
||||
</div>
|
||||
</div> {/* END POST DATA */}
|
||||
</div> {/* END SINGLE POST TITLE */}
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="single-post-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg">Mauris donec ociis et magnis sapien etiam sapien sem sagittis congue tempor gravida donec
|
||||
and ipsum aporta justo integer at odio velna. Maecenas gravida porttitor nunc vehicula magna luctus tempor. Quisque vel laoreet turpis. An augue viverra a augue eget, dictum tempor pulvinar donec ociis et magnis
|
||||
sapien imperdiet dui varius placerat imperdiet ipsum varius viverra augue egestas luctus donec purus and
|
||||
blandit impedit ligula risus. Mauris donec
|
||||
</p>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
{/* BLOG POST INNER IMAGE */}
|
||||
<div className="post-inner-img">
|
||||
<img className="img-fluid" src="assets/images/blog/inner-img-1.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
{/* BLOG POST TEXT */}
|
||||
<div className="single-post-txt">
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor
|
||||
massa congue magna nihil impedit ligula risus. Mauris donec ociis and magnis sapien etiam sapien sagittis
|
||||
congue tempor a gravida donec enim ipsum porta justo integer undo odio velna. Maecenas gravida porttitor nunc, quis vehicula magna at luctus tempor. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum
|
||||
tempor diam. Sed pulvinar consectetur nibh, vel imperdiet dui varius viverra. Pellentesque ac massa lorem
|
||||
fusce eu tempor gravida porttitor cursus fusce
|
||||
</p>
|
||||
{/* List */}
|
||||
<ol className="digit-list">
|
||||
<li><p className="p-lg">Donec dolor suscipit magna vehicula impedit ligula risus. Mauris donec ociis magnis
|
||||
sapien etiam and sapien sem sagittis congue tempor gravida porttitor nunc, quis vehicula magna
|
||||
</p></li>
|
||||
<li><p className="p-lg">Placerat imperdiet dui varius consectetur nibh, vel imperdiet dui varius viverra donec
|
||||
ociis magnis
|
||||
</p></li>
|
||||
<li><p className="p-lg">Cubilia laoreet augue egestas cursus magna nihil impedit ligula risus. Mauris donec et magnis sapien etiam sapien rutrum tempor mullam blandit tempor sapien and gravida
|
||||
</p></li>
|
||||
<li><p className="p-lg">Maecenas gravida porttitor nunc, quis vehicula magna luctus tempor. Quisque laoreet turpis
|
||||
urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat donec
|
||||
</p></li>
|
||||
</ol>
|
||||
{/* Small Title */}
|
||||
<h5 className="h5-md mt-50">Praesent aliquet tempus<br />
|
||||
(tempor gravida ipsum as an example)
|
||||
</h5>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida
|
||||
ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus nec, luctus mauris orci auctor euismod purus pretium purus pretium
|
||||
ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Quaerat sodales sapien undo euismod purus blandit velna vitae auctor a congue magna
|
||||
tempor sapien eget gravida laoreet turpis urna augue, viverra a augue eget, dictum tempor diam
|
||||
pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus
|
||||
efficitur ipsum primis in cubilia laoreet augue egestas luctus donec diam. Curabitur dapibus libero. Mauris
|
||||
donec ociis a neque. Phasellus blandit tristique justo and aliquam vitae molestie nunc sapien justo, aliquet
|
||||
non molestie augue, venenatis nec purus aliquam eget lacinia elit tincidunt
|
||||
</p>
|
||||
{/* BLOG POST INNER IMAGES */}
|
||||
<div className="post-inner-img">
|
||||
<div className="row">
|
||||
{/* Inner Image #1 */}
|
||||
<div className="col-md-6 top-img blog-post-img">
|
||||
{/* Image */}
|
||||
<img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />
|
||||
{/* Text */}
|
||||
<p>Maecenas gravida porttitor nunc magna</p>
|
||||
</div>
|
||||
{/* Inner Image #2 */}
|
||||
<div className="col-md-6 blog-post-img">
|
||||
{/* Image */}
|
||||
<img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />
|
||||
{/* Text */}
|
||||
<p>Gravida porttitor nunc, quis vehicula tempor</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END INNER IMAGES */}
|
||||
{/* Text */}
|
||||
<p className="p-lg">Nulla tincidunt volutpat tincidunt. Pellentesque habitant morbi tristique senectus and netus
|
||||
laoreet malesuada famesa augue suscipit, luctus at neque purus neque dolor primis. Nemo sodales ipsam egestas volute turpis a dolores aliquam quaerat sodales sapien congue augue eget gravida laoreet turpis urna augue, viverra a augue eget, dictum dictum tempor diam pulvinar consectetur
|
||||
</p>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida
|
||||
ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Fringilla risus nec, luctus mauris orci auctor euismod purus pretium at purus pretium
|
||||
ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Small Title */}
|
||||
<h5 className="h5-md">Egestas volutpat egestas</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">In at mauris vel nisl convallis porta at vitae dui. Nam lacus ligula, vulputate molestie bibendum
|
||||
quis, aliquet elementum massa. Vestibulum ut sagittis odio. Ac massa lorem. Fusce eu cursus est. Fusce non nulla vitae massa placerat vulputate vel a purus aliqum mullam blandit
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Maecenas gravida porttitor nunc, quis vehicula magna luctus tempor. Quisque laoreet a turpis urna
|
||||
augue, viverra a augue eget, dictum tempor diam. Sed pulvinar nibh, vel imperdiet congue varius viverra.
|
||||
Sapien justo massa lorem. Fusce eu cursus non nulla vitae massa placerat purus. Sagittis congue augue egestas
|
||||
volutpat egestas magna suscipit egestas magna ipsum vitae purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec
|
||||
</p>
|
||||
{/* BLOG POST INNER IMAGE */}
|
||||
<div className="post-inner-img">
|
||||
<div className="video-preview pc-15">
|
||||
{/* Play Icon */}
|
||||
<a className="video-popup1" href="https://www.youtube.com/embed/SZEflIVnhH8">
|
||||
<div className="video-btn video-btn-lg bg_rose ico-75">
|
||||
<div className="video-block-wrapper"><span className="flaticon-play-button-1" /></div>
|
||||
</div>
|
||||
</a>
|
||||
{/* Preview Image */}
|
||||
<img className="img-fluid" src="assets/images/blog/inner-img-2.jpg" alt="blog-post-image" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Small Title */}
|
||||
<h5 className="h5-md">Vitae massa placerat vulputate</h5>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Nullam non scelerisque lectus. In at mauris vel nisl convallis porta at vitae dui. Nam lacus
|
||||
vulputate ligula molestie bibendum quis, aliquet elementum massa. Vestibulum ut sagittis purus massa lorem.
|
||||
Fusce eu cursus est. Fusce non nulla vitae massa placerat vulputate purus. Aliqum mullam a blandit tempor
|
||||
posuere ligula varius congue cursus congue magna impedit ligula
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg"><span className="txt-500">Aliqum mullam blandit tempor sapien gravida donec ipsum</span>, at porta
|
||||
justo. Velna vitae and auctor congue magna impedit ligula risus. Mauris donec ociis magnis sapien etiam
|
||||
sapien sagittis congue posuere ligula varius congue cursus tempor gravida donec integer
|
||||
</p>
|
||||
{/* Small Title */}
|
||||
<h5 className="h5-md">Cursus non nulla vitae massa</h5>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Gravida ultrices
|
||||
felis faucibus aliquet undo tempus, blandit posuere ligula varius congue cursus nulla vitae massa placerat vulputate tempor sapien gravida
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Aliquam varius neque commodo purus tempor sapien gravida vulputate pharetra bibendum
|
||||
in ante ornare
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Morbi dui lectus, lobortis felis nec, suscipit imperdiet sapien semper ultrices. Nulla
|
||||
tincidunt volutpat and tincidunt. Habitant morbi tristique senectus et netus malesuada famesa augue
|
||||
suscipit, luctus neque purus ipsum
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Curabitur ac dapibus libero quisque eu tristique neque sellus blandit tristique justo ut aliquam.
|
||||
Aliquam vitae at molestie nunc sapien justo, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia
|
||||
tincidunt massa justo. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum tempor diam. Sed
|
||||
pulvinar consectetur nibh, vel imperdiet varius viverra. Pellentesque ac massa lorem. Fusce eu cursus est.
|
||||
Fusce non nulla vitae massa placerat bulum tincidunt tincidunt massa, et porttitor justo viverra a augue eget
|
||||
</p>
|
||||
</div> {/* END BLOG POST TEXT */}
|
||||
{/* SINGLE POST SHARE LINKS */}
|
||||
<div className="row post-share-links d-flex align-items-center">
|
||||
{/* POST TAGS */}
|
||||
<div className="col-md-9 col-xl-8 post-tags-list">
|
||||
<span><a href="#">Life</a></span>
|
||||
<span><a href="#">Ideas</a></span>
|
||||
<span><a href="#">Story</a></span>
|
||||
<span><a href="#">Web Design</a></span>
|
||||
</div>
|
||||
{/* POST SHARE ICONS */}
|
||||
<div className="col-md-3 col-xl-4 post-share-list text-right">
|
||||
<ul className="share-social-icons ico-25 text-center clearfix">
|
||||
<li><a href="#" className="share-ico ico-facebook"><span className="flaticon-twitter" /></a></li>
|
||||
<li><a href="#" className="share-ico ico-twitter"><span className="flaticon-facebook" /></a></li>
|
||||
<li><a href="#" className="share-ico ico-like"><span className="flaticon-bookmark-white" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> {/* END SINGLE POST SHARE */}
|
||||
{/* OTHER POSTS
|
||||
============================================= */}
|
||||
<div className="other-posts">
|
||||
<div id="op-row" className="row d-flex align-items-center">
|
||||
{/* Previous Post */}
|
||||
<div className="col-md-5">
|
||||
<div className="prev-post mb-30 pr-45">
|
||||
<h5 className="h5-sm">Previous Post</h5>
|
||||
<a href="single-post.html">Congue bulum NordEx tincidunt at purus pretium magnis</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* All Posts */}
|
||||
<div className="col-md-2 text-center">
|
||||
<div className="all-posts ico-35 mb-30">
|
||||
<a href="blog-listing.html"><span className="flaticon-four-black-squares" /></a>
|
||||
</div>
|
||||
</div>
|
||||
{/* Next Post */}
|
||||
<div className="col-md-5 text-right">
|
||||
<div className="next-post mb-30 pl-45">
|
||||
<h5 className="h5-sm">Next Post</h5>
|
||||
<a href="single-post.html">8 neque dolor primis a libero tempus augue tempor</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* End row */}
|
||||
</div> {/* END OTHER POSTS */}
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END SINGLE POST CONTENT */}
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END SINGLE POST */}
|
||||
{/* POST COMMENTS
|
||||
============================================= */}
|
||||
<section id="post-comments" className="bg_whitesmoke pb-80 post-comments division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{/* COMMENTS WRAPPER */}
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
<div className="comments-wrapper">
|
||||
{/* Title */}
|
||||
<h5 className="h5-lg">4 Comments</h5>
|
||||
{/* COMMENT #1 */}
|
||||
<div className="media">
|
||||
{/* Comment-1 Avatar */}
|
||||
<img className="mr-3" src="assets/images/post-author-1.jpg" alt="comment-avatar" />
|
||||
<div className="media-body">
|
||||
{/* Comment-1 Meta */}
|
||||
<div className="comment-meta">
|
||||
<h5 className="h5-sm mt-0">Thomas</h5>
|
||||
<span className="comment-date">5 days ago - </span>
|
||||
<span className="btn-reply ico-20">
|
||||
<a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
|
||||
</span>
|
||||
</div>
|
||||
{/* Comment-1 Text */}
|
||||
<p className="p-lg mb-40">Etiam sapien sem magna at vitae pulvinar congue augue egestas pretium neque undo viverra
|
||||
suscipit egestas magna porta ratione, mollis risus lectus porta rutrum aenean primis in augue luctus neque purus ipsum neque dolor primis purus efficitur an ipsum primis in cubilia laoreet augue
|
||||
</p>
|
||||
<hr />
|
||||
{/* COMMENT #2 */}
|
||||
<div className="media">
|
||||
{/* Comment-2 Avatar */}
|
||||
<a href="#" className="pr-3">
|
||||
<img src="assets/images/post-author-2.jpg" alt="comment-avatar" />
|
||||
</a>
|
||||
<div className="media-body">
|
||||
{/* Comment-2 Meta */}
|
||||
<div className="comment-meta">
|
||||
<h5 className="h5-sm mt-0">David Clark</h5>
|
||||
<span className="comment-date">6 days ago - </span>
|
||||
<span className="btn-reply ico-20">
|
||||
<a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
|
||||
</span>
|
||||
</div>
|
||||
{/* Comment-2 Text */}
|
||||
<p className="p-lg">Etiam sapien magna at vitae pulvinar congue egestas a pretium neque viverra suscipit
|
||||
porta ratione, mollis risus lectus porta aliquet lorem puruss mollis
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END COMMENT #2 */}
|
||||
</div>
|
||||
</div> {/* END COMMENT #1 */}
|
||||
<hr />
|
||||
{/* COMMENT #3 */}
|
||||
<div className="media">
|
||||
{/* Comment-4 Avatar */}
|
||||
<img className="mr-3" src="assets/images/post-author-3.jpg" alt="comment-avatar" />
|
||||
<div className="media-body">
|
||||
{/* Comment-4 Meta */}
|
||||
<div className="comment-meta">
|
||||
<h5 className="h5-sm mt-0">Jasmine</h5>
|
||||
<span className="comment-date">13 days ago - </span>
|
||||
<span className="btn-reply ico-20">
|
||||
<a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
|
||||
</span>
|
||||
</div>
|
||||
{/* Comment-4 Text */}
|
||||
<p className="p-lg">Porta ratione, mollis risus lectus porta rutrum arcu aenean primis in augue luctus and neque
|
||||
purus ipsum neque dolor primis libero tempus, tempor posuere ligula varius an impedit enim tempor vitae
|
||||
pulvinar at congue augue egestas. Praesent aliquet lorem purus, quis mollis nisi laoreet
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END COMMENT #3 */}
|
||||
<hr />
|
||||
{/* COMMENT #4 */}
|
||||
<div className="media">
|
||||
{/* Comment-4 Avatar */}
|
||||
<img className="mr-3" src="assets/images/post-author-4.jpg" alt="comment-avatar" />
|
||||
<div className="media-body">
|
||||
{/* Comment-4 Meta */}
|
||||
<div className="comment-meta">
|
||||
<h5 className="h5-sm mt-0">Rady Smith</h5>
|
||||
<span className="comment-date">42 days ago - </span>
|
||||
<span className="btn-reply ico-20">
|
||||
<a href="#leave-comment" className="internal-link"><span className="flaticon-reply-arrow" /> Reply</a>
|
||||
</span>
|
||||
</div>
|
||||
{/* Comment-4 Text */}
|
||||
<p className="p-lg">Etiam sapien sem magna at vitae pulvinar congue augue egestas pretium neque undo viverra
|
||||
suscipit egestas magna porta ratione, mollis risus lectus porta rutrum arcu an aenean primis auctor
|
||||
</p>
|
||||
</div>
|
||||
</div> {/* END COMMENT #4 */}
|
||||
<hr />
|
||||
{/* COMMENT FORM */}
|
||||
<div id="leave-comment">
|
||||
{/* Title */}
|
||||
<h5 className="h5-lg">Leave a Comment</h5>
|
||||
{/* Text */}
|
||||
<p className="p-md">Your email address will not be published. Required fields are marked *</p>
|
||||
<form name="commentForm" className="row comment-form">
|
||||
<div className="col-md-12 input-message">
|
||||
<p>Add Comment *</p>
|
||||
<textarea className="form-control message" name="message" rows={6} placeholder="Enter Your Comment Here* ..." required defaultValue={""} />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<p>Name*</p>
|
||||
<input type="text" name="name" className="form-control name" placeholder="Enter Your Name*" required />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<p>Email*</p>
|
||||
<input type="email" name="email" className="form-control email" placeholder="Enter Your Email*" required />
|
||||
</div>
|
||||
{/* Contact Form Button */}
|
||||
<div className="col-lg-12 form-btn">
|
||||
<button type="submit" className="btn btn-skyblue tra-skyblue-hover submit">Post Comment</button>
|
||||
</div>
|
||||
{/* Contact Form Message */}
|
||||
<div className="col-md-12 comment-form-msg text-center">
|
||||
<div className="sending-msg"><span className="loading" /></div>
|
||||
</div>
|
||||
</form>
|
||||
</div> {/* END COMMENT FORM */}
|
||||
</div>
|
||||
</div> {/* END COMMENTS WRAPPER */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END POST COMMENTS */}
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
<section id="newsletter-1" className="bg_whitesmoke pb-20 newsletter-section division">
|
||||
<div className="container">
|
||||
<div className="newsletter-wrapper bg-white">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-txt">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Subscribe to Our Newsletter</span>
|
||||
{/* Title */}
|
||||
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* NEWSLETTER FORM */}
|
||||
<div className="col-lg-6">
|
||||
<form className="newsletter-form">
|
||||
<div className="input-group">
|
||||
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
||||
<span className="input-group-btn">
|
||||
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
|
||||
</span>
|
||||
</div>
|
||||
{/* Newsletter Form Notification */}
|
||||
<label htmlFor="s-email" className="form-notification" />
|
||||
</form>
|
||||
</div> {/* END NEWSLETTER FORM */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End newsletter-holder */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END NEWSLETTER-1 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Single_post
|
||||
@@ -0,0 +1,320 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Terms extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
|
||||
|
||||
{/* PRELOADER SPINNER
|
||||
============================================= */}
|
||||
<div id="loader-wrapper">
|
||||
<div id="loading">
|
||||
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
||||
</div>
|
||||
</div>
|
||||
{/* PAGE CONTENT
|
||||
============================================= */}
|
||||
<div id="page" className="page">
|
||||
|
||||
{/* TERMS & PRIVACY
|
||||
============================================= */}
|
||||
<section id="terms-page" className="bg_whitesmoke hero-offset-nav pb-70 terms-section division">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{/* TERMS CONTENT */}
|
||||
<div className="col-lg-10 offset-lg-1">
|
||||
{/* TERMS TITLE */}
|
||||
<div className="terms-title text-center">
|
||||
{/* Title */}
|
||||
<h2 className="h2-md">Our Terms & Privacy</h2>
|
||||
{/* Text */}
|
||||
<p className="p-xl grey-color">Last Modified: April 04, 2021</p>
|
||||
</div> {/* END TERMS TITLE */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Text */}
|
||||
<p className="p-lg">Donec sodales, nibh vel (the <span className="txt-700">"Terms"</span>) tristique aliquet,
|
||||
nisi libero suscipit diam, sed tempus ante nulla purus. Donec dolor magna, suscipit in magna dignissim, porttitor
|
||||
an hendrerit diam. Nunc gravida ultrices faucibus. Aliquet lorem purus, quis mollis nisi laoreet at vitae. Mauris consequat tortor duis fermentum a massa
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus
|
||||
efficitur ipsum primis in cubilia laoreet augue egestas luctus donec diam. Curabitur undo dapibus
|
||||
libero. Quisque eu tristique neque blandit tristique justo aliquam. Aliquam <a href="#" className="skyblue-color">molestie nunc sapien justo</a>, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia
|
||||
elit. Vestibulum tincidunt tincidunt massa, et porttitor justo suscipit in magna dignissim
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Processing of your data</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Donec sodales, nibh vel tristique aliquet, nisi libero suscipit diam, sed tempus ante nulla ut
|
||||
purus. Donec dolor magna aliquet suscipit in magna dignissim, porttitor hendrerit. Nunc gravida ultrices a
|
||||
felis eget faucibus. Praesent lorem purus, quis mollis nisi laoreet vitae. Mauris nec consequat tortor
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor
|
||||
congue magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor
|
||||
gravida donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
|
||||
</p>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Email address</span> euismod purus pretium purus pretium ligula
|
||||
rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo turpis urna augue, viverra
|
||||
a augue eget
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Payment data</span> vitae auctor a congue magna tempor sapien gravida
|
||||
laoreet turpis urna augue, viverra a augue eget, dictum tempor diam pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec, dictum tempor
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
|
||||
magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Collection of information</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">In at mauris vel nisl convallis porta at vitae dui. Nam lacus ligula, vulputate mullam molestie
|
||||
bibendum quis, aliquet massa elementum. Vestibulum ut sagittis massa lorem fusce cursus est. Fusce non nulla vitae massa placerat vulputate vel purus. Aliqum blandit tempor undo sapien pulvinar consectetur nibh, vel imperdiet dui varius viverra.
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX #3 */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Authorized user accounts and account security</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida ultrices felis eget faucibus.
|
||||
Praesent aliquet lorem purus, quis mollis nisi laoreet vitae. <a href="#" className="skyblue-color"> Mauris nec consequat tortor.</a> Duis fermentum a massa in convallis quisque eu interdum augue.
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">In at mauris vel nisl convallis porta at vitae dui. Nam lacus ligula, vulputate mullam molestie
|
||||
bibendum quis, aliquet massa elementum. Vestibulum ut sagittis massa lorem fusce cursus est. Fusce non nulla vitae massa placerat vulputate vel purus. Aliqum blandit tempor undo
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Prohibited conduct and content</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus
|
||||
efficitur ipsum primis in cubilia laoreet augue egestas luctus donec diam. Curabiturac dapibus libero. Quisque
|
||||
eu tristique neque. Phasellus blandit tristique justo ut aliquam. Aliquam vitae <a href="#" className="skyblue-color">molestie nunc sapien justo</a>, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia elit. Vestibulum tincidunt tincidunt massa, et porttitor justo.
|
||||
</p>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Quaerat sodales sapien undo euismod purus blandit velna</span>
|
||||
vitae auctor a congue magna tempor sapien eget gravida laoreet turpis urna augue, viverra a augue
|
||||
eget, dictum tempor diam pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Nemo ipsam egestas volute turpis dolores</span> ut aliquam quaerat
|
||||
sodales sapien congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus efficitur ipsum primis in cubilia undo pretium a purus pretium ligula
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX #5 */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Your responsibilities</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
|
||||
magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
|
||||
</p>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida
|
||||
ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius congue cursus
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Aliquam varius neque commodo purus vulputate pharetra bibendum in ante ornare metus</p></li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Morbi dui lectus, lobortis sit amet felis nec, suscipit imperdiet sapien semper ultrices</p></li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Nulla tincidunt volutpat tincidunt. Pellentesque habitant morbi tristique senectus
|
||||
et netus et malesuada famesa augue suscipit, luctus neque purus ipsum neque dolor primis
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Availability of services</h4>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Nemo ipsam egestas volute turpis dolores</span> ut aliquam quaerat
|
||||
sodales sapien congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus efficitur ipsum primis in cubilia undo pretium a purus pretium ligula
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Quaerat sodales sapien undo euismod purus blandit velna</span>
|
||||
vitae auctor a congue magna tempor sapien eget gravida laoreet turpis urna augue, viverra a augue eget, dictum tempor diam pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Fringilla risus nec, luctus mauris orci auctor</span> euismod purus
|
||||
pretium purus pretium ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
|
||||
quis vehicula magna luctus tempor. Quisque laoreet turpis urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat imperdiet dui varius viverra
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Term for storing personal data</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Donec sodales, nibh vel tristique aliquet, nisi libero suscipit diam, sed tempus ante nulla
|
||||
purus. Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
|
||||
magna impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida a donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet augue egestas luctus donec purus and blandit sodales
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Warranty limitations</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Ut non mauris libero. Sed consequat posuere nunc, eu porttitor neque dignissim donec bibendum a
|
||||
sodales elit blandit. Suspendisse at finibus metus. Integer nulla quam, pulvinar fermentum a commodo undo pulvinar sed nisi. Sed augue turpis, mollis a vehicula ornare, dapibus
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
|
||||
magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida an donec enim ipsum porta justo integer odio velna a purus efficitur ipsum primis in cubilia laoreet egestas and luctus donec purus and blandit sodales
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX #9 */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Notices</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Maecenas gravida porttitor nunc, quis vehicula magna luctus tempor. Quisque laoreet turpis urna
|
||||
augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat imperdiet dui varius viverra. Pellentesque ac massa lorem fusce cursus aliquet elementum
|
||||
</p>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Quaerat sodales sapien undo euismod purus blandit velna</span>
|
||||
vitae auctor a congue magna tempor sapien eget gravida laoreet turpis urna augue, viverra a augue eget, dictum tempor diam pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg"><span className="txt-500">Fringilla risus nec, luctus mauris orci auctor</span> euismod purus
|
||||
pretium purus pretium ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo quis vehicula magna luctus tempor. Quisque laoreet turpis urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat imperdiet dui varius viverra
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Third Party Beneficiary</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
|
||||
magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien sem congue tempor gravida at donec enim ipsum porta justo integer odio velna a purus ipsum primis in cubilia laoreet undo augue egestas luctus donec purus and blandit sodales
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Donec sodales, nibh vel tristique aliquet, nisi libero suscipit diam, sed tempus ante nulla purus. Donec dolor suscipit and magna, in magna dignissim, porttitor hendrerit nunc gravida ultrices felis. Quisque eleifend arcu ac tellus cursus, nec vehicula diam tempus. Nam ut sapien et mi congue tincidunt. Phasellus in exneque.
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
{/* TERMS BOX */}
|
||||
<div className="terms-box">
|
||||
{/* Title */}
|
||||
<h4 className="h4-sm">Other Terms</h4>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Aliqum mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor congue
|
||||
magna nihil impedit ligula risus. Mauris donec ociis et magnis sapien sagittis sapien congue tempor gravida a
|
||||
donec enim ipsum porta justo integer velna a purus efficitur ipsum primis in cubilia laoreet an augue egestas
|
||||
luctus donec purus and blandit sodales
|
||||
</p>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus
|
||||
efficitur ipsum primis in cubilia laoreet augue egestas luctus donec diam. Curabitur ac dapibus ibero. Quisque
|
||||
undo tristique neque phasellus blandit non tristique justo ut aliquam. Aliquam vitae <a href="#" className="skyblue-color"> molestie nunc sapien justo</a>, aliquet molestie sed, venenatis nec purus. Aliquam eget lacinia elit. Vestibulum tincidunt tincidunt
|
||||
</p>
|
||||
{/* List */}
|
||||
<ul className="simple-list">
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida
|
||||
ultrices a faucibus felis. Praesent aliquet tempus, blandit posuere ligula varius congue cursus
|
||||
</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Aliquam varius neque commodo purus vulputate pharetra bibendum in ante ornare metus</p>
|
||||
</li>
|
||||
<li className="list-item">
|
||||
<p className="p-lg">Morbi dui lectus, lobortis sit amet felis nec, suscipit imperdiet sapien semper ultrices.
|
||||
Nulla tincidunt purus volutpat at tincidunt. Habitant morbi tristique senectus et netus malesuada famesa augue suscipit a luctus neque purus ipsum neque dolor
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Text */}
|
||||
<p className="p-lg">Suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida ultrices felis eget faucibus.
|
||||
Praesent and aliquet lorem purus, quis mollis nisi laoreet vitae. <a href="#" className="skyblue-color"> Mauris nec consequat tortor</a>
|
||||
</p>
|
||||
</div> {/* END TERMS BOX */}
|
||||
</div> {/* END TERMS CONTENT */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End container */}
|
||||
{/* GEOMETRIC OVERLAY */}
|
||||
<div className="bg_fixed geometric_overlay" />
|
||||
</section> {/* END TERMS & PRIVACY */}
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
<section id="newsletter-1" className="bg_whitesmoke pb-20 newsletter-section division">
|
||||
<div className="container">
|
||||
<div className="newsletter-wrapper bg-white">
|
||||
<div className="row d-flex align-items-center">
|
||||
{/* SECTION TITLE */}
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-txt">
|
||||
{/* Section ID */}
|
||||
<span className="section-id">Subscribe to Our Newsletter</span>
|
||||
{/* Title */}
|
||||
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* NEWSLETTER FORM */}
|
||||
<div className="col-lg-6">
|
||||
<form className="newsletter-form">
|
||||
<div className="input-group">
|
||||
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
||||
<span className="input-group-btn">
|
||||
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
|
||||
</span>
|
||||
</div>
|
||||
{/* Newsletter Form Notification */}
|
||||
<label htmlFor="s-email" className="form-notification" />
|
||||
</form>
|
||||
</div> {/* END NEWSLETTER FORM */}
|
||||
</div> {/* End row */}
|
||||
</div> {/* End newsletter-holder */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END NEWSLETTER-1 */}
|
||||
|
||||
</div> {/* END PAGE CONTENT */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Terms
|
||||
+14
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
@@ -0,0 +1,119 @@
|
||||
.wsmenu > .wsmenu-list > li > ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-o-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform: rotateX(-75deg);
|
||||
-o-transform: rotateX(-75deg);
|
||||
-moz-transform: rotateX(-75deg);
|
||||
-webkit-transform: rotateX(-75deg);
|
||||
}
|
||||
|
||||
.wsmenu > .wsmenu-list > li:hover > ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform: rotateX(-75deg);
|
||||
-o-transform: rotateX(-75deg);
|
||||
-moz-transform: rotateX(-75deg);
|
||||
-webkit-transform: rotateX(-75deg);
|
||||
}
|
||||
|
||||
.wsmenu > .wsmenu-list > li > ul.sub-menu > li:hover > ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-o-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-o-transition: -o-transform 0.4s, opacity 0.4s;
|
||||
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
|
||||
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
|
||||
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
|
||||
transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-o-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-o-transition: -o-transform 0.4s, opacity 0.4s;
|
||||
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
|
||||
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
|
||||
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
|
||||
transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform: rotateX(-75deg);
|
||||
-o-transform: rotateX(-75deg);
|
||||
-moz-transform: rotateX(-75deg);
|
||||
-webkit-transform: rotateX(-75deg);
|
||||
}
|
||||
|
||||
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li:hover > ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu > .wsmenu-list > li > .wsmegamenu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-o-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform: rotateX(-75deg);
|
||||
-o-transform: rotateX(-75deg);
|
||||
-moz-transform: rotateX(-75deg);
|
||||
-webkit-transform: rotateX(-75deg);
|
||||
}
|
||||
|
||||
.wsmenu > .wsmenu-list > li:hover > .wsmegamenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(40px) skewX(7deg);
|
||||
-moz-transform: translateX(40px) skewX(7deg);
|
||||
-ms-transform: translateX(40px) skewX(7deg);
|
||||
-o-transform: translateX(40px) skewX(7deg);
|
||||
transform: translateX(40px) skewX(7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(40px) skewX(7deg);
|
||||
-moz-transform: translateX(40px) skewX(7deg);
|
||||
-ms-transform: translateX(40px) skewX(7deg);
|
||||
-o-transform: translateX(40px) skewX(7deg);
|
||||
transform: translateX(40px) skewX(7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(40px) skewX(7deg);
|
||||
-moz-transform: translateX(40px) skewX(7deg);
|
||||
-ms-transform: translateX(40px) skewX(7deg);
|
||||
-o-transform: translateX(40px) skewX(7deg);
|
||||
transform: translateX(40px) skewX(7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>.wsmegamenu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(40px) skewX(7deg);
|
||||
-moz-transform: translateX(40px) skewX(7deg);
|
||||
-ms-transform: translateX(40px) skewX(7deg);
|
||||
-o-transform: translateX(40px) skewX(7deg);
|
||||
transform: translateX(40px) skewX(7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>.wsmegamenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(-40px) skewX(-7deg);
|
||||
-moz-transform: translateX(-40px) skewX(-7deg);
|
||||
-ms-transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transform: translateX(-40px) skewX(-7deg);
|
||||
transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(-40px) skewX(-7deg);
|
||||
-moz-transform: translateX(-40px) skewX(-7deg);
|
||||
-ms-transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transform: translateX(-40px) skewX(-7deg);
|
||||
transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(-40px) skewX(-7deg);
|
||||
-moz-transform: translateX(-40px) skewX(-7deg);
|
||||
-ms-transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transform: translateX(-40px) skewX(-7deg);
|
||||
transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>.wsmegamenu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateX(-40px) skewX(-7deg);
|
||||
-moz-transform: translateX(-40px) skewX(-7deg);
|
||||
-ms-transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transform: translateX(-40px) skewX(-7deg);
|
||||
transform: translateX(-40px) skewX(-7deg);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>.wsmegamenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateY(20px);
|
||||
-moz-transform: translateY(20px);
|
||||
-ms-transform: translateY(20px);
|
||||
-o-transform: translateY(20px);
|
||||
transform: translateY(20px);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateY(20px);
|
||||
-moz-transform: translateY(20px);
|
||||
-ms-transform: translateY(20px);
|
||||
-o-transform: translateY(20px);
|
||||
transform: translateY(20px);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateY(20px);
|
||||
-moz-transform: translateY(20px);
|
||||
-ms-transform: translateY(20px);
|
||||
-o-transform: translateY(20px);
|
||||
transform: translateY(20px);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>.wsmegamenu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
-o-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: translateY(20px);
|
||||
-moz-transform: translateY(20px);
|
||||
-ms-transform: translateY(20px);
|
||||
-o-transform: translateY(20px);
|
||||
transform: translateY(20px);
|
||||
-o-transition: -o-transform 0.3s, opacity 0.3s;
|
||||
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>.wsmegamenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: rotateY(-90deg);
|
||||
-moz-transform: rotateY(-90deg);
|
||||
-ms-transform: rotateY(-90deg);
|
||||
-o-transform: rotateY(-90deg);
|
||||
transform: rotateY(-90deg);
|
||||
-webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
-moz-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: rotateY(-90deg);
|
||||
-moz-transform: rotateY(-90deg);
|
||||
-ms-transform: rotateY(-90deg);
|
||||
-o-transform: rotateY(-90deg);
|
||||
transform: rotateY(-90deg);
|
||||
-webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
-moz-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: rotateY(-90deg);
|
||||
-moz-transform: rotateY(-90deg);
|
||||
-ms-transform: rotateY(-90deg);
|
||||
-o-transform: rotateY(-90deg);
|
||||
transform: rotateY(-90deg);
|
||||
-webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
-moz-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>.wsmegamenu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: rotateY(-90deg);
|
||||
-moz-transform: rotateY(-90deg);
|
||||
-ms-transform: rotateY(-90deg);
|
||||
-o-transform: rotateY(-90deg);
|
||||
transform: rotateY(-90deg);
|
||||
-webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
-moz-transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
transition: all 0.3s ease-in, opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>.wsmegamenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-moz-transition: 300ms;
|
||||
-o-transition: 300ms;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
max-height: 1000px;
|
||||
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform: rotateX(-75deg);
|
||||
-o-transform: rotateX(-75deg);
|
||||
-moz-transform: rotateX(-75deg);
|
||||
-webkit-transform: rotateX(-75deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-o-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-o-transition: -o-transform 0.4s, opacity 0.4s;
|
||||
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
|
||||
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
|
||||
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
|
||||
transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-o-transform-origin: 0% 0%;
|
||||
-ms-transform-origin: 0% 0%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-o-transition: -o-transform 0.4s, opacity 0.4s;
|
||||
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
|
||||
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
|
||||
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
|
||||
transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform: rotateX(-75deg);
|
||||
-o-transform: rotateX(-75deg);
|
||||
-moz-transform: rotateX(-75deg);
|
||||
-webkit-transform: rotateX(-75deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>ul.sub-menu>li>ul.sub-menu>li:hover>ul.sub-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: rotateX(0deg);
|
||||
-o-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li>.wsmegamenu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-moz-transition: 300ms;
|
||||
-o-transition: 300ms;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
.wsmenu>.wsmenu-list>li:hover>.wsmegamenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
max-height: 1000px;
|
||||
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Google Sans';
|
||||
src: url('../fonts/GoogleSans-Bold.eot');
|
||||
src: local('../fonts/Google Sans Bold'), local('GoogleSans-Bold'),
|
||||
url('../fonts/GoogleSans-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/GoogleSans-Bold.woff2') format('woff2'),
|
||||
url('../fonts/GoogleSans-Bold.woff') format('woff'),
|
||||
url('../fonts/GoogleSans-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Google Sans';
|
||||
src: url('../fonts/GoogleSans-Medium.eot');
|
||||
src: local('../fonts/Google Sans Medium'), local('GoogleSans-Medium'),
|
||||
url('../fonts/GoogleSans-Medium.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/GoogleSans-Medium.woff2') format('woff2'),
|
||||
url('../fonts/GoogleSans-Medium.woff') format('woff'),
|
||||
url('../fonts/GoogleSans-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Google Sans';
|
||||
src: url('../fonts/GoogleSans-Regular.eot');
|
||||
src: local('../fonts/Google Sans Regular'), local('GoogleSans-Regular'),
|
||||
url('../fonts/GoogleSans-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/GoogleSans-Regular.woff2') format('woff2'),
|
||||
url('../fonts/GoogleSans-Regular.woff') format('woff'),
|
||||
url('../fonts/GoogleSans-Regular.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,125 @@
|
||||
@font-face {
|
||||
font-family: "flaticon";
|
||||
src: url("./flaticon.ttf?b1e64bd9d0599fb4d9d8703145551505") format("truetype"),
|
||||
url("./flaticon.woff?b1e64bd9d0599fb4d9d8703145551505") format("woff"),
|
||||
url("./flaticon.woff2?b1e64bd9d0599fb4d9d8703145551505") format("woff2"),
|
||||
url("./flaticon.eot?b1e64bd9d0599fb4d9d8703145551505#iefix") format("embedded-opentype"),
|
||||
url("./flaticon.svg?b1e64bd9d0599fb4d9d8703145551505#flaticon") format("svg");
|
||||
}
|
||||
|
||||
span[class^="flaticon-"]:before, span[class*=" flaticon-"]:before {
|
||||
font-family: flaticon !important;
|
||||
font-style: normal;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.flaticon-ads:before {
|
||||
content: "\f101";
|
||||
}
|
||||
.flaticon-background:before {
|
||||
content: "\f102";
|
||||
}
|
||||
.flaticon-brickwall:before {
|
||||
content: "\f103";
|
||||
}
|
||||
.flaticon-browser-1:before {
|
||||
content: "\f104";
|
||||
}
|
||||
.flaticon-browser-2:before {
|
||||
content: "\f105";
|
||||
}
|
||||
.flaticon-browser-3:before {
|
||||
content: "\f106";
|
||||
}
|
||||
.flaticon-browser-4:before {
|
||||
content: "\f107";
|
||||
}
|
||||
.flaticon-browser-5:before {
|
||||
content: "\f108";
|
||||
}
|
||||
.flaticon-browser-6:before {
|
||||
content: "\f109";
|
||||
}
|
||||
.flaticon-browser-7:before {
|
||||
content: "\f10a";
|
||||
}
|
||||
.flaticon-browser-8:before {
|
||||
content: "\f10b";
|
||||
}
|
||||
.flaticon-browser:before {
|
||||
content: "\f10c";
|
||||
}
|
||||
.flaticon-brush:before {
|
||||
content: "\f10d";
|
||||
}
|
||||
.flaticon-controls:before {
|
||||
content: "\f10e";
|
||||
}
|
||||
.flaticon-development:before {
|
||||
content: "\f10f";
|
||||
}
|
||||
.flaticon-heart-shape-outline:before {
|
||||
content: "\f110";
|
||||
}
|
||||
.flaticon-heart-shape-silhouette:before {
|
||||
content: "\f111";
|
||||
}
|
||||
.flaticon-layers-1:before {
|
||||
content: "\f112";
|
||||
}
|
||||
.flaticon-layers:before {
|
||||
content: "\f113";
|
||||
}
|
||||
.flaticon-manufacturing:before {
|
||||
content: "\f114";
|
||||
}
|
||||
.flaticon-pantone:before {
|
||||
content: "\f115";
|
||||
}
|
||||
.flaticon-resize:before {
|
||||
content: "\f116";
|
||||
}
|
||||
.flaticon-responsive-1:before {
|
||||
content: "\f117";
|
||||
}
|
||||
.flaticon-responsive:before {
|
||||
content: "\f118";
|
||||
}
|
||||
.flaticon-rule-of-thirds:before {
|
||||
content: "\f119";
|
||||
}
|
||||
.flaticon-scale:before {
|
||||
content: "\f11a";
|
||||
}
|
||||
.flaticon-selection:before {
|
||||
content: "\f11b";
|
||||
}
|
||||
.flaticon-square:before {
|
||||
content: "\f11c";
|
||||
}
|
||||
.flaticon-stationery:before {
|
||||
content: "\f11d";
|
||||
}
|
||||
.flaticon-tools:before {
|
||||
content: "\f11e";
|
||||
}
|
||||
.flaticon-web-browser-1:before {
|
||||
content: "\f11f";
|
||||
}
|
||||
.flaticon-web-browser-2:before {
|
||||
content: "\f120";
|
||||
}
|
||||
.flaticon-web-browser:before {
|
||||
content: "\f121";
|
||||
}
|
||||
.flaticon-windows-1:before {
|
||||
content: "\f122";
|
||||
}
|
||||
.flaticon-windows:before {
|
||||
content: "\f123";
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 416 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 302 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
+7
File diff suppressed because one or more lines are too long
@@ -0,0 +1,168 @@
|
||||
// JavaScript Document
|
||||
|
||||
|
||||
$(window).on('load', function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Preloader
|
||||
/*----------------------------------------------------*/
|
||||
|
||||
var preloader = $('#loader-wrapper'),
|
||||
loader = preloader.find('.cssload-loader');
|
||||
loader.fadeOut();
|
||||
preloader.delay(400).fadeOut('slow');
|
||||
|
||||
});
|
||||
|
||||
|
||||
$(window).on('scroll', function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Navigtion Menu Scroll
|
||||
/*----------------------------------------------------*/
|
||||
|
||||
var b = $(window).scrollTop();
|
||||
|
||||
if( b > 80 ){
|
||||
$(".wsmainfull").addClass("scroll");
|
||||
} else {
|
||||
$(".wsmainfull").removeClass("scroll");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Animated Scroll To Anchor
|
||||
/*----------------------------------------------------*/
|
||||
|
||||
$('.header a[href^="#"], #page a.btn[href^="#"]').on('click', function (e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var target = this.hash,
|
||||
$target = jQuery(target);
|
||||
|
||||
$('html, body').stop().animate({
|
||||
'scrollTop': $target.offset().top - 110 // - 200px (nav-height)
|
||||
}, 'slow', 'easeInSine', function () {
|
||||
window.location.hash = '1' + target;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* ScrollUp
|
||||
/*----------------------------------------------------*/
|
||||
|
||||
$.scrollUp = function (options) {
|
||||
|
||||
// Defaults
|
||||
var defaults = {
|
||||
scrollName: 'scrollUp', // Element ID
|
||||
topDistance: 600, // Distance from top before showing element (px)
|
||||
topSpeed: 800, // Speed back to top (ms)
|
||||
animation: 'fade', // Fade, slide, none
|
||||
animationInSpeed: 200, // Animation in speed (ms)
|
||||
animationOutSpeed: 200, // Animation out speed (ms)
|
||||
scrollText: '', // Text for element
|
||||
scrollImg: false, // Set true to use image
|
||||
activeOverlay: false // Set CSS color to display scrollUp active point, e.g '#00FFFF'
|
||||
};
|
||||
|
||||
var o = $.extend({}, defaults, options),
|
||||
scrollId = '#' + o.scrollName;
|
||||
|
||||
// Create element
|
||||
$('<a/>', {
|
||||
id: o.scrollName,
|
||||
href: '#top',
|
||||
title: o.scrollText
|
||||
}).appendTo('body');
|
||||
|
||||
// If not using an image display text
|
||||
if (!o.scrollImg) {
|
||||
$(scrollId).text(o.scrollText);
|
||||
}
|
||||
|
||||
// Minium CSS to make the magic happen
|
||||
$(scrollId).css({'display':'none','position': 'fixed','z-index': '2147483647'});
|
||||
|
||||
// Active point overlay
|
||||
if (o.activeOverlay) {
|
||||
$("body").append("<div id='"+ o.scrollName +"-active'></div>");
|
||||
$(scrollId+"-active").css({ 'position': 'absolute', 'top': o.topDistance+'px', 'width': '100%', 'border-top': '1px dotted '+o.activeOverlay, 'z-index': '2147483647' });
|
||||
}
|
||||
|
||||
// Scroll function
|
||||
$(window).on('scroll', function(){
|
||||
switch (o.animation) {
|
||||
case "fade":
|
||||
$( ($(window).scrollTop() > o.topDistance) ? $(scrollId).fadeIn(o.animationInSpeed) : $(scrollId).fadeOut(o.animationOutSpeed) );
|
||||
break;
|
||||
case "slide":
|
||||
$( ($(window).scrollTop() > o.topDistance) ? $(scrollId).slideDown(o.animationInSpeed) : $(scrollId).slideUp(o.animationOutSpeed) );
|
||||
break;
|
||||
default:
|
||||
$( ($(window).scrollTop() > o.topDistance) ? $(scrollId).show(0) : $(scrollId).hide(0) );
|
||||
}
|
||||
});
|
||||
|
||||
// To the top
|
||||
$(scrollId).on('click', function(event){
|
||||
$('html, body').animate({scrollTop:0}, o.topSpeed);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$.scrollUp();
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Inner Pages Rotator
|
||||
/*----------------------------------------------------*/
|
||||
|
||||
var owl = $('.ipages-holder');
|
||||
owl.owlCarousel({
|
||||
items: 4,
|
||||
loop:true,
|
||||
autoplay:true,
|
||||
navBy: 1,
|
||||
autoplayTimeout: 3000,
|
||||
autoplayHoverPause: false,
|
||||
smartSpeed: 2500,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
767:{
|
||||
items:2
|
||||
},
|
||||
768:{
|
||||
items:2
|
||||
},
|
||||
991:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:4
|
||||
},
|
||||
1441:{
|
||||
items:4
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
Vendored
+322
@@ -0,0 +1,322 @@
|
||||
/**
|
||||
* @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
*/
|
||||
;(function(window, document) {
|
||||
/*jshint evil:true */
|
||||
/** version */
|
||||
var version = '3.7.2';
|
||||
|
||||
/** Preset options */
|
||||
var options = window.html5 || {};
|
||||
|
||||
/** Used to skip problem elements */
|
||||
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
|
||||
|
||||
/** Not all elements can be cloned in IE **/
|
||||
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
|
||||
|
||||
/** Detect whether the browser supports default html5 styles */
|
||||
var supportsHtml5Styles;
|
||||
|
||||
/** Name of the expando, to work with multiple documents or to re-shiv one document */
|
||||
var expando = '_html5shiv';
|
||||
|
||||
/** The id for the the documents expando */
|
||||
var expanID = 0;
|
||||
|
||||
/** Cached data for each document */
|
||||
var expandoData = {};
|
||||
|
||||
/** Detect whether the browser supports unknown elements */
|
||||
var supportsUnknownElements;
|
||||
|
||||
(function() {
|
||||
try {
|
||||
var a = document.createElement('a');
|
||||
a.innerHTML = '<xyz></xyz>';
|
||||
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
|
||||
supportsHtml5Styles = ('hidden' in a);
|
||||
|
||||
supportsUnknownElements = a.childNodes.length == 1 || (function() {
|
||||
// assign a false positive if unable to shiv
|
||||
(document.createElement)('a');
|
||||
var frag = document.createDocumentFragment();
|
||||
return (
|
||||
typeof frag.cloneNode == 'undefined' ||
|
||||
typeof frag.createDocumentFragment == 'undefined' ||
|
||||
typeof frag.createElement == 'undefined'
|
||||
);
|
||||
}());
|
||||
} catch(e) {
|
||||
// assign a false positive if detection fails => unable to shiv
|
||||
supportsHtml5Styles = true;
|
||||
supportsUnknownElements = true;
|
||||
}
|
||||
|
||||
}());
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* Creates a style sheet with the given CSS text and adds it to the document.
|
||||
* @private
|
||||
* @param {Document} ownerDocument The document.
|
||||
* @param {String} cssText The CSS text.
|
||||
* @returns {StyleSheet} The style element.
|
||||
*/
|
||||
function addStyleSheet(ownerDocument, cssText) {
|
||||
var p = ownerDocument.createElement('p'),
|
||||
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
|
||||
|
||||
p.innerHTML = 'x<style>' + cssText + '</style>';
|
||||
return parent.insertBefore(p.lastChild, parent.firstChild);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the value of `html5.elements` as an array.
|
||||
* @private
|
||||
* @returns {Array} An array of shived element node names.
|
||||
*/
|
||||
function getElements() {
|
||||
var elements = html5.elements;
|
||||
return typeof elements == 'string' ? elements.split(' ') : elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extends the built-in list of html5 elements
|
||||
* @memberOf html5
|
||||
* @param {String|Array} newElements whitespace separated list or array of new element names to shiv
|
||||
* @param {Document} ownerDocument The context document.
|
||||
*/
|
||||
function addElements(newElements, ownerDocument) {
|
||||
var elements = html5.elements;
|
||||
if(typeof elements != 'string'){
|
||||
elements = elements.join(' ');
|
||||
}
|
||||
if(typeof newElements != 'string'){
|
||||
newElements = newElements.join(' ');
|
||||
}
|
||||
html5.elements = elements +' '+ newElements;
|
||||
shivDocument(ownerDocument);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the data associated to the given document
|
||||
* @private
|
||||
* @param {Document} ownerDocument The document.
|
||||
* @returns {Object} An object of data.
|
||||
*/
|
||||
function getExpandoData(ownerDocument) {
|
||||
var data = expandoData[ownerDocument[expando]];
|
||||
if (!data) {
|
||||
data = {};
|
||||
expanID++;
|
||||
ownerDocument[expando] = expanID;
|
||||
expandoData[expanID] = data;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* returns a shived element for the given nodeName and document
|
||||
* @memberOf html5
|
||||
* @param {String} nodeName name of the element
|
||||
* @param {Document} ownerDocument The context document.
|
||||
* @returns {Object} The shived element.
|
||||
*/
|
||||
function createElement(nodeName, ownerDocument, data){
|
||||
if (!ownerDocument) {
|
||||
ownerDocument = document;
|
||||
}
|
||||
if(supportsUnknownElements){
|
||||
return ownerDocument.createElement(nodeName);
|
||||
}
|
||||
if (!data) {
|
||||
data = getExpandoData(ownerDocument);
|
||||
}
|
||||
var node;
|
||||
|
||||
if (data.cache[nodeName]) {
|
||||
node = data.cache[nodeName].cloneNode();
|
||||
} else if (saveClones.test(nodeName)) {
|
||||
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
|
||||
} else {
|
||||
node = data.createElem(nodeName);
|
||||
}
|
||||
|
||||
// Avoid adding some elements to fragments in IE < 9 because
|
||||
// * Attributes like `name` or `type` cannot be set/changed once an element
|
||||
// is inserted into a document/fragment
|
||||
// * Link elements with `src` attributes that are inaccessible, as with
|
||||
// a 403 response, will cause the tab/window to crash
|
||||
// * Script elements appended to fragments will execute when their `src`
|
||||
// or `text` property is set
|
||||
return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
|
||||
}
|
||||
|
||||
/**
|
||||
* returns a shived DocumentFragment for the given document
|
||||
* @memberOf html5
|
||||
* @param {Document} ownerDocument The context document.
|
||||
* @returns {Object} The shived DocumentFragment.
|
||||
*/
|
||||
function createDocumentFragment(ownerDocument, data){
|
||||
if (!ownerDocument) {
|
||||
ownerDocument = document;
|
||||
}
|
||||
if(supportsUnknownElements){
|
||||
return ownerDocument.createDocumentFragment();
|
||||
}
|
||||
data = data || getExpandoData(ownerDocument);
|
||||
var clone = data.frag.cloneNode(),
|
||||
i = 0,
|
||||
elems = getElements(),
|
||||
l = elems.length;
|
||||
for(;i<l;i++){
|
||||
clone.createElement(elems[i]);
|
||||
}
|
||||
return clone;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
|
||||
* @private
|
||||
* @param {Document|DocumentFragment} ownerDocument The document.
|
||||
* @param {Object} data of the document.
|
||||
*/
|
||||
function shivMethods(ownerDocument, data) {
|
||||
if (!data.cache) {
|
||||
data.cache = {};
|
||||
data.createElem = ownerDocument.createElement;
|
||||
data.createFrag = ownerDocument.createDocumentFragment;
|
||||
data.frag = data.createFrag();
|
||||
}
|
||||
|
||||
|
||||
ownerDocument.createElement = function(nodeName) {
|
||||
//abort shiv
|
||||
if (!html5.shivMethods) {
|
||||
return data.createElem(nodeName);
|
||||
}
|
||||
return createElement(nodeName, ownerDocument, data);
|
||||
};
|
||||
|
||||
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
|
||||
'var n=f.cloneNode(),c=n.createElement;' +
|
||||
'h.shivMethods&&(' +
|
||||
// unroll the `createElement` calls
|
||||
getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
|
||||
data.createElem(nodeName);
|
||||
data.frag.createElement(nodeName);
|
||||
return 'c("' + nodeName + '")';
|
||||
}) +
|
||||
');return n}'
|
||||
)(html5, data.frag);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* Shivs the given document.
|
||||
* @memberOf html5
|
||||
* @param {Document} ownerDocument The document to shiv.
|
||||
* @returns {Document} The shived document.
|
||||
*/
|
||||
function shivDocument(ownerDocument) {
|
||||
if (!ownerDocument) {
|
||||
ownerDocument = document;
|
||||
}
|
||||
var data = getExpandoData(ownerDocument);
|
||||
|
||||
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
|
||||
data.hasCSS = !!addStyleSheet(ownerDocument,
|
||||
// corrects block display not defined in IE6/7/8/9
|
||||
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
|
||||
// adds styling not present in IE6/7/8/9
|
||||
'mark{background:#FF0;color:#000}' +
|
||||
// hides non-rendered elements
|
||||
'template{display:none}'
|
||||
);
|
||||
}
|
||||
if (!supportsUnknownElements) {
|
||||
shivMethods(ownerDocument, data);
|
||||
}
|
||||
return ownerDocument;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* The `html5` object is exposed so that more elements can be shived and
|
||||
* existing shiving can be detected on iframes.
|
||||
* @type Object
|
||||
* @example
|
||||
*
|
||||
* // options can be changed before the script is included
|
||||
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
|
||||
*/
|
||||
var html5 = {
|
||||
|
||||
/**
|
||||
* An array or space separated string of node names of the elements to shiv.
|
||||
* @memberOf html5
|
||||
* @type Array|String
|
||||
*/
|
||||
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
|
||||
|
||||
/**
|
||||
* current version of html5shiv
|
||||
*/
|
||||
'version': version,
|
||||
|
||||
/**
|
||||
* A flag to indicate that the HTML5 style sheet should be inserted.
|
||||
* @memberOf html5
|
||||
* @type Boolean
|
||||
*/
|
||||
'shivCSS': (options.shivCSS !== false),
|
||||
|
||||
/**
|
||||
* Is equal to true if a browser supports creating unknown/HTML5 elements
|
||||
* @memberOf html5
|
||||
* @type boolean
|
||||
*/
|
||||
'supportsUnknownElements': supportsUnknownElements,
|
||||
|
||||
/**
|
||||
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
|
||||
* methods should be overwritten.
|
||||
* @memberOf html5
|
||||
* @type Boolean
|
||||
*/
|
||||
'shivMethods': (options.shivMethods !== false),
|
||||
|
||||
/**
|
||||
* A string to describe the type of `html5` object ("default" or "default print").
|
||||
* @memberOf html5
|
||||
* @type String
|
||||
*/
|
||||
'type': 'default',
|
||||
|
||||
// shivs the document according to the specified `html5` object options
|
||||
'shivDocument': shivDocument,
|
||||
|
||||
//creates a shived element
|
||||
createElement: createElement,
|
||||
|
||||
//creates a shived documentFragment
|
||||
createDocumentFragment: createDocumentFragment,
|
||||
|
||||
//extends list of elements
|
||||
addElements: addElements
|
||||
};
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
// expose html5
|
||||
window.html5 = html5;
|
||||
|
||||
// shiv the document
|
||||
shivDocument(document);
|
||||
|
||||
}(this, document));
|
||||
+2
File diff suppressed because one or more lines are too long
@@ -0,0 +1,150 @@
|
||||
/*
|
||||
* jQuery.appear
|
||||
* https://github.com/bas2k/jquery.appear/
|
||||
* http://code.google.com/p/jquery-appear/
|
||||
*
|
||||
* Copyright (c) 2009 Michael Hixson
|
||||
* Copyright (c) 2012 Alexander Brovikov
|
||||
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.appear = function(fn, options) {
|
||||
|
||||
var settings = $.extend({
|
||||
|
||||
//arbitrary data to pass to fn
|
||||
data: undefined,
|
||||
|
||||
//call fn only on the first appear?
|
||||
one: true,
|
||||
|
||||
// X & Y accuracy
|
||||
accX: 0,
|
||||
accY: 0
|
||||
|
||||
}, options);
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var t = $(this);
|
||||
|
||||
//whether the element is currently visible
|
||||
t.appeared = false;
|
||||
|
||||
if (!fn) {
|
||||
|
||||
//trigger the custom event
|
||||
t.trigger('appear', settings.data);
|
||||
return;
|
||||
}
|
||||
|
||||
var w = $(window);
|
||||
|
||||
//fires the appear event when appropriate
|
||||
var check = function() {
|
||||
|
||||
//is the element hidden?
|
||||
if (!t.is(':visible')) {
|
||||
|
||||
//it became hidden
|
||||
t.appeared = false;
|
||||
return;
|
||||
}
|
||||
|
||||
//is the element inside the visible window?
|
||||
var a = w.scrollLeft();
|
||||
var b = w.scrollTop();
|
||||
var o = t.offset();
|
||||
var x = o.left;
|
||||
var y = o.top;
|
||||
|
||||
var ax = settings.accX;
|
||||
var ay = settings.accY;
|
||||
var th = t.height();
|
||||
var wh = w.height();
|
||||
var tw = t.width();
|
||||
var ww = w.width();
|
||||
|
||||
if (y + th + ay >= b &&
|
||||
y <= b + wh + ay &&
|
||||
x + tw + ax >= a &&
|
||||
x <= a + ww + ax) {
|
||||
|
||||
//trigger the custom event
|
||||
if (!t.appeared) t.trigger('appear', settings.data);
|
||||
|
||||
} else {
|
||||
|
||||
//it scrolled out of view
|
||||
t.appeared = false;
|
||||
}
|
||||
};
|
||||
|
||||
//create a modified fn with some additional logic
|
||||
var modifiedFn = function() {
|
||||
|
||||
//mark the element as visible
|
||||
t.appeared = true;
|
||||
|
||||
//is this supposed to happen only once?
|
||||
if (settings.one) {
|
||||
|
||||
//remove the check
|
||||
w.unbind('scroll', check);
|
||||
var i = $.inArray(check, $.fn.appear.checks);
|
||||
if (i >= 0) $.fn.appear.checks.splice(i, 1);
|
||||
}
|
||||
|
||||
//trigger the original fn
|
||||
fn.apply(this, arguments);
|
||||
};
|
||||
|
||||
//bind the modified fn to the element
|
||||
if (settings.one) t.one('appear', settings.data, modifiedFn);
|
||||
else t.bind('appear', settings.data, modifiedFn);
|
||||
|
||||
//check whenever the window scrolls
|
||||
w.scroll(check);
|
||||
|
||||
//check whenever the dom changes
|
||||
$.fn.appear.checks.push(check);
|
||||
|
||||
//check now
|
||||
(check)();
|
||||
});
|
||||
};
|
||||
|
||||
//keep a queue of appearance checks
|
||||
$.extend($.fn.appear, {
|
||||
|
||||
checks: [],
|
||||
timeout: null,
|
||||
|
||||
//process the queue
|
||||
checkAll: function() {
|
||||
var length = $.fn.appear.checks.length;
|
||||
if (length > 0) while (length--) ($.fn.appear.checks[length])();
|
||||
},
|
||||
|
||||
//check the queue asynchronously
|
||||
run: function() {
|
||||
if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
|
||||
$.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
|
||||
}
|
||||
});
|
||||
|
||||
//run checks when these methods are called
|
||||
$.each(['append', 'prepend', 'after', 'before', 'attr',
|
||||
'removeAttr', 'addClass', 'removeClass', 'toggleClass',
|
||||
'remove', 'css', 'show', 'hide'], function(i, n) {
|
||||
var old = $.fn[n];
|
||||
if (old) {
|
||||
$.fn[n] = function() {
|
||||
var r = old.apply(this, arguments);
|
||||
$.fn.appear.run();
|
||||
return r;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,204 @@
|
||||
/*
|
||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
*
|
||||
* Uses the built in easing capabilities added In jQuery 1.1
|
||||
* to offer multiple easing options
|
||||
*
|
||||
* TERMS OF USE - jQuery Easing
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2008 George McGinley Smith
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
jQuery.easing['jswing'] = jQuery.easing['swing'];
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
swing: function (x, t, b, c, d) {
|
||||
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
|
||||
},
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
*
|
||||
* TERMS OF USE - EASING EQUATIONS
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2001 Robert Penner
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
@@ -0,0 +1,32 @@
|
||||
/*!
|
||||
* jquery.scrollto.js 0.0.1 - https://github.com/yckart/jquery.scrollto.js
|
||||
* Scroll smooth to any element in your DOM.
|
||||
*
|
||||
* Copyright (c) 2012 Yannick Albert (http://yckart.com)
|
||||
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
|
||||
* 2013/02/17
|
||||
**/
|
||||
$.scrollTo = $.fn.scrollTo = function(x, y, options){
|
||||
if (!(this instanceof $)) return $.fn.scrollTo.apply($('html, body'), arguments);
|
||||
|
||||
options = $.extend({}, {
|
||||
gap: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
animation: {
|
||||
easing: 'easeInSine',
|
||||
duration: 'slow',
|
||||
complete: $.noop,
|
||||
step: $.noop
|
||||
}
|
||||
}, options);
|
||||
|
||||
return this.each(function(){
|
||||
var elem = $(this);
|
||||
elem.stop().animate({
|
||||
scrollLeft: !isNaN(Number(x)) ? x : $(y).offset().left + options.gap.x,
|
||||
scrollTop: !isNaN(Number(y)) ? y : $(y).offset().top + options.gap.y - 69 // *edited
|
||||
}, options.animation);
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
/* global jQuery */
|
||||
/* global document */
|
||||
|
||||
jQuery(function () {
|
||||
'use strict';
|
||||
|
||||
document.addEventListener("touchstart", function () {}, false);
|
||||
jQuery(function () {
|
||||
|
||||
jQuery('body').wrapInner('<div class="wsmenucontainer" />');
|
||||
jQuery('<div class="overlapblackbg"></div>').prependTo('.wsmenu');
|
||||
|
||||
jQuery('#wsnavtoggle').click(function () {
|
||||
jQuery('body').toggleClass('wsactive');
|
||||
});
|
||||
|
||||
jQuery('.overlapblackbg').click(function () {
|
||||
jQuery("body").removeClass('wsactive');
|
||||
});
|
||||
|
||||
jQuery('.wsmenu > .wsmenu-list > li').has('.sub-menu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');
|
||||
jQuery('.wsmenu > .wsmenu-list > li').has('.wsmegamenu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');
|
||||
|
||||
jQuery('.wsmenu-click').click(function () {
|
||||
jQuery(this).toggleClass('ws-activearrow')
|
||||
.parent().siblings().children().removeClass('ws-activearrow');
|
||||
jQuery(".wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu").not(jQuery(this).siblings('.wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu')).slideUp('slow');
|
||||
jQuery(this).siblings('.sub-menu').slideToggle('slow');
|
||||
jQuery(this).siblings('.wsmegamenu').slideToggle('slow');
|
||||
});
|
||||
|
||||
jQuery('.wsmenu > .wsmenu-list > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');
|
||||
jQuery('.wsmenu > .wsmenu-list > li > ul > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');
|
||||
|
||||
jQuery('.wsmenu-click02').click(function () {
|
||||
jQuery(this).children('.wsmenu-arrow').toggleClass('wsmenu-rotate');
|
||||
jQuery(this).siblings('li > .sub-menu').slideToggle('slow');
|
||||
});
|
||||
|
||||
jQuery(window).on('resize', function () {
|
||||
|
||||
if (jQuery(window).outerWidth() < 992) {
|
||||
jQuery('.wsmenu').css('height', jQuery(this).height() + "px");
|
||||
jQuery('.wsmenucontainer').css('min-width', jQuery(this).width() + "px");
|
||||
} else {
|
||||
jQuery('.wsmenu').removeAttr("style");
|
||||
jQuery('.wsmenucontainer').removeAttr("style");
|
||||
jQuery('body').removeClass("wsactive");
|
||||
jQuery('.wsmenu > .wsmenu-list > li > .wsmegamenu, .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu').removeAttr("style");
|
||||
jQuery('.wsmenu-click').removeClass("ws-activearrow");
|
||||
jQuery('.wsmenu-click02 > i').removeClass("wsmenu-rotate");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).trigger('resize');
|
||||
|
||||
});
|
||||
}());
|
||||
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
|
||||
* Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
|
||||
* */
|
||||
|
||||
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
|
||||
@@ -0,0 +1,536 @@
|
||||
(function (global, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['module', 'exports'], factory);
|
||||
} else if (typeof exports !== "undefined") {
|
||||
factory(module, exports);
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod, mod.exports);
|
||||
global.WOW = mod.exports;
|
||||
}
|
||||
})(this, function (module, exports) {
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _class, _temp;
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
var _createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
function isIn(needle, haystack) {
|
||||
return haystack.indexOf(needle) >= 0;
|
||||
}
|
||||
|
||||
function extend(custom, defaults) {
|
||||
for (var key in defaults) {
|
||||
if (custom[key] == null) {
|
||||
var value = defaults[key];
|
||||
custom[key] = value;
|
||||
}
|
||||
}
|
||||
return custom;
|
||||
}
|
||||
|
||||
function isMobile(agent) {
|
||||
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
|
||||
);
|
||||
}
|
||||
|
||||
function createEvent(event) {
|
||||
var bubble = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
|
||||
var cancel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
|
||||
var detail = arguments.length <= 3 || arguments[3] === undefined ? null : arguments[3];
|
||||
|
||||
var customEvent = void 0;
|
||||
if (document.createEvent != null) {
|
||||
// W3C DOM
|
||||
customEvent = document.createEvent('CustomEvent');
|
||||
customEvent.initCustomEvent(event, bubble, cancel, detail);
|
||||
} else if (document.createEventObject != null) {
|
||||
// IE DOM < 9
|
||||
customEvent = document.createEventObject();
|
||||
customEvent.eventType = event;
|
||||
} else {
|
||||
customEvent.eventName = event;
|
||||
}
|
||||
|
||||
return customEvent;
|
||||
}
|
||||
|
||||
function emitEvent(elem, event) {
|
||||
if (elem.dispatchEvent != null) {
|
||||
// W3C DOM
|
||||
elem.dispatchEvent(event);
|
||||
} else if (event in (elem != null)) {
|
||||
elem[event]();
|
||||
} else if ('on' + event in (elem != null)) {
|
||||
elem['on' + event]();
|
||||
}
|
||||
}
|
||||
|
||||
function addEvent(elem, event, fn) {
|
||||
if (elem.addEventListener != null) {
|
||||
// W3C DOM
|
||||
elem.addEventListener(event, fn, false);
|
||||
} else if (elem.attachEvent != null) {
|
||||
// IE DOM
|
||||
elem.attachEvent('on' + event, fn);
|
||||
} else {
|
||||
// fallback
|
||||
elem[event] = fn;
|
||||
}
|
||||
}
|
||||
|
||||
function removeEvent(elem, event, fn) {
|
||||
if (elem.removeEventListener != null) {
|
||||
// W3C DOM
|
||||
elem.removeEventListener(event, fn, false);
|
||||
} else if (elem.detachEvent != null) {
|
||||
// IE DOM
|
||||
elem.detachEvent('on' + event, fn);
|
||||
} else {
|
||||
// fallback
|
||||
delete elem[event];
|
||||
}
|
||||
}
|
||||
|
||||
function getInnerHeight() {
|
||||
if ('innerHeight' in window) {
|
||||
return window.innerHeight;
|
||||
}
|
||||
|
||||
return document.documentElement.clientHeight;
|
||||
}
|
||||
|
||||
// Minimalistic WeakMap shim, just in case.
|
||||
var WeakMap = window.WeakMap || window.MozWeakMap || function () {
|
||||
function WeakMap() {
|
||||
_classCallCheck(this, WeakMap);
|
||||
|
||||
this.keys = [];
|
||||
this.values = [];
|
||||
}
|
||||
|
||||
_createClass(WeakMap, [{
|
||||
key: 'get',
|
||||
value: function get(key) {
|
||||
for (var i = 0; i < this.keys.length; i++) {
|
||||
var item = this.keys[i];
|
||||
if (item === key) {
|
||||
return this.values[i];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}, {
|
||||
key: 'set',
|
||||
value: function set(key, value) {
|
||||
for (var i = 0; i < this.keys.length; i++) {
|
||||
var item = this.keys[i];
|
||||
if (item === key) {
|
||||
this.values[i] = value;
|
||||
return this;
|
||||
}
|
||||
}
|
||||
this.keys.push(key);
|
||||
this.values.push(value);
|
||||
return this;
|
||||
}
|
||||
}]);
|
||||
|
||||
return WeakMap;
|
||||
}();
|
||||
|
||||
// Dummy MutationObserver, to avoid raising exceptions.
|
||||
var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver || (_temp = _class = function () {
|
||||
function MutationObserver() {
|
||||
_classCallCheck(this, MutationObserver);
|
||||
|
||||
if (typeof console !== 'undefined' && console !== null) {
|
||||
console.warn('MutationObserver is not supported by your browser.');
|
||||
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
|
||||
}
|
||||
}
|
||||
|
||||
_createClass(MutationObserver, [{
|
||||
key: 'observe',
|
||||
value: function observe() {}
|
||||
}]);
|
||||
|
||||
return MutationObserver;
|
||||
}(), _class.notSupported = true, _temp);
|
||||
|
||||
// getComputedStyle shim, from http://stackoverflow.com/a/21797294
|
||||
var getComputedStyle = window.getComputedStyle || function getComputedStyle(el) {
|
||||
var getComputedStyleRX = /(\-([a-z]){1})/g;
|
||||
return {
|
||||
getPropertyValue: function getPropertyValue(prop) {
|
||||
if (prop === 'float') {
|
||||
prop = 'styleFloat';
|
||||
}
|
||||
if (getComputedStyleRX.test(prop)) {
|
||||
prop.replace(getComputedStyleRX, function (_, _char) {
|
||||
return _char.toUpperCase();
|
||||
});
|
||||
}
|
||||
var currentStyle = el.currentStyle;
|
||||
|
||||
return (currentStyle != null ? currentStyle[prop] : void 0) || null;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var WOW = function () {
|
||||
function WOW() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
|
||||
_classCallCheck(this, WOW);
|
||||
|
||||
this.defaults = {
|
||||
boxClass: 'wow',
|
||||
animateClass: 'animated',
|
||||
offset: 0,
|
||||
mobile: false,
|
||||
live: true,
|
||||
callback: null,
|
||||
scrollContainer: null,
|
||||
resetAnimation: true
|
||||
};
|
||||
|
||||
this.animate = function animateFactory() {
|
||||
if ('requestAnimationFrame' in window) {
|
||||
return function (callback) {
|
||||
return window.requestAnimationFrame(callback);
|
||||
};
|
||||
}
|
||||
return function (callback) {
|
||||
return callback();
|
||||
};
|
||||
}();
|
||||
|
||||
this.vendors = ['moz', 'webkit'];
|
||||
|
||||
this.start = this.start.bind(this);
|
||||
this.resetAnimation = this.resetAnimation.bind(this);
|
||||
this.scrollHandler = this.scrollHandler.bind(this);
|
||||
this.scrollCallback = this.scrollCallback.bind(this);
|
||||
this.scrolled = true;
|
||||
this.config = extend(options, this.defaults);
|
||||
if (options.scrollContainer != null) {
|
||||
this.config.scrollContainer = document.querySelector(options.scrollContainer);
|
||||
}
|
||||
// Map of elements to animation names:
|
||||
this.animationNameCache = new WeakMap();
|
||||
this.wowEvent = createEvent(this.config.boxClass);
|
||||
}
|
||||
|
||||
_createClass(WOW, [{
|
||||
key: 'init',
|
||||
value: function init() {
|
||||
this.element = window.document.documentElement;
|
||||
if (isIn(document.readyState, ['interactive', 'complete'])) {
|
||||
this.start();
|
||||
} else {
|
||||
addEvent(document, 'DOMContentLoaded', this.start);
|
||||
}
|
||||
this.finished = [];
|
||||
}
|
||||
}, {
|
||||
key: 'start',
|
||||
value: function start() {
|
||||
var _this = this;
|
||||
|
||||
this.stopped = false;
|
||||
this.boxes = [].slice.call(this.element.querySelectorAll('.' + this.config.boxClass));
|
||||
this.all = this.boxes.slice(0);
|
||||
if (this.boxes.length) {
|
||||
if (this.disabled()) {
|
||||
this.resetStyle();
|
||||
} else {
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
this.applyStyle(box, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.disabled()) {
|
||||
addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
|
||||
addEvent(window, 'resize', this.scrollHandler);
|
||||
this.interval = setInterval(this.scrollCallback, 50);
|
||||
}
|
||||
if (this.config.live) {
|
||||
var mut = new MutationObserver(function (records) {
|
||||
for (var j = 0; j < records.length; j++) {
|
||||
var record = records[j];
|
||||
for (var k = 0; k < record.addedNodes.length; k++) {
|
||||
var node = record.addedNodes[k];
|
||||
_this.doSync(node);
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
mut.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'stop',
|
||||
value: function stop() {
|
||||
this.stopped = true;
|
||||
removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
|
||||
removeEvent(window, 'resize', this.scrollHandler);
|
||||
if (this.interval != null) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'sync',
|
||||
value: function sync() {
|
||||
if (MutationObserver.notSupported) {
|
||||
this.doSync(this.element);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'doSync',
|
||||
value: function doSync(element) {
|
||||
if (typeof element === 'undefined' || element === null) {
|
||||
element = this.element;
|
||||
}
|
||||
if (element.nodeType !== 1) {
|
||||
return;
|
||||
}
|
||||
element = element.parentNode || element;
|
||||
var iterable = element.querySelectorAll('.' + this.config.boxClass);
|
||||
for (var i = 0; i < iterable.length; i++) {
|
||||
var box = iterable[i];
|
||||
if (!isIn(box, this.all)) {
|
||||
this.boxes.push(box);
|
||||
this.all.push(box);
|
||||
if (this.stopped || this.disabled()) {
|
||||
this.resetStyle();
|
||||
} else {
|
||||
this.applyStyle(box, true);
|
||||
}
|
||||
this.scrolled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'show',
|
||||
value: function show(box) {
|
||||
this.applyStyle(box);
|
||||
box.className = box.className + ' ' + this.config.animateClass;
|
||||
if (this.config.callback != null) {
|
||||
this.config.callback(box);
|
||||
}
|
||||
emitEvent(box, this.wowEvent);
|
||||
|
||||
if (this.config.resetAnimation) {
|
||||
addEvent(box, 'animationend', this.resetAnimation);
|
||||
addEvent(box, 'oanimationend', this.resetAnimation);
|
||||
addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
|
||||
addEvent(box, 'MSAnimationEnd', this.resetAnimation);
|
||||
}
|
||||
|
||||
return box;
|
||||
}
|
||||
}, {
|
||||
key: 'applyStyle',
|
||||
value: function applyStyle(box, hidden) {
|
||||
var _this2 = this;
|
||||
|
||||
var duration = box.getAttribute('data-wow-duration');
|
||||
var delay = box.getAttribute('data-wow-delay');
|
||||
var iteration = box.getAttribute('data-wow-iteration');
|
||||
|
||||
return this.animate(function () {
|
||||
return _this2.customStyle(box, hidden, duration, delay, iteration);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'resetStyle',
|
||||
value: function resetStyle() {
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
box.style.visibility = 'visible';
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}, {
|
||||
key: 'resetAnimation',
|
||||
value: function resetAnimation(event) {
|
||||
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
|
||||
var target = event.target || event.srcElement;
|
||||
target.className = target.className.replace(this.config.animateClass, '').trim();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'customStyle',
|
||||
value: function customStyle(box, hidden, duration, delay, iteration) {
|
||||
if (hidden) {
|
||||
this.cacheAnimationName(box);
|
||||
}
|
||||
box.style.visibility = hidden ? 'hidden' : 'visible';
|
||||
|
||||
if (duration) {
|
||||
this.vendorSet(box.style, { animationDuration: duration });
|
||||
}
|
||||
if (delay) {
|
||||
this.vendorSet(box.style, { animationDelay: delay });
|
||||
}
|
||||
if (iteration) {
|
||||
this.vendorSet(box.style, { animationIterationCount: iteration });
|
||||
}
|
||||
this.vendorSet(box.style, { animationName: hidden ? 'none' : this.cachedAnimationName(box) });
|
||||
|
||||
return box;
|
||||
}
|
||||
}, {
|
||||
key: 'vendorSet',
|
||||
value: function vendorSet(elem, properties) {
|
||||
for (var name in properties) {
|
||||
if (properties.hasOwnProperty(name)) {
|
||||
var value = properties[name];
|
||||
elem['' + name] = value;
|
||||
for (var i = 0; i < this.vendors.length; i++) {
|
||||
var vendor = this.vendors[i];
|
||||
elem['' + vendor + name.charAt(0).toUpperCase() + name.substr(1)] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'vendorCSS',
|
||||
value: function vendorCSS(elem, property) {
|
||||
var style = getComputedStyle(elem);
|
||||
var result = style.getPropertyCSSValue(property);
|
||||
for (var i = 0; i < this.vendors.length; i++) {
|
||||
var vendor = this.vendors[i];
|
||||
result = result || style.getPropertyCSSValue('-' + vendor + '-' + property);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}, {
|
||||
key: 'animationName',
|
||||
value: function animationName(box) {
|
||||
var aName = void 0;
|
||||
try {
|
||||
aName = this.vendorCSS(box, 'animation-name').cssText;
|
||||
} catch (error) {
|
||||
// Opera, fall back to plain property value
|
||||
aName = getComputedStyle(box).getPropertyValue('animation-name');
|
||||
}
|
||||
|
||||
if (aName === 'none') {
|
||||
return ''; // SVG/Firefox, unable to get animation name?
|
||||
}
|
||||
|
||||
return aName;
|
||||
}
|
||||
}, {
|
||||
key: 'cacheAnimationName',
|
||||
value: function cacheAnimationName(box) {
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=921834
|
||||
// box.dataset is not supported for SVG elements in Firefox
|
||||
return this.animationNameCache.set(box, this.animationName(box));
|
||||
}
|
||||
}, {
|
||||
key: 'cachedAnimationName',
|
||||
value: function cachedAnimationName(box) {
|
||||
return this.animationNameCache.get(box);
|
||||
}
|
||||
}, {
|
||||
key: 'scrollHandler',
|
||||
value: function scrollHandler() {
|
||||
this.scrolled = true;
|
||||
}
|
||||
}, {
|
||||
key: 'scrollCallback',
|
||||
value: function scrollCallback() {
|
||||
if (this.scrolled) {
|
||||
this.scrolled = false;
|
||||
var results = [];
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
if (box) {
|
||||
if (this.isVisible(box)) {
|
||||
this.show(box);
|
||||
continue;
|
||||
}
|
||||
results.push(box);
|
||||
}
|
||||
}
|
||||
this.boxes = results;
|
||||
if (!this.boxes.length && !this.config.live) {
|
||||
this.stop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'offsetTop',
|
||||
value: function offsetTop(element) {
|
||||
// SVG elements don't have an offsetTop in Firefox.
|
||||
// This will use their nearest parent that has an offsetTop.
|
||||
// Also, using ('offsetTop' of element) causes an exception in Firefox.
|
||||
while (element.offsetTop === undefined) {
|
||||
element = element.parentNode;
|
||||
}
|
||||
var top = element.offsetTop;
|
||||
while (element.offsetParent) {
|
||||
element = element.offsetParent;
|
||||
top += element.offsetTop;
|
||||
}
|
||||
return top;
|
||||
}
|
||||
}, {
|
||||
key: 'isVisible',
|
||||
value: function isVisible(box) {
|
||||
var offset = box.getAttribute('data-wow-offset') || this.config.offset;
|
||||
var viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset;
|
||||
var viewBottom = viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset;
|
||||
var top = this.offsetTop(box);
|
||||
var bottom = top + box.clientHeight;
|
||||
|
||||
return top <= viewBottom && bottom >= viewTop;
|
||||
}
|
||||
}, {
|
||||
key: 'disabled',
|
||||
value: function disabled() {
|
||||
return !this.config.mobile && isMobile(navigator.userAgent);
|
||||
}
|
||||
}]);
|
||||
|
||||
return WOW;
|
||||
}();
|
||||
|
||||
exports.default = WOW;
|
||||
module.exports = exports['default'];
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
Reference in New Issue
Block a user