HTML Files

The Coming Soon comes with 8 different templates, which are located in 8 folders (comeout_agency, comeout_business, comeout_fashion, comeout_food, comeout_personal, comeout_stars, comeout_video, comeout_video_particles) each one having a corresponding .html file.

CSS Files

There are one folders with CSS files and six CSS files.

JavaScript Files

There are fifteen JS files included with this template.

Images

The images/ folder contains all the images needed for the template to work properly.

Header

Contains logo, navigation menu and social icons.

Logo

There is little customization needed here. All you need to do is change images/logo.png. This will be discussed in the Customization chapter.

Navigation menu

This contains the links to the different areas of the page. It is generated automatically based on the existing sections so you don't need to modify anything. You can change only link text.

More on the customizing in the later chapter.

Social icons

More on the customizing in the later chapter.

Section Home

This contains text "We are launching", timer, and mail form. You can change text (line 124) and numeric timer (line 131).

More on the customizing in the later chapter.

<div class="headline square">
  <h1 class="wow fadeIn">
    WE ARE LAUNCHING IN
  </h1><!-- change text -->
</div><!-- end headline -->

<div id="countdown" class="clearfix wow fadeIn" data-time="2017/04/12 07:03:27"><!-- change data-time -->
</div><!-- end countdown -->

Section About

This contains small information about you and your advantages. You can change text about you (line 161) and description of your advantages and Icons (line 177)

More on the customizing in the later chapter.

<div class="col-md-3">
  <div class="headline wow fadeInLeft">
    <h1>About Us</h1>
  </div>
  <hr class="xs">
  <p class="subhead wow fadeInLeft wtt" data-wow-delay="0.2s">Lorem ipsum dolor ... </p><!-- change text -->
</div><!-- end col-md-3 -->

<div class="col-md-6 box_one">
  <img src="assets/images/cog.png" alt="">
    <h3>Lorem ipsum</h3><!-- change text -->
      <hr class="xs colorgreen">
    <p class="subhead fregular">Lorem ipsum dolor sit amet...</p><!-- change text -->
</div><!-- end col-md-6 -->

Section Portfolio

This contains of categories, images and small information. You can change text categories, image quantity and information small information.

More on the customizing in the later chapter.

The col-xx-xx classes

The template uses the Twitter Bootstrap framework, more specifically the 12 column grid. Now, when using the grid, you can have any combination of columns as long as the resulting number is 12. For example, the header is made up of two columns:

<div class="col-md-2 col-sm-2 col-xs-12">
	content
</div><!-- div with 2 smaller columns for large, medium, small screen and 12 smaller columns for extra small screen -->

<div class="col-md-10 col-sm-10 col-xs-0">
	content
</div><!-- div with 10 smaller columns for large, medium, small screen and 0 smaller columns for extra small screen -->

This will render two big columns, the first one being composed of 2 smaller columns, the second of 10 smaller columns. Having said that, adding content is very easy if you know the number of columns needed. You can have 1+11, 2+10, 3+3+6, 4+4+4, etc.

There is little customization needed in the layout of the page as far as columns are concerned, but it's good to know how you can do that.

You can read more about the grid system on the official Bootstrap Page.

Adding Your Logo

Changing the default logo and adding your own is a very simple task.

Logo text

1. Open your index.html file and scroll down to around line 55. You should see this:

   <p class="logo">Come<span>out</span></p><!-- Change logo text -->

2. Change the text "Comeout" with your own logo text.

Logo image

1. Make sure your logo is 18px maximum in height and has transparent background
2. Copy your logo file in the /images folder and replace the existing logo.png file.

3. Open your .html file and scroll down to around line 54. You should see this:

   <!--<img src="assets/images/logo.png" alt="Skillteam - Coming Soon Template">-->
   <p class="logo">Come<span>out</span></p><!-- Change logo text -->

4. Go ahead and:

   - delete comment brackets "<!--", "-->" before and afret tags <img>.

