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.
loop/landing-page.html

131 lines
3.5 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loop</title>
<meta name="description" content="A habit tracker that works...">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: roboto, arial, sans-serif;
}
.header-container {
background: #156DC4;
text-align: center;
padding: 60px;
}
.header {
display: inline-block;
}
.header img {
width: 350px;
}
.header .headline {
color: white;
width: 550px;
text-align: left;
display: inline-block;
padding: 60px;
}
.header .headline h1 {
font-size: 4rem;
}
.header .headline p {
font-size: 1.2rem;
}
.content {
display: grid;
}
.content .row div {
display: inline-block;
}
.content .row .entry {
width: 30%;
padding: 25px;
vertical-align: top;
}
</style>
</head>
<body>
<div class="header-container">
<div class="header">
<img src="https://raw.githubusercontent.com/iSoron/uhabits/dev/screenshots/original/uhabits1.png"/>
<div class="headline">
<h1>Make those<br/>habits stick.</h1>
<p>
Loop helps you create and maintain good habits, allowing you to achieve your
long-term goals. Detailed graphs and statistics show you how your habits improved
over time.
</p>
</div>
</div>
</div>
<div class="content">
<div class="row">
<div class="entry">
<h3>Beautiful and modern interface</h3>
<p>Loop has a minimalistic inerface that is easy to use and follows the material design
guidelines.</p>
</div>
<div class="entry">
<h3>Habit score</h3>
<p>Every repetition makes your habit stronger, and every missed day makes it weaker. A
few missed days after a long streak, however, will not completely destroy your
entire progress.</p>
</div>
<div class="entry">
<h3>Detailed graphs and statistics</h3>
<p>Clearly see how your habits improved over time with beautiful and detailed graphs.
Scroll back to see the complete history of your habits.</p>
</div>
</div>
<div class="row">
<div class="entry">
<h3>Flexible schedules</h3>
<p>Supports both daily habits and habits with more complex schedules, such as 3 times
every week; one time every other week; or every other day.</p>
</div>
<div class="entry">
<h3>Reminders</h3>
<p>Create an individual reminder for each habit, at a chosen hour of the day. Easily
check, dismiss or snooze your habit directly from the notification, without opening
the app.</p>
</div>
<div class="entry">
<h3>Optimized for smartwatches</h3>
<p>Reminders can be checked, snoozed or dismissed directly from your Android Wear
watch.</p>
</div>
</div>
</div>
</body>
</html>