Bientot - Coming soon template
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
“Bientot - Coming Soon template” documentation.
HTML Structure - top
Here is the general structure of the HTML page :
- The header (at top) of a page is nested within a tag with a class "header-top".
- The navigation menu (at left) of a page is nested within a tag with a class "quick-link".
- The cover of a page is nested within a tag with a class "page-cover".
- The main content of the page is nested within a tag with a class "page-main". Each section (slide) are within a tag with a class "section"
- And the footer of the page containing the "Find us on" social network links, is located within a tag with a class "page-footer".
<!-- BEGIN OF site header Menu -->
<header class="header-top">
...
</header>
<!-- END OF site header Menu-->
<!-- BEGIN OF Quick nav icons at left -->
<nav class="quick-link count-5">
...
</nav>
<!-- END OF Quick nav icons at left -->
<!-- BEGIN OF site cover -->
<div class="page-cover" id="home">
...
</div>
<!-- END OF site Cover -->
<!-- BEGIN OF site main content content here -->
<main class="page-main ..." id="mainpage">
<div class="section page page-home page-cent" id="s-home">
... A section
</div>
... Another section
</main>
<!-- END OF site main content content here -->
<!-- Begin of site footer -->
<footer class="page-footer">
...
</footer>
<!-- End of site footer -->Title and description for SEO
Change the title and the description of your page by editing the following code of the <head> tag :
<!-- Page Title Here -->
<title>Bientot - Landing page Coming Soon responsive template</title>
<!-- Page Description Here -->
<meta name="description" content="A responsive coming soon template, un template HTML pour une page en cours de construction">Header - top
Header at top are located within the div with a "header-top" class.
<!-- Add material class for a material design style -->
<header class="header-top">
<div class="logo">
<a href="#home">
<img src="img/logo_large.png" alt="Logo Brand">
</a>
</div>
<div class="menu clearfix">
<a href="#about-us">about</a>
<!-- Add other menu similar to "about" here -->
<a href="#contact">contact</a>
</div>
</header>Change the logo image link in the code below by your own
<div class="logo">
<a href="#home">
<img src="img/logo_large.png" alt="Logo Brand">
</a>
</div>An alternative "material design" style can be applied to it. To do so, add the material class to header-top div :
<header class="header-top material">
...
</header>Result :
To add another menu similar to "About", add the following code within the div wiwth class menu (a link to the contact section for example) :
<div class="menu" data-menuanchor="about">
...
<a href="#contact">contact</a>
</div>Result :
Navigation at left - top
Navigation left code are located within the tag with a class quick-link
<!-- BEGIN OF Quick nav icons at left -->
<nav class="quick-link count-5">
...
</nav>
<!-- END OF Quick nav icons at left -->Class count-X adjusts the position of the menu according to the number X of icons within it.
Each icon button is represented by a li element with the following structure :
<li>
<a href="#about-us"><i class="icon ion ion-android-information"></i>
</a>
<span class="title">About Us</span>
</li>The tag <i class="icon ion ion-android-information"></i> represents the icon.
This template uses Ion Icons Webfont for all of its icons to be Responsive. Check out their Website for more information.
To change the text of the tooltip which appears when hovering an icon, edit the content of <span class="title">Your text</span>
Cover Page - top
Code of the cover page are located within the tag with a class page-cover
<!-- BEGIN OF site cover -->
<div class="page-cover" id="home">
...
</div>
<!-- END OF site Cover -->Static image background
Edit the data-image-src attribute of the cover-bg div to match to your background image url or source such as :
<!-- Cover Background -->
<div class="cover-bg pos-abs full-size bg-img" data-image-src="img/bg_forest.jpg"></div>Solid color as filter or background
To add a solid color layer as mask or background, add the following code within the page-cover div tag, and replace the data-bgcolor with a color value:
<div class="cover-bg pos-abs full-size bg-color" data-bgcolor="..."></div>Video as background
Add the following code within the previous page-cover div tag and edit the source url <source src="..." > to match to your video (relace the flower_loop.mp4 video under the vid folder by another one) :
<div id="container" class="video-container show-for-medium-up">
<video autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted"
width="640" height="360">
<source src="vid/flower_loop.mp4" type="video/mp4">
</video>
</divMain content of the Page - top
Main content of the page are located within the div with a class page-main
<!-- BEGIN OF site main content content here -->
<main class="page-main " id="mainpage">
<div class="section page page-home page-cent" id="s-home">
... A section
</div>
... Another section
</main>
<!-- END OF site main content content here -->By default, there are 5 ordered sections within it :
- Home page section
- Countdown section
- Registration form section
- About section
- And the Contact and Send message section
If you change their order, you have to edit the corresponding javascript line (main.js), anchors value of the folllowing code :
/* 3. Slide */
var isSlide = false;
/** Init fullpage.js */
$(document).ready(function() {
$('#mainpage').fullpage({
anchors: ['home', 'when', 'register', 'about-us', 'contact'],Home page section
The home page section is located within the div with classes section page-home
<!-- Begin of home page -->
<div class="section page-home page page-cent" id="s-home">
<!-- Content -->
<section class="content">
...
</section>
<!-- Scroll down button -->
<footer class="p-footer p-scrolldown">
<a href="#when">
<div class="arrow-d">
<span class="before">...</span>
<span class="after">...</span>
<span class="circle"></span>
</div>
</a>
</footer>
</div>
<!-- End of home page -->Replace texts with yours.
You can also change the text of the scroll down indication (such as "Tell me when")
Countdown section
The countdown section is located within a tag with classes section page-when. It has the following structure :
<!-- Begin of timer page -->
<div class="section page-when page page-cent" id="s-when">
<section class="content">
<div class="clock clock-countdown">
<div class="site-config"
data-date="10/31/2015 23:00:00"
data-date-timezone="+0"
></div>
<header class="header">
Coming <strong>soon</strong>
</header>
<div class="elem-left">
<div class="digit hours">00</div>
<div class="text">hrs</div>
</div>
<div class="elem-center">
<!-- Optional text at top or image logo -->
<!--<span class="text top">here in</span>-->
<!-- Optional logo at top -->
<span class="text top"><img class="img" alt="Logo" src="img/logo_large.png"></span>
<div class="digit days">000</div>
<div class="text">days</div>
</div>
<div class=" elem-right">
<div class="digit minutes">00</div>
<div class="text">min</div>
</div>
<!-- second knob here -->
...
</div>
</section>
<footer class="p-footer p-scrolldown">
...
</footer>
</div>
<!-- End of timer page -->You can replace the "Coming soon" text if you want, its located here :
<header class="header">
Coming <strong>soon</strong>
</header>Replace Logo source or url with yours or by an optional text in the following parts :
<div class="elem-center">
<!-- Optional text at top or image logo -->
<!--<span class="text top">here in</span>-->
<!-- Optional logo at top -->
<span class="text top"><img class="img" alt="Logo" src="img/logo_large.png"></span>
<div class="digit days">000</div>
<div class="text">days</div>
</div>To configure the timer, edit the tag with a site-config class, and change the attribute data-date by the limit date. You can adjust timezone with the data-date-timezone attribute :
<div class="site-config"
data-date="10/31/2015 23:00:00"
data-date-timezone="+0"
></div>Registration form section
The registration section are located within the div with classes section page-register with the following structure :
<!-- Begin of register page -->
<div class="section page-register page page-cent bg-color" data-bgcolor="rgba(95, 25, 208, 0.88)3" id="s-register">
<section class="content">
<header class="p-title">
<h3> Register <i class="ion ion-compose"></i></h3>
</header>
<div>
<form id="mail-subscription" class="form magic send_email_form" method="get" action="ajaxserver/serverfile.php">
...
</form>
</div>
</section>
<footer class="p-footer p-scrolldown">
<a href="#about-us">
<div class="arrow-d">
<span class="before">About</span>
<span class="after">Us</span>
<span class="circle"></span>
</div>
</a>
</footer>
</div>
<!-- End of register page -->Point the action of the form tag with class send_email_form to your desired server. Sample server files, which can act as server are provided under the ajaxserver folder. Go to Configure PHP ajax form for more details.
<form id="mail-subscription" class="form magic send_email_form" method="get" action="ajaxserver/serverfile.php">
<p class="invite center">Please, write your email below to stay in touch with us :</p>
<div class="fields clearfix">
<div class="input">
...
</div>
<p class="email-ok invisible"><strong>Thank you</strong> for your subscription. We will inform you.</p>
</form>Tag with class invite represents the default text which asks for a subscription. And tag with class email-ok will be the text which will be shown when the user registration is a success.
About Us section
"About us" section is located within a tag with classes section page-about
It has the following structure :
<div class="section page-about page page-cent" id="s-about-us">
<section class="content">
<header class="p-title">
<h3>About Us<i class="ion ion-android-information">
</i>
</h3>
<h2>we <span class="bold">make</span> only <span class="bold">beautiful</span> things</h2>
</header>
<article class="text">
<p>Lorem ipsum <strong>magicum </strong>dolor ...
</article>
</section>
<footer class="p-footer p-scrolldown">
<a href="#contact">
<div class="arrow-d">
<span class="circle"></span>
<span class="before">Contact</span>
<a href="#contact/message"><span class="after">Message</span></a>
</div>
</a>
</footer>
</div>Titles are located within the header tag, and content within the article tag.
Contact and Send message section
"Contact" section is located within a tag with classes section page-contact
It has two sub-section with class slide. The first, with a tag with an id information contains the contact information, email address, phone number, social links and address. The second, with a tag with an id message contain the message form, in which user can write and send message to a server.
It has the following structure :
<div class="section page-contact page page-cent ..." id="s-contact">
<!-- Begin of contact information -->
<div class="slide" id="information" data-anchor="information">
<section class="content">
...
</section>
</div>
<!-- end of contact information -->
<!-- begin of contact message -->
<div class="slide" id="message" data-anchor="message">
<section class="content">
...
</section>
</div>
<!-- End of contact message -->
</div>Contact information page
The contact page is within a div with a class slide and an id information
It has the following structure :
<div class="slide" id="information" data-anchor="information">
<section class="content">
<header class="p-title">
...
</header>
<!-- Begin Of Page SubSction -->
<div class="contact">
<div class="row">
<div class="medium-6 columns left">
<ul>
<li>
<h4>Email</h4>
<p><a href="mailto://contact@mail.com">contactemail@mail.com</a>
</p>
</li>
... another item
</ul>
</div>
<div class="medium-6 columns social-links right">
<ul>
<!-- legal notice -->
<li class="show-for-medium-up">
<h4>Website</h4>
<p><a href="http://...">www.example.com</a>
</p>
</li>
<li class="show-for-medium-up">
<h4>Find us on</h4>
<!-- Begin of Social links -->
<div class="socialnet">
<a href="#"><i class="ion ion-social-facebook"></i></a>
... another item
</div>
<!-- End of Social links -->
</li>
<li>
<p><img src="img/logo_large.png" alt="Logo" class="logo">
</p>
<p class="small">Bientot by <strong><a href="http://...">Brand</a></strong>. All right reserved 2015</p>
</li>
</ul>
</div>
</div>
</div>
<!-- End of page SubSection -->
</section>
</div>Replace defaults value by your information (email, address, ...
Social links icons use ionicons icons. They are presented by the <a href="..."><i class="ion ion-social-SOCIALNET"></i></a> line.SOCIALNET value can be "facebook", "twitter", ...
Duplicate this line and edit ion-social-SOCIALNET by a custom one (pinterest, tumblr, ...) if you add more than the defaults links in the template.
Send message page
Send message page are located within the div with a class slide and id message
It has the following structure :
<div class="slide" id="message" data-anchor="message">
<section class="content">
<header class="p-title">
...
</header>
<!-- Begin Of Page SubSction -->
<div class="page-block c-right v-zoomIn">
<div class="wrapper">
<div>
<form class="message form send_message_form" method="get" action="ajaxserver/serverfile.php">
<div class="fields clearfix">
<div class="input">
<label for="mes-name">Name </label>
...
</div>
<div class="fields clearfix">
<div class="input">
<label for="mes-email">Email </label>
...
</div>
<div class="fields clearfix no-border">
<label for="mes-text">Message </label>
...
<div>
<p class="message-ok invisible">Your message has been sent, thank you.</p>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End Of Page SubSction -->
</section>
</div>Change texts by your owns
Point the action of the form tag with class send_message_form to your desired server. Sample files, which can act as server are provided under the ajaxserver folder. Go to Configure PHP ajax form for more details.
<form class="message form send_message_form" method="get" action="ajaxserver/serverfile.php">
<div class="fields clearfix">
...
<div>
<p class="message-ok invisible">Your message has been sent, thank you.</p>
</div>
</div>
</form>Tag with class message-ok will be the text which will be shown when message was sent successfully.
Footer - top
Main page footer are located within a footer tag with a class page-footer
<footer class="page-footer">
<span>Find us on
<a href="http://www.facebook.com/..." target="_blank"><i class="ion icon ion-social-facebook"></i></a>
<a href="http://www.instagram.com/..." target="_blank"><i class="ion icon ion-social-instagram"></i></a>
<a href="http://twitter.com/..." target="_blank"><i class="ion icon ion-social-twitter"></i></a>
</span>
</footer>Social links icons use ionicons icons. They are presented by the <a href="..."><i class="ion ion-social-SOCIALNET"></i></a> line.SOCIALNET value can be "facebook", "twitter", ...
Duplicate this line and edit ion-social-SOCIALNET by a custom one (pinterest, tumblr, ...) if you add more than the defaults links in the template.
CSS files - top
CSS files add styles to an HTML page. This template use the following CSS files :
Editable CSS files :
The main CSS file main.css is located under the /cssfolder. It handles aesthetic aspects of this page. It was made to be easy to understand.
File main_responsive.css handles the responsiveness of the page.
style-XXXX.css are custom stylesheet which hook the main.css file for an easy customization it.
Vendor CSS files (modifications are not recommended) :
foundation.min.css file is the CSS grid used by this template. Read more
Other vendor specified CSS files (normailze, font stylesheets, fullPage) are also used.
Javascript files - top
Javascript makes this theme more dynamic and animated, even thought some animations use CSS3.
This theme imports these great vendor specific Javascript Plugin (Thanx to their authors) :
- jQuery : a Javascript library that greatly reduces the amount of code that you must write.
- jQuery FullPage Plugin : an awesome plugin to make page slider
- jQuery UI Plugin : required by FullPage plugin
- jQuery Down Count plugin : handle countdown clock
- okVideo plugin : for background video
- jQuery MaxImage plugin : to maximize background video
Also, based on these plugins, it uses the following javascripts main files :
- form_script.js : to handle Ajax Contact Form
- main.js : contains the general script of the theme (plugin initialization, smooth scroll, page loader)
Their are ready to use and i do not suggest to modify them but you can always tweak them.
PHP AJAX Email/Message Server - top
The AJAX Email/Message form is divided in two parts: the client side (handled by the browser) and the server side.
Client side
The HTML file and the JavaScript file form_script.js handle the client side.
The email registration part in the html file is within the form tag with a class send_email_form. Edit its action attribute to point to your ajax server (such as ajaxserver/serverfile.php).
<form id="mail-subscription" class="form magic send_email_form"
method="get"
action="ajaxserver/serverfile.php">
...You can change the text which appears when the email is sent by changing the p element with a class
email-ok within this form tag.
<p class='email-ok invisible'>...Thank you...</p>
And the contact form part in the html file is within the form tag with a class send_message_form. You can edit its action attribute to point to your ajax server (such as ajaxserver/serverfile.php).
<form class="message form send_message_form"
method="get"
action="ajaxserver/serverfile.php">
...You can change the text which appears when the message is sent by changing the <p> tag with a class
message-ok within this form tag.
<p class='message-ok invisible'>Your message ...</p>The JavaScript file "form_script.js" manages the sending of the data to the server and notify the user when it is done. There is no need to change its content.
Server side
You have to point you registration form and contact form in to an AJAX server as precised in the "Client side" section above.
The AJAX server used by this theme is PHP based. Three samples php-based AJAX server is provided under ajaxserver folder :
- serverfile.php : Writes emails and messages in files called "email.txt" and "message.txt" respectively. You do not need to edit this file.
- server.php : Sends email and messages to your desired email addresses. Edit this file and replace all the
$recipient = "your@email.com";by yours (there are two of it since message recipient and email subscription recipient could be different). You can also change the message content and subject by changing the$subjectand$email_contentvariable.
IMPORTANT : Most of Web Hosting provider allow you to use only your domain based email (such as contact@yourdomain.com) for this feature.
- servermailchimp.php : Uses mailchimp API to add user email to a mailchimp registration list.
IMPORTANT : You need a mailchimp API Key and a mailchimp List to make it working. To do so :
- First, create a Mailchimp account if you do not have one.
- Then create an API key here http://admin.mailchimp.com/account/api/
- Create also a Mailchimp mailing list here http://admin.mailchimp.com/lists/ , select the new list and click the "settings" menu - the Unique Id is at the bottom of that page.
-
Now, edit the "servermailchimp.php" file and change
$api = new MCAPI('YOUR_APIKEY_HERE')to match to your api key. Change also$list_id = "YOUR_LISTID_HERE"to your mailchimp list Unique Id. - Do not forget to change the action attribute of the email registration form within the HTML file to point to the mailchimp server :
<form ... action="/ajaxserver/servermailchimp.php"> ... </form>
These server handles messages and email subscription requests made by users.
Sources and Credits - top
I've used the following images, icons or other files as listed.
- Icons webfont by Ionicons
- Sample background pictures, available for free to use on unsplash.com
- JavaScripts and jQuery plugins
- Grey Flourish background loop HD video on Youtube for demo purpose
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Miradontsoa Andria. / MiVFX / HighHay Team