A simple, minimalistic & cross-device compatible landing page for when your website is under construction
This is a very simple landing page built with Tailwind that can be put on display when you're still working on your website. You can completely modify it to your liking and use it in whatever way you like. Contributions to further improve the design, performance and configurability are very welcome.
In order to deploy this simple page, you'll need to build it using Webpack, which will generate the dist
folder.
-
Use this repository as a template to create your own repository & clone it
git clone https://github.com/<yourusername>/<your-repository-name>
-
Run
npm run build
Webpack will now generate a dist
folder containing index.html
, main.js
and the construction image. Copy this to the root folder of your website, and you're done!
While making adjustments to the page, keep in mind that the dist
folder is only for output purposes. If you want to make adjustments to the page's content, such as text, you must do this in src/index.html
. Once you're done making adjustments, you'll need to run npm run build
to get an up-to-date dist
folder.
The colors used on the page can be modified in tailwind.config.js
.
colors: {
'primary': {
DEFAULT: '#f4a117',
'50': '#fffbeb',
'100': '#fef3c7',
'200': '#fce68b',
'300': '#fbd14e',
'400': '#fabd25',
'500': '#f4a117',
'600': '#d87607',
'700': '#b3520a',
'800': '#91400f',
'900': '#773510',
'950': '#451a03',
}
}
The value set for DEFAULT
will be used when you don't provide the color's shade, such as bg-primary
. More about this can be found at Tailwind's documentation.
The fonts are provided in src/style.css
and configured in tailwind.config.js
.
@import url('https://fonts.googleapis.com/...');
fontFamily: {
sans: ['Roboto', 'sans-serif'],
serif: ['Playfair Display', 'serif']
}
The construction site image is configured in src/index.js
.
import constructionImagePath from './construction.svg'
document.querySelector("img").src = constructionImagePath;
If you use a different image and adjust the path, Webpack should automatically pick this up and copy the image over to the dist
folder.
LinkedIn – @Hendrik Demir
Distributed under the MIT license. See LICENSE
for more information.
- Fork & clone the repository
git clone https://github.com/<yourusername>/<your-repository-name>
- Create your feature branch
git checkout -b feature/superlaser
- Commit your changes
git commit -am 'Added superlaser'
- Push to the branch
git push origin feature/superlaser
- Create a new Pull Request