-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
233 lines (230 loc) · 19.7 KB
/
index.html
File metadata and controls
233 lines (230 loc) · 19.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
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Instyll - Supercharged markdown notes</title>
<link rel="canonical" href="https://instyll.dev/">
<meta property="og:url" content="https://instyll.dev/">
<meta name="description" content="Markdown notes made for efficiency. Local first, no accounts, and no vendor lock-in. ">
<meta name="twitter:title" content="Instyll - Supercharged markdown notes">
<meta name="twitter:card" content="summary">
<meta property="og:type" content="website">
<meta name="twitter:description" content="Markdown notes made for efficiency. Local first, no accounts, and no vendor lock-in. ">
<meta property="og:image" content="heroV2.png">
<meta name="twitter:image" content="heroV2.png">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Instyll - Supercharged markdown notes",
"url": "https://instyll.dev"
}
</script>
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/img/android-chrome-512x512.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter+Tight:400,500,600,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,500i,700&display=swap">
<link rel="stylesheet" href="assets/css/bs-theme-overrides.css">
<link rel="stylesheet" href="assets/css/Projects-Grid-images.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-shrink py-3 navbar-light" id="mainNav" style="background: rgba(255,255,255,0);backdrop-filter: blur(8px);">
<div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span style="font-family: Nunito, sans-serif;vertical-align: middle;line-height: 32px;"><img src="assets/img/logo.png" width="29" height="32" style="width: 32px;height: 32px;margin-right: 4px;vertical-align: bottom;">in<span style="font-weight: normal !important;">styll</span></span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"></li>
</ul><a class="btn btn-primary shadow" role="button" href="https://tally.so/r/w8L47k" style="border-radius: 8px;background: rgb(82,113,255);border-style: none;font-family: 'Inter Tight', sans-serif;" target="_blank">Get the beta</a>
</div>
</div>
</nav>
<header class="pt-5">
<div class="container pt-4 pt-xl-5" style="margin-top: 24px;">
<div class="row pt-5" style="font-family: 'Inter Tight', sans-serif;background: linear-gradient(#d8dfff 0%, rgb(235,238,255) 27%, rgb(245,247,255) 58%, #f7f8ff);border-radius: 24px;">
<div class="col-md-8 text-center text-md-start mx-auto">
<div class="text-center"><h1 class="display-4 mb-5" style="color: rgb(0,0,0); font-family: Inter Tight; font-weight: 500">Supercharged <br>markdown notes.</h1>
<p class="fs-5 text-muted mb-5" style="color: #666666 !important;">Instyll is the markdown note-taking app made for efficiency. <br><span style="color: rgb(102, 102, 102);">Local first, no accounts, and no vendor lock-in. </span></p>
<form class="d-flex justify-content-center flex-wrap" method="post" data-bs-theme="light">
<div class="shadow-lg mb-3"></div>
<div class="shadow-lg mb-3"><a class="btn btn-primary" role="button" href="https://tally.so/r/w8L47k" style="border-radius: 8px;background: rgb(82,113,255);border-style: none;" target="_blank">Get the beta</a></div>
</form>
</div>
</div>
<div class="col-12 col-lg-10 mx-auto">
<div class="text-center position-relative"><img class="img-fluid" src="assets/img/herowithtrafficlights.png" style="width: 820px;border-radius: 16px;/*border: 1px solid #e4e4e4;*/margin-top: 32px;margin-bottom: 64px;background-image: url("assets/img/herowithtrafficlights.png");background-position: center;background-size: cover;"></div>
</div>
</div>
</div>
</header>
<section></section>
<section></section>
<section>
<div class="container py-4 py-xl-5" style="text-align: center;margin-top: 64px;font-family: 'Inter Tight', sans-serif;"><h1 class="display-4 mb-5" style="color: rgb(0,0,0); font-weight: 500">Made for efficiency.</h1>
<div class="row gy-4 gy-md-0">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div><img class="rounded img-fluid fit-cover" style="/*min-height: 300px;*/width: 400px;border-radius: 16px !important;/*box-shadow: 0px 0px 20px 1px rgb(234,234,234);*/margin-bottom: 32px;" src="assets/img/codeimage.png" width="800"></div>
</div>
<div class="col my-auto" style="text-align: left;">
<div style="max-width: 450px;"></div><h3 class="pb-md-4" style="font-weight: 500;border-color: rgb(0,0,0); font-weight: 600">Sleek code blocks</h3>
<p class="text-muted py-4 py-md-0" style="/*text-align: left;*/color: #666666 !important;">Enjoy a versatile code editor directly within your markdown. <br>Copy and download code snippets directly from your notes.</p>
</div>
</div>
<div class="row gy-4 gy-md-0 flex-row-reverse">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div><img class="rounded img-fluid fit-cover" style="/*min-height: 300px;*/width: 400px;border-radius: 16px !important;/*box-shadow: 0px 0px 20px 1px rgb(234,234,234);*/margin-bottom: 32px;" src="assets/img/lateximage.png" width="800"></div>
</div>
<div class="col my-auto" style="text-align: right;">
<div style="max-width: 450px;"></div><h3 class="pb-md-4" style="border-color: rgb(0,0,0); font-weight: 600">LaTeX Autocomplete</h3>
<p class="text-muted py-4 py-md-0" style="/*text-align: left;*/color: #666666 !important;"><span style="color: rgb(102, 102, 102);">Write equations in your markdown notes </span><br><span style="color: rgb(102, 102, 102);">with a fast and robust LaTeX editor.</span></p>
</div>
</div>
<div class="row gy-4 gy-md-0">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div><img class="rounded img-fluid fit-cover" style="/*min-height: 300px;*/width: 400px;border-radius: 16px !important;/*box-shadow: 0px 0px 20px 1px rgb(234,234,234);*/margin-bottom: 32px;" src="assets/img/slashmenuimage.png" width="800"></div>
</div>
<div class="col my-auto" style="text-align: left;">
<div style="max-width: 450px;"></div><h3 class="pb-md-4" style="/*text-align: left;*/border-color: rgb(0,0,0);color: rgb(0,0,0); font-weight: 600">Fast formatting</h3>
<p class="text-muted py-4 py-md-0" style="/*text-align: left;*/border-color: rgba(18,22,67,0.75);color: #666666 !important;">Use markdown formatting instantly with <br>the slash menu available at your fingertips.</p>
</div>
</div>
</div>
<div class="container py-4 py-xl-5" style="text-align: center;margin-top: 48px;font-family: 'Inter Tight';"><h1 class="display-4 mb-5" style="color: rgb(0,0,0); font-weight: 500">Write at the speed of thought.</h1>
<div class="row gy-4 gy-md-0">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div><img class="rounded img-fluid fit-cover" style="/*min-height: 300px;*/width: 400px;border-radius: 16px !important;/*box-shadow: 0px 0px 20px 1px rgb(234,234,234);*/margin-bottom: 32px;" src="assets/img/zapimage.png" width="800"></div>
</div>
<div class="col my-auto" style="text-align: left;">
<div style="max-width: 450px;"></div><h3 class="pb-md-4" style="color: rgb(0,0,0); font-weight: 600">Zaps</h3>
<p class="text-muted py-4 py-md-0" style="/*text-align: left;*/color: #666666 !important;">Autocomplete that understands the way you write. <br>Define your own custom zaps or let Instyll AI suggest zaps. </p>
</div>
</div>
<div class="row gy-4 gy-md-0 flex-row-reverse">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div><img class="rounded img-fluid fit-cover" style="/*min-height: 300px;*/width: 400px;border-radius: 16px !important;/*box-shadow: 0px 0px 20px 1px rgb(234,234,234);*/margin-bottom: 32px;" src="assets/img/tableimage.png" width="800"></div>
</div>
<div class="col my-auto" style="text-align: right;">
<div style="max-width: 450px;"></div><h3 class="pb-md-4" style="color: rgb(0,0,0); font-weight: 600">Instant Tables</h3>
<p class="text-muted py-4 py-md-0" style="/*text-align: left;*/color: #666666 !important;">Simply input your table dimensions <br>and watch the magic happen.</p>
</div>
</div>
</div>
<div class="container py-4 py-xl-5" style="margin-top: 48px;text-align: center;font-family: 'Inter Tight';"><h1 class="display-4 mb-5" style="color: rgb(0,0,0); font-weight: 500">Effortless organisation.</h1>
<div class="row gy-4 gy-md-0">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div><img class="rounded img-fluid fit-cover" style="/*min-height: 300px;*/width: 400px;border-radius: 16px !important;/*box-shadow: 0px 0px 20px 1px rgb(234,234,234);*/margin-bottom: 32px;/*border: 1px solid white;*/" src="assets/img/topicimage.png" width="800"></div>
</div>
<div class="col my-auto" style="text-align: left;">
<div style="max-width: 450px;"></div><h3 class="pb-md-4" style="color: rgb(0,0,0); font-weight: 600">Topics</h3>
<p class="text-muted py-4 py-md-0" style="/*text-align: left;*/color: #666666 !important;">Select topics and assign them to notes. <br>Each note can contain infinite topics. </p>
</div>
</div>
</div>
<div class="container py-4 py-xl-5" style="color: rgb(0,0,0);font-family: 'Inter Tight', sans-serif;">
<div class="row mb-5">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<h1 style="font-size: 3.5rem;">Everything you need to work fast.</h1>
</div>
</div>
<div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-xl-3" style="border-color: var(--bs-dark-bg-subtle);">
<div class="col">
<div><img class="rounded img-fluid d-block w-100 fit-cover" style="height: 300px;background: rgba(167,167,167,0);border-radius: 24px !important;border: 1px solid var(--bs-secondary-bg);" src="assets/img/cmdk.png" width="468" height="200">
<div class="py-4">
<h4>Command Palette</h4>
<p style="color: #666666;">Bring up the command palette using the CMD + K shortcut to swiftly execute actions.</p>
</div>
</div>
</div>
<div class="col">
<div><img class="rounded img-fluid d-block w-100 fit-cover" style="height: 300px;border-radius: 24px !important;border: 1px solid var(--bs-light-border-subtle);" src="assets/img/wiki.png">
<div class="py-4">
<h4>Backlinks</h4>
<p style="color: #666666;">Effortlessly connect your ideas with backlinks. </p>
</div>
</div>
</div>
<div class="col">
<div><img class="rounded img-fluid d-block w-100 fit-cover" style="height: 300px;border-radius: 24px !important;border: 1px solid var(--bs-gray-200);" src="assets/img/thumb7.png">
<div class="py-4">
<h4>Split Screen</h4>
<p style="color: #666666;"><span style="color: rgba(18, 22, 67, 0.75);">Eliminate window switching by having your resources directly next to your notes. </span></p>
</div>
</div>
</div>
<div class="col">
<div><img class="rounded img-fluid d-block w-100 fit-cover" style="height: 300px;border-radius: 24px !important;border: 1px solid var(--bs-gray-100) ;" src="assets/img/rtl.png">
<div class="py-4">
<h4>Right to Left</h4>
<p style="color: #666666;">Write in right-to-left mode to accommodate languages like Hebrew and Farsi. </p>
</div>
</div>
</div>
<div class="col"><img class="rounded img-fluid d-block w-100 fit-cover" style="height: 300px;border-radius: 24px !important;border: 1px solid var(--bs-gray-100) ;" src="assets/img/daily2.png">
<div class="py-4">
<h4>Daily Notes</h4>
<p style="color: #666666;">Easily create a note for each day. </p>
</div>
</div>
<div class="col"><img class="rounded img-fluid d-block w-100 fit-cover" style="height: 300px;border-radius: 24px !important;border: 1px solid var(--bs-gray-100) ;" src="assets/img/mermaid.png">
<div class="py-4">
<h4>Mermaid Diagrams</h4>
<p style="color: #666666;">Visualize data inside your notes.</p>
</div>
</div>
</div>
</div>
<div class="container py-4 py-xl-5" style="text-align: center;/*margin-top: 48px;*/font-family: 'Inter Tight';">
<div class="col-md-8 text-center text-md-start mx-auto">
<div class="text-center" style="/*margin-top: 64px;*/"><h1 class="display-4 mb-5" style="color: rgb(0,0,0); font-weight: 500">Level up your markdown notes.</h1>
<form class="d-flex justify-content-center flex-wrap" method="post" data-bs-theme="light">
<div class="shadow-lg mb-3"></div>
<div class="shadow-lg mb-3"><a class="btn btn-primary" role="button" href="https://tally.so/r/w8L47k" style="border-radius: 8px;background: rgb(82,113,255);border-style: none;" target="_blank">Get the beta</a></div>
</form>
</div>
</div>
</div>
</section>
<footer style="font-family: 'Inter Tight';">
<div class="container py-4 py-lg-5" style="color: rgb(0,0,0);background: linear-gradient(#d8dfff 0%, rgb(235,238,255) 27%, rgb(245,247,255) 58%, #f7f8ff);border-radius: 24px;padding: 48px;margin-bottom: 24px;box-sizing: border-box;">
<div class="row row-cols-2 row-cols-md-4">
<div class="col-12 col-md-3 col-xxl-4">
<div class="fw-bold d-flex align-items-center mb-2"><span style="font-family: Nunito, sans-serif;vertical-align: text-bottom;line-height: 32px;font-size: 20px;"><img src="assets/img/logo.png" width="28" height="48" style="width: 32px;height: 32px;margin-right: 4px;vertical-align: bottom;">in<span style="font-weight: normal !important;">styll</span></span></div>
</div>
<div class="col-sm-4 col-md-3 col-xxl-4 text-lg-start d-flex flex-column">
<h3 class="fs-6 fw-bold">Community</h3>
<ul class="list-unstyled">
<li style="color: #666666 !important;"><a href="https://join.slack.com/t/instylllabs/shared_invite/zt-2i8iqtk4k-HaVthw92fhTdbW4UDHqh4Q" style="color: #666666 !important;">Slack</a></li>
<li style="color: #666666 !important;"></li>
</ul>
</div>
<div class="col-sm-4 col-md-3 col-xxl-4 text-lg-start d-flex flex-column" style="color: #666666 !important;">
<h3 class="fs-6 fw-bold" style="color: #000000;">Links</h3>
<ul class="list-unstyled" style="color: #666666 !important;">
<li style="color: #666666 !important;"><a href="https://twitter.com/instyll_labs" style="color: #666666 !important;">Twitter</a></li>
<li style="color: #666666 !important;"><a href="https://www.linkedin.com/company/instyll/?viewAsMember=true" style="color: #666666 !important;">LinkedIn</a></li>
<li style="color: #666666 !important;"><a href="https://www.instagram.com/instyll_labs/" style="color: #666666 !important;">Instagram</a></li>
</ul>
</div>
</div>
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0" style="color: #666666 !important;">Copyright © 2024 Instyll Labs</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"></li>
<li class="list-inline-item"><a href="https://twitter.com/instyll_labs"></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com/instyll_labs/"></a></li>
</ul>
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/startup-modern.js"></script>
</body>
</html>