- change the text "Skillteam - Coming Soon Template" with your own slogan or site description. This will help with SEO.

- delete next line 55 (with tag <p></p>) or add comment brackets "<!--", "-->" before and afret tags <p></p> in this lines.

Adding New Fonts

I'll talk about method to add new fonts to your page using Google Web Fonts.

Using Google Web Fonts

1. Open Google Web Fonts and locate the font you wish to use.
2. Click the Quick-Use button.
3. Select the font styles you want (normal, italic, bold, etc).
4. Follow the instructions on the Google Fonts Page.

FontAwesome Social Icons

Change Social Icons in header.

Customizing the Social Icons

1. Open your index.html file and scroll down to around line 71. You should see this:

   <div class="col-md-2 text-right hidden-xs hidden-sm">
     <ul class="social">
       <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
       <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
       <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
     </ul>
   </div>
   

2. If you wish to remove some of them just delete the list items you want and make sure you change the links to each social service, right now they're blank.

Chimpmail

I'll talk about the method to add your chimpmail id for subscribers to the newsletter emails

Chimpmail

1. Open assets/ja/functions.js file in /js folder and scroll down to around line 196. You should see this:

   $url: "http://nashdom.us15.list-manage.com/subscribe/post?u=8422f5254a6b55ed8e81a49ef&id=57d75b6bb6"

2. Open your chimpmail account, open tab lists > Stats > Singup Form > Embedded forms > Super Slim scroll down to Copy/paste onto your site window.

3. Find line:

   <form action="//nashdom.us15.list-manage.com/subscribe/post?u=8422f5254a6b55ed8evdsfff&id=554y6vdfscdsb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

   copy code in action and insert instead of the code in the functions.js.

Changing the Home section

In this part you can change background image, text "We are launching", timer.

Change background image

1. Open /images folder, you will see firstscreen.jpg image.

2. Create your background image in photoshop or another graphics editor.
3. Replace firstscreen.jpg image

Change background video (only for video and video_particules template)

1. Open any video on Youtube, for example https://www.youtube.com/watch?v=buBvqw6G3WU after v= you see code buBvqw6G3WU copy this code.

2. Open functions.js file in /js folder and scroll down to around line 197. You should see this:.

<videoURL: "insert_your_code",

3. Replace code.

Change social icons (only for video and video_particules template)

1. Make sure your icons is 28px maximum in height, and 28px in width
2. Copy your icons file in the /images folder and replace the existing social_f.png, social_i.png, social_t.png and for hover effects social_fh.png, social_ih.png, social_th.png files.

Change text

1. Open your index.html file and scroll down to around lines 125. You should see this:

   <div class="headline square">
     <h1 class="wow fadeIn">
       WE ARE LAUNCHING IN
     </h1><!-- change text -->
   </div><!-- end headline -->

2. You can change the text inside the <h1></h1> tags

Change timer

1. Open your index.html file and scroll down to around lines 132. You should see this:

   <div id="countdown" class="clearfix wow fadeIn" data-time="2017/04/12 07:03:27"><!-- change data-time -->
   </div><!-- end countdown -->
   

2. You can change setting data-time "2017/04/12 07:03:27"

Changing the Section About

In this section, we change text about you, description of your advantages and Icons.

Change text

1. Open your index.html file and scroll down to around line 167. You should see this:

   <p class="subhead wow fadeInLeft wtt" data-wow-delay="0.2s">Lorem ipsum dolor ... </p><!-- change text -->

2. You can change the text inside the <p></p> tags

Customizing description

1. Open your index.html file and scroll down to around line 178. You should see this:

   <div class="col-md-6 box_one">
     <img src="assets/images/cog.png" alt="">
       <h3>Lorem ipsum</h3><!-- change text -->
         <hr class="xs colorgreen">
       <p class="subhead fregular">Lorem ipsum dolor sit amet...</p><!-- change text -->
   </div><!-- end col-md-6 -->
   

