/
Documentation.html
471 lines (394 loc) · 30.8 KB
/
Documentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soon Project - Documentation</title>
<meta name="description" content="Documentation for the Soon Project">
<meta name="author" content="Texx Smith"><!-- Google my name bitches, then ask me about SEO -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="height:45px; padding-right:11px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" href="http://texxsmith.net/soon"><img src="images/HH_logo_v2a.png" style="margin-top:-8px;" /></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#overview">Overview</a>
</li>
<li>
<a href="#features">Features</a>
</li>
<li><a href="#customText">Customize Text</a></li>
<li><a href="#faqs">FAQ's</a></li>
<li><a href="#licensing">Licensing</a></li>
<li><a href="#ownVideo">Your Own Video</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://texxsmith.com">TexxSmith.com</a>
</li>
<li >
<a href="http://texxsmith.net/support/tickets/">Open a Ticket</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- End Navbar -->
<!-- Main Container -->
<div class="container">
<!-- Page Header -->
<div class="row doc-HeaderMargin">
<div class="col-md-12">
<div class="page-header">
<h1>Documentation <small>Coming Soon Responsive Landing Page Project™</small></h1>
</div>
<p>
<p>Thank you for purchasing the Coming Soon Responsive Landing Page Project™. I put many hours into it's development and I hope it serves your needs. To get the most out of this template you'll need the basics of HTML. To use it at all, you'll need a domain name, a web hosting account and you'll need to know how to use FTP to place it in your web hosting account.</p>
<p><strong>How to get more help:</strong><br>
If, after reading this document, you still need help, please open a ticket in my <a href="http://texxsmith.net/support/" target="_blank" title="Link opens in a new window or tab">Client Support Center</a>. All tickets will be answered in one business day. The goal is for a complete resolution of the issue the same day. Please help me reach that goal by including the Theme Forest <em>Item ID</em> and <em>Item purchase code</em> (found on your "downloads" page on themeforest.com), in your support request.</p>
</p>
</div>
</div>
<!-- End Page Header -->
<!-- Main Content Area -->
<div class="row">
<div class="col-md-12">
<h3 class="text-primary">Overview</h3><a name="overview"></a>
<div class="panel-group" id="panel-973785">
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-973785" href="#panel-element-393863">You Will Need:</a>
</div>
<div id="panel-element-393863" class="panel-collapse collapse">
<div class="panel-body">
<p>I've worked real hard to make sure this template is as simple as possible, so that if a person is not a Web Designer and still wants to use this, they can. As with any HTML template, The user needs to be willing to learn at least a very small amount of web design tools to use it. It has to be uploaded and you'll probably want to change the text from something like "some content here" to something more meaningful to your website. If you know even a little HTML/CSS then you should breeze through this with no problems whatsoever. If you have ever edited and uploaded an HTML file to the internet you almost certianly have everything you need. </p>
<p>But even if you <em>are</em> a complete noob, I can help you get this done too. Lets start with the things you'll need:</p>
<ul>
<li>A domain name - I recomend you get it from <a href="http://godaddy.com" target="_blank">GoDaddy</a> and let them teach you how (it's wicked easy) to point it to the next item on this list.</li>
<li>A Webhosting account - I recomend <a href="http://texxsmith.com" target="_blank">me</a> or <a href="http://hostdime.com" target="_blank">Hostdime</a>. They in turn can tell you the specific info you'll need to enter into the next item on the list.</li>
<li>FTP software - I recomend <a href="https://filezilla-project.org/" target="_blank">FileZilla</a>, it's free and every knows how to explain how to use it.</li>
<li>A Plain Text Editor. Your computer comes with one already. On Windows it's called Notepad. Just be sure to use one that does NOT do formatting like making text bold (rich text), as it adds extra mark up to your text that will screw up a web page.</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-973785" href="#panel-element-479463">Step by Step Overview</a>
</div>
<div id="panel-element-479463" class="panel-collapse collapse">
<div class="panel-body">
<ol>
<li><a href="#">Choose</a> which video and features you'd like to use.</li>
<li>Make a copy of the file that matches what you want more closely than the others. </li>
<li>Open that copy in a text editor, copy and paste some snippets of code, hand edit the text, making it exactly the way you want and save it with the file name index.html. We have the details of which blocks to paste and where <a href="#snippets">below</a>.
<ul>
<li>If you know some HTML and CSS then have at it. I hope I created a nice fast, efficient, framework neutral, css only, easy to use, well documented and commented part of your project. Please check some of my other work now and in the future.</li>
</ul>
</li>
<li>Upload that index.html (using your FTP software of choice), file and these folders (and their files) onto your webhosting account.</li>
<ul>
<li>css</li>
<li>images</li>
<li>vids <strong>*</strong>you can skip uploading the videos that you aren't using on your page if you'd like</li>
<li>js <strong>*</strong>Only needed for the Countdown feature and the You</li>
</ul>
</li>
Tube Video feature.
</ol>
</div>
</div>
</div>
</div>
<h3 class="text-primary">Features</h3><a name="features"></a>
<div class="panel-group" id="panel-166441">
<!-- Change Font Set -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-166441" href="#panel-element-763312" name="changeFont">Change Font Set</a>
</div>
<div id="panel-element-763312" class="panel-collapse collapse">
<div class="panel-body">
<p>In the head section (near the top of the file, between the <head> and </head> tags), of your document replace the filename of the second style sheet length to the one you want. For example, to replace the default font set (style1.css) with the "Fat Face" font set. We simply replace one word in the line (line 10 by default) that calls FatFace.css. Like so:</p>
<p><code>link href='css/<strong>style1.css</strong>' rel='stylesheet' type='text/css'</code><br>
becomes<br>
<code>link href='css/<strong>FatFace.css</strong>' rel='stylesheet' type='text/css'</code></p>
<p>Please note that the font sets usually include several different fonts for different size text elements.</p>
</div>
</div>
</div>
<!-- Add Google Analytics -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-166441" href="#panel-element-152572" name="GA">Add Google Analytics</a>
</div>
<div id="panel-element-152572" class="panel-collapse collapse">
<div class="panel-body">
<p>Copy and paste your Google analytics tracking script from their web app and paste it in the Google Analytics section of your HTML page. It's near the bottom of the document, marked with comment tags.</p>
</div>
</div>
</div>
<!-- Change Font Color -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-033" href="#panel-element-0331" name="fontColor">Change Font to Dark or Light</a>
</div>
<div id="panel-element-0331" class="panel-collapse collapse">
<div class="panel-body">
<p>This one is really easy, just add the the text <code>class="dark"</code> to every h1, h2, p tag etc. that you want to be dark. It should look like this when finished: <code><h3 class="dark"></code>. Or just remove it, if it's dark and you want it light.</p>
</div>
</div>
</div>
<!-- Add an Overlay -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-032" href="#panel-element-0321" name="overlay">Feature: Add an Overlay</a>
</div>
<div id="panel-element-0321" class="panel-collapse collapse">
<div class="panel-body">
<p>Overlays are a great way to hide the fact that the background you are displaying is of lower quality (lower quality videos load faster). Sometimes it's good to use them just because they look awesome or you want the user to focus less on the background and more on the foreground. Whatever the case, I've made it easy. Just add:<br>
<code>
<link href='css/overlay.css' rel='stylesheet' type='text/css'>
</code>
<br>underneath the two existing refrences to style sheets. They are usually on lines 9 and 10 and they look like this:
<code>
<link href='css/core.css' rel='stylesheet' type='text/css'><br>
<link href='css/style1.css' rel='stylesheet' type='text/css'>
</code>
</p>
</div>
</div>
</div>
<!-- MailChimp Signup -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-038" href="#panel-element-0338" name="mailchimp">Feature: MailChimp Signup Form</a>
</div>
<div id="panel-element-0338" class="panel-collapse collapse">
<div class="panel-body">
<p>First ensure you have a mailchimp account and mailing list and all that. Then use their "make a form" feature. Instead of pasting the code directly into your HTML document, paste it into a plain text document instead, then copy that and paste that into your HTML document. Look through that code for the "name" attribute followed by a long numerical value. It should look similar to this:<br>
<code>name="b_e0afxxwer456fe7e103xx90a45dd358_cbxxcb3aa6f"</code>
<br>Replace the one in the HTML document with yours. Unless, of course, you wish to replace the whole form with a default looking one from mailchimp.
</p>
</div>
</div>
</div>
<!-- PHP Signup -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-077" href="#panel-element-0771" name="mailchimp">Feature: PHP Signup Form</a>
</div>
<div id="panel-element-0771" class="panel-collapse collapse">
<div class="panel-body">
<p>While the code behind the form is too hard to unbderstand for those who don't know PHP, the change need to send form results to your e-mail are easy to make. On line 33 you'll see an e-mail address. Change it and nothing else. That's all there is too it.</p>
</div>
</div>
</div>
<!-- Feature Countdown Timer -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-034" href="#panel-element-0341" name="countdown">Feature: CountDown Timer</a>
</div>
<div id="panel-element-0341" class="panel-collapse collapse">
<div class="panel-body">
<p>The overview of how to install this feature is easy. Simply add the two JavaScripts to your HTML file and then set the date you'd like the script to count down to in one of the scripts. Here's the details:</p>
<ul>
<li>Add these three lines to <head> section of your document:<br>
<code><script src="http://code.jquery.com/jquery-1.9.1.min.js"
type="text/javascript"></script><br><script
src="js/countdown.js" type="text/javascript"></script><br>
<script src="js/init.js" type="text/javascript"></script></code></li>
<li>Add the CountDown.css file to your HTML document by pasting this line into the head section of your HTML document:<br>
<code><link href='css/countDown.css' rel='stylesheet' type='text/css'></code>. Just to be safe make sure it's the last css file referenced in the head section.</li>
<li>Open init.js with a text editor, change the value for "date" on line 6 to reflect the date you want.</li>
<li>Save and upload init.js</li>
</ul>
</div>
</div>
</div>
<!-- Feature Image Only -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-035" href="#panel-element-0351" name="imageBack">Feature: Image only</a>
</div>
<div id="panel-element-0351" class="panel-collapse collapse">
<div class="panel-body">
<p>This is actually pretty easy. Look through the code of your HTML file for the opening <video> tag and closing </video> tag. Simply delete them and everyting in between them. Better still you could "comment them out" by adding an opening comment tag ( <code><!--</code> ) before the opening video tag and a closing comment tag ( <code>--></code> ) after the closing video tag. This way, if you change your mind and want to use video after all, you can simply delete the comment tags.</p>
</div>
</div>
</div>
<!-- Change Background Image -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-036" href="#panel-element-0361" name="changeBack">Change Background Image</a>
</div>
<div id="panel-element-0361" class="panel-collapse collapse">
<div class="panel-body">
<p>You can find the other background images in the "images/alt/" folder. They come in setrs of threes sizes. I've written CSS files that will determine what size a device is and serve the rightr size image. After you select an image you'd like to use, simply add the appropriate css file below the other css files in the head f your HTML file. Look at the source code of any of the background image only examples like <a href="Image_FoggyField.html"> Foggy Florida Field</a> for a specific example of where and how to add the css file.</p>
</div>
</div>
</div>
<!-- Add background color to content area -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-037" href="#panel-element-0371" name="changeBack">Add a Background Color to the Content Area</a>
</div>
<div id="panel-element-0371" class="panel-collapse collapse">
<div class="panel-body">
<p>When a background image (or video) have both light and dark colors in it, it can be hard to read no matter what color your text is. To help help make it more readable, you can put a semi-transparent colored background below the content but above the background. You can do this by finding the content div (it uses the class "container" and is right above the first <code><h1></code> tag. Inside of that content div paste in: <code><div class="darkBack"></code>. If you are using the "dark" class to make your text dark then you should probably use a lighter background by using <code>class="lightBack"</code> instead. Where you add that tag will be where the colored background section begins and where you add the next tag, <code></div></code> will determine where it ends. I recomend ending the colored background section after the last paragraph but before the button , if you use a button that is. . .</p>
</div>
</div>
</div>
<!-- Add Ghost Button -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-039" href="#panel-element-0391" name="changeBack">Add a Ghost Button</a>
</div>
<div id="panel-element-0391" class="panel-collapse collapse">
<div class="panel-body">
<p>The "ghost button" is easy to add. It's basiclly just a link, in a button in a paragraph.</p>
<p>Paste this code for a <em>light</em> button (I recomend under the last paraph of text):<br>
<code><p><a href="demo.html" class="ghost-button">A BUTTON</a></p></code></p>
<p>And use this code for a <em>dark</em> button:<br>
<code><p><a href="demo.html" class="dark-ghost-button">A BUTTON</a></p></code>
</p>
<p><strong>Don't forget</strong> to change the value of the <code>href</code> attribute from demo.html to the address of the page you want to link to.</p>
</div>
</div>
</div>
</div>
<h3 class="text-primary">Customize Text</h3><a name="customText"></a>
<!-- Customize Text -->
<div class="panel-group" id="panel-521081">
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-521081" href="#panel-element-316491">Change the text on the page</a>
</div>
<div id="panel-element-316491" class="panel-collapse collapse">
<div class="panel-body">
<p>Find the text between the opening <code><h1></code> (heading, level 1) and the closing <code></h1></code> tags and edit it to change the header. Do the same with the <code><h2></code> (heading, level 2) and <code><p></code> (paragragh) tags.</p>
<p><strong>Note: </strong>If you have more than one full line of text in the paragraph(s), I recomend wrapping the text within the "small" tag by adding <code><small></code> after the <code><p></code> taga and also adding <code></small></code> before the closing <code></p></code> tag.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-521081" href="#panel-element-743181">Advanced HTML Editing</a>
</div>
<div id="panel-element-743181" class="panel-collapse collapse">
<div class="panel-body">
<p>If you have advanced HTML and CSS knowledge, you may have noticed that there is no framework like Bootstrap used in the templates. Nor did I build a full grid system of my own for this project. This is so that these templates can be easily integrated into any front end or framework you are using. The K.I.S.S. approach often allows for maximum flexibility. It's no different in this case.</p>
<p><strong>Note: </strong>If you have more than one full line of text in the paragraph(s), I recomend wrapping the text within the "small" tag by adding <code><small></code> after the <code><p></code> taga and also adding <code></small></code> before the closing <code></p></code> tag.</p>
</div>
</div>
</div>
</div>
<h3 class="text-primary">FAQ's</h3><a name="faqs"></a>
<div class="panel-group" id="panel-04">
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-04" href="#panel-element-041">Video on Mobile devices</a>
</div>
<div id="panel-element-041" class="panel-collapse collapse">
<div class="panel-body">
<p><strong>I noticed that the video background is turned of by default for smaller mobile devices like phones. How can I change that?</strong></p>
<p>By removing some lines from the mobile sections of <em>core.css</em>. Near the bottom of the file there are two sections dedicated to devices smaller with screen than 799 pixels wide (which does depend on whether the user is holding it in landscape or portrait view).Comment out (add the css comment tag "<code>*/</code>" before the line and the closing comment tag "<code>/*</code>" after the line), or remove this rule from one or both sections: </p>
<p><code>#bgvid {
display: none;
}</code></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-04" href="#panel-element-042">Coming Soon</a>
</div>
<div id="panel-element-042" class="panel-collapse collapse">
<div class="panel-body">
<p>Since this project hadn't been released at the time of this documents writing, there are no real FAQ's. If you have a question please use my ticket system in my <a href="http://texxsmith.net/support" target="_blank">Client Support Center</a>. You'll find the "Open a Ticket" link on the top right. There's no sign up needed but please include your ThemeForest item ID# and Item Purchase code (found in the "downloads" section of your Theme forest account)</p>
</div>
</div>
</div>
</div>
<h3 class="text-primary">Licensing</h3><a name="licensing"></a>
<div class="panel-group" id="panel-05">
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-05" href="#panel-element-051">License Info</a>
</div>
<div id="panel-element-051" class="panel-collapse collapse">
<div class="panel-body">
<p>I took great care to be sure that everything in this package is legal, legit and 100% above board. When it comes to copyright, there are three different types of material in this package:</p>
<ol>
<li>Code and Design. The overall design of the pages and files and the text on them as presented in this package are copyright by myself and you, as a purchaser have license to use them as you see fit, without attribution with the exception of redistribution, which you do not have license for, with the exception of a paying design client. If this statement varies from the ThemeForest license, then the ThemeForest license will prevail. </li>
<li>Images and videos from my personal library. License is same as above. Absolutely no redistribution without permission with the sole exception of when creating a work for a paying client.</li>
<li>Videos from other sources. I have included a list (below) of videos from other sources and their license terms so that know with certainty that you are legally allowed to use the videos in question.</li>
</ol>
<p>All images are from my own personal library meaning they were taken and are owned by my wife or myself. The <a href="Video_SunsetGulf_overlay.html" target="_blank">Sunset Gulf Video</a> is as well.</p>
<h2>Videos</h2>
<p>All other videos were downloaded from <a href="http://videvo.net" target="_blank">videvo.net</a> in accordance with their license. Visit their website to see their license. Here's is a<a href="images/videvo.net_license.png" target="_blank"> screen capture of the license</a> that applied to these videos when I acquired them for this project. Here's a list of specific videos and the page they can be found on at the time of this publication.</p>
<ul>
<li><a href="http://www.videvo.net/video/raindrops-in-super-slow-motion/3313" target="_blank">Rain Splash</a></li>
<li><a href="http://www.videvo.net/video/wild-grass-/4184" target="_blank">Wild Grain</a> </li>
<li><a href="http://www.videvo.net/video/milky-way-timelapse/2974" target="_blank">Milky Way</a></li>
<li><a href="http://www.videvo.net/video/sow-scene-4/1706" target="_blank">Snow Scene</a></li>
</ul>
</div>
</div>
</div>
</div>
<h3 class="text-primary">Use Your Own or Alternate Video</h3>
<div class="panel-group" id="panel-06">
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-06" href="#panel-element-061">How to use your own video</a>
</div>
<div id="panel-element-061" class="panel-collapse collapse">
<div class="panel-body">
<p>Have you made a video you want to use? Great! Since you are making your own videos I can only guess that you have at least a little skill in video editing and are at least familiar with the concepts of video compression. But if I’m wrong, you’ll need know at least a little about <a href="https://vimeo.com/blog/post/video-compression-basics" target="_blank">the basics of video compression</a>.</p>
<p>
After you’ve edited and output your final video file you have two choices about how to proceed. Host the video on your own web hosting account or YouTube. I recommend self hosting but if you are expecting a lot of traffic then it could get expensive to host the video from your own web host. For most coming soon pages, this isn’t a concern.
</p>
<p>To self host a video you’ll need to output more than one copy of it. To be sure that it works on all operating systems/browsers and devices it needs to be in a few different file formats: .webm, .ogg, and .mp4 . See my <a href="http://texxsmith.net/support/articles/video-file-formats.php" target="_blank" title="Opens in a a new tab">FAQ</a> on which video file format is best if you are wondering what the differences are.</p>
<p>Take those files, upload them to the vids folder on your web host via FTP and then change the file name in the src attributes of the video tag in your html file. And of course, save it as index.html and upload it to the root directory of your web hosting account.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse" data-parent="#panel-06" href="#panel-element-062">YouTube Video</a>
</div>
<div id="panel-element-062" class="panel-collapse collapse">
<div class="panel-body">
<p><strong>Yes!</strong> You can use a YouTube video as a background with the Coming Soon Responsive Landing Page Project™. First start with the right template: <a href="Feature_YouTube.html">Feature_YouTube.html</a>. Like the PHP form, the code behind is kinda complicated but the part you need to change is easy to find and do.</p>
<p>Next find a youtube video that you want to use and then copy it's "video ID" out of the url. You can see this in the address bar of your browser or by clicking the "share" tab on the ytoutube page. Once yhou have the VideoID number you just replace the one on line 28 with your, without removing the single quote marks around it, save your changes. Presto! it's using your new video.
</div>
</div>
</div>
</div>
<p> </p>
<a name="ownVideo"></a>
</div>
</div>
<!-- End Main Content Area -->
</div>
<!-- End Main Container -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>