mention getting started guide on downloads and index page

closes FineUploader/fine-uploader#1646
FineUploader · Aug 20, 2016 · b1a7420 · b1a7420
1 parent 6130040
commit b1a7420
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -248,12 +248,16 @@ hr.no-margin
     margin: 0;
 }
 
+.get-started {
+    margin-top: 20px;
+}
+
 /* HOME PAGE UPLOADER BAR
  ------------------------------*/
 div.progress
 {
     width: 50%;
-    margin: 50px auto 0;
+    margin: 30px auto 0;
     height: 40px;
     display: none;
 }

diff --git a/customize.html b/customize.html
@@ -32,7 +32,8 @@ <h1>Customize and Download</h1>
             <hr class="no-margin">
             <hr class="no-margin">
             </br>
-            <h3 class="center">You have two options to download a copy of Fine Uploader</h3>
+            <h3 class="center">There are three different ways to obtain a copy of Fine Uploader</h3>
+            <h4 class="center">Read about these choices (and more) in the <a href="http://docs.fineuploader.com/quickstart/01-getting-started.html" target="_blank">getting started guide</a></h4>
             <div class="spacer"></div>
 
             <div class="row-fluid">
@@ -48,15 +49,21 @@ <h2>Option 1: Download from npm (preferred)</h2>
                 <div class="spacer"></div>
 
                 <section>
-                    <h2>Option 2: Download from the web</h2>
+                    <h2>Option 2: Build a copy from the source files</h2>
+
+                    <p>Read the <a href="http://docs.fineuploader.com/quickstart/01-getting-started.html" target="_blank">getting started guide</a> for more details.</p>
+                </section>
+
+                <div class="spacer"></div>
+
+                <section>
+                    <h2>Option 3: Download from the web</h2>
                     <form id="customize-form" class="form-horizontal">
 
                         <div id="server-type-section" class="row-fluid">
-                            <h3>Server Type</h3>
-
                             <fieldset id="ep_fieldset">
                                 <legend>
-                                    <p style="font-size: 13px;">Select the service you are using as a backend. <a target="_blank" href="http://docs.fineuploader.com/branch/master/endpoint_handlers/traditional.html">Traditional</a> assumes you will be implementing your own upload server, and
+                                    <p style="font-size: 13px;">Select the service (or services) you are using as a backend. <a target="_blank" href="http://docs.fineuploader.com/branch/master/endpoint_handlers/traditional.html">Traditional</a> assumes you will be implementing your own upload server, and
                                         <a target="_blank" href="https://aws.amazon.com/s3/">Amazon S3</a>
                                         will provide you with the code to send uploads directly to Amazon's Simple Storage Service (S3), and includes the <a target="_blank" href="http://docs.fineuploader.com/features/no-server-uploads.html">Serverless S3</a> module to support fully client-side S3 uploading.</p>
                                 </legend>

diff --git a/index.html b/index.html
@@ -82,13 +82,14 @@ <h3>Server support</h3>
     </div>
 </section>
 
-<div class="progress">
-    <div id="progress" data-0="width:0%;background:hsl(8, 76%, 59%);" data-530="width:100%;background:hsl(8, 76%, 59%);" class="progress-bar" style="width: 27.719298245614034%; background-color: rgb(230, 92, 71);"></div>
+    <h2 class="marketing-byline center get-started"><a class="orange" href="http://docs.fineuploader.com/quickstart/01-getting-started.html" target="_blank">Get started now!</a></h2>
+    <div class="progress">
+    <div id="progress" data-0="width:0%; background:#00abc7;" data-530="width:100%; background:#00abc7;" class="progress-bar" style="width: 27.719298245614034%; background-color: #00abc7;"></div>
 </div>
 
 <div class="spacer"></div>
 
-<div id="features" style="margin-top: -300px; padding-top: 300px;"></div>
+    <div id="features" style="margin-top: -300px; padding-top: 300px;"></div>
 <section class="features-section marketing" data-0="margin-top:-50px;" data-990="margin-top:-270px;">
     <div class="container">
         <h1>Features</h1>