A simple website template made using vanilla HTML, CSS and JS to help build product websites faster and more smoothly. This project was created to minimize the time needed to create a launch website for a new product as usually such websites have components which can be reused irrespective of the actual product.
To build your own website, simply follow the below steps-
- Fork this repository into your own GitHub account
- Look through the below readme sections to understand how the code is organized
- Customize the different components according to your needs, including the text, images and complete layouts
- You'll need to run a simple local server to develop locally. I find Python's http.server the most user-friendly
- Iterate, iterate, iterate
- Once you're happy with the design, deploy (for free) using Netlify
To keep this project fairly customizable and minimize the complexity associated with using it a Hugo-style organization is used. Basically, the single HTML page is broken up into partials. Each partial is associated with it's own HTML and CSS file. Thus, to customize the navbar (or header) you'll need to modify /partials/navbar.html and /static/css/navbar.css. The changes will automatically be reflected in your main page. Similarly, you can modify any of the components in the project.
Based on my experience building such websites, the product launch website template is broken up into the following components-
- Navbar
- Fullpage Hero Landing Page
- Sponsor Strip
- Selling point 1 (text left, image right)
- Selling point 2 (text right, image left)
- Selling point 3 (same as SP1, with dark colors)
- Pricing section
- Links sections
- Footer
All of the following can be seen below-
This project was developed out of my own need. I enjoy working on software product ideas but hate wasting time on the basic structure and layout of marketing websites. This project allows me to spend less time on the marketing website and focus instead on the actual product. If you have any feedback or would like to see any upgrades, get in touch with me through LinkedIn or Email
This is the first-generation template to help get people started. Over the next few weeks, I'll be working to improve the user experience associated with using this project. I hope to include a version for Gatsby and Hugo in the future. Additionally, I'll also be working on mobile optimizations, parameterization, advanced templating and other cool features.