download: re-arrange whole section

Mainly added four big buttons for the images we want to link directly,
added further buttons that will link later to the download options in
detail. All links known to be not been valid currently.

1 files changed, 79 insertions, 85 deletions

diff --git a/english/download/index.wml b/english/download/index.wml
index 7da58110d7b..6c34fb90260 100644
--- a/english/download/index.wml
+++ b/english/download/index.wml
@@ -2,6 +2,7 @@
 #use wml::debian::release_info
 
 <link href="download.css" rel="stylesheet" type="text/css">
+<link href="hint.css" rel="stylesheet" type="text/css">
 
 <p>There are multiple ways to get and use Debian.</p>
 
@@ -26,109 +27,104 @@
   click <a href="FIXME">here</a> for more details.</p>
 
 <div class="line">
-
-  <!-- 1 - Download -->
+  <!-- 1.1 - Download, the two installer images variants -->
   <div align="center">
     <h3>Step 1 - Download</h3>
-  </div>
-  <!-- The left side with the download option for the installer images. -->
-  <div class="item col50">
-    <div align="center">
-      <p style="font-size:130%"><strong>Installation image</strong></p>
-      <p><img src="img/download.png" alt="[Pic: Debian Installer]"></p>
-      <br/>
-      <!-- The official Debian variant with not included non-free firmware. -->
-      <div class="col50">
-        <div align="center">
-          <span class="dl-btn-img dl-btn-img-free">
-            <a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso"> Debian <current_release_short>
-              <em>(64-bit PC Network)</em>
-            </a>
-          </span>
-        </div>
-      </div>
-
-      <!-- The non official Debian variant with non-free firmware. -->
-      <div class="col50">
-        <div align="center">
-          <span class="dl-btn-img dl-btn-img-nonfree">
-            <a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso"> Debian <current_release_short>
-              <em>(64-bit PC Network non-free)</em>
-            </a>
-          </span>
-         </div>
-      </div>
-    </div>
-    <div align="center">
-      <div class="col50-text">
-        <p>These are the most commonly used variants of images. Both images
-          are network based installations. There existing
-          <a href="more_installer">more images</a> you can choose from (e.g
-          DVD images and images for other architectures).
-        </p>
+    <h4>Installation Images</h4>
+    <div class="item col50">
+      <div align="center">
+        <a class="btn" href="<stable-images-url>/amd64/iso-cd/debian-9.8.0-amd64-netinst.iso">
+          Debian <current_release_short>
+          <div class="btn-info">amd64 Network Installer</div>
+        </a>
       </div>
     </div>
   </div>
-  <!-- END of the left side with the download option for the installer images. -->
-
-
-  <!-- The right side with the download option for the Live CD images. -->
   <div class="item col50 lastcol">
     <div align="center">
-      <p style="font-size:130%"><strong>Live image</strong></p>
-      <p><img src="img/try1.png" alt="[Pic: Debian Live]"></p>
-      <br/>
-      <!-- The official Debian variant with not included non-free firmware. -->
-      <div class="col50">
-        <div align="center">
-          <span class="dl-btn-img dl-btn-img-free dl-btn-live-free"><a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso"> Debian <current_release_short><em>(64-bit LiveCD)</em></a> </span>
+      <a class="btn btn-non-free" href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">
+        Debian <current_release_short>
+        <div class="btn-info btn-info-non-free">
+          amd64 Network Installer (<span style="color: red;">non-free</span>)
         </div>
-      </div>
+      </a>
+    </div>
+  </div>
+</div>
+<div align="center">
+  <div class="btn-more-images">
+  <p><span class="hint--top hint--large hint-text"
+           data-hint="These are the most commonly used variants of installation
+           images. You will find more image variants and architectures (e.g.
+           other netinstall or complete images for i386, armhf, ...) on the
+           button below.">
+           Hints about the linked install images.</span></p>
+  <a class="btn-more-img" href="<stable-images-url/>">
+    More Installation Images
+  </a>
+  </div>
+</div>
+<!-- 1.1 END of download section for the installer images -->
+
+<hr>
 
-      <!-- The non official Debian variant with non-free firmware. -->
-      <div class="col50">
-        <div align="center">
-          <span class="dl-btn-img dl-btn-img-nonfree dl-btn-live-nonfree"><a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso"> Debian <current_release_short><em>(64-bit LiveCD non-free)</em></a> </span>
-         </div>
+<!-- 1.2 - Download, the two LiveCD variants -->
+<div class="line">
+  <div align="center">
+    <h4 style="margin-top: 0.5em">LiveCD Images</h4>
+    <div class="item col50">
+      <div align="center">
+        <a class="btn" href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">
+          Debian <current_release_short>
+          <div class="btn-info">amd64 XFCE LiveCD</div>
+        </a>
       </div>
     </div>