2. Open /images folder, you will see cog.png, globe.png, screen.png, people.png images icons in mobile version site.

   Create your images icons in photoshop or another graphics editor and replace.

3. You can change the text inside the <h3></h3>, <p></p> tags

Changing the Section Portfolio

In this section, we change names categories, add images and small information.

Change small information.

1. Open your index.html file and scroll down to around line 225. You should see this:

   <p class="subhead wow fadeInLeft wt" data-wow-delay="0.2s">Lorem ipsum...</p> tags

Change names categories

1. Open your index.html file and scroll down to around line 230, 233, 236, 239. You should see this:

   <li><label data-filter="" class="btn btn-primary active"><!--"data-filter" parameter is responsible for sorting images-->
     <input type="radio" name="options" id="option1">All categories
   </label></li>
   

2. You can change the text inside the <label></label> tags.

Add images

1. Open your index.html file and scroll down to around line 329. You should see this:

   <div data-filter="three" class="grid-item w1 wow zoomIn">
     <a href="assets/images/portfolio/pic04.jpg" class="popup">
     <div class="img_hover"></div></a>
     <img src="assets/images/portfolio/pic04.jpg" alt="pic04">
   </div>
   

2. Copy this block and past after <div></div> tags.
3. Create your image in photoshop or another graphics editor and save in assets/images/portfolio folder.
4. Change link on your image in <a href="assets/images/portfolio/your_image_name.jpg"> and <img src="assets/images/portfolio/your_image_name.jpg" alt="your_image_name"> tags.
5. Change text in data-filter="" setting.
   • data-filter="" - show all images.
   • data-filter="one" - show images in the category "Print design".
   • data-filter="two" - show images in the category "Product design".
   • data-filter="three" - show images in the category "Web design".

Changing the Section Contacts

In this section we include contact details, configured to send emails to your E-mail address.

Include contact details

1. Open your index.html file and scroll down to around lines 357, 372, 387. You should see this:

   <div class="contact_cell hidden-xs hidden-sm">
     <img src="assets/images/c_phone.png" alt="contact">
   </div>
   <div class="contact_cell visible-xs visible-sm hidden-md hidden-lg">
     <img src="assets/images/c_phone_w.png" alt="contact">
   </div>
   <div class="contact_cell">
     <div class="contact_content">
       <p class="contact_top">see me</h3>
       <p class="contact_bottom">67 West Street Suite 521 & 524 Brooklyn, NY 11222</p>
     </div>
   </div>

   <div class="contact_cell hidden-xs hidden-sm">
     <img src="assets/images/c_phone.png" alt="contact">
   </div>
   <div class="contact_cell visible-xs visible-sm hidden-md hidden-lg">
     <img src="assets/images/c_phone_w.png" alt="contact">
   <div class="contact_cell">
     <div class="contact_content">
       <p class="contact_top">call me</h3>
       <p class="contact_bottom">(+1)347-223-4533</p>
     </div>
   </div>

   <div class="contact_cell hidden-xs hidden-sm">
     <img src="assets/images/c_phone.png" alt="contact">
   </div>
   <div class="contact_cell visible-xs visible-sm hidden-md hidden-lg">
     <img src="assets/images/c_phone_w.png" alt="contact">
   <div class="contact_cell">
     <div class="contact_content">
       <p class="contact_top">write me</h3>
       <p class="contact_bottom">info@johndoe.com</p>
     </div>
   </div>

2. Change the text inside the <p></p> tag
3. Open /images folder, you will see c_place.png, c_envelope.png, c_phone.png images icons and c_place_w.png, c_envelope_w.png, c_phone_w.png images icons in mobile version site.

   Create your images icons in photoshop or another graphics editor and replace images.

Settings for sending emails to your E-mail address

1. Open your send.php file in /script folder and scroll down to around line 4. You should see this:

   $to = "example@example.com"; //where to send the letter

2. Change example@example.com to your E-mail adress.