AnitaYCheng
718 lines
58 KiB
HTML
718 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel='stylesheet' type="text/css">
|
||
<title>HabitRPG | Gamify Your Life</title>
|
||
|
||
<meta name="description" content="">
|
||
<meta name="keywords" content="">
|
||
<meta name="author" content="">
|
||
<meta name="geo.placename" content="">
|
||
<!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->
|
||
<meta name="viewport" content="width=device-width, maximum-scale=1" />
|
||
|
||
<meta property="og:title" content="" />
|
||
<meta property="og:description" content="" />
|
||
<meta property="og:url" content="" />
|
||
<meta property="og:image" content="" />
|
||
<meta property="og:site_name" content="" />
|
||
|
||
<link rel="canonical" href="" type="text/html" />
|
||
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
|
||
<link rel="shortcut icon" href="/images/favicon-8b58f6a1.ico">
|
||
|
||
<!--[if lt IE 9]>
|
||
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||
<![endif]-->
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||
<!-- Latest compiled and minified CSS -->
|
||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||
|
||
<!--Custom CSS-->
|
||
<link rel="stylesheet" type="text/css" href="staticstyle.css" />
|
||
|
||
<!-- Latest compiled and minified JavaScript -->
|
||
<script src="js/bootstrap.min.js"></script>
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="mobile-container">
|
||
<header id="header">
|
||
<nav class="navbar navbar-default navbar-static-top">
|
||
<div class="container-fluid">
|
||
<!-- Brand and toggle get grouped for better mobile display -->
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="#"><img src="images/icon175x175.png" />
|
||
<img src="images/habitrpg_pixel.png" /></a>
|
||
</div>
|
||
|
||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||
<ul class="nav navbar-nav navbar-right">
|
||
<li><a href="/static/front">How it works</a></li>
|
||
<li><a href="/static/plans">Corporate plans</a></li>
|
||
<li><a href="http://blog.habitrpg.com/">Blog</a></li>
|
||
<li><a href="/static/press-kit">Press Kit</a></li>
|
||
<li><a href="/static/contact">Contact Us</a></li>
|
||
<li><button id="header-play-button" class="btn btn-primary navbar-btn navbar-right">Play HabitRPG</button></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<div id="intro">
|
||
<h1>Motivate yourself and your team!</h1>
|
||
<img class="center-block img-responsive" src="images/intro.jpg" /><!--insert intro images-->
|
||
<div class="introcall bg-success">
|
||
<h4>Join 200,000 players making it fun to achieve goals!
|
||
<small><button class="btn btn-primary btn-lg gamifybutton">Play for free</button></small>
|
||
</h4>
|
||
</div>
|
||
<div class="presslogos text-center">Featured in<br/>
|
||
<img src="images/presslogos/lifehacker.png" />
|
||
<img src="images/presslogos/nyt-logo.png" />
|
||
<img src="images/presslogos/makeuseof.png" />
|
||
<img src="images/presslogos/Forbes_logo.png" />
|
||
<img src="images/presslogos/Cnetlogo.png" />
|
||
<img src="images/presslogos/Fast-Company-logo.png" />
|
||
<img src="images/presslogos/kickstarter-logo.png" />
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="intro-text">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2">
|
||
<p class="lead text-center">HabitRPG is a free habit building and productivity app that treats your real life like a game. With in-game rewards and punishments to motivate you and a strong social network to inspire you, HabitRPG can help you achieve your goals to become healthy, hard-working, and happy. </p>
|
||
</div></div></div></div>
|
||
|
||
<section id="testimonial-carousel" class="bg-info">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-3 col-md-offset-1">
|
||
<h2>What people say...</h2>
|
||
<img class="img-say img-responsive visible-lg-block" src="images/uses/publicSpaces.png"/>
|
||
</div>
|
||
<!--Testimonials-->
|
||
<div class="col-md-8 col-sm-10 col-sx-10">
|
||
<div class="carousel slide" data-interval="4000" data-ride="carousel" id="quote-carousel">
|
||
<!-- Bottom Carousel Indicators -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="images/testimonials/Drag0nsilver.png" alt=""></li>
|
||
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive " src="images/testimonials/frabjabulous.png" alt=""></li>
|
||
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive " src="images/testimonials/AndeeLiao.png" alt=""></li>
|
||
<li data-target="#quote-carousel" data-slide-to="3"><img class="img-responsive " src="images/testimonials/AlexandraSo.png" alt=""></li>
|
||
</ol>
|
||
<!-- Carousel Slides / Quotes -->
|
||
<div class="carousel-inner text-center">
|
||
<!-- Quote 1 -->
|
||
<div class="item active">
|
||
<blockquote>
|
||
<div class="row">
|
||
<div class="col-sm-8 col-sm-offset-2"><p>I can't tell you how many time and task tracking systems I've tried over the decades... HRPG is the only thing I've used that actually helps me get things done rather than just list them.</p>
|
||
<small>Drag0nsilver</small>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- Quote 2 -->
|
||
<div class="item">
|
||
<blockquote>
|
||
<div class="row">
|
||
<div class="col-sm-8 col-sm-offset-2">
|
||
<p>HabitRPG is the reason I got a killer, high-paying job... and even more miraculous, I'm now a daily flosser!</p>
|
||
<small>frabjabulous</small>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- Quote 3 -->
|
||
<div class="item">
|
||
<blockquote>
|
||
<div class="row">
|
||
<div class="col-sm-8 col-sm-offset-2">
|
||
<p>Awesome product, just started a few days ago and already more conscious and productive with my time!</p>
|
||
<small>AndeeLiao</small>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<div class="item">
|
||
<blockquote>
|
||
<div class="row">
|
||
<div class="col-sm-8 col-sm-offset-2">
|
||
<p>Couldn't NOT talk about HabitRPG during my speech in Madrid. Must-have tool for freelancers who still need a boss.</p>
|
||
<small>_AlexandraSo_</small>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Carousel Buttons Next/Prev -->
|
||
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
|
||
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg gamifybutton fixedcta">Gamify your life today!</button>
|
||
</section>
|
||
|
||
<section id="uses">
|
||
<h2>Players use HabitRPG to manage...</h2>
|
||
<div class="container-fluid">
|
||
<div id="myCarousel" data-interval="4000" class="carousel slide" data-ride="carousel">
|
||
<ul class="nav nav-pills nav-justified">
|
||
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">Work</a></li>
|
||
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Health</a></li>
|
||
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Teams</a></li>
|
||
<li data-target="#myCarousel" data-slide-to="3"><a href="#">School</a></li>
|
||
<li data-target="#myCarousel" data-slide-to="4"><a href="#">Goals</a></li>
|
||
<li data-target="#myCarousel" data-slide-to="5"><a href="#">Chores</a></li>
|
||
</ul>
|
||
<!-- Wrapper for slides -->
|
||
<div class="carousel-inner" style="z-index:0;">
|
||
<div class="item active work-use">
|
||
<h3>Work<br/><small><a href="/business.html">Use HabitRPG at your business</a></small></h3>
|
||
<div class="carousel-content row">
|
||
<div class="sampletasks col-lg-4 col-md-6 col-sm-12 col-xs-12"><h4>Sample Habits</h4>
|
||
<div style="width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Confirm 1 page of Inventory</div></div><br />
|
||
<div style="width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">20 mins Filing</div></div><br />
|
||
<div style="width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Sort and Process Inbox</div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Prepare 1 Document for Client</div></div><br />
|
||
<div style="width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Call Clients/Put Off Phone Calls</div></div>
|
||
</div>
|
||
<img class="sample-img visible-lg-inline-block" src="images/uses/coding.png" />
|
||
<div class="usetweet-groups col-lg-5 col-md-6 visible-lg-inline-block visible-md-inline-block">
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="frabjabulous" src="images/testimonials/frabjabulous.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">HabitRPG is the reason I got a killer, high-paying job... and even more miraculous, I'm now a daily flosser</div>
|
||
</div>
|
||
</div>
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="_AlexandraSo_" src="images/testimonials/AlexandraSo.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">Couldn't NOT talk about HabitRPG during my speech in Madrid. Must-have tool for freelancers who still need a boss.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!--End item-->
|
||
|
||
<div class="item health-use">
|
||
<h3>Health</h3>
|
||
<div class="carousel-content row">
|
||
<div class="sampletasks col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
||
<h4>Sample Habits</h4>
|
||
<div style="width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Drink Water/Soda</div></div><br />
|
||
<div style="width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Chew Gum/Smoke</div></div><br />
|
||
<div style="width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Take Stairs/Elevator</div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(255, 207, 66); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Eat Healthy/Junk Food</div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Break a Sweat for 1 hr</div></div>
|
||
</div>
|
||
|
||
<img class="sample-img visible-lg-inline-block" src="images/uses/clipart-rosemonkeyct-meditation.png" />
|
||
<div class="usetweet-groups col-lg-5 col-md-6 visible-lg-inline-block visible-md-inline-block">
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="EvaGantz" src="images/testimonials/EvaGantz.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">My very first dentist appointment where the hygienist was actually excited about my flossing habits. Thanks Habitrpg!</div>
|
||
</div>
|
||
</div>
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="supermouse35" src="images/testimonials/supermouse35.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">I'm exercising more and I haven't forgotten to take my meds for months! Thanks, Habit. :D</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item -->
|
||
<div class="item team-use">
|
||
<h3>Teams</h3>
|
||
<div class="carousel-content row">
|
||
<div class="sampletasks col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
||
<h4>Sample To-Dos</h4>
|
||
<div style="width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);"><span style="padding: 0.5em 0px 0em 0em; color: #666;">☐</span></div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Outline Meeting Itinerary for Tuesday</div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);"><span style="padding: 0.5em 0px 0em 0em; color: #666;">☐</span></div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Brainstorm Growth Hacking</div></div><br />
|
||
<div style="width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);"><span style="padding: 0.5em 0px 0em 0em; color: #666;">☐</span></div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Discuss this week’s KPIs</div></div><br />
|
||
|
||
</div>
|
||
<img class="sample-img visible-lg-inline-block" src="images/uses/publicSpaces.png" />
|
||
<div class="usetweet-groups col-lg-5 col-md-6 visible-lg-inline-block visible-md-inline-block">
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="Althaire" src="images/testimonials/Althaire.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">Having a quest constantly on really motivates me to do all my dailies and do all my to-dos. My biggest motivation is not letting my party down.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item -->
|
||
<div class="item school-use">
|
||
<h3>School</h3>
|
||
<div class="carousel-content row">
|
||
<div class="sampletasks col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
||
<h4>Sample Habits</h4>
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Finish 1 Assignment</div></div><br />
|
||
<div style="width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Study 1 hour </div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Meet with Study Group</div></div><br />
|
||
<div style="width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Notes for 1 Chapter</div></div><br />
|
||
<div style="width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(90, 98, 223); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Read 1 Chapter</div></div>
|
||
</div>
|
||
<img class="sample-img visible-lg-inline-block" src="images/uses/reading.png" />
|
||
<div class="usetweet-groups col-lg-5 col-md-6 visible-lg-inline-block visible-md-inline-block">
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="InfH" src="images/testimonials/InfH.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">HabitRPG has really helped me impart structure to my life in graduate school.</div>
|
||
</div>
|
||
</div>
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="Drei-M" src="images/testimonials/Drei-M.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">When I discovered HabitRPG last summer, I had just failed about half of my exams. Thanks to the Dailies… I was able to organize and discipline myself, and I actually passed all my exams with really good grades a month ago.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item -->
|
||
<div class="item improvement-use">
|
||
<h3>Goals</h3>
|
||
<div class="carousel-content row">
|
||
<div class="sampletasks col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
||
<h4>Sample Dailies</h4>
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Practice Piano for 1 Hour</div></div><br />
|
||
<div style="width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Work on article for publication</div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Work on blog post</div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Japanese lesson on Duolingo</div></div><br />
|
||
<div style="width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Read an Informative Article</div></div>
|
||
</div>
|
||
<img class="sample-img visible-lg-inline-block" src="images/uses/Gaining_an_achievement_by_cosmic_caterpillar-d7uyv5z.png" />
|
||
|
||
<div class="usetweet-groups col-lg-5 col-md-6 visible-lg-inline-block visible-md-inline-block">
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="Kazui" src="images/testimonials/Kazui.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">Before HabitRPG, I was stuck with my thesis, as well as dissatisfied with my personal discipline regarding housework and things like learning vocabulary and studying Go theory. It turns out breaking down these tasks into smaller manageable checklists is quite the thing to keep me motivated and constantly working</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item -->
|
||
|
||
<div class="item housework-use">
|
||
<h3>Chores</h3>
|
||
<div class="carousel-content row">
|
||
<div class="sampletasks col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
||
<h4>Sample Dailies</h4>
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Put Dirty Clothes in Hamper</div></div><br />
|
||
<div style="width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">20 mins of Housework</div></div><br />
|
||
<div style="width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div><div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;">-</div><div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Wash a Load of Dishes</div></div><br />
|
||
<div style="width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Tidy One Room</div></div><br />
|
||
<div style="width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
|
||
<div class="task-btn" style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div> <div class="task-desc" style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;">Wash and Dry a Load of Clothes</div></div>
|
||
</div>
|
||
<img class="sample-img visible-lg-inline-block" src="images/uses/dusting_by_leephon.png" />
|
||
<div class="usetweet-groups col-lg-5 col-md-6 visible-lg-inline-block visible-md-inline-block">
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="autumnesquirrel" src="images/testimonials/autumnesquirrel.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">I'm procrastinating less on work and housework and pay bills on time.</div>
|
||
</div>
|
||
</div>
|
||
<div class="usetweet-group">
|
||
<img data-toggle="tooltip" data-placement="top" title="irishfeet123" src="images/testimonials/irishfeet123.png">
|
||
<div class="usetweet tweet popover right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">I've had horrible habits with clearing my place completely after meals and leaving cups all over the place. HabitRPG has cured that!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- End Carousel -->
|
||
</div>
|
||
<button class="btn btn-primary btn-lg gamifybutton fixedcta">Gamify your life today!</button>
|
||
|
||
</section>
|
||
|
||
<section id="rewards" class="bg-warning container-fluid">
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12">
|
||
<h2 class="headline">Complete a task to earn gold!</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12 col-xs-12">
|
||
<p class="sectioninfo">Spend gold on virtual and real-life rewards.<br/><br/>Instant rewards keep you motivated!</p>
|
||
<div class="scrolltweet hidden-xs hidden-sm">
|
||
<img data-toggle="tooltip" data-placement="top" title="Elmi" class="scrolltweet-image" src="images/testimonials/Elmi.png" />
|
||
<div class="tweet popover right pull-right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content"> Every morning I'm looking forward to getting up so I can earn some gold!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-4 col-lg-offset-1 col-sm-8 well col-xs-8 col-xs-offset-2 col-sm-offset-2 well-lg">
|
||
<div class="avatarscroll">
|
||
<h2><span class="glyphicon glyphicon-check"></span></h2>
|
||
<h2><span class="glyphicon glyphicon-arrow-down"></span></h2>
|
||
<img class="img-responsive" src="images/misc/shop_gold.png" /><img class="img-responsive" src="images/misc/shop_gold.png" /><img class="img-responsive" src="images/misc/shop_gold.png" />
|
||
<h2><span class="glyphicon glyphicon-arrow-down"></span></h2>
|
||
<img class="img-responsive" src="images/TVreward.png" />
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg fixedcta gamifybutton">Gamify your life today!</button>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="levels" class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12">
|
||
<h2 class="headline">As you stay productive, you unlock new content!</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12">
|
||
<p class="sectioninfo">Achieve your goals and level up.<br/><br/>Unlock new motivational tools, such as pet collecting, random rewards, spell-casting, and more!</p>
|
||
<div class="scrolltweet hidden-xs hidden-sm">
|
||
<img data-toggle="tooltip" data-placement="top" title="16bitFil" class="scrolltweet-image" src="images/testimonials/16bitFil.png" />
|
||
<div class="tweet popover right pull-right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">I'm getting my jobs and tasks done in record time thanks to HabitRPG. I'm just always so eager to reach my next level-up!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-4 col-lg-offset-1 col-sm-8 well col-xs-8 col-xs-offset-2 col-sm-offset-2">
|
||
<div class="avatarscroll">
|
||
<img class="img-responsive" src="images/avatar/avatarstatic.png" />
|
||
<h2><span class="glyphicon glyphicon-arrow-down"></span></h2>
|
||
<img class="img-responsive" src="images/SAMPLEadventurers.png" />
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg fixedcta gamifybutton">Gamify your life today!</button>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="health" class="bg-danger container-fluid">
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12">
|
||
<h2 class="headline">Miss a daily goal?</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12">
|
||
<h2>Lose health!</h2>
|
||
<p class="sectioninfo">Break bad habits and procrastination cycles with immediate consequences.</p>
|
||
<div class="scrolltweet hidden-xs hidden-sm">
|
||
<img data-toggle="tooltip" data-placement="top" title="Zelah Meyer" class="scrolltweet-image" src="images/testimonials/Zelah_Meyer.png" />
|
||
<div class="tweet popover right pull-right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">With HabitRPG, I can be persuaded to go to bed on time by the thought of gaining points for an early night or losing health for a late one!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-4 col-lg-offset-1 col-sm-8 well col-xs-8 col-xs-offset-2 col-sm-offset-2 well-lg">
|
||
<h2><span class="glyphicon glyphicon-unchecked"></span></h2>
|
||
<div class="health-progress">
|
||
<div tooltip="Health" class="meter-label">
|
||
<span class="glyphicon glyphicon-heart"></span>
|
||
</div>
|
||
<div class="meter health">
|
||
<div class="bar"><div style="width:100%;"> </div></div>
|
||
</div>
|
||
</div>
|
||
<h2><span class="glyphicon glyphicon-arrow-down"></span></h2>
|
||
<div class="health-progress">
|
||
<div tooltip="Health" class="meter-label">
|
||
<span class="glyphicon glyphicon-heart"></span>
|
||
</div>
|
||
<div class="meter health">
|
||
<div class="bar"><div style="width:50%;"> </div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg fixedcta gamifybutton">Gamify your life today!</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="quest" class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12">
|
||
<h2 class="headline">Battle monsters with your friends!</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-12">
|
||
<h2>If you slack off, they all get hurt!</h2>
|
||
<p class="sectioninfo">Playing with your friends keeps you accountable for your tasks.<br/>Issue each other Challenges to complete a goal together!</p>
|
||
<div class="scrolltweet hidden-xs hidden-sm">
|
||
<img data-toggle="tooltip" data-placement="top" title="skysailor" class="scrolltweet-image" src="images/testimonials/skysailor.png" />
|
||
<div class="tweet popover right pull-right">
|
||
<div class="arrow"></div>
|
||
<div class="popover-content">My party and our quests keep me engaged in the game, which keeps me motivated to get things done and change my life in positive ways</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-md-offset-1 col-lg-offset-1 col-sm-10 well col-xs-10 col-xs-offset-1 col-sm-offset-1 well-lg">
|
||
<img class="clearfix img-responsive center-block" style="padding-bottom:30px;" src="images/Quest_dilatory_drag'onSmall.png" />
|
||
<div class="row">
|
||
<div class="col-lg-5 col-md-5 col-sm-5 col-sm-offset-0 col-xs-5 col-xs-offset-0">
|
||
<div class="health-progress">
|
||
<div tooltip="Health" class="meter-label">
|
||
<span class="glyphicon glyphicon-heart"></span></div>
|
||
<div class="meter health">
|
||
<div class="bar"><div style="width:20%;"> </div></div>
|
||
</div>
|
||
</div>
|
||
<div class="quest-friend-img"><img src="images/party/AnnaCosplay.png" /></div>
|
||
</div>
|
||
<div class="col-md-1 col-sm-1 col-xs-1">
|
||
<h2><span class="glyphicon glyphicon-arrow-right"></span></h2>
|
||
</div>
|
||
<div class="col-lg-5 col-md-offset-1 col-md-5 col-sm-5 col-sm-offset-0 col-xs-5 col-xs-offset-0">
|
||
<div class="health-progress">
|
||
<div tooltip="Health" class="meter-label">
|
||
<span class="glyphicon glyphicon-heart"></span></div>
|
||
<div class="meter health">
|
||
<div class="bar"><div style="width:0%;"> </div></div>
|
||
</div>
|
||
</div>
|
||
<div class="quest-friend-img">
|
||
<img src="images/party/GrimReaper.png" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg fixedcta gamifybutton">Gamify your life today!</button>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="features" class="bg-info container-fluid">
|
||
<div class="row">
|
||
<h2>We also feature...</h2>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 col-md-offset-2 col-sm-6">
|
||
<div class="feature-img">
|
||
<img class="center-block img-responsive" src="images/Mount.png" /></div>
|
||
<div class="featuretext">
|
||
<h4>Pets and Mounts</h4>
|
||
<p>Eggs and items drop when you complete your tasks. Be as productive as possible to collect pets and mounts!</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-sm-6">
|
||
<div class="feature-img center-block">
|
||
<img src="images/achievement-triadbingo.png" />
|
||
<img src="images/achievement-perfect.png" />
|
||
</div>
|
||
<div class="featuretext">
|
||
<h4>Achievement Badges</h4>
|
||
<p>Do something totally awesome? Get a badge and show it off!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 col-md-offset-2 col-sm-6">
|
||
<div class="feature-img">
|
||
<img class="center-block img-responsive" src="images/Promo_springclasses2015.png" /></div>
|
||
<div class="featuretext">
|
||
<h4>Equipment and extras</h4>
|
||
<p>Buy limited edition equipment, potions, and other virtual goodies in our Market with your task rewards!</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-sm-6">
|
||
<div class="feature-img">
|
||
<img class="center-block img-responsive" src="images/Party-Header.png" /></div>
|
||
<div class="featuretext">
|
||
<h4>Social play</h4>
|
||
<p>Join common-interest groups with like-minded people. Create Challenges to compete against other users.</p>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg fixedcta gamifybutton">Gamify your life today!</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="footercall">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-10">
|
||
<h3>Join 200,000 players making it fun to achieve goals!</h3>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 col-md-offset-4">
|
||
<button class="btn btn-primary btn-lg btn-block">Play for free!</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<footer class="footer">
|
||
<div class="container-fluid shoutout">
|
||
<h4>HabitRPG works with</h4>
|
||
<div class="row">
|
||
<div class="col-lg-2 col-md-2 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-6 col-xs-offset-1"><a href="http://ionicframework.com/"><img class="img-responsive" src="images/presslogos/ionic-logo-horizontal-transparent.png"></a></div>
|
||
<div class="col-lg-2 col-lg-offset-0 col-md-2 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-6 col-xs-offset-1"><a href="https://www.jetbrains.com/webstorm/"><img class="img-responsive" src="images/presslogos/logo_webstorm.png"></a></div>
|
||
<div class="col-lg-2 col-lg-offset-0 col-md-2 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-6 col-xs-offset-1"><a href="http://github.com/"><img class="img-responsive" src="images/presslogos/GitHub_Logo.png"></a></div>
|
||
<div class="col-lg-2 col-lg-offset-0 col-md-2 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-6 col-xs-offset-1"><a href="https://trello.com/"><img class="img-responsive" src="images/presslogos/trello-logo-blue.png"></a></div>
|
||
<div class="col-lg-2 col-lg-offset-0 col-md-2 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-6 col-xs-offset-1"><a href="https://slack.com/"><img class="img-responsive" src="images/presslogos/landing_slack_hash_wordmark_logo.png"></a></div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row footer-content">
|
||
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2 col-sm-3 col-sm-offset-0 col-xs-offset-3">
|
||
<h4>Mobile</h4>
|
||
<ul class="list-unstyled">
|
||
<li><a href="https://itunes.apple.com/us/app/habitrpg/id689569235?mt=8" target="_blank">iOS</a></li>
|
||
<li><a href="https://play.google.com/store/apps/details?id=com.ocdevel.habitrpg" target="_blank">Android</a></li>
|
||
</ul>
|
||
<h4>Language</h4>
|
||
<select ng-change="changeLang()" ng-model="selectedLanguage" ng-options="language.name for language in languages"></select>
|
||
</div>
|
||
<div class="col-lg-2 col-md-2 col-sm-3 col-sm-offset-0 col-xs-offset-3">
|
||
<h4>Company</h4>
|
||
<ul class="list-unstyled">
|
||
<li><a href="/static/features">Features</a></li>
|
||
<li><a target="_blank" href="http://blog.habitrpg.com/">Blog</a></li>
|
||
<li><a target="_blank" href="http://habitrpg.wikia.com/wiki/FAQ">FAQ</a></li>
|
||
<li><a href="/static/privacy">Privacy</a></li>
|
||
<li><a href="/static/terms">Terms</a></li>
|
||
<li><a href="/static/contact">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-lg-2 col-md-2 col-sm-3 col-sm-offset-0 col-xs-offset-3">
|
||
<h4>Community</h4>
|
||
<ul class="list-unstyled">
|
||
<li><a target="_blank" href="https://habitrpg.com/static/api">API</a></li>
|
||
<li><a href="http://habitrpg.wikia.com/wiki/App_and_Extension_Integrations" target="_blank">Add-ons & Extensions</a></li>
|
||
<li><a target="_blank" href="http://habitrpg.wikia.com/wiki/Special:Forum">Forum</a></li>
|
||
<li><a target="_blank" href="http://www.kickstarter.com/projects/lefnire/habitrpg-mobile">Kickstarter</a></li>
|
||
<li><a target="_blank" href="https://www.facebook.com/Habitrpg">Facebook</a></li>
|
||
<li><a target="_blank" href="http://www.reddit.com/r/habitrpg/">Reddit</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-lg-2 col-md-2 col-sm-3 col-sm-offset-0 col-xs-offset-3">
|
||
<h4>Social</h4>
|
||
<div addthis:url="https://habitrpg.com" addthis:title="HabitRPG - Gamify Your Life" class="addthis_toolbox addthis_default_style">
|
||
<table>
|
||
<tr>
|
||
<td><a fb:like:layout="button_count" class="addthis_button_facebook_like"></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><a tw:via="habitrpg" class="addthis_button_tweet"></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><!-- <iframe src="http://www.habitrpg.com/bower_components/github-buttons/github-btn.html?user=lefnire&repo=habitrpg&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="85px" height="20px"></iframe> --></td>
|
||
</tr>
|
||
<tr>
|
||
<td><a g:plusone:size="medium" class="addthis_button_google_plusone"></a></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Footer scripts -->
|
||
<!--Use carousel initialize-->
|
||
<script type="text/javascript">
|
||
$(document).ready( function() {
|
||
var clickEvent = false;
|
||
$('#myCarousel').on('click', '.nav a', function() {
|
||
clickEvent = true;
|
||
$('.nav li').removeClass('active');
|
||
$(this).parent().addClass('active');
|
||
}).on('slid.bs.carousel', function(e) {
|
||
if(!clickEvent) {
|
||
var count = $('.nav').children().length -1;
|
||
var current = $('.nav li.active');
|
||
current.removeClass('active').next().addClass('active');
|
||
var id = parseInt(current.data('slide-to'));
|
||
if(count == id) {
|
||
$('.nav li').first().addClass('active');
|
||
}
|
||
}
|
||
clickEvent = false;
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!--Tooltips-->
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
$('[data-toggle="tooltip"]').tooltip()
|
||
$('[data-toggle="popover"]').popover()
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html> |