mirror of
https://github.com/responsively-org/responsively-app
synced 2024-11-10 23:04:20 +00:00
Website content
This commit is contained in:
Manoj Vivek
parent
2e94e1a6df
commit
8d86c7651b
1 changed files with 117 additions and 147 deletions
|
|
@ -288,7 +288,7 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div><a href="#" class="btn btn-primary ml-lg-3">Purchase Now</a>
|
||||
</div><a href="#" class="btn btn-primary ml-lg-3">Try for Free</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -300,11 +300,11 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-xl-9 col-lg-8 col-md-9">
|
||||
<h1 class="display-3">Develop responsive web-apps 5x faster!</h1>
|
||||
<p class="lead">A must have devtool for all front-end developers that helps make your job easier.</p>
|
||||
<p class="lead">A must-have DevTool for all Front-End developers that will make your job easier.</p>
|
||||
<div class="d-flex flex-column flex-sm-row justify-content-center mt-4">
|
||||
<a href="#" class="btn btn-lg btn-primary mx-2 mb-2 mb-sm-0">Try for Free</a>
|
||||
<a href="#" class="btn btn-lg btn-outline-primary mx-2">
|
||||
<span>Watch Video</span>
|
||||
<span>Buy Now</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -323,7 +323,7 @@
|
|||
<div class="container">
|
||||
<div class="row mb-4 text-center">
|
||||
<div class="col">
|
||||
<h2 class="h1">Front-End Engineering cannot get any easier!</h2>
|
||||
<h2 class="h1">Front-End Web Engineering cannot get any easier!</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
<img class="icon bg-primary" src="assets/img/icons/custom/devices-preview.svg" alt="icon" data-inject-svg />
|
||||
</div>
|
||||
<h4>Instant Preview</h4>
|
||||
<p class="lead mx-xl-3">Preview all target screens in a single window side-by-side.<br>Brings down the development time!</p>
|
||||
<p class="lead mx-xl-3">Preview all target screens in a single window side-by-side.<br>Brings down your development time!</p>
|
||||
</div>
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="icon-round bg-primary mx-auto mb-4">
|
||||
|
|
@ -357,61 +357,15 @@
|
|||
</div>
|
||||
<div class="container pt-3 pb-0">
|
||||
<div class="row justify-content-center text-center mb-6">
|
||||
<div class="col-xl-8 col-lg-9">
|
||||
<h2 class="display-4 mx-xl-6">Build it from the ground up.</h2>
|
||||
<div class="col-xl-11 col-lg-9">
|
||||
<h2 class="display-4 mx-xl-6">It's really clear that the most precious resource we all have is Time.</h2>
|
||||
<h2 class="display-4 mx-xl-6">- Steve Jobs</h2>
|
||||
<h2 class="display-5 mx-xl-6">So let's use it wisely. 😎</h2>
|
||||
<p class="lead">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4 mb-4 mb-md-0">
|
||||
<ul class="nav flex-column" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link btn btn-light p-2 text-left active" href="#app-tab-1" data-toggle="tab" aria-controls="app-tab-1" aria-selected="true" role="tab">
|
||||
<img class="icon bg-primary" src="assets/img/icons/theme/design/subtract.svg" alt="subtract icon" data-inject-svg />Collections
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link btn btn-light p-2 text-left" href="#app-tab-2" data-toggle="tab" aria-controls="app-tab-2" aria-selected="false" role="tab">
|
||||
<img class="icon bg-primary" src="assets/img/icons/theme/design/pixels.svg" alt="pixels icon" data-inject-svg />Discovery
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link btn btn-light p-2 text-left" href="#app-tab-3" data-toggle="tab" aria-controls="app-tab-3" aria-selected="false" role="tab">
|
||||
<img class="icon bg-primary" src="assets/img/icons/theme/design/saturation.svg" alt="saturation icon" data-inject-svg />Dark Mode</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col mb-lg-n7 layer-2">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="app-tab-1" role="tabpanel" aria-labelledby="app-tab-1">
|
||||
<div class="popover-image">
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 25%; left: 10%;" data-toggle="popover" title="Hotspot title" data-content="And here's some amazing content. It's very engaging. Right?"></div>
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 10%; left: 90%;" data-toggle="popover" title="Hotspot title" data-content="And here's some amazing content. It's very engaging. Right?"></div>
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 90%; left: 20%;" data-toggle="popover" title="Hotspot title" data-content="And here's some more amazing content. It's very engaging. Right?"></div>
|
||||
<img src="assets/img/desktop-app-2.png" alt="Image" class="rounded shadow-lg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="app-tab-2" role="tabpanel" aria-labelledby="app-tab-2">
|
||||
<div class="popover-image">
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 25%; left: 10%;" data-toggle="popover" title="Hotspot title" data-content="And here's some amazing content. It's very engaging. Right?"></div>
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 10%; left: 90%;" data-toggle="popover" title="Hotspot title" data-content="And here's some amazing content. It's very engaging. Right?"></div>
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 90%; left: 20%;" data-toggle="popover" title="Hotspot title" data-content="And here's some more amazing content. It's very engaging. Right?"></div>
|
||||
<img src="assets/img/desktop-app-1.png" alt="Image" class="rounded shadow-lg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="app-tab-3" role="tabpanel" aria-labelledby="app-tab-3">
|
||||
<div class="popover-image">
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 25%; left: 10%;" data-toggle="popover" title="Hotspot title" data-content="And here's some amazing content. It's very engaging. Right?"></div>
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 10%; left: 90%;" data-toggle="popover" title="Hotspot title" data-content="And here's some amazing content. It's very engaging. Right?"></div>
|
||||
<div class="popover-hotspot bg-primary-2" style="top: 90%; left: 20%;" data-toggle="popover" title="Hotspot title" data-content="And here's some more amazing content. It's very engaging. Right?"></div>
|
||||
<img src="assets/img/desktop-app-5.png" alt="Image" class="rounded shadow-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider flip-x">
|
||||
<img src="assets/img/dividers/divider-3.svg" alt="graphical divider" data-inject-svg />
|
||||
|
|
@ -424,8 +378,8 @@
|
|||
<img src="assets/img/desktop-app-1.jpg" alt="Image" class="rounded shadow">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6" data-aos="fade-left">
|
||||
<h3 class="h2">Powerful Discovery</h3>
|
||||
<p class="lead">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</p>
|
||||
<h3 class="h2">Mirrored Interactions</h3>
|
||||
<p class="lead">Any click, scroll or navigation the you perform in one device will be replicated to all devices in real-time.</p>
|
||||
<a href="#" class="lead hover-arrow">Start Discovering</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -438,8 +392,64 @@
|
|||
<img src="assets/img/desktop-app-2.jpg" alt="Image" class="rounded shadow">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6" data-aos="fade-right">
|
||||
<h3 class="h2">Smart Management</h3>
|
||||
<p class="lead">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</p>
|
||||
<h3 class="h2">Customizable Layout</h3>
|
||||
<p class="lead">Customize the arrangement of the devices to suit your every need.</p>
|
||||
<a href="#" class="lead hover-arrow">Start Discovering</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pt-0">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-around o-hidden">
|
||||
<div class="col-md-6 col-lg-5 mb-4 mb-md-0" data-aos="fade-right">
|
||||
<img src="assets/img/desktop-app-1.jpg" alt="Image" class="rounded shadow">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6" data-aos="fade-left">
|
||||
<h3 class="h2">Awesome Elements Inspector</h3>
|
||||
<p class="lead">Inspect any element in any device with just one click. No Hassle!</p>
|
||||
<a href="#" class="lead hover-arrow">Start Discovering</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pt-0">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-around flex-row-reverse o-hidden">
|
||||
<div class="col-md-6 col-lg-5 mb-4 mb-md-0" data-aos="fade-left">
|
||||
<img src="assets/img/desktop-app-2.jpg" alt="Image" class="rounded shadow">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6" data-aos="fade-right">
|
||||
<h3 class="h2">Extensive Built-in Device Profiles</h3>
|
||||
<p class="lead">Has 33 built-in device profiles convering all major devices. You can even add new custom device profiles as you like.</p>
|
||||
<a href="#" class="lead hover-arrow">Start Discovering</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pt-0">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-around o-hidden">
|
||||
<div class="col-md-6 col-lg-5 mb-4 mb-md-0" data-aos="fade-right">
|
||||
<img src="assets/img/desktop-app-1.jpg" alt="Image" class="rounded shadow">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6" data-aos="fade-left">
|
||||
<h3 class="h2">One-Click Screenshot</h3>
|
||||
<p class="lead">Get instant feedback on the pages that you develop with the powerful screenshots tool. Take full page screenshot of all devices or a specific device with just a single click!</p>
|
||||
<a href="#" class="lead hover-arrow">Start Discovering</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pt-0">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-around flex-row-reverse o-hidden">
|
||||
<div class="col-md-6 col-lg-5 mb-4 mb-md-0" data-aos="fade-left">
|
||||
<img src="assets/img/desktop-app-2.jpg" alt="Image" class="rounded shadow">
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6" data-aos="fade-right">
|
||||
<h3 class="h2">Hot Reloading Supported</h3>
|
||||
<p class="lead">Does you development server support Hot-Reloading? then we do too! Hot-Reload all devices in real-time for every save.</p>
|
||||
<a href="#" class="lead hover-arrow">Start Discovering</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -456,8 +466,8 @@
|
|||
<a data-fancybox href="https://vimeo.com/40842620" class="btn btn-xlg btn-primary btn-round mx-auto mb-4" data-aos="fade-up">
|
||||
<img class="icon" src="assets/img/icons/theme/media/play.svg" alt="play icon" data-inject-svg />
|
||||
</a>
|
||||
<h4 class="display-3">Changing the game.</h4>
|
||||
<p class="lead">Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</p>
|
||||
<h4 class="display-3">See it in action</h4>
|
||||
<p class="lead">Take a quick look at how it fits into your development workflow seemlessly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -465,10 +475,10 @@
|
|||
<section class="bg-primary-3 o-hidden has-divider">
|
||||
<div class="container pb-4 text-light">
|
||||
<div class="row justify-content-center text-center mb-6">
|
||||
<div class="col-xl-8 col-lg-9">
|
||||
<h2 class="display-4 mx-xl-6">Customers love Leap</h2>
|
||||
<div class="col-xl-10 col-lg-9">
|
||||
<h2 class="display-4 mx-xl-6">Customers love Responsively</h2>
|
||||
<p class="lead">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
|
||||
Dont take our word for it, hear how much happier our users with the benefits.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -578,97 +588,33 @@
|
|||
<section>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center text-center mb-6">
|
||||
<div class="col-xl-8 col-lg-9">
|
||||
<h2 class="display-4 mx-xl-6">Built for scale</h2>
|
||||
<div class="col-xl-9 col-lg-9">
|
||||
<h2 class="display-4 mx-xl-6">Simple, affordable pricing</h2>
|
||||
<p class="lead">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
|
||||
You can't buy time, but you can save your time with Responsively!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="NaN">
|
||||
<div class="card card-body align-items-center ">
|
||||
<div class="pt-md-2">
|
||||
<h4>Basic</h4>
|
||||
</div>
|
||||
<div class="d-flex align-items-start pb-md-2">
|
||||
<span class="h3">$</span>
|
||||
<span class="display-4 mb-0">49</span>
|
||||
</div>
|
||||
<span class="text-small text-muted">Per user, per month</span>
|
||||
<ul class="text-center list-unstyled my-2 my-md-4">
|
||||
<li class="py-1">
|
||||
<span>10k Visitors/mo</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>10 Funnels, 50 Pages</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Unlimited Transactions</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Analytics</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Integrations</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span class="text-muted text-strikethrough">Audience Data</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span class="text-muted text-strikethrough">Premium Templates</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span class="text-muted text-strikethrough">White Labelling</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-outline-primary">
|
||||
Get Basic
|
||||
</a>
|
||||
<form>
|
||||
<div>
|
||||
<label class="h5">Select your number of users</label>
|
||||
<input type="text" data-ion-rangeslider data-values="1,2,3,4,5,6,7,8,9,10,11+" data-from="2" data-step="1" data-grid="true" data-grid-snap="true" data-on-change="mrUpdatePrice" data-unit-selector=".js-users-word" data-unit-single="User" data-unit-plural="Users"
|
||||
data-from-selector=".js-users-per-month" data-hide-from-to="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="NaN">
|
||||
<div class="card card-body align-items-center shadow-3d">
|
||||
<span class="badge badge-top badge-dark">Most Popular</span>
|
||||
<div class="pt-md-2">
|
||||
<h4>Professional</h4>
|
||||
<div class="mt-5 card card-body justify-content-center text-center shadow-3d">
|
||||
<div class="text-muted">
|
||||
<span class="js-users-per-month">3</span>
|
||||
<span class="js-users-word">Users</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-start pb-md-2">
|
||||
<span class="h3">$</span>
|
||||
<span class="display-4 mb-0">69</span>
|
||||
<div class="d-flex justify-content-center my-3">
|
||||
<span class="h3 pt-1 mr-1 js-dollar-sign">$</span>
|
||||
<span class="display-3 js-price-per-month">120</span>
|
||||
</div>
|
||||
<span class="text-small text-muted">Per user, per month</span>
|
||||
<ul class="text-center list-unstyled my-2 my-md-4">
|
||||
<li class="py-1">
|
||||
<span>10k Visitors/mo</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>10 Funnels, 50 Pages</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Unlimited Transactions</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Analytics</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Integrations</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Audience Data</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span>Premium Templates</span>
|
||||
</li>
|
||||
<li class="py-1">
|
||||
<span class="text-muted text-strikethrough">White Labelling</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">
|
||||
Get Pro
|
||||
</a>
|
||||
<div class="text-small text-muted js-pricing-charge-description">Total charge per month</div>
|
||||
<button class="btn btn-lg btn-primary mt-3 js-pricing-submit-button" type="submit">Get started</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
|
|
@ -899,6 +845,30 @@
|
|||
window.addEventListener("load", function () { document.querySelector('body').classList.add('loaded'); });
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var mrUpdatePrice = (function(){
|
||||
var priceElements = document.querySelectorAll('.js-price-per-month');
|
||||
var hideSignup = document.querySelectorAll('.js-pricing-charge-description');
|
||||
var dollarSign = document.querySelector('.js-dollar-sign');
|
||||
var prices = ['Free','99','120','169','209','239','279','299','329','369','Contact us'];
|
||||
var updatePrice = function(data){
|
||||
// Hide or show dollar sign based on value "FREE" or "Contact us"
|
||||
if (dollarSign){
|
||||
dollarSign.classList[data.from < 1 || data.from == 10 ? 'add' : 'remove']('d-none');
|
||||
}
|
||||
|
||||
theme.mrUtil.forEach(hideSignup, function(index, element) {
|
||||
element.classList[data.from === 10 ? 'add' : 'remove']('d-none');
|
||||
});
|
||||
|
||||
theme.mrUtil.forEach(priceElements, function(index, element) {
|
||||
element.textContent = prices[data.from];
|
||||
});
|
||||
};
|
||||
return updatePrice;
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue