├── .DS_Store ├── social-image.png ├── images ├── logo-1.png ├── logo-2.png ├── logo-3.png ├── favicon │ ├── favicon.png │ ├── apple-touch-icon.png │ ├── README.md │ └── icon.svg ├── placeholder-feature.png ├── placeholder-main-ui.png ├── placeholder-feature-4-3.png ├── placeholder-feature-16-9.png └── Logo-Template.svg ├── fonts ├── InterVariable.woff2 ├── InterVariable-Italic.woff2 └── JetBrainsMono-VariableFont_wght.ttf ├── .gitignore.txt ├── js ├── main.js └── pricing.js ├── LICENSE ├── css ├── tablet.css ├── pricing.css ├── mobile.css └── index.css ├── README.md ├── licenses.html ├── pricing.html └── index.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/.DS_Store -------------------------------------------------------------------------------- /social-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/social-image.png -------------------------------------------------------------------------------- /images/logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/logo-1.png -------------------------------------------------------------------------------- /images/logo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/logo-2.png -------------------------------------------------------------------------------- /images/logo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/logo-3.png -------------------------------------------------------------------------------- /fonts/InterVariable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/fonts/InterVariable.woff2 -------------------------------------------------------------------------------- /images/favicon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/favicon/favicon.png -------------------------------------------------------------------------------- /images/placeholder-feature.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/placeholder-feature.png -------------------------------------------------------------------------------- /images/placeholder-main-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/placeholder-main-ui.png -------------------------------------------------------------------------------- /fonts/InterVariable-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/fonts/InterVariable-Italic.woff2 -------------------------------------------------------------------------------- /images/placeholder-feature-4-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/placeholder-feature-4-3.png -------------------------------------------------------------------------------- /images/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /images/placeholder-feature-16-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/images/placeholder-feature-16-9.png -------------------------------------------------------------------------------- /fonts/JetBrainsMono-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ai/devtool-template/main/fonts/JetBrainsMono-VariableFont_wght.ttf -------------------------------------------------------------------------------- /images/favicon/README.md: -------------------------------------------------------------------------------- 1 | Read this article to prepare your own favicon: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs 2 | -------------------------------------------------------------------------------- /.gitignore.txt: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .idea 17 | .DS_Store 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | 24 | # Build cache manifests 25 | *.tsbuildinfo 26 | -------------------------------------------------------------------------------- /images/favicon/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | function handleMobileNav() { 2 | const mobileToggle = document.querySelector("[data-mobile-toggle]"); 3 | const navigation = document.querySelector("[ data-navigation]"); 4 | 5 | mobileToggle.addEventListener("click", () => { 6 | navigation.classList.toggle("open"); 7 | mobileToggle.classList.toggle("active"); 8 | }); 9 | 10 | document.documentElement.addEventListener("click", (event) => { 11 | if (!mobileToggle.contains(event.target) && !navigation.contains(event.target)) { 12 | navigation.classList.remove("open"); 13 | mobileToggle.classList.remove("active"); 14 | } 15 | }); 16 | } 17 | 18 | document.addEventListener("DOMContentLoaded", () => { 19 | handleMobileNav(); 20 | }); 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Evil Martians 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/tablet.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 1199px) { 2 | .image-wide { 3 | width: 100%; 4 | margin-left: 0; 5 | } 6 | } 7 | 8 | @media screen and (max-width: 1056px) { 9 | .page-container { 10 | max-width: 728px; 11 | padding: 0 24px; 12 | } 13 | 14 | .heading.hero { 15 | max-width: 100%; 16 | } 17 | 18 | .button-group { 19 | flex-shrink: 0; 20 | } 21 | 22 | .content { 23 | margin: 0 16px; 24 | } 25 | 26 | .nav-link { 27 | padding: 16px; 28 | display: inline-flex; 29 | } 30 | 31 | .nav-menu { 32 | position: absolute; 33 | top: calc(100% + 6px); 34 | text-align: center; 35 | left: 0; 36 | right: 0; 37 | background-color: var(--color-background); 38 | box-shadow: 0 0 0 1px var(--color-border-level-2); 39 | border-radius: var(--radius-l); 40 | margin-top: 4px; 41 | padding: 12px 24px; 42 | display: none; 43 | 44 | &.open { 45 | display: block; 46 | } 47 | } 48 | 49 | .grid { 50 | &.gap-l { 51 | gap: 16px; 52 | } 53 | 54 | &.gap-xl { 55 | gap: 24px; 56 | } 57 | } 58 | 59 | .nav-hamburger { 60 | display: flex; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /js/pricing.js: -------------------------------------------------------------------------------- 1 | function handlePricingToggle() { 2 | const toggles = document.querySelectorAll('[data-pricing-toggle]'); 3 | const toggleMarker = document.querySelector('[data-pricing-toggle-marker]'); 4 | 5 | toggles.forEach(toggle => { 6 | toggle.addEventListener('click', () => { 7 | const target = toggle.getAttribute('data-pricing-toggle'); 8 | 9 | // Animate the toggle marker 10 | if (toggleMarker.getAttribute('data-pricing-current') !== target) { 11 | const targetToggle = document.querySelector(`[data-pricing-toggle="${target}"]`); 12 | const targetToggleRect = targetToggle.getBoundingClientRect(); 13 | const markerRect = toggleMarker.getBoundingClientRect(); 14 | const translateX = targetToggleRect.left < markerRect.left ? targetToggleRect.left - markerRect.left : 0; 15 | 16 | toggleMarker.animate( 17 | [ 18 | { transform: `translateX(${translateX}px)` } 19 | ], 20 | { 21 | duration: 300, 22 | easing: 'ease-in-out', 23 | fill: 'forwards' 24 | } 25 | ); 26 | toggleMarker.setAttribute('data-pricing-current', target); 27 | } 28 | 29 | document.querySelectorAll(`[data-pricing-${target}]`).forEach(targetElement => { 30 | targetElement.innerHTML = targetElement.getAttribute(`data-pricing-${target}`); 31 | }) 32 | }); 33 | }); 34 | } 35 | 36 | document.addEventListener("DOMContentLoaded", () => { 37 | handlePricingToggle(); 38 | }); 39 | -------------------------------------------------------------------------------- /css/pricing.css: -------------------------------------------------------------------------------- 1 | .toggle-button-container { 2 | background-color: var(--color-surface); 3 | box-shadow: 0 0 0 4px var(--color-surface); 4 | border-radius: var(--radius-m); 5 | display: inline-block; 6 | position: relative; 7 | } 8 | 9 | .toggle-option-button { 10 | border: none; 11 | padding-top: var(--space-button-s-vertical); 12 | padding-bottom: var(--space-button-s-vertical); 13 | color: var(--color-text-primary); 14 | font-size: var(--font-size-m); 15 | line-height: var(--line-height-ui-m); 16 | text-align: center; 17 | background-color: #0000; 18 | border-radius: var(--radius-m); 19 | min-width: 120px; 20 | } 21 | 22 | .toggle-current-option-marker { 23 | z-index: -1; 24 | background-color: var(--color-background); 25 | box-shadow: 0 0 0 1px var(--color-border-level-2); 26 | border-radius: var(--radius-m); 27 | width: 50%; 28 | height: 100%; 29 | position: absolute; 30 | top: 0; 31 | right: 0; 32 | } 33 | 34 | .price-line { 35 | display: flex; 36 | gap: 2px; 37 | justify-content: flex-start; 38 | align-items: baseline; 39 | } 40 | 41 | .feature-list { 42 | display: flex; 43 | flex-direction: column; 44 | gap: 8px; 45 | border-top: 1px solid var(--color-border-level-3); 46 | margin-top: 24px; 47 | padding-top: 16px; 48 | } 49 | 50 | .feature-item { 51 | display: flex; 52 | align-items: flex-start; 53 | gap: 8px; 54 | } 55 | 56 | .justified-vertically { 57 | justify-content: space-between; 58 | align-items: stretch; 59 | height: 100%; 60 | } 61 | 62 | .pricing-table { 63 | width: 100%; 64 | } 65 | 66 | .pricing-table-row { 67 | display: grid; 68 | place-items: center start; 69 | grid-template-columns: 1fr 1fr 1fr 1fr; 70 | column-gap: 8px; 71 | padding: var(--space-button-m-vertical); 72 | padding-bottom: var(--space-button-m-vertical); 73 | border-bottom: 1px solid var(--color-border-level-2); 74 | } 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Github image 2 | 3 | LaunchKit is a free HTML landing page template specifically designed for developer tools and open source products. 4 | 5 | Read more about its features: https://launchkit.evilmartians.io 6 | 7 | ## Why use LaunchKit instead of crafting a landing page from scratch? 8 | 9 | 1. It’s a ready-to-deploy solution that lets you adjust the content for your product and launch it within a couple of hours. 10 | 2. Customization is as easy as tweaking CSS variables. 11 | 3. It includes all the essential elements to showcase your product. If something’s missing, just create an issue. 12 | 4. The template is mobile-friendly and uses a market-standard layout to ensure great usability. 13 | 14 | template-overview 15 | 16 | 17 | ## How to use it? 18 | 19 | Simply clone the repo to your account and edit it: 20 | - Decide which blocks in the template make sense for your landing page and remove the rest. 21 | - Replace all “Lorem ipsum” text with your own copy. 22 | - Upload your images. 23 | - Set up actions for the buttons and links. 24 | 25 | ## How do I adjust the color theme to match my brand identity? 26 | 27 | You can update the color theme in two ways: 28 | 29 | 1. Switch between light and dark modes. Add the `theme-dark` class to the `html` element of any page to enable the dark theme. If no class is set, the light theme is used by default. 30 | 2. Customize the color palette. Use this [tool](https://codepen.io/romanshamin/full/QwWgNLN) to tweak the overall color theme. Adjust the two sliders until both themes match your brand’s vibe. Then, copy the color codes from the tool and paste them into the corresponding `--colors` variables in `index.css`. 31 | 32 | # How do I publish my website? 33 | 34 | This template consists of static files (HTML, CSS, JS), so it’s ready to go. You can host it on any static hosting service — like Firebase, Netlify, Vercel, GitHub Pages, or your own server. Just upload the files and you’re live. 35 | -------------------------------------------------------------------------------- /css/mobile.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 767px) { 2 | body { 3 | /* Font sizes */ 4 | --font-size-l: 19.25px; 5 | --font-size-xl: 33px; 6 | --font-size-xxl: 44px; 7 | 8 | /* Font metrics */ 9 | --line-height-paragraph-l: 24px; 10 | --letter-spacing-paragraph-l: -0.2px; 11 | --line-height-paragraph-xl: 40px; 12 | --letter-spacing-paragraph-xl: -0.5px; 13 | 14 | /* Headers */ 15 | --line-height-h1: 48px; 16 | --letter-spacing-h1: -1.5px; 17 | --line-height-h2: 36px; 18 | --letter-spacing-h2: -1px; 19 | --line-height-h3: 22px; 20 | --letter-spacing-h3: -0.75px; 21 | 22 | /* Sizing */ 23 | --space-section: 24px; 24 | --space-button-m-vertical: 8px; 25 | --space-card-m: 12px; 26 | 27 | --radius-m: 8px; 28 | --radius-l: 12px; 29 | } 30 | 31 | .page-container { 32 | max-width: none; 33 | padding: 0 16px; 34 | } 35 | 36 | .navbar { 37 | margin-top: 12px; 38 | top: 12px; 39 | } 40 | 41 | .nav-container { 42 | padding: 8px 8px 8px 12px; 43 | top: 12px; 44 | margin-top: 12px; 45 | } 46 | 47 | .footer { 48 | margin: 24px 0; 49 | } 50 | 51 | .button-group { 52 | gap: 8px; 53 | } 54 | 55 | .columns-2, 56 | .columns-3, 57 | .columns-1\/2-1, 58 | .cards-with-icons-container { 59 | grid-template-columns: 1fr; 60 | } 61 | 62 | .card-with-icon { 63 | display: flex; 64 | flex-direction: row; 65 | align-items: flex-start; 66 | gap: 24px; 67 | 68 | & .icon { 69 | margin-top: 24px; 70 | } 71 | } 72 | } 73 | 74 | @media screen and (max-width: 479px) { 75 | .page-container { 76 | padding: 0 16px; 77 | } 78 | 79 | .hide-on-mobile { 80 | display: none; 81 | } 82 | 83 | .nav-link { 84 | display: flex; 85 | } 86 | 87 | .nav-menu { 88 | padding: 12px; 89 | } 90 | 91 | .clients-container { 92 | gap: 24px; 93 | padding: 12px 0; 94 | } 95 | 96 | .accordion-toggle { 97 | justify-content: flex-start; 98 | align-items: center; 99 | } 100 | 101 | .footer-menu { 102 | grid-template-columns: 2fr; 103 | } 104 | 105 | .mobile-only { 106 | display: flex; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /images/Logo-Template.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /licenses.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Licenses 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | Logo Template 27 | 37 |
38 | 39 |
40 |
42K
41 | 42 | Sign In 43 | Sign Up 44 | 47 |
48 |
49 |
50 |
51 |
52 |

Licenses

53 |

54 | All graphical assets in this template are licensed for personal and 55 | commercial use. If you’d like to use a specific asset, 56 | please check the license below. 57 |

58 |
59 |
60 |
61 |
62 |
63 |
64 |

Fonts

65 |

66 | The template uses two fonts: 67 | Inter, 68 | and 69 | JetBrains Mono, 70 | open-source fonts 71 | from Google Fonts. Use them according 72 | to corresponding license agreement. 73 |

74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |

Icons

83 |

84 | All icons are free set from 85 | Font Awesome.
Use them according to the 86 | Font 87 | Awesome's 88 | license agreement. 89 |

90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |

Images

99 |

100 | All visuals are original designs.
These images are 101 | free to use within this template under a CC0 (Public Domain 102 | Dedication) license, meaning you can use them without 103 | attribution. 104 |

105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | 153 |
154 | 155 | 156 | -------------------------------------------------------------------------------- /pricing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pricing 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |
26 | Logo Template 28 | 38 |
39 | 40 |
41 |
42K
42 | 43 | Sign In 44 | Sign Up 45 | 48 |
49 |
50 |
51 |
52 |
53 |

Pricing

54 |

Get 20% off with yearly

55 |
56 | 59 | 62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |

Starter

70 |

For individuals

71 |
72 |
Free
73 |
74 |
75 |
76 |
77 |
78 |
Lorem ipsum dolor sit amet
79 |
80 |
81 |
82 |
Consectetur adipiscing elit
83 |
84 |
85 |
86 |
87 | Lorem ipsum dolor sit amet, consectetur adipiscing elit 88 |
89 |
90 |
91 |
92 |
Ipsum dolor sit amet
93 |
94 |
95 |
96 |
Dolor sit amet, consectetur adipiscing
97 |
98 |
99 |
100 | Choose Tier 101 |
102 |
103 |
104 |
105 |

Startup

106 |

For small teams

107 |
108 |
109 | $48 110 |
111 |
113 | /month, billed annually 114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | Consectetur adipiscing elit. Suspendisse varius enim in eros 122 | elementum tristique 123 |
124 |
125 |
126 |
127 |
Consectetur adipiscing elit
128 |
129 |
130 |
131 |
132 | Lorem ipsum dolor sit amet, consectetur adipiscing elit 133 |
134 |
135 |
136 |
137 |
Ipsum dolor sit amet
138 |
139 |
140 |
141 |
Dolor sit amet, consectetur adipiscing
142 |
143 |
144 |
145 | Choose Tier 146 |
147 |
148 |
149 |
150 |

Business

151 |

For growing business

152 |
153 |
154 | $160 155 |
156 |
158 | /month, billed annually 159 |
160 |
161 |
162 |
163 |
164 |
165 |
Lorem ipsum dolor sit amet
166 |
167 |
168 |
169 |
Consectetur adipiscing elit
170 |
171 |
172 |
173 |
174 | Lorem ipsum dolor sit amet, consectetur adipiscing elit 175 |
176 |
177 |
178 |
179 |
Ipsum dolor sit amet
180 |
181 |
182 |
183 |
Dolor sit amet, consectetur adipiscing
184 |
185 |
186 |
187 | Choose Tier 188 |
189 |
190 |
191 |
192 |

Enterprise

193 |

194 | For organizations requiring the highest level of security and 195 | control 196 |

197 |
198 | Contact Us 199 |
200 |
201 |
202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 217 | 220 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 236 | 239 | 240 | 241 | 242 | 243 | 244 | 247 | 248 | 249 |
StarterStartupBusiness
Access on web 215 |
216 | 		218 |
219 | 		221 |
222 |
Chat responses3003000Unlimited
Chat history 234 |
235 | 		237 |
238 |
Custom domain 245 |
246 |
250 |
251 |
252 | 293 |
294 | 295 | 296 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Inter Variable; 3 | src: url("../fonts/InterVariable.woff2") format("woff2"); 4 | font-weight: 100 900; 5 | font-style: normal; 6 | font-display: swap; 7 | } 8 | 9 | @font-face { 10 | font-family: Inter Variable; 11 | src: url("../fonts/InterVariable-Italic.woff2") format("woff2"); 12 | font-weight: 100 900; 13 | font-style: italic; 14 | font-display: swap; 15 | } 16 | 17 | @font-face { 18 | font-family: JetBrains Mono; 19 | src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format("woff2"); 20 | font-weight: 100 900; 21 | font-style: normal; 22 | font-display: swap; 23 | } 24 | 25 | :root { 26 | /* Fonts */ 27 | --font-text: "Inter Variable", Arial, sans-serif; 28 | --font-mono: "JetBrains Mono", "Courier New", Courier, monospace; 29 | 30 | /* Font sizes */ 31 | --font-size-s: 13.75px; 32 | --font-size-m: 16.5px; 33 | --font-size-l: 22px; 34 | --font-size-xl: 44px; 35 | --font-size-xxl: 66px; 36 | 37 | /* Paragraph */ 38 | --line-height-paragraph-s: 20px; 39 | --line-height-paragraph-m: 24px; 40 | --line-height-paragraph-l: 28px; 41 | --letter-spacing-paragraph-l: -0.4px; 42 | --line-height-paragraph-xl: 52px; 43 | --letter-spacing-paragraph-xl: -1px; 44 | --line-height-ui-s: 16px; 45 | --line-height-ui-m: 22px; 46 | 47 | /* Headers */ 48 | --line-height-h1: 70px; 49 | --letter-spacing-h1: -2px; 50 | --line-height-h2: 48px; 51 | --letter-spacing-h2: -1.5px; 52 | --line-height-h3: 24px; 53 | --letter-spacing-h3: -0.75px; 54 | --line-height-h4: 18px; 55 | 56 | /* Spacing */ 57 | --space-default: 12px; 58 | --space-button-s-vertical: 8px; 59 | --space-button-s-horizontal: 16px; 60 | --space-button-m-vertical: 12px; 61 | --space-button-m-horizontal: 24px; 62 | --space-section: 60px; 63 | --space-card-m: 24px; 64 | 65 | --header-font-weight: 600; 66 | --ui-button-font-weight: 500; 67 | 68 | /* Border radii */ 69 | --radius-xs: 4px; 70 | --radius-s: 8px; 71 | --radius-m: 12px; 72 | --radius-l: 16px; 73 | 74 | /* Colors */ 75 | --color-background: white; 76 | --color-surface: #99a3ae14; 77 | --color-text-primary: #363e48; 78 | --color-text-secondary: #757a7f; 79 | --color-text-tertiary: #a7acb2; 80 | --color-accent: #0081ff; 81 | --color-accent-b: #0081ff29; 82 | --color-on-accent: white; 83 | --color-button-primary-bg-hover: #0088f0d9; 84 | --color-button-secondary-bg-hover: #0088f033; 85 | --color-border-level-2: #99a3ae29; 86 | --color-border-level-3: #99a3ae52; 87 | --color-background-blur: #ffffffe6; 88 | --color-gradient-bg-start: #0081ff14; 89 | --color-gradient-bg-end: #0081ff00; 90 | --color-gradient-promo-start: #800069; 91 | --color-gradient-promo-end: #005196; 92 | } 93 | 94 | .theme-light { 95 | --color-background: white; 96 | --color-surface: #99a3ae14; 97 | --color-text-primary: #363e48; 98 | --color-text-secondary: #757a7f; 99 | --color-text-tertiary: #a7acb2; 100 | --color-accent: #0081ff; 101 | --color-accent-b: #0081ff29; 102 | --color-on-accent: white; 103 | --color-button-primary-bg-hover: #0088f0d9; 104 | --color-button-secondary-bg-hover: #0088f033; 105 | --color-border-level-2: #99a3ae29; 106 | --color-border-level-3: #99a3ae52; 107 | --color-background-blur: #ffffffe6; 108 | --color-gradient-bg-start: #0081ff14; 109 | --color-gradient-bg-end: #0081ff00; 110 | --color-gradient-promo-start: #ffd2f7; 111 | --color-gradient-promo-end: #b9dfff; 112 | } 113 | 114 | .theme-dark { 115 | color-scheme: dark; 116 | 117 | --color-background: #1f1f20; 118 | --color-surface: #9aa3af14; 119 | --color-text-primary: #e5f0fc; 120 | --color-text-secondary: #c2c7cd; 121 | --color-text-tertiary: #94999f; 122 | --color-accent: #0081ff; 123 | --color-accent-b: #0081ff29; 124 | --color-on-accent: white; 125 | --color-button-primary-bg-hover: #0088f0d9; 126 | --color-button-secondary-bg-hover: #0088f04d; 127 | --color-border-level-2: #9aa3af29; 128 | --color-border-level-3: #9aa3af52; 129 | --color-background-blur: #1f1f20e6; 130 | --color-gradient-bg-start: #0081ff1f; 131 | --color-gradient-bg-end: #0081ff00; 132 | --color-gradient-promo-start: #800069; 133 | --color-gradient-promo-end: #005196; 134 | } 135 | 136 | .page-container { 137 | max-width: 1008px; 138 | min-height: 100vh; 139 | margin: 0 auto; 140 | display: flex; 141 | flex-direction: column; 142 | } 143 | 144 | * { 145 | box-sizing: border-box; 146 | } 147 | 148 | html, 149 | body { 150 | margin: 0; 151 | } 152 | 153 | body { 154 | background-color: var(--color-background); 155 | font-family: var(--font-text); 156 | color: var(--color-text-primary); 157 | font-size: var(--font-size-m); 158 | line-height: var(--line-height-paragraph-m); 159 | } 160 | 161 | /* Headers */ 162 | 163 | h1, 164 | h2, 165 | h3, 166 | h4 { 167 | font-weight: var(--header-font-weight); 168 | margin: var(--space-default) 0; 169 | } 170 | 171 | h1 { 172 | font-size: var(--font-size-xxl); 173 | line-height: var(--line-height-h1); 174 | letter-spacing: var(--letter-spacing-h1); 175 | } 176 | 177 | h2 { 178 | font-size: var(--font-size-xl); 179 | line-height: var(--line-height-h2); 180 | letter-spacing: var(--letter-spacing-h2); 181 | } 182 | 183 | h3 { 184 | font-size: var(--font-size-l); 185 | line-height: var(--line-height-h3); 186 | letter-spacing: var(--letter-spacing-h3); 187 | } 188 | 189 | h4 { 190 | font-size: var(--font-size-m); 191 | line-height: var(--line-height-h4); 192 | letter-spacing: var(--letter-spacing-h4); 193 | } 194 | 195 | p { 196 | margin: var(--space-default) 0; 197 | } 198 | 199 | a { 200 | color: var(--color-accent); 201 | text-underline-offset: 0px; 202 | text-decoration: underline; 203 | text-decoration-color: var(--color-accent-b); 204 | text-decoration-skip-ink: none; 205 | text-underline-position: under; 206 | text-decoration-thickness: 2px; 207 | 208 | &.tertiary { 209 | color: var(--color-text-tertiary); 210 | text-decoration: none; 211 | 212 | &:hover { 213 | color: var(--color-text-secondary); 214 | } 215 | } 216 | } 217 | 218 | a:hover { 219 | color: var(--color-button-primary-bg-hover); 220 | } 221 | 222 | ul, 223 | ol { 224 | margin: 16px 0; 225 | padding-left: 40px; 226 | } 227 | 228 | li { 229 | margin: 8px 0; 230 | } 231 | 232 | img { 233 | vertical-align: middle; 234 | max-width: 100%; 235 | display: inline-block; 236 | } 237 | 238 | section { 239 | padding: var(--space-section) 0; 240 | } 241 | 242 | .eyebrow { 243 | display: inline-flex; 244 | margin-bottom: var(--space-default); 245 | border: 1px solid var(--color-border-level-3); 246 | border-radius: var(--radius-l); 247 | background-color: var(--color-surface); 248 | color: var(--color-text-secondary); 249 | font-size: var(--font-size-s); 250 | text-align: center; 251 | object-fit: fill; 252 | flex-flow: row; 253 | justify-content: center; 254 | align-items: center; 255 | margin-right: auto; 256 | margin-left: auto; 257 | padding: 2px 12px; 258 | text-decoration: none; 259 | 260 | &:hover { 261 | color: var(--color-text-primary); 262 | } 263 | } 264 | 265 | .heading { 266 | margin-bottom: var(--space-default); 267 | flex-direction: column; 268 | max-width: 672px; 269 | display: flex; 270 | 271 | &.hero { 272 | padding-bottom: 36px; 273 | } 274 | 275 | &.centered { 276 | text-align: center; 277 | margin-right: auto; 278 | margin-left: auto; 279 | } 280 | } 281 | 282 | .no-top-margin { 283 | margin-top: 0; 284 | } 285 | 286 | .balanced { 287 | text-wrap: balance; 288 | } 289 | 290 | .content { 291 | padding: var(--space-section) 0; 292 | max-width: 720px; 293 | } 294 | 295 | /* Text */ 296 | 297 | /* Style used for content */ 298 | 299 | .paragraph { 300 | &.s { 301 | font-size: var(--font-size-s); 302 | line-height: var(--line-height-paragraph-s); 303 | } 304 | 305 | &.m { 306 | font-size: var(--font-size-m); 307 | line-height: var(--line-height-paragraph-m); 308 | } 309 | 310 | &.l { 311 | font-size: var(--font-size-l); 312 | line-height: var(--line-height-paragraph-l); 313 | letter-spacing: var(--letter-spacing-paragraph-l); 314 | } 315 | 316 | &.xl { 317 | font-size: var(--font-size-xl); 318 | line-height: var(--line-height-paragraph-xl); 319 | letter-spacing: var(--letter-spacing-paragraph-xl); 320 | } 321 | 322 | &.bold { 323 | font-weight: 600; 324 | } 325 | } 326 | 327 | /* Styles for UI elements */ 328 | 329 | .ui { 330 | &.s { 331 | font-size: var(--font-size-s); 332 | line-height: var(--line-height-ui-s) !important; 333 | } 334 | 335 | &.m { 336 | font-size: var(--font-size-m); 337 | line-height: var(--line-height-ui-m) !important; 338 | } 339 | 340 | &.pseudo-link, 341 | .pseudo-link { 342 | text-decoration: underline; 343 | text-decoration-color: var(--color-accent-b); 344 | text-decoration-thickness: 2px; 345 | } 346 | } 347 | 348 | /* Buttons */ 349 | 350 | .button { 351 | display: flex; 352 | gap: 8px; 353 | cursor: pointer; 354 | border: none; 355 | text-decoration: none; 356 | background: transparent; 357 | padding: var(--space-button-m-vertical) var(--space-button-m-horizontal); 358 | font-size: var(--font-size-m); 359 | line-height: var(--line-height-ui-m); 360 | font-weight: var(--ui-button-font-weight); 361 | text-align: center; 362 | border-radius: var(--radius-m); 363 | justify-content: center; 364 | align-items: center; 365 | 366 | &.primary { 367 | background-color: var(--color-accent); 368 | color: var(--color-on-accent); 369 | 370 | &:hover { 371 | background-color: var(--color-button-primary-bg-hover); 372 | color: var(--color-on-accent); 373 | } 374 | } 375 | 376 | &.secondary { 377 | background-color: var(--color-accent-b); 378 | color: var(--color-accent); 379 | 380 | &:hover { 381 | background-color: var(--color-button-secondary-bg-hover); 382 | } 383 | } 384 | 385 | &.tertiary { 386 | box-shadow: inset 0 0 0 1px var(--color-border-level-3); 387 | color: var(--color-text-secondary); 388 | 389 | &:hover { 390 | background-color: var(--color-surface); 391 | color: var(--color-text-primary); 392 | } 393 | } 394 | 395 | &.ghost { 396 | background: transparent; 397 | padding: var(--space-button-m-vertical) var(--space-button-m-horizontal); 398 | color: var(--color-text-primary); 399 | 400 | &:hover { 401 | background-color: var(--color-border-level-2); 402 | color: var(--color-on-accent); 403 | } 404 | 405 | &.active { 406 | background-color: var(--color-border-level-3); 407 | } 408 | 409 | &.compact { 410 | padding: var(--space-button-s-vertical) 12px; 411 | } 412 | } 413 | 414 | &.compact { 415 | padding: var(--space-button-s-vertical) var(--space-button-s-horizontal); 416 | border-radius: var(--radius-s); 417 | } 418 | } 419 | 420 | /* Button groups */ 421 | 422 | .button-group { 423 | display: flex; 424 | gap: 12px; 425 | flex-wrap: wrap; 426 | align-items: center; 427 | 428 | &.margin-paragraph { 429 | margin: var(--space-default) 0; 430 | } 431 | 432 | &.centered { 433 | justify-content: center; 434 | align-items: center; 435 | } 436 | 437 | &.stacked { 438 | flex-direction: column; 439 | align-items: justify; 440 | 441 | & .button { 442 | width: 100%; 443 | } 444 | } 445 | } 446 | 447 | /* Links */ 448 | 449 | .icon-link { 450 | gap: 6px; 451 | color: var(--color-accent); 452 | align-items: center; 453 | text-decoration: none; 454 | display: flex; 455 | 456 | &:hover { 457 | color: var(--color-button-primary-bg-hover); 458 | } 459 | } 460 | 461 | .link-list { 462 | display: flex; 463 | flex-direction: column; 464 | align-items: flex-start; 465 | gap: 16px; 466 | padding-top: 12px; 467 | } 468 | 469 | .link-list-horizontal { 470 | display: flex; 471 | gap: var(--space-button-m-horizontal); 472 | } 473 | 474 | /* Icons */ 475 | 476 | .icon { 477 | display: flex !important; 478 | align-items: center; 479 | line-height: inherit !important; 480 | color: var(--color-text-tertiary); 481 | 482 | &.s { 483 | font-size: var(--font-size-s); 484 | } 485 | 486 | &.m { 487 | font-size: var(--font-size-m); 488 | } 489 | 490 | &.l { 491 | font-size: var(--font-size-l); 492 | } 493 | 494 | &.xl { 495 | font-size: var(--font-size-xl); 496 | line-height: var(--line-height-paragraph-xl) !important; 497 | } 498 | } 499 | 500 | /* Navigation */ 501 | 502 | .nav-container { 503 | position: sticky; 504 | margin-top: 24px; 505 | inset: 24px 0% auto; 506 | display: flex; 507 | justify-content: space-between; 508 | background-color: var(--color-background-blur); 509 | box-shadow: 0 0 0 1px var(--color-border-level-2); 510 | -webkit-backdrop-filter: blur(40px); 511 | backdrop-filter: blur(40px); 512 | border-radius: var(--radius-l); 513 | max-width: 1008px; 514 | padding: 12px 12px 12px 16px; 515 | z-index: 1000; 516 | } 517 | 518 | .nav-brand { 519 | display: flex; 520 | align-items: center; 521 | justify-content: center; 522 | } 523 | 524 | .nav-link { 525 | color: var(--color-text-secondary); 526 | font-size: var(--font-size-m); 527 | line-height: var(--line-height-ui-m); 528 | font-weight: var(--ui-button-font-weight); 529 | border-radius: var(--radius-s); 530 | padding: 8px 16px; 531 | display: inline-block; 532 | text-decoration: none; 533 | 534 | &:hover { 535 | color: var(--color-text-primary); 536 | } 537 | 538 | &:active { 539 | color: var(--color-text-tertiary); 540 | } 541 | } 542 | 543 | .background-gradient { 544 | position: absolute; 545 | background-image: linear-gradient( 546 | 180deg, 547 | var(--color-gradient-bg-start), 548 | var(--color-gradient-bg-end) 549 | ); 550 | width: 100%; 551 | height: 80vh; 552 | z-index: -10; 553 | } 554 | 555 | .promo-cta { 556 | background-image: linear-gradient( 557 | 135deg, 558 | var(--color-gradient-promo-start), 559 | var(--color-gradient-promo-end) 560 | ); 561 | border-radius: 16px; 562 | margin-bottom: var(--space-section); 563 | } 564 | 565 | .image-wide { 566 | margin: var(--space-default) 0; 567 | width: 116%; 568 | max-width: none; 569 | margin-left: -8%; 570 | } 571 | 572 | .mobile-only, 573 | .nav-hamburger { 574 | display: none; 575 | } 576 | 577 | .clients-container { 578 | display: flex; 579 | gap: 36px; 580 | flex-wrap: wrap; 581 | place-content: stretch center; 582 | align-items: center; 583 | padding: 24px 0; 584 | } 585 | 586 | .text-centered { 587 | text-align: center; 588 | } 589 | 590 | .feature-card { 591 | padding: var(--space-card-m); 592 | background-color: var(--color-surface); 593 | border-radius: var(--radius-l); 594 | display: flex; 595 | gap: 16px; 596 | flex-direction: column; 597 | align-items: flex-start; 598 | } 599 | 600 | .feature-heading { 601 | max-width: 672px; 602 | } 603 | 604 | /* Grid */ 605 | 606 | .grid { 607 | display: grid; 608 | margin: var(--space-default) 0; 609 | gap: 12px; 610 | grid-template-rows: auto; 611 | grid-auto-columns: 1fr; 612 | 613 | &.gap-l { 614 | gap: 24px; 615 | } 616 | 617 | &.gap-xl { 618 | gap: 60px; 619 | } 620 | } 621 | 622 | .columns-2 { 623 | grid-template-columns: repeat(2, minmax(0, 1fr)); 624 | } 625 | 626 | .columns-3 { 627 | grid-template-columns: repeat(3, minmax(0, 1fr)); 628 | } 629 | 630 | .columns-1\/2-1 { 631 | grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); 632 | } 633 | 634 | .card-with-icon { 635 | display: flex; 636 | flex-direction: column; 637 | align-items: flex-start; 638 | } 639 | 640 | .cards-with-icons-container { 641 | margin-top: var(--space-default) 0; 642 | gap: 36px; 643 | grid-template-rows: auto; 644 | grid-template-columns: 1fr 1fr 1fr; 645 | grid-auto-columns: 1fr; 646 | padding: 24px 0; 647 | display: grid; 648 | } 649 | 650 | .card-code-block { 651 | padding: var(--space-card-m); 652 | border: 1px solid var(--color-border-level-2); 653 | border-radius: var(--radius-l); 654 | overflow: auto; 655 | 656 | &.dark { 657 | background-color: #2b2b2b; 658 | } 659 | } 660 | 661 | /* Accordion */ 662 | 663 | .accordion-container { 664 | border-top: 1px solid var(--color-border-level-2); 665 | flex-flow: column; 666 | display: flex; 667 | } 668 | 669 | .accordion-item { 670 | border-bottom: 1px solid var(--color-border-level-2); 671 | width: 100%; 672 | overflow: hidden; 673 | } 674 | 675 | .accordion-toggle { 676 | padding: var(--space-card-m); 677 | align-items: center; 678 | display: flex; 679 | cursor: pointer; 680 | } 681 | 682 | .accordion-toggle:hover { 683 | color: var(--color-text-secondary); 684 | } 685 | 686 | .accordion-chevron { 687 | margin-left: auto; 688 | color: var(--color-text-tertiary); 689 | } 690 | 691 | [open] .accordion-chevron { 692 | transform: rotate(180deg); 693 | } 694 | 695 | .accordion-content { 696 | padding-right: 48px; 697 | padding-bottom: var(--space-button-m-vertical); 698 | padding-left: var(--space-card-m); 699 | background-color: #0000; 700 | display: block; 701 | } 702 | 703 | /* Footer */ 704 | 705 | .footer { 706 | border-top: 1px solid var(--color-border-level-2); 707 | margin-top: auto; 708 | padding-top: 60px; 709 | padding-bottom: 24px; 710 | } 711 | 712 | .footer-menu { 713 | gap: 16px; 714 | grid-template-rows: auto; 715 | grid-template-columns: 2fr 1fr 1fr; 716 | grid-auto-columns: 1fr; 717 | margin-bottom: 24px; 718 | display: grid; 719 | } 720 | 721 | .full-width { 722 | width: 100%; 723 | } 724 | 725 | .margin-top-l { 726 | margin-top: 24px; 727 | } 728 | 729 | .margin-top-xl { 730 | margin-top: 48px; 731 | } 732 | 733 | .secondary { 734 | color: var(--color-text-secondary); 735 | } 736 | 737 | .tertiary { 738 | color: var(--color-text-tertiary); 739 | } 740 | 741 | .color-accent { 742 | color: var(--color-accent); 743 | } 744 | 745 | .inline-code { 746 | font-family: var(--font-mono); 747 | font-size: var(--font-size-s); 748 | line-height: inherit; 749 | background-color: var(--color-surface); 750 | padding: 2px 4px; 751 | border-radius: var(--radius-xs); 752 | color: var(--color-text-secondary); 753 | } 754 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LaunchKit — the first free template for dev tools 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 | Logo Template 46 | 56 |
57 | 58 |
59 |
42K
60 | 61 | Sign In 62 | Sign Up 63 | 66 |
67 |
68 |
69 |
70 |
71 | Version 2.0 released! 72 |

73 | The first free template for dev tools 74 |

75 |

76 | Use this template to launch your next developer tool or open 77 | source project. 78 |

79 |
80 | Sign Up 81 | Request a Demo 82 |
83 |
84 |
85 | Main screenshot of the product 86 |
87 |
88 |
89 |

90 | Trusted by fast-growing companies worldwide 91 |

92 |
93 | Logo of a client 2Logo of a client 1Logo of a client 3Logo of a client 1Logo of a client 2Logo of a client 3Logo of a client 1Logo of a client 2 101 |
102 |
103 |
104 |
105 |

Feature showcase blocks

106 |

107 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 108 | Suspendisse varius enim in eros elementum tristique. Duis cursus, 109 | mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam 110 | libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum 111 | lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 112 |

113 |
114 |
115 |
116 |
117 |

118 | Feature 1 119 |

120 |

121 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 122 | Suspendisse varius enim in eros elementum tristique. Duis 123 | cursus, mi quis viverra ornare, eros dolor interdum nulla, ut 124 | commodo diam libero vitae erat. Aenean faucibus nibh et justo 125 | cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus 126 | tristique posuere. 127 |

128 |
129 | Screenshot of a feature 16 by 9 131 |
132 |
133 |
134 |
135 |
136 |

137 | Feature 2 138 |

139 |

140 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 141 | Suspendisse varius enim in eros elementum tristique. Duis 142 | cursus, mi quis viverra ornare, eros dolor interdum nulla, ut 143 | commodo diam libero vitae erat. Aenean faucibus nibh et justo 144 | cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus 145 | tristique posuere. 146 |

147 |
148 | Screenshot of a feature 16 by 9 150 |
151 |
152 |
153 |

154 | Feature 3 155 |

156 |

157 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 158 | Suspendisse varius enim in eros elementum tristique. 159 |

160 |
161 | Screenshot of a feature 4 by 3 163 |
164 |
165 |
166 |
167 |
168 |

169 | Feature 4 170 |

171 |

172 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 173 | Suspendisse varius enim in eros elementum tristique 174 |

175 |
176 | Screenshot of a feature 177 |
178 |
179 |
180 |

181 | Feature 5 182 |

183 |

184 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 185 | Suspendisse varius enim in eros elementum tristique. Duis 186 | cursus, mi quis viverra ornare, eros dolor interdum nulla, ut 187 | commodo diam libero vitae erat. Aenean faucibus nibh et justo 188 | cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus 189 | tristique posuere. 190 |

191 |
192 | Screenshot of a feature 16 by 9 194 |
195 |
196 |
197 |

198 | Feature 6 199 |

200 |

201 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 202 | Suspendisse varius enim in eros elementum tristique 203 |

204 |
205 | Screenshot of a feature 4 by 3 207 |
208 |
209 |
210 |
211 |
212 |

Cards with icons

213 |

214 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 215 | Suspendisse varius enim in eros elementum tristique. Duis cursus, 216 | mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam 217 | libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum 218 | lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 219 |

220 |
221 |
222 |
223 |
224 |
225 |

Lorem ipsum dolor sit amet

226 |

227 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 228 | Suspendisse varius enim in eros elementum tristique 229 |

230 |
231 |
232 |
233 |
234 |
235 |

Suspendisse varius enim in eros

236 |

237 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 238 | Suspendisse varius enim in eros elementum tristique 239 |

240 |
241 |
242 |
243 |
244 |
245 |

246 | Duis cursus, mi quis viverra ornare 247 |

248 |

249 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 250 | Suspendisse varius enim in eros elementum tristique 251 |

252 |
253 |
254 |
255 |
256 |
257 |
258 |

Block with one big image and CTA

259 |

260 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 261 | Suspendisse varius enim in eros elementum tristique. Duis cursus, 262 | mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam 263 | libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum 264 | lorem imperdiet. Nunc ut sem vitae risus tristique posuere. 265 |

266 |
267 | Request a Demo 268 |
269 |
270 |
271 | Main screenshot of the product 272 |
273 |
274 |
275 |
276 |
277 |

Description and a code block

278 |

279 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 280 | Suspendisse varius enim in eros elementum tristique. Duis 281 | cursus, mi quis viverra ornare, eros dolor interdum nulla, ut 282 | commodo diam libero vitae erat. Aenean faucibus nibh et justo 283 | cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus 284 | tristique posuere. 285 |

286 |
287 |
288 | 289 | 
# lefthook.yml 
291 | # See the FAQ for instructions
292 | # on how to update this block.
293 | 
294 | # Build commit messages
295 | prepare-commit-msg:
296 |   commands:
297 |     commitzen:
298 |       interactive: true
299 |       run: yarn run cz --hook
300 |       env:
301 |         LEFTHOOK: 0
302 | 
303 | # Validate commit messages
304 | commit-msg:
305 |   commands:
306 |     "lint commit message":
307 |       run: yarn run commitlint --edit {1}
308 |
309 |
310 |
311 |
312 |
313 |

FAQ

314 |

315 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 316 | Suspendisse varius enim in eros elementum tristique 317 |

318 |
319 |
320 |
321 | 322 |

How do I use this template?

323 | 324 | 325 |
326 |

327 | First, clone the template to your account. Then, decide which 328 | blocks make sense for your landing and delete the rest. Replace 329 | all “Lorem ipsum” text with your copy, upload your images, and 330 | set up actions for the buttons and links. 331 |

332 |
333 |
334 | 335 |
336 | 337 |

338 | How do I adjust the color theme to match my brand identity? 339 |

340 | 341 | 342 |
343 |

You can update the color theme in two ways:

344 |
    345 |
  1. 346 | Switching between light and dark modes.
    Apply the 347 | theme-dark class to the 348 | html element of any page to 349 | enable the dark theme. 350 | This will apply the theme across the entire page. If no class 351 | is set, the light theme is used by default. 352 |
    2. 353 |
  2. 354 | Customize the color palette.
    Use 355 | this tool 356 | to tweak the overall color theme. Adjust the two sliders until 357 | both themes match your brand’s vibe. Then, go to 358 | index.css and copy-paste the 359 | color codes from the tool into the corresponding 360 | --colors variable. 361 |
    3. 362 |
363 |
364 |
365 | 366 |
367 | 368 |

How can I update the code block?

369 | 370 | 371 |
372 |

373 | The code block uses inline token styles and raw HTML which 374 | reduces the bundle size. To update the code: 375 |

376 |
    377 |
  1. 378 | Use 379 | this tool 380 |
    2. 381 |
  2. Paste your code into the Input code field
    3. 382 |
  3. 383 | Choose Highlighter and Theme you prefer (the 384 | demo on the right uses GitHub dark default from Shiki), as 385 | well as the 386 | Language 387 |
    4. 388 |
  4. Follow the instructions in How to use the generated HTML section
    5. 389 |
  5. 390 | Press Copy HTML and paste the copied HTML into the 391 | <div class="card-code-block 392 | dark">…</div> 393 | block 394 |
    6. 395 |
396 |
397 |
398 | 399 |
400 | 401 |

How can I use a different icon?

402 | 403 | 404 |
405 |

406 | This template uses Font Awesome icons as classes, which makes 407 | it easy to add them to buttons and links. 408 |

409 |

To add a new icon:

410 |
    411 |
  1. 412 | Go to 413 | fontawesome.com/icons 414 |
    2. 415 |
  2. Search for an icon in the free set
    3. 416 |
  3. Copy the HTML code
    4. 417 |
  4. 418 | Paste it into a place where you want the icon to appear 419 |
    5. 420 |
421 |
422 |
423 | 424 |
425 | 426 |

How do I add a new page?

427 | 428 | 429 |
430 |

431 | Simply copy index.html, 432 | rename it, and edit it to your liking. 433 |

434 |
435 |
436 | 437 |
438 | 439 |

How do I add update the favicon?

440 | 441 | 442 |
443 |

444 | Read 445 | this article 447 | to prepare your own favicon, or use free online tools like 448 | this one. 449 |

450 |
451 |
452 | 453 |
454 | 455 |

How do I add update the OG image?

456 | 457 | 458 |
459 |

460 | Open Graph (OG) image, or social image, increases the 461 | click-through rate of your links on social media. Follow these 462 | steps to update it: 463 |

464 |
    465 |
  1. 466 | Design your own OG image, or use free online tools like 467 | this one. 468 |
    2. 469 |
  2. 470 | Replace social-image.png 471 |
    3. 472 |
  3. 473 | If you don’t need OG image, remove all 474 | meta tags below 475 | Open Graph comment 476 |
    4. 477 |
478 |
479 |
480 | 481 |
482 | 483 |

How do I publish my website?

484 | 485 | 486 |
487 |

488 | This template consists of static files (HTML, CSS, JS), so it’s ready to go. You can host it on any 489 | static hosting service — like Firebase, Netlify, Vercel, GitHub Pages, or your own server. Just upload 490 | the files and you’re live. 491 |

492 |
493 |
494 |
495 |
496 |
497 |
498 |

Start using our product today

499 |
500 | Sign Up 501 | Request a Demo 502 |
503 |
504 |
505 |
506 | 547 |
548 | 549 | 550 | --------------------------------------------------------------------------------