You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
798 lines
39 KiB
798 lines
39 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Fresh</title>
|
|
|
|
<link rel="icon" type="image/png" href="img/favicon.png" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="css/app.css">
|
|
<link rel="stylesheet" type="text/css" href="css/main.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="pageloader" class="pageloader"></div>
|
|
<div id="infraloader" class="infraloader is-active"></div>
|
|
<section class="hero is-fullheight is-default is-bold">
|
|
|
|
<nav x-data="initNavbar()" class="navbar is-fresh is-transparent no-shadow" role="navigation"
|
|
aria-label="main navigation">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="https://cssninja.io">
|
|
<img src="img/logo/fresh-alt.svg" alt="" width="112" height="28">
|
|
</a>
|
|
|
|
<a @click="openSidebar()" class="navbar-item is-hidden-desktop is-hidden-tablet">
|
|
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{
|
|
'open': $store.app.isSiderbarOpen,
|
|
'': !$store.app.isSiderbarOpen
|
|
}">
|
|
<svg width="1000px" height="1000px">
|
|
<path class="path1"
|
|
d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
|
|
<path class="path2" d="M 300 500 L 700 500"></path>
|
|
<path class="path3"
|
|
d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
|
|
</svg>
|
|
<button id="menu-icon-trigger" class="menu-icon-trigger"></button>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="navbar-burger" @click="openMobileMenu()">
|
|
<span class="menu-toggle">
|
|
<span class="icon-box-toggle" :class="{
|
|
'active': mobileOpen,
|
|
'': !mobileOpen
|
|
}">
|
|
<span class="rotate">
|
|
<i class="icon-line-top"></i>
|
|
<i class="icon-line-center"></i>
|
|
<i class="icon-line-bottom"></i>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="navbar-menu" class="navbar-menu is-static" :class="{
|
|
'is-active': mobileOpen,
|
|
'': !mobileOpen
|
|
}">
|
|
|
|
<div class="navbar-start">
|
|
<a @click="openSidebar()" class="navbar-item is-hidden-mobile">
|
|
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{
|
|
'open': $store.app.isSiderbarOpen,
|
|
'': !$store.app.isSiderbarOpen
|
|
}">
|
|
<svg width="1000px" height="1000px">
|
|
<path class="path1"
|
|
d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800">
|
|
</path>
|
|
<path class="path2" d="M 300 500 L 700 500"></path>
|
|
<path class="path3"
|
|
d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200">
|
|
</path>
|
|
</svg>
|
|
<button id="menu-icon-trigger" class="menu-icon-trigger"></button>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<a href="#" class="navbar-item is-secondary">
|
|
Features
|
|
</a>
|
|
<a href="#" class="navbar-item is-secondary">
|
|
Pricing
|
|
</a>
|
|
<a href="#" class="navbar-item is-secondary modal-trigger" data-modal="auth-modal">
|
|
Log in
|
|
</a>
|
|
<a class="navbar-item">
|
|
<span class="button signup-button rounded secondary-btn raised">
|
|
Sign up
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav x-data="initNavbar()" x-on:scroll.window="scroll()" id="navbar-clone" class="navbar is-fresh is-transparent" role="navigation" aria-label="main navigation" :class="{
|
|
'is-active': scrolled,
|
|
'': !scrolled
|
|
}">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="https://cssninja.io">
|
|
<img src="img/logo/fresh-alt.svg" alt="" width="112" height="28">
|
|
</a>
|
|
|
|
<a @click="openSidebar()" class="navbar-item is-hidden-desktop is-hidden-tablet">
|
|
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{
|
|
'open': $store.app.isSiderbarOpen,
|
|
'': !$store.app.isSiderbarOpen
|
|
}">
|
|
<svg width="1000px" height="1000px">
|
|
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
|
|
<path class="path2" d="M 300 500 L 700 500"></path>
|
|
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
|
|
</svg>
|
|
<button id="menu-icon-trigger" class="menu-icon-trigger"></button>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="navbar-burger" @click="openMobileMenu()">
|
|
<span class="menu-toggle">
|
|
<span class="icon-box-toggle" :class="{
|
|
'active': mobileOpen,
|
|
'': !mobileOpen
|
|
}">
|
|
<span class="rotate">
|
|
<i class="icon-line-top"></i>
|
|
<i class="icon-line-center"></i>
|
|
<i class="icon-line-bottom"></i>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cloned-navbar-menu" class="navbar-menu is-fixed" :class="{
|
|
'is-active': mobileOpen,
|
|
'': !mobileOpen
|
|
}">
|
|
|
|
<div class="navbar-start">
|
|
<a @click="openSidebar()" class="navbar-item is-hidden-mobile">
|
|
<div id="cloned-menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{
|
|
'open': $store.app.isSiderbarOpen,
|
|
'': !$store.app.isSiderbarOpen
|
|
}">
|
|
<svg width="1000px" height="1000px">
|
|
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
|
|
<path class="path2" d="M 300 500 L 700 500"></path>
|
|
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
|
|
</svg>
|
|
<button id="cloned-menu-icon-trigger" class="menu-icon-trigger"></button>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<a href="#" class="navbar-item is-secondary">
|
|
Features
|
|
</a>
|
|
<a href="#" class="navbar-item is-secondary">
|
|
Pricing
|
|
</a>
|
|
<a href="#" class="navbar-item is-secondary modal-trigger" data-modal="auth-modal">
|
|
Log in
|
|
</a>
|
|
<a class="navbar-item">
|
|
<span class="button signup-button rounded secondary-btn raised">
|
|
Sign up
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<div class="columns is-vcentered">
|
|
<div class="column is-5 is-offset-1 landing-caption">
|
|
<h1 class="title is-1 is-bold is-spaced">
|
|
Manage, Deploy.
|
|
</h1>
|
|
<h2 class="subtitle is-5 is-muted">Lorem ipsum sit dolor amet is a dummy text used by typography industry </h2>
|
|
<div class="button-wrap">
|
|
<a class="button cta is-rounded primary-btn raised">
|
|
Get Started
|
|
</a>
|
|
<a class="button cta is-rounded">
|
|
Discover
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column is-5">
|
|
<figure class="image is-4by3">
|
|
<img src="img/illustrations/worker.svg" alt="Description">
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-foot mb-20">
|
|
<div class="container">
|
|
<div class="tabs is-centered">
|
|
<ul>
|
|
<li><a><img class="partner-logo" src="img/logo/clients/systek.svg"></a></li>
|
|
<li><a><img class="partner-logo" src="img/logo/clients/tribe.svg"></a></li>
|
|
<li><a><img class="partner-logo" src="img/logo/clients/kromo.svg"></a></li>
|
|
<li><a><img class="partner-logo" src="img/logo/clients/infinite.svg"></a></li>
|
|
<li><a><img class="partner-logo" src="img/logo/clients/gutwork.svg"></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-feature-grey is-medium">
|
|
<div class="container">
|
|
<div class="title-wrapper has-text-centered">
|
|
<h2 class="title is-2">Great Power Comes </h2>
|
|
<h3 class="subtitle is-5 is-muted">With great Responsability</h3>
|
|
<div class="divider is-centered"></div>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="columns">
|
|
<div class="column is-one-third">
|
|
<div class="feature-card is-bordered has-text-centered is-feature-reveal">
|
|
<div class="card-title">
|
|
<h4>App builder</h4>
|
|
</div>
|
|
<div class="card-icon">
|
|
<img src="img/icons/web.svg">
|
|
</div>
|
|
<div class="card-text">
|
|
<p>This is some cool explanatory text that is on two rows</p>
|
|
</div>
|
|
<div class="card-action">
|
|
<a href="#" class="button btn-align-md primary-btn raised">Free Trial</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="feature-card is-bordered has-text-centered is-feature-reveal">
|
|
<div class="card-title">
|
|
<h4>Cloud integration</h4>
|
|
</div>
|
|
<div class="card-icon">
|
|
<img src="img/icons/rocket.svg">
|
|
</div>
|
|
<div class="card-text">
|
|
<p>This is some explanatory text that is on two rows</p>
|
|
</div>
|
|
<div class="card-action">
|
|
<a href="#" class="button btn-align-md primary-btn raised">Get Started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="feature-card is-bordered has-text-centered is-feature-reveal">
|
|
<div class="card-title">
|
|
<h4>Addons & Plugins</h4>
|
|
</div>
|
|
<div class="card-icon">
|
|
<img src="img/icons/light-bulb.svg">
|
|
</div>
|
|
<div class="card-text">
|
|
<p>This is some explanatory text that is on two rows</p>
|
|
</div>
|
|
<div class="card-action">
|
|
<a href="#" class="button btn-align-md primary-btn raised">Get Started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<div class="title-wrapper has-text-centered">
|
|
<h2 class="title is-2">Awesome Features</h2>
|
|
<h3 class="subtitle is-5 is-muted">To make you super happy</h3>
|
|
<div class="divider is-centered"></div>
|
|
</div>
|
|
|
|
<div class="columns is-vcentered side-feature mt-60">
|
|
<div class="column is-4 is-offset-2">
|
|
<h3 class="title is-3 mb-10 is-title-reveal">Connect with people</h3>
|
|
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p>
|
|
</div>
|
|
<div class="column is-5">
|
|
<img src="img/illustrations/features/feature-1.png" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns is-vcentered side-feature mt-60">
|
|
<div class="column is-5 is-offset-1">
|
|
<img src="img/illustrations/features/feature-2.png" alt="">
|
|
</div>
|
|
<div class="column is-4 is-offset-1">
|
|
<h3 class="title is-3 mb-10 is-title-reveal">Collaborate easily</h3>
|
|
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-feature-grey is-medium">
|
|
<div class="container">
|
|
|
|
<div class="columns is-vcentered app-side">
|
|
<div class="column is-5 is-offset-1">
|
|
<h3 class="title is-3 is-spaced is-title-reveal">An intuitive app</h3>
|
|
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p>
|
|
</div>
|
|
<div class="column is-10">
|
|
<div class="has-text-centered">
|
|
<img class="pushed-image" src="img/illustrations/mockups/app-mockup.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<div class="title-wrapper has-text-centered">
|
|
<h2 class="title is-2">Wait, there's more</h2>
|
|
<h3 class="subtitle is-5 is-muted">To make you super happy</h3>
|
|
<div class="divider is-centered"></div>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="columns is-multiline icon-list">
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-github" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Github</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-bitbucket" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Bitbucket</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-slack" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Slack</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-npm" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Npm</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-javascript" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Javascript</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-nodejs" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Nodejs</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-angular" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Angular</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-google" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Google</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-python" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Python</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-wordpress" size="large"></ion-icon>
|
|
</div>
|
|
<h4>WordPress</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-android" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Android</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="feature-icon has-text-centered">
|
|
<div class="icon-wrap is-icon-reveal">
|
|
<ion-icon name="logo-apple" size="large"></ion-icon>
|
|
</div>
|
|
<h4>Apple</h4>
|
|
<p>Some feature text</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-medium has-background-image" data-background="https://source.unsplash.com/g30P1zcOzXo/1600x900" data-color="#4FC1EA" data-color-opacity=".6">
|
|
<div class="overlay"></div>
|
|
<div class="container">
|
|
|
|
<div class="title-wrapper has-text-centered">
|
|
<h2 class="title is-2 light-text is-spaced">Our clients love us</h2>
|
|
<h3 class="subtitle is-5 light-text">Look at what they say about us</h3>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="columns is-vcentered">
|
|
<div class="column is-4">
|
|
<figure class="testimonial">
|
|
<blockquote>
|
|
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
|
</blockquote>
|
|
<div class="author">
|
|
<img src="img/illustrations/faces/1.png" alt=""/>
|
|
<h5>Irma Walters</h5><span>Accountant</span>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
<div class="column is-4">
|
|
<figure class="testimonial">
|
|
<blockquote>
|
|
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
|
</blockquote>
|
|
<div class="author">
|
|
<img src="img/illustrations/faces/2.png" alt=""/>
|
|
<h5>John Bradley</h5><span>Financial Analyst</span>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
<div class="column is-4">
|
|
<figure class="testimonial">
|
|
<blockquote>
|
|
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
|
</blockquote>
|
|
<div class="author">
|
|
<img src="img/illustrations/faces/3.png" alt=""/>
|
|
<h5>Gary Blackman</h5><span>HR Manager</span>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<div class="title-wrapper has-text-centered">
|
|
<h2 class="title is-2">Get Started</h2>
|
|
<h3 class="subtitle is-5 is-muted">Choose one of our plans</h3>
|
|
<div class="divider is-centered"></div>
|
|
</div>
|
|
|
|
<div class="pricing-wrap">
|
|
<div class="feature-card is-pricing has-text-centered">
|
|
<h3 class="plan-name">Starter</h3>
|
|
<img src="img/illustrations/pricing/1.svg" alt=""/>
|
|
<div class="price">
|
|
0
|
|
</div>
|
|
<p>Sign up, get some awesome features and get started now</p>
|
|
<a class="button is-fullwidth is-bold">Get Started</a>
|
|
</div>
|
|
<div class="feature-card is-pricing has-text-centered">
|
|
<h3 class="plan-name">Pro</h3>
|
|
<img src="img/illustrations/pricing/2.svg" alt=""/>
|
|
<div class="price">
|
|
15
|
|
</div>
|
|
<p>Sign up, get some awesome features and get started now</p>
|
|
<a class="button is-fullwidth primary-btn raised is-bold">Get Started</a>
|
|
</div>
|
|
<div class="feature-card is-pricing has-text-centered">
|
|
<h3 class="plan-name">Business</h3>
|
|
<img src="img/illustrations/pricing/3.svg" alt=""/>
|
|
<div class="price">
|
|
30
|
|
</div>
|
|
<p>Sign up, get some awesome features and get started now</p>
|
|
<a class="button is-fullwidth is-bold">Get Started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-light-grey is-medium">
|
|
<div class="container">
|
|
<div class="title-wrapper has-text-centered">
|
|
<h2 class="title is-2 is-spaced">Drop us a line or two </h2>
|
|
<h3 class="subtitle is-5 is-muted">We'd love to hear from You</h3>
|
|
<div class="divider is-centered"></div>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="columns">
|
|
<div class="column is-6 is-offset-3">
|
|
<form>
|
|
<div class="columns is-multiline">
|
|
<div class="column is-6">
|
|
<input class="input is-medium" type="text" placeholder="First Name *">
|
|
</div>
|
|
<div class="column is-6">
|
|
<input class="input is-medium" type="text" placeholder="Last Name *">
|
|
</div>
|
|
<div class="column is-6">
|
|
<input class="input is-medium" type="text" placeholder="Email *">
|
|
</div>
|
|
<div class="column is-6">
|
|
<input class="input is-medium" type="email" placeholder="Company">
|
|
</div>
|
|
<div class="column is-12">
|
|
<textarea class="textarea" rows="6" placeholder=""></textarea>
|
|
</div>
|
|
<div class="column is-12">
|
|
<div class="form-footer has-text-right mt-10">
|
|
<button class="button cta is-large primary-btn form-button raised is-clear">Send Message</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<div id="auth-modal" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<div class="flex-card auth-card">
|
|
<div class="tabs-wrapper">
|
|
<div class="tabs">
|
|
<ul>
|
|
<li class="is-active" data-tab="login-tab"><a>Login</a></li>
|
|
<li data-tab="register-tab"><a>Register</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="login-tab" class="tab-content is-active">
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<div class="control">
|
|
<input type="text" class="input is-medium" placeholder="Enter username">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<div class="control">
|
|
<input type="password" class="input is-medium" placeholder="Enter password">
|
|
</div>
|
|
</div>
|
|
|
|
<a class="button is-fullwidth secondary-btn is-rounded raised">Log in</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="modal-close is-large" aria-label="close"></button>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer class="footer footer-dark">
|
|
<div class="container">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="footer-logo">
|
|
<img src="img/logo/fresh-white-alt.svg">
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="footer-column">
|
|
<div class="footer-header">
|
|
<h3>Product</h3>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li><a href="#">Discover features</a></li>
|
|
<li><a href="#">Why choose our Product ?</a></li>
|
|
<li><a href="#">Compare features</a></li>
|
|
<li><a href="#">Our Roadmap</a></li>
|
|
<li><a href="#">Request features</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="footer-column">
|
|
<div class="footer-header">
|
|
<h3>Docs</h3>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li><a href="#">Get Started</a></li>
|
|
<li><a href="#">User guides</a></li>
|
|
<li><a href="#">Admin guide</a></li>
|
|
<li><a href="#">Developers</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="footer-column">
|
|
<div class="footer-header">
|
|
<h3>Blogroll</h3>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li><a href="#">Latest News</a></li>
|
|
<li><a href="#">Tech articles</a></li>
|
|
<li><a href="#">Video Blog</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="footer-column">
|
|
<div class="footer-header">
|
|
<h3>Follow Us</h3>
|
|
<nav class="level is-mobile">
|
|
<div class="level-left">
|
|
<a class="level-item" href="https://github.com/#">
|
|
<span class="icon">
|
|
<ion-icon name="logo-github" size="large"></ion-icon>
|
|
</span>
|
|
</a>
|
|
<a class="level-item" href="https://facebook.com/#">
|
|
<span class="icon">
|
|
<ion-icon name="logo-facebook" size="large"></ion-icon>
|
|
</span>
|
|
</a>
|
|
<a class="level-item" href="https://google.com/#">
|
|
<span class="icon">
|
|
<ion-icon name="logo-google" size="large"></ion-icon>
|
|
</span>
|
|
</a>
|
|
<a class="level-item" href="https://linkedin.com/#">
|
|
<span class="icon">
|
|
<ion-icon name="logo-linkedin" size="large"></ion-icon>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<a href="https://bulma.io" target="_blank">
|
|
<img src="img/logo/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- Back To Top Button -->
|
|
<div x-data="initBackToTop()" x-on:scroll.window="scroll($event)" @click="goTop($event)" id="backtotop"><a href="javascript:" :class="{
|
|
'visible': scrolled,
|
|
'': !scrolled
|
|
}"></a></div> <div x-data="initSidebar()" class="sidebar" :class="{
|
|
'is-active': $store.app.isSiderbarOpen,
|
|
'': !$store.app.isSiderbarOpen
|
|
}">
|
|
<div class="sidebar-header">
|
|
<img src="img/logo/fresh-square.svg">
|
|
<a @click="closeSidebar()" class="sidebar-close" href="javascript:void(0);"><i data-feather="x"></i></a>
|
|
</div>
|
|
<div class="inner">
|
|
<ul class="sidebar-menu">
|
|
<li><span class="nav-section-title"></span></li>
|
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-1" class="have-children" :class="{
|
|
'active': openedMenu === 'sidebar-menu-1',
|
|
'': openedMenu != 'sidebar-menu-1'
|
|
}">
|
|
<a href="#">
|
|
<span class="material-icons">apps</span>
|
|
<span>Apps</span>
|
|
</a>
|
|
<ul x-show.transition="openedMenu === 'sidebar-menu-1'">
|
|
<li><a href="#">Dashboard</a></li>
|
|
<li><a href="#">Account</a></li>
|
|
<li><a href="#">Documents</a></li>
|
|
</ul>
|
|
</li>
|
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-2" class="have-children" :class="{
|
|
'active': openedMenu === 'sidebar-menu-2',
|
|
'': openedMenu != 'sidebar-menu-2'
|
|
}">
|
|
<a href="#">
|
|
<span class="material-icons">duo</span>
|
|
<span>Messages</span>
|
|
</a>
|
|
<ul x-show.transition="openedMenu === 'sidebar-menu-2'">
|
|
<li><a href="#">Inbox</a></li>
|
|
<li><a href="#">Compose</a></li>
|
|
<li><a href="#">Video</a></li>
|
|
</ul>
|
|
</li>
|
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-3" class="have-children" :class="{
|
|
'active': openedMenu === 'sidebar-menu-3',
|
|
'': openedMenu != 'sidebar-menu-3'
|
|
}">
|
|
<a href="#">
|
|
<span class="material-icons">insert_photo</span>
|
|
<span>Media</span>
|
|
</a>
|
|
<ul x-show.transition="openedMenu === 'sidebar-menu-3'">
|
|
<li><a href="#">Library</a></li>
|
|
<li><a href="#">Upload</a></li>
|
|
</ul>
|
|
</li>
|
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-4" class="have-children" :class="{
|
|
'active': openedMenu === 'sidebar-menu-4',
|
|
'': openedMenu != 'sidebar-menu-4'
|
|
}">
|
|
<a href="#">
|
|
<span class="material-icons">policy</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
<ul x-show.transition="openedMenu === 'sidebar-menu-4'">
|
|
<li><a href="#">User settings</a></li>
|
|
<li><a href="#">App settings</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
|
|
<script src="js/bundle.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|