-    <div align="center">
-      <div class="col50-text">
-        <p>The two links pointing also to the most typically used LiveCD images,
-          currently this is based on the architecture amd64. Also here you
-          have the  possibility to grab <a href="more_installer">more CD
-          images</a> for other possible Desktop Environments and the i386
-          architecture available. Please note that LiveCD images are only
-          provide for the amd64 and i386 architecture! They can be also used
-          on a USB stick.
-        </p>
+    <div class="item col50 lastcol">
+      <div align="center">
+        <a class="btn btn-non-free" href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">
+          Debian <current_release_short>
+          <div class="btn-info btn-info-non-free">amd64 XFCE LiveCD (<span style="color: red;">non-free</span>)</div>
+        </a>
       </div>
     </div>
   </div>
-  <!-- END of right download section for the LiveCD images. -->
-</div> <!-- END of download section. -->
+  <!-- 1.2 END of download section for the LiveCD images. -->
+</div>
+<div align="center">
+  <div class="btn-more-livecds">
+    <a class="btn-more-img" href="<stable-images-url/>">
+      More LiveCD Images
+    </a>
+  </div>
+</div>
+<!-- END of download section. -->
 
 <!-- 2 - Verification -->
 <div align="center">
   <h3>Step 2 - Verify</h3>
-  <p><strong>Verify the download</strong></p>
-  <div class="tooltip">
-    <span class="tooltiptext">In deep explanations about how to verify your download.</span>
-    <a href="verify.en.html"><img src="img/verify.png" alt="[Pic: Verify]"></a>
-  </div>
+  <h4>Verify the download</h4>
+  <!--<div class="tooltip">  needs to be reworked!
+    <span class="tooltiptext">In deep explanations about how to verify your download.</span>-->
+    <a href="verify.en.html"><img src="img/verify.png" alt="[Pic: Verify]" width="80" height="80"></a>
+  <!--</div>-->
   <div class="centered-middle-50 centered-middle-50-none-list">
     <ul class="centered-middle-50-none-list">
       <li>It's a good idea to proof your downloaded files on correctness and
         integrity so the installing later can work properly without possible
         flaws otherwise.</li>
-      <li>To do so Debian is providing hash sums of the images which are created
-        while the images are created. Your downloaded file needs to fit these sum
-        so you can be sure the file is completely equal and valid to the original
-        file.</li>
-      <li>Follow <a href="verify.en.html">
-        <div class="tooltip">here
-          <span class="tooltiptext">Follow that link for more in deep explanations and howtos.</span>
-        </div></a> to find further information.</li>
+      <li>To do so Debian is providing besides the images itself also hash sums
+        of the images which are created. Your downloaded file needs to fit
+        these sum so you can be finally sure the file is completely equal and
+        valid to the original file.</li>
+      <li>
+        <a class="hint--top hint--info"
+           data-hint="Please follow that link for more in deep explanations
+           and howtos about how you can verify your download."
+           href="verify.en.html">
+           Further information ...
+        </a>
+      </li>
     </ul>
   </div>
 </div>
@@ -136,10 +132,9 @@
 <!-- 3 - Installation -->
 <div align="center">
   <h3>Step 3 - Installation</h3>
-  <p><strong>Install Debian</strong></p>
+  <h4>Install Debian</h4>
   <img src="img/Installation.png" alt="[Pic: Installation]">
 </div>
-
 <div class="line">
   <div class="item col50">
     <div align="center">
@@ -155,11 +150,10 @@
   </div>
 </div>
 
-
 <!-- 4 - Usage -->
 <div align="center">
   <h3>Step 4 - Simply use it</h3>
-  <p><strong>Use your Debian installation</strong></p>
+  <h4>Use your Debian installation</h4>
   <img src="img/cli.png" alt="[Pic: Use it]">
   <div class="centered-middle-50 centered-middle-50-none-list">
     <p><em><strong>Support and Help</strong></em></p>
@@ -180,7 +174,7 @@
       <li>&#9654; <a href="./security">Security Information</a>
         <p>The Debian Security Team is working continuously in providing
           updated packages in case security updates needs to be done. Have a
-          look at this link get an overview how this process is working and
+          look at this link to get an overview how this process is working and
           what a user should know about this.</p>
       </li>
     </ul>