Unstruction

An open-source web template built with Shoelace for setting up a simple and easy website under construction page.

Live Demo ◉

Features

• 😊 No installation or fancy setup; just add the website name and contact details!
• ⏱️ Displays a countdown timer until the website launch date!
• ⚡ Uses Shoelace, a powerful web component library!

Usage

The first step is to click the Use this template button above the file list to create a new repository.

Add website name and URL

Go to line 92 in index.html file and add website name:

<strong>Unstruction</strong>

Make sure to change the meta URL as well:

<meta property="og:url" content="https://digitalmalayalistudio.github.io/unstruction/">

Change image

Add an image with a minimum width of 350px to assets folder replacing preview.webp.

Add contact details

Add the necessary contact details, such as phone number and email, in lines 98–112.

<div slot="footer">
    <sl-button-group label="Alignment">
        <sl-button size="medium" circle href="tel:123456789">
            <sl-icon name="telephone" label="Phone"></sl-icon>
        </sl-button>
        <sl-button size="medium" circle href="mailto:[email protected]">
            <sl-icon name="envelope" label="Mail"></sl-icon>
        </sl-button>
        <sl-button size="medium" circle href="https://wa.me/91123456789">
            <sl-icon name="whatsapp" label="WhatsApp"></sl-icon>
        </sl-button>
        <sl-button size="medium" circle href="https://maps.google.com" target="_blank">
            <sl-icon name="geo-alt" label="Map"></sl-icon>
        </sl-button>
    </sl-button-group>
</div>

Add website launch date

You can change the date in line 126 of index.html. Make sure to use a ISO 8601 format or the format shown in the example:

const target = new Date('Jan 1, 3000, 00:00:00').getTime();