ComeOut – Coming Soon Multipurpose PSD Template

# ComeOut – Coming Soon Multipurpose HTML Template

The perfect Coming Soon pages.

Thank you for purchasing our template. 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. Thanks so much and please take a moment and rate the file, it helps me a lot!

# File Structure What you get in the download package

### 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.

File Name | Description
--- | ---
`index.html` | This is the main page template.

### CSS Files

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

File Name | Description
--- | ---
`font-awesome > font-awesome.css` | Default settings of vector icons Font Awesome.
`animate.min.css` | This file contains all the CSS animations that appear when you scroll through a Web site
`bootstrap.min.css` | Comeout is built using the Twitter Bootstrap framework so this CSS file contains all the Bootstrap styling.
`magnific-popup.css` | This CSS file is responsible for the style popup when clicking on the image.
`fonts.min.css` | Contains CSS settings of all fonts used in the template.
`jquery.mCustomScrollbar.css` | This CSS file is responsible for the style scrollbar in portfolio.
`style.css` | This is the main CSS file of the template.

### JavaScript Files

There are fifteen JS files included with this template.

File Name | Description
--- | ---
`bootstrap.min.js` | This file include JS settings of bootstrap framework.
`jquery.min.js` | This contains the jQuery library.
`magnific-popup.min.js` | Magnific-popup library is responsible for the popup when clicking on the image.
`masonry-3.1.4.js` | Masonry library is a JavaScript grid layout library, which is used in portfolio images
`ofi.browser.js` | Ofi.browser library which is used for correct display of images in the portfolio
`jquery.mCustomScrollbar.concat.min.js` | mCustomScrollbar library which is used for scrollbar in porfolio.
`wow.min.js` | Wow library reveals Animations When You Scroll.
`jquery.countdown.min.js` | Countdown library which is used for numeric timer.
`jquery.ajaxchimp.min.js` | Ajax for mailchimp form.
`mail.js` | Ajax for contact form.
`functions.js` | Include settings for JS libraries which are used in index.html.
`comeout_(stars,video_particles)/TweenLite.min.js` | TweenLite main library of animation.
`comeout_(stars,video_particles)/EasePack.min.js` | EasePack library is a set of animation effects.
`comeout_(stars,video_particles)/points.js` | Points library responsible for animation points when you hover.
`comeout_(video,video_particles)/jquery.mb.YTPlayer.min.js` | YTPlayer library which is used for background video.

### Scripts

The scripts folder contains `.php` files that power up the AJAX contact form. We will discuss how to customize that form on a later chapter.

### Images

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

### Fonts

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

# HTML Structure Page layouts

### General Structure

Page is divided in 4 sections and those are clearly delimited in the HTML code using comments.

#### 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

This contains the links to the social page.

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.

#### Section Contact

The template benefits from a jQuery powered AJAX Contact Form. We'll have a sub-chapter dedicated to customizing the contact form.

# CSS Structure Stylesheets explained

### The `style.css` File

This main stylesheet file can be edited to customize anything on the page.

### Common Styles You Should Know About

Apart from the layout styling, there are a couple of custom classes that will allow you to add various elements to the page.

#### 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.

# JavaScript Structure

### The `functions.js` File

This file contains all the necessary functions. In this file you need change your chimpmail id.

About customization in this file, we will talk in the next chapter.

# General Customization The first steps towards template customization

### 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.

# Browser Compatibility

Comeout is compatible with all modern browsers. These include the latest versions of Firefox, Safari, Chrome and Opera. Also, this template is compatible with Internet Explorer 9 and above.

# Resources Icons and fonts

### Icon Sets

If you don't know where to get some nice icons to showcase your product or service, here is suggestions:

Font Awesome

### Fonts

If you wish to play around with the fonts, you can check out these websites:

Google Web Fonts

Once again, thank you so much for purchasing this template.