feat: Rudimentary implementation of a landing page

References: #267
7 years ago · 5c4b4c223b
parent 178061475e
commit 5c4b4c223b
1 changed files with 131 additions and 0 deletions
--- a/landing-page.html
+++ b/landing-page.html
@ -0,0 +1,131 @@
 <!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>