Documentation

Signs - Coming Soon HTML Template

Thank you so much for purchasing our item from TemplateMonster.

Version: 2.0.0
Author: Mountain Theme

Created: 6 Feb, 2024
Update: 23 Dec, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Template Features

Introducing "Signs" - a mesmerizing HTML template that's poised to revolutionize your website's coming soon page. Designed with innovation and elegance in mind, Signs offers a seamless blend of functionality and aesthetic appeal, ensuring your online presence captivates visitors from the moment they land on your page.

Whether you're launching a new product, announcing an upcoming event, or simply building anticipation for your website's grand reveal, Signs provides the perfect platform to engage your audience and leave a lasting impression.

Unique 24 Variants Design Layouts
HTML5 & CSS3 Markup
Based on Bootstrap v5.0.2
Clean, Minimal, Modern & Creative Design
Fully Responsive Layout
Countdown Timer Display
Working Ajax Contact Form
Font Awesome
Bootstrap Icon
Auto copyright year update
Popup YT Video

No Console error
Newsletter Subscriptions Form
- MailChimp Newsletter Form
RTL Support
Google Fonts Outfit
Clean code
W3C Valid 100%
Easy to Customize
Detailed Well Documented (Online Documentation)
And much more…

Requirements

You will need the following software to customize this template.

Code Editing Software

Web Browser for testing

File Orginaze

When you purchase our Template from TemplateMonster, you need to download the Template files from your Template Monster account. Navigate to your downloads tab on Template Monster and find Template. Click the download button to see the two options.

All files and documentation (full zip folder). You will need to extract.

Color Schemes

You can change your Website's Color Scheme in an instant. We have build 10 Color css file for change template primary color.

androidGreen.css - Android Green Color
fluorescentRed.css - Fluorescent Red Color
green.css - Green Color
lavenderRose.css - Lavender Rose Color
mayaBlue.css - Maya Blue Color
orange.css - Orange Coor
softBlue.css - Soft Blue Color
steelPink.css - Steel Pink Color
sunflower.css - Sunflower Color
lightGray.css - Light Gray Color

Simply link color css file in the index.html file.

To change the primary color of the template, go to line 41 of the index.html file and then change the link to the css color file to change the color.

Customization

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the assets/css/custom.css File and link it in the Document <head> after the assets/css/style.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light">
    <title>Signs - Coming Soon HTML Template</title>
    <meta name="description" content="HTML Template for Coming Soon website">
    <meta name="author" content="mountainclimbersstar.com">

    <!-- Fav Icon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">

    <!-- Template Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Bootstrap RTL -->
    <!-- <link rel="stylesheet" href="assets/css/bootstrap.rtl.min.css"> -->
    <!-- Bootstrap Icon -->
    <link rel="stylesheet" href="assets/css/bootstrap-icons.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="assets/css/all.min.css">
    <!-- Signs Theme CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/custom.css">

    <!-- CSS Skin File -->
    <link id="color-switcher" rel="stylesheet" href="assets/css/skins/color-orange.css">
</head>

Logo Setting

The Logo Container can be found in the Header Container - <header>

Change the logo open the HTML file, and go to the <header> tag. Find out <a> tag and then change your logo.

<!-- Logo -->
<a class="logo" href="#" title="Signs">
    <img src="assets/images/logo/logo-dark.png" alt="Signs">
</a>
<!-- Logo End -->

Site Title

To change the title of the site, go to the 8 number line of the index.html file and then change the site title.

<title>Signs - Coming Soon HTML Template</title>

Changing Fonts

Signs template use fonts: Poppins from the Google Fonts Library. You can change the fonts from page head in HTML files (as following code). To change the web fonts of the site, go to the 15 number line of the index.html file and then change the web fonts.

<!-- Template Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">

Icons

Font Awesome and Bootstrap Icons icon sets are used in this Gstar template.

<<!-- Font Awesome -->
<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-solid fa-wand-magic-sparkles"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-solid fa-download"></i>

<<!-- Bootstrap Icons -->
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter-x"></i>
<i class="bi bi-google"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-threads"></i>
<i class="bi bi-house"></i>

Please go to their official documentation pages for a full list of icons: Font Awesome, Bootstrap Icons

Setting up RTL

We have included all the Tools to make your Website completely RTL ready. Simply follow the steps below:

Step 1

Add the dir="rtl" to the element at index.html file.

Add an appropriate lang attribute, like lang="ar", on the <html> element.

 <html dir="rtl" lang="ar">

Step 2

From index.html, you’ll need to apply an RTL version of Bootstrap CSS instead of default bootstrap css.

For that :

comment out <link rel="stylesheet" href="assets/css/bootstrap.min.css">

and uncomment <link rel="stylesheet" href="assets/css/bootstrap.rtl.min.css">

Contact

Contact Form

To receive mail from the contact form, the recipient's address must be changed. To change the recipient address go to the php folder from the assets folder then go to the mail.php file, find line number 23 change the webmail in double quotation, and give your cPanel webmail.

// FIXME: Update this to your desired email address.
$recipient = "example@domain.com";

Footer

You can change your copyright from footer.

<p class="text-sm copyright">Copyright © <span id="currentYear">2024</span> <a href="#">Signs</a>. All Rights Reserved.</p>

Light or Dark Theme

You can change the light or dark theme from the index.html file, by changing the class of the body tag, and meta tag content attribute .

Just go to the index.html file line number 37, where the body tag is started.

class="dark" will set dark theme and remove the class will set light theme.

Dark Theme

Light Theme

CountDown Setting

CountDown start - go to the index-countdown.html file and go to line number 105 and find the countdown class in a div tag. And change the data-countdown-end attribute value. The first is a date and the second is a time.

<div class="countdown" data-countdown-end="2025/01/01 12:00:00"></div>

Google Map Setting

Change Map - Go to the end of the index.html file and find out Contact Modal. Find the google-map class from the end of the contact model. And put the src of your location in the src of the iframe tag.

<div class="col-lg-6">
    <div class="google-map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d852.8602484725791!2d-118.24562448531157!3d34.0532706665362!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c64eb4a85897%3A0x47915d8de6525a42!2sLos%20Angeles%20Times%20Building!5e0!3m2!1sen!2sbd!4v1720370296947!5m2!1sen!2sbd"
        loading="lazy"></iframe>
    </div>
</div>

YT Video Background

Open the index-video-bg.html file, go to line 104, and update the videoURL with your YouTube video link.

YT Popup Video

Open index-6.html, go to line 206, and update the href attribute of the <a> tag with your YouTube video link.

Newsletter Form

To receive email from the Newsletter Subscriptions Form, the MailChimp API key and list ID must be changed. To change the MailChimp API key and list ID go to assets folder then php folder and then subscribe.php file, find line number 3 and 4. 3 number line is API key and 4 number line is list ID. And change the value in a single quote.

Source & Credits

Fonts:

Google Fonts - https://fonts.google.com/
Icons Font-face - https://fontawesome.com/
Icons Font-face - https://icons.getbootstrap.com/

Images:

Pexels - https://www.pexels.com/
Freepik - https://www.freepik.com/

Scripts

jQuery - https://jquery.com/
Bootstrap 5 - https://getbootstrap.com/
Owl Carousel - https://owlcarousel2.github.io/OwlCarousel2/
Ripples - https://github.com/sirxemic/jquery.ripples
CountDown - http://hilios.github.io/jQuery.countdown/
YTPlayer - https://github.com/pupunzi/jquery.mb.YTPlayer
Particles JS - https://vincentgarreau.com/particles.js/
Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +6 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.

More Templates

Checkout Our Below Premium Templates

HTML Templates :

AGKN - Personal Portfolio HTML Template

Smary - Personal Portfolio HTML Template

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0.0

Initial Release

Version 2.0.0

Improve design quality
Change file structure
Added YouTube video background
Added color schemes files
Added 19 more HTML page
Added MailChimp API key for Subscriptions Form
Update documentation

Mountain Theme