Under Construction Template

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.

Usage

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!

Configuration

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.

Colors

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.

Fonts

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']
}

Image

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.

Contributing

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

hendrikdemir / under-construction-template Goto Github PK