Contains free and open-sourced website templates, including but not limited to SaaS landing page, portfolio, Restaurant page and more. Useful, for freelancers, agencies, SaaS developers, and more.
Download from browsable page: https://awesome-landingpages.vercel.app/
New templates will be uploaded every month. Feel free to star this repository 🌟.
Have a generic template in mind?
- Create a new template issue, once your template request have enough thumbs up, we'll make one.
- If you are looking for a custom one, contact here
when you support my open-source, I get funds to keep writing more free and open-source projects.
- Font Tester extension.
- Hover preview VsCode extension
- Features of Landing page templates
- Whom is this suitable for?
- Why use website templates?
- Installation and setup
- Website Templates
- Credits
- Icons
If you need help with website typography, try Font Tester tool I created to help you with website fonts. It can help you preview and test 1000+ google fonts on any website :)
It can sometimes be hard to quickly modify templates created by someone else without visual cues, so to overcome this I have created a vscode plugin called Hover Preview.
Make sure to check that out.
- Responsive.
- Technical SEO optimized (uses correct tags, like h1, h2, section etc)
- Tailwind built in, for rapid development (uses
tw-prefix to separate tailwind classes) - Quick customization, change only texts.
- Frontend framework independent: Comes with basic html, css just enough for your perfect landing page, you are free to modify and use any frontend framework (React, Vue) if required.
- Developers who have tight deadlines.
- Freelancers looking to show a prototype or use a template to build faster.
- SaaS Developers who don't want to spend too much time focusing on landing page, but instead want to ship more.
- App developer who wants to have a web landing page. (helps with your SEO game)
- People who are learning HTML, css and JS.
- People looking for inspiration and ideas.
Honestly at the end of the day most client/customer don't care if you created your website from scratch or used a template, they just want their website running/ solve problem as quickly as possible.
Using website templates will save you hours of work, so you can start looking for clients or dedicate your time elsewhere.
Installation and set up is same for almost all the templates
You can use the browsable page to download a specific repo: https://awesome-landingpages.vercel.app/
To clone a specific repo read this Stackoverflow answer
Almost all the folder structure is similar to below shown
.
└── Landingpage/
├── assets/
├── css/
│ ├── index.css
│ ├── tailwind-build.css
│ └── tailwind.css
├── index.html
├── index.js
├── tailwind.config.js
└── readme.md
- If you are planning to modify tailwind you must have node installed.
Note
If you don't want devDependencies, Install dependencies from .package.json not package.json, as package.json contains additional dev dependencies to help with types
2.Add a file called tailwind.config.js (Note: every folder has this file, with theme)
module.exports = {
prefix: 'tw-',
important: false,
content: [
"./**/*.{html, jsx, js}",
],
theme: {
extend: {},
},
plugins: [],
}- Now add
postcss.config.js
module.exports = {
plugins: {
"postcss-import": {},
"postcss-simple-vars": {},
"postcss-nested": {}
},
}- You should also have a base tailwind file called
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components{
}Also refer the official tailwind documentation
Note
For django developers: If you are using Django + tailwind see how to set up in this article: Adding tailwind to django
- To run the tailwind use
npm run start:tailwind - To build the tailwind use
npm run build:tailwind
During development add the following to head tag
<link rel="stylesheet" href="tailwind-runtime.css"><!--replace with path to your tailwind runtime-->During production use
<link rel="stylesheet" href="tailwind-build.css"><!--replace with path to your tailwind build-->- You can start by changing the text.
- If you want to change the primary color, you can check the
tailwind.config.jsfile, it contains a primary color, changing that would affect the colors in the page. index.cssalso contains variables and colors for button, input, change that file for changing the button colors and more.
Here's the list of website templates
1. Simple Finance - [Live preview]
2. CelestialSaaS - [Live preview]
3. AI SaaS - [Live preview]
4. SaaSy Dark - [Live preview]
5. Pixa Ai - [Live preview]
-
AiSales - [
Live preview] -
Traveler - [
Live preview]
-
Bistro - [
Live preview] -
Nutrio - [
Live preview]
-
Law Fire - [
Live preview]
Elements in the templates are taken from free to use sources
Pexels.com - https://pexels.com Unsplash - https://unsplash.com Pixabay - https://pixabay.com
- Bootstrap icons
- Material icons by Google