Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
330 lines (320 loc) · 25.7 KB
/
Copy pathindex.html
File metadata and controls
330 lines (320 loc) · 25.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Mobile App Landing Page Template (HTML) | Habitly</title>
<meta name="description" content="Free mobile app landing page template in one HTML file. Phone screen mockups, features, app store buttons, reviews, free and premium plans and FAQ. SEO ready.">
<meta name="keywords" content="mobile app landing page template, app website template free, app landing page HTML, iOS Android app promo page, free HTML template, one page website template">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/">
<meta name="theme-color" content="#1B1B3A">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free Mobile App Landing Page Template (HTML)">
<meta property="og:description" content="Free mobile app landing page template in one HTML file. Phone screen mockups, features, app store buttons, reviews, free and premium plans and FAQ. SEO ready.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/screenshot.png"><meta property="og:image:alt" content="Free Mobile App Landing Page Template (HTML)">
<meta property="og:image:width" content="1440">
<meta property="og:image:height" content="900">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Mobile App Landing Page Template (HTML)">
<meta name="twitter:description" content="Free mobile app landing page template in one HTML file. Phone screen mockups, features, app store buttons, reviews, free and premium plans and FAQ. SEO ready.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/screenshot.png">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='18' fill='%23FF5E3A'/><path d='M20 33l8 8 16-18' stroke='%23fff' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://images.unsplash.com">
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@500;700;800;900&display=swap" rel="stylesheet">
<!-- Structured data for this template page. When you use the template, replace it with LocalBusiness or Organization schema for your own business (see README). -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/",
"name": "Free Mobile App Landing Page Template (HTML)",
"description": "Free mobile app landing page template in one HTML file. Phone screen mockups, features, app store buttons, reviews, free and premium plans and FAQ. SEO ready.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/screenshot.png"
},
"isPartOf": {
"@type": "WebSite",
"name": "Free HTML Templates",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
"breadcrumb": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/#template",
"name": "Free Mobile App Landing Page Template (HTML)",
"description": "Free mobile app landing page template in one HTML file. Phone screen mockups, features, app store buttons, reviews, free and premium plans and FAQ. SEO ready.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "mobile app landing page template, app website template free, app landing page HTML, iOS Android app promo page",
"author": {
"@type": "Person",
"name": "mmrahmanbappi",
"url": "https://github.com/mmrahmanbappi"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"downloadUrl": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "AI & SaaS Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Mobile App Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/mobile-app/"
}
]
}
]
}
</script>
<style>
:root{--or:#FF5E3A;--or-d:#E54621;--yel:#FFD23F;--navy:#1B1B3A;--navy-2:#2E2E5C;--bg:#FFF4EC;--mint:#C9F2DF;--lav:#E4E1FF;--text:#26263F;--muted:#6A6A85;--line:#F0E1D5;
--font:"Urbanist",system-ui,-apple-system,"Segoe UI",sans-serif;--wrap:1180px}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:19px;line-height:1.55;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;font-weight:500}
img{max-width:100%;height:auto;display:block}a{color:inherit}p{margin:0 0 1em}
h1,h2,h3{font-weight:900;margin:0;line-height:1.02;color:var(--navy);letter-spacing:-.03em}h3{font-weight:800}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--yel);padding:10px;z-index:99}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:8px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,244,236,.94);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:25px;text-decoration:none;color:var(--navy)}
.logo i{width:32px;height:32px;border-radius:10px;background:var(--or);display:grid;place-items:center}.logo i::after{content:"";width:12px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}.menu a{text-decoration:none;font-weight:700}.menu a:hover{color:var(--or)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border-radius:14px;font-weight:800;text-decoration:none;border:0;font-family:var(--font);font-size:17px;cursor:pointer}
.btn-or{background:var(--or);color:#fff}.btn-or:hover{background:var(--or-d)}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;border-radius:14px;padding:10px 20px;text-decoration:none;line-height:1.1}
.store small{display:block;font-size:12px;font-weight:600;opacity:.8}.store b{font-size:18px}
.store svg{width:24px;height:24px}
.burger{display:none;background:#fff;border:0;border-radius:12px;padding:10px 12px;cursor:pointer}.burger span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0}
.hero{background:var(--bg);padding:50px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,6.8vw,90px)}
.hero h1 span{color:var(--or)}
.hero .lead{font-size:22px;color:var(--muted);max-width:40ch;margin:22px 0 30px}
.stores{display:flex;gap:12px;flex-wrap:wrap}
.rating{display:flex;align-items:center;gap:12px;margin-top:30px;font-weight:700}.rating .st{color:#F5A623;letter-spacing:2px;font-size:20px}
.phones{position:relative;height:620px}
.phone{position:absolute;width:280px;height:580px;background:var(--navy);border-radius:46px;padding:12px;box-shadow:0 40px 70px -30px rgba(27,27,58,.55)}
.phone .scr{background:#fff;border-radius:36px;height:100%;overflow:hidden;padding:26px 18px;position:relative}
.phone .scr::before{content:"";position:absolute;top:10px;left:50%;width:90px;height:24px;background:var(--navy);border-radius:14px;transform:translateX(-50%)}
.p1{left:4%;top:40px;transform:rotate(-6deg);z-index:1}.p2{right:4%;top:0;z-index:2}
.hi{font-size:14px;color:var(--muted);margin-top:22px}.big{font-size:26px;font-weight:900;color:var(--navy);margin-bottom:14px;line-height:1.1}
.habit{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:16px;padding:12px;margin-bottom:10px;font-size:15px;font-weight:700}
.habit i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:18px}
.habit .ok{margin-left:auto;width:26px;height:26px;border-radius:50%;border:3px solid var(--or)}
.habit .ok.done{background:var(--or)}
.ringbox{text-align:center;margin-top:26px}
.ringbox svg{width:170px;height:170px;margin:0 auto}
.ringbox b{display:block;font-size:20px;color:var(--navy);margin-top:10px}.ringbox span{font-size:14px;color:var(--muted)}
.week{display:flex;justify-content:space-between;margin-top:22px}
.week span{width:30px;height:30px;border-radius:10px;background:var(--bg);font-size:12px;font-weight:800;display:grid;place-items:center;color:var(--muted)}
.week span.on{background:var(--or);color:#fff}
.press{padding:30px 0;border-bottom:1px solid var(--line)}
.press .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.press p{margin:0;color:var(--muted);font-weight:700}.press .row{display:flex;gap:44px;flex-wrap:wrap}
.press span{font-weight:900;font-size:22px;color:#B9B3C9}
section{padding:110px 0}
.head{text-align:center;max-width:720px;margin:0 auto 56px}.head h2{font-size:clamp(38px,5vw,64px)}.head p{color:var(--muted);font-size:20px;margin-top:14px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{border-radius:30px;padding:34px;background:var(--bg)}
.feat:nth-child(2){background:var(--mint)}.feat:nth-child(3){background:var(--lav)}.feat:nth-child(4){background:var(--lav)}.feat:nth-child(5){background:var(--bg)}.feat:nth-child(6){background:var(--mint)}
.feat .e{font-size:40px;display:block;margin-bottom:16px}
.feat h3{font-size:26px;margin-bottom:10px}.feat p{margin:0;color:#4d4d68;font-size:17px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split img{border-radius:30px;width:100%;aspect-ratio:1/1;object-fit:cover}
.split h2{font-size:clamp(34px,4.4vw,56px)}
.split .lead{font-size:20px;color:var(--muted);margin:18px 0}
.checks{list-style:none;padding:0;margin:0}.checks li{padding:8px 0 8px 36px;position:relative;font-weight:700}
.checks li::before{content:"";position:absolute;left:0;top:10px;width:24px;height:24px;border-radius:8px;background:var(--or)}
.checks li::after{content:"";position:absolute;left:8px;top:15px;width:8px;height:5px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg)}
.reviews{background:var(--navy);color:#cfcfe6}
.reviews h2{color:#fff}.reviews .head p{color:#a7a7c4}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rv{background:var(--navy-2);border-radius:24px;padding:28px;margin:0}
.rv .st{color:var(--yel);letter-spacing:2px}
.rv p{margin:12px 0 16px;font-size:18px;color:#eee}
.rv cite{font-style:normal;font-weight:700;color:#fff}.rv cite span{display:block;font-weight:500;font-size:14px;color:#a7a7c4}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:880px;margin:0 auto}
.plan{border:3px solid var(--line);border-radius:30px;padding:36px;display:flex;flex-direction:column}
.plan.pro{border-color:var(--or);background:var(--bg)}
.plan h3{font-size:28px}.plan .amt{font-size:52px;font-weight:900;color:var(--navy);margin:12px 0 0}
.plan .amt small{font-size:17px;font-weight:600;color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:20px 0 26px}.plan li{padding:8px 0;border-bottom:1px dashed var(--line)}
.plan li::before{content:"✓";color:var(--or);font-weight:900;margin-right:10px}
.plan .btn{margin-top:auto}
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--bg);border-radius:22px;padding:20px 24px;margin-bottom:12px}
.faq summary{list-style:none;cursor:pointer;font-weight:800;font-size:20px;display:flex;justify-content:space-between;gap:18px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--or)}
.faq details[open] summary::after{content:"−"}.faq details p{margin:10px 0 0;color:var(--muted)}
.dl{padding:0 0 100px}
.dl-box{background:var(--or);border-radius:40px;padding:64px;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;color:#fff;overflow:hidden;position:relative}
.dl-box h2{color:#fff;font-size:clamp(38px,5vw,64px)}.dl-box p{font-size:20px;margin:16px 0 26px}
.qr{background:#fff;border-radius:24px;padding:22px;text-align:center;color:var(--navy);font-weight:700;font-size:15px;justify-self:end}
.qr svg{width:150px;height:150px;display:block;margin:0 auto 10px}
footer{padding:36px 0;color:var(--muted);font-size:16px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer ul{list-style:none;padding:0;margin:0;display:flex;gap:22px;flex-wrap:wrap}footer a{text-decoration:none}footer a:hover{color:var(--or)}
@media (max-width:1000px){.menu,.nav>.btn{display:none}.burger{display:block}
.menu.open{display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;background:var(--bg);padding:22px;gap:16px}
.hero-grid,.split,.dl-box{grid-template-columns:1fr}.feats,.rv-grid{grid-template-columns:1fr 1fr}.qr{justify-self:start}}
@media (max-width:640px){body{font-size:18px}section{padding:76px 0}.feats,.rv-grid,.plans{grid-template-columns:1fr}.phones{height:560px}.p1{display:none}.p2{left:50%;right:auto;transform:translateX(-50%)}.dl-box{padding:34px}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- Template notice bar: delete this block before you publish your own site -->
<div id="template-bar" style="background:#111;color:#fff;font:500 14px/1.4 system-ui,sans-serif;text-align:center;padding:9px 16px">Free HTML template. <a href="index.html" download="mobile-app.html" style="color:#FFD166;font-weight:700">Download this template (free)</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/" style="color:#fff">See all free templates</a></div>
<header class="site-header">
<nav class="wrap nav" aria-label="Main">
<a href="#" class="logo"><i aria-hidden="true"></i>Habitly</a>
<ul class="menu" id="menu"><li><a href="#features">Features</a></li><li><a href="#reviews">Reviews</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">FAQ</a></li></ul>
<a href="#download" class="btn btn-or">Get the app</a>
<button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu"><span></span><span></span><span></span></button>
</nav>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-title" style="padding-bottom:0">
<div class="wrap hero-grid">
<div style="padding-bottom:60px">
<h1 id="hero-title">Small habits. <span>Big changes.</span></h1>
<p class="lead">Habitly is the habit tracker app that makes good habits stick. Set a goal, tick it off each day and watch your streak grow. Two minutes a day, no willpower needed.</p>
<div class="stores">
<a href="#" class="store"><span><small>Download on the</small><b>App Store</b></span></a>
<a href="#" class="store"><span><small>Get it on</small><b>Google Play</b></span></a>
</div>
<div class="rating"><span class="st" aria-hidden="true">★★★★★</span><span>4.8 from 126,000 ratings</span></div>
</div>
<div class="phones" aria-label="Screens from the Habitly app">
<div class="phone p1"><div class="scr">
<div class="ringbox"><svg viewBox="0 0 170 170" role="img" aria-label="Weekly goal 80 percent complete"><circle cx="85" cy="85" r="70" fill="none" stroke="#FFF4EC" stroke-width="16"/><circle cx="85" cy="85" r="70" fill="none" stroke="#FF5E3A" stroke-width="16" stroke-linecap="round" stroke-dasharray="440" stroke-dashoffset="88" transform="rotate(-90 85 85)"/><text x="85" y="95" text-anchor="middle" font-family="Urbanist,sans-serif" font-weight="900" font-size="36" fill="#1B1B3A">80%</text></svg><b>Great week, Sam!</b><span>23 of 28 habits done</span></div>
<div class="week" aria-hidden="true"><span class="on">M</span><span class="on">T</span><span class="on">W</span><span class="on">T</span><span class="on">F</span><span>S</span><span>S</span></div>
<div class="habit" style="margin-top:22px"><i style="background:var(--yel)">🔥</i>21-day reading streak</div>
</div></div>
<div class="phone p2"><div class="scr">
<p class="hi">Tuesday, 14 October</p><p class="big">Good morning, Sam</p>
<div class="habit"><i style="background:var(--mint)">💧</i>Drink 8 glasses<span class="ok done"></span></div>
<div class="habit"><i style="background:var(--lav)">📖</i>Read 20 pages<span class="ok done"></span></div>
<div class="habit"><i style="background:#FFE2D9">🏃</i>Walk 8,000 steps<span class="ok"></span></div>
<div class="habit"><i style="background:#FFF1BF">🧘</i>5 minutes of calm<span class="ok"></span></div>
<div class="habit"><i style="background:var(--mint)">🌙</i>Phone away by 10pm<span class="ok"></span></div>
</div></div>
</div>
</div>
</section>
<div class="press"><div class="wrap"><p>As featured in</p><div class="row" aria-label="Publications"><span>The Daily Tech</span><span>WellMag</span><span>Morning Brief</span><span>AppWeek</span></div></div></div>
<section id="features" aria-labelledby="feat-title">
<div class="wrap">
<div class="head"><h2 id="feat-title">Why Habitly works when other apps don't.</h2><p>We built Habitly with habit researchers, so every feature helps you keep going on the days you don't feel like it.</p></div>
<div class="feats">
<article class="feat"><span class="e" aria-hidden="true">✅</span><h3>One tap to check in</h3><p>Tick off habits from your home screen or watch. No typing, no menus.</p></article>
<article class="feat"><span class="e" aria-hidden="true">🔥</span><h3>Streaks that motivate</h3><p>See your streak grow each day. Miss one? A "skip day" keeps your streak alive.</p></article>
<article class="feat"><span class="e" aria-hidden="true">⏰</span><h3>Smart reminders</h3><p>Reminders arrive when you usually do the habit, not at a random time.</p></article>
<article class="feat"><span class="e" aria-hidden="true">📊</span><h3>Clear progress charts</h3><p>Weekly and monthly charts show what's working and what needs a nudge.</p></article>
<article class="feat"><span class="e" aria-hidden="true">👯</span><h3>Friends and challenges</h3><p>Share a habit with a friend and keep each other on track.</p></article>
<article class="feat"><span class="e" aria-hidden="true">🔒</span><h3>Private by design</h3><p>Your data stays on your phone unless you choose to back it up.</p></article>
</div>
</div>
</section>
<section aria-labelledby="science-title" style="padding-top:0">
<div class="wrap split">
<img src="https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=800&q=75&auto=format&fit=crop" alt="Smartphone lying on a bright white desk" width="800" height="800" loading="lazy">
<div><h2 id="science-title">Start with two minutes a day.</h2><p class="lead">Big goals fail because they're too big. Habitly helps you start tiny, like one push-up or one page, then grow the habit as it becomes automatic.</p>
<ul class="checks"><li>Ready-made plans for sleep, fitness, reading and money</li><li>Habits that grow a little each week</li><li>Works offline, syncs across devices</li><li>Apple Health and Google Fit support</li></ul></div>
</div>
</section>
<section class="reviews" id="reviews" aria-labelledby="rev-title">
<div class="wrap">
<div class="head"><h2 id="rev-title">126,000 five-star reasons.</h2><p>Real reviews from the App Store and Google Play.</p></div>
<div class="rv-grid">
<blockquote class="rv"><div class="st" aria-label="5 stars">★★★★★</div><p>"I've tried every habit app. This is the first one I've used for more than a month. 214 days of reading so far."</p><cite>Grace M.<span>App Store review</span></cite></blockquote>
<blockquote class="rv"><div class="st" aria-label="5 stars">★★★★★</div><p>"Simple, calm and not preachy. The skip day feature saved my streak on holiday."</p><cite>Daniel R.<span>Google Play review</span></cite></blockquote>
<blockquote class="rv"><div class="st" aria-label="5 stars">★★★★★</div><p>"My husband and I do a shared 'no phones at dinner' habit. It actually changed our evenings."</p><cite>Aisha K.<span>App Store review</span></cite></blockquote>
</div>
</div>
</section>
<section id="pricing" aria-labelledby="price-title">
<div class="wrap">
<div class="head"><h2 id="price-title">Free to start. Premium when you're ready.</h2></div>
<div class="plans">
<article class="plan"><h3>Free</h3><div class="amt">$0</div><ul><li>Up to 5 habits</li><li>Streaks and reminders</li><li>Weekly progress</li><li>Home screen widgets</li></ul><a href="#download" class="btn btn-or" style="background:var(--navy)">Download free</a></article>
<article class="plan pro"><h3>Premium</h3><div class="amt">$3.99<small> /month</small></div><ul><li>Unlimited habits</li><li>Full charts and history</li><li>Challenges with friends</li><li>Guided habit plans</li><li>Cloud backup</li></ul><a href="#download" class="btn btn-or">Try 7 days free</a></article>
</div>
<p style="text-align:center;color:var(--muted);margin-top:22px">Or $29.99 a year, which is about 58 cents a week.</p>
</div>
</section>
<section id="faq" aria-labelledby="faq-title" style="padding-top:0">
<div class="wrap">
<div class="head"><h2 id="faq-title">Questions</h2></div>
<div class="faq">
<details open><summary>What is the best way to build a new habit?</summary><p>Start very small, do it at the same time each day and track it. Tracking works because seeing your streak makes you less likely to break it. Habitly is designed around these three steps.</p></details>
<details><summary>Is Habitly free?</summary><p>Yes. You can track up to five habits for free, forever. Premium adds unlimited habits, charts, challenges and backup.</p></details>
<details><summary>Does it work on iPhone and Android?</summary><p>Yes. Habitly works on iPhone, iPad, Apple Watch, Android phones and Wear OS watches.</p></details>
<details><summary>Can I cancel Premium any time?</summary><p>Yes. Cancel in your App Store or Google Play settings. You keep Premium until the end of the period you paid for.</p></details>
</div>
</div>
</section>
<section class="dl" id="download" aria-labelledby="dl-title">
<div class="wrap"><div class="dl-box">
<div><h2 id="dl-title">Your first streak starts today.</h2><p>Free on iPhone and Android. Takes 60 seconds to set up.</p>
<div class="stores"><a href="#" class="store"><span><small>Download on the</small><b>App Store</b></span></a><a href="#" class="store"><span><small>Get it on</small><b>Google Play</b></span></a></div></div>
<div class="qr"><svg viewBox="0 0 21 21" aria-hidden="true" shape-rendering="crispEdges"><path fill="#1B1B3A" d="M0 0h7v7H0zM1 1v5h5V1zM2 2h3v3H2zM14 0h7v7h-7zM15 1v5h5V1zM16 2h3v3h-3zM0 14h7v7H0zM1 15v5h5v-5zM2 16h3v3H2zM8 0h2v2H8zM11 1h2v3h-2zM8 3h2v3H8zM9 8h3v2H9zM0 8h2v2H0zM3 9h3v2H3zM14 8h2v3h-2zM17 9h4v2h-4zM8 11h2v3H8zM11 12h3v2h-3zM15 12h2v2h-2zM18 13h3v2h-3zM8 15h2v2H8zM11 16h2v3h-2zM14 15h3v2h-3zM15 18h2v3h-2zM18 17h3v2h-3zM8 19h2v2H8zM19 20h2v1h-2z"/></svg>Scan to download</div>
</div></div>
</section>
</main>
<footer>
<div class="wrap foot">
<a href="#" class="logo"><i aria-hidden="true"></i>Habitly</a>
<ul><li><a href="#features">Features</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">FAQ</a></li><li><a href="#">Privacy</a></li><li><a href="#">Support</a></li></ul>
<span>© <span id="yr">2026</span> Habitly Labs | Photos: <a href="https://unsplash.com" rel="noopener">Unsplash</a> | Free template from <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">Free HTML Templates</a></span>
</div>
</footer>
<script>
(()=>{const b=document.querySelector('.burger'),m=document.getElementById('menu'),y=document.getElementById('yr');
if(b&&m){b.addEventListener('click',()=>{const o=m.classList.toggle('open');b.setAttribute('aria-expanded',o)});
m.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{m.classList.remove('open');b.setAttribute('aria-expanded',false)}))}
if(y)y.textContent=new Date().getFullYear()})();
</script>
</body>
</html>