download: add some more basic layout

I've added some graphics to the layout, currently only PNGs, should be
get finally transformed into SVG so the layout can scale on different
sizes of a desktop.
I've also added a small CSS stylesheeting to the h3 tag to make the
structure more visible.

10 files changed, 36 insertions, 9 deletions

diff --git a/english/download/img/cli.png b/english/download/img/cli.png
new file mode 100644
index 00000000000..a91303a5854
--- /dev/null
+++ b/english/download/img/cli.png
diff --git a/english/download/img/download.png b/english/download/img/download.png
new file mode 100644
index 00000000000..a0e52fc6cdb
--- /dev/null
+++ b/english/download/img/download.png
diff --git a/english/download/img/installer.png b/english/download/img/installer.png
new file mode 100644
index 00000000000..23c3d16f0d3
--- /dev/null
+++ b/english/download/img/installer.png
diff --git a/english/download/img/try.png b/english/download/img/try.png
new file mode 100644
index 00000000000..f036361fb15
--- /dev/null
+++ b/english/download/img/try.png
diff --git a/english/download/img/try1.png b/english/download/img/try1.png
new file mode 100644
index 00000000000..28b99c2ec55
--- /dev/null
+++ b/english/download/img/try1.png
diff --git a/english/download/img/usb-stick.png b/english/download/img/usb-stick.png
new file mode 100644
index 00000000000..e02d125e97e
--- /dev/null
+++ b/english/download/img/usb-stick.png
diff --git a/english/download/img/verify.png b/english/download/img/verify.png
new file mode 100644
index 00000000000..2c1b083fa2c
--- /dev/null
+++ b/english/download/img/verify.png
diff --git a/english/download/img/write-cd-dvd.png b/english/download/img/write-cd-dvd.png
new file mode 100644
index 00000000000..34ff71448c7
--- /dev/null
+++ b/english/download/img/write-cd-dvd.png
diff --git a/english/download/img/write-usb.png b/english/download/img/write-usb.png
new file mode 100644
index 00000000000..5d2657e4c91
--- /dev/null
+++ b/english/download/img/write-usb.png
diff --git a/english/download/index.wml b/english/download/index.wml
index b3aa61da83f..71e3bce8aeb 100644
--- a/english/download/index.wml
+++ b/english/download/index.wml
@@ -1,6 +1,16 @@
 #use wml::debian::cdimage title="Download Debian" BARETITLE=true
 #use wml::debian::release_info
 
+<style>
+h3 {
+  text-decoration: underline;
+  background-color: #f0f0f0;
+  padding: 6px;
+  border: 2px solid #787878;
+  border-radius: 4px;
+}
+</style>
+
 <p>There are multiple ways to get and use Debian.</p>
 
 <ul>
@@ -25,11 +35,15 @@
 
 <div class="line">
 
+  <!-- 1 - Download -->
+  <div align="center">
+    <h3>Step 1 - Download</h3>
+  </div>
+
  <div class="item col50">
   <div align="center">
     <p><strong>Download an installation image</strong></p>
-    <p><img src="Download_installer.png" alt="[Pic: Debian
-					     Installer]"></p>
+    <p><img src="img/download.png" alt="[Pic: Debian Installer]"></p>
     <p><a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">Debian <current_release_short></a>
       (64-bit PC Network installer)</p>
   </div>
@@ -43,33 +57,46 @@
  <div class="item col50 lastcol">
    <div align="center">
      <p><strong>Download a live image</strong></p>
-     <p><img src="Download_live.png" alt="[Pic: Debian Live]"></p>
+     <p><img src="img/try1.png" alt="[Pic: Debian Live]"></p>
      <p><a href="<stable-images-url/>/amd64/iso-cd/debian-<current-tiny-cd-release-filename/>-amd64-netinst.iso">Debian <current_release_short></a>
    </div>
  </div>
 </div>
 
+
+<!-- 2 - Verify -->
 <div align="center">
-<p>Verify</p>
- <img src="Verify.png" alt="[Pic: Verify]"></a>
+<h3>Step 2 - Verify</h3>
+ <p><strong>Verify the download</strong></p>
+    <a href="verify.en.html"><img src="img/verify.png" alt="[Pic: Verify]"></a>
+</div>
+
+<!-- 3 - Installation -->
+<div align="center">
+  <h3>Step 3 - Installation</h3>
+  <p><strong>Install Debian</strong></p>
+  <img src="img/Installation.png" alt="[Pic: Installation]">
 </div>
 
 <div class="line">
  <div class="item col50">
   <div align="center">
    <p>Write optical (CD/DVD/BD)</p>
-    <img src="Write_optical.png" alt="[Pic: Write optical]"></a>
+    <a href="burn-cd-dvd.en.html"><img src="img/write-cd-dvd.png" alt="[Pic: Write optical]"></a>
   </div>
  </div>
  <div class="item col50 lastcol">
   <div align="center">
   <p>Write USB</p>
-  <img src="Write_USB.png" alt="[Pic: Write USB]"></a>
+  <a href="write-usb.en.html"><img src="img/write-usb.png" alt="[Pic: Write USB]"></a>
   </div>
  </div>
 </div>
 
+
+<!-- 4 - Usage -->
 <div align="center">
-<p>Use it</p>
-<img src="Use.png" alt="[Pic: Use it]"></a>
+  <h3>Step 4 - Simply use it</h3>
+  <p><strong>Use your Debian installation</strong></p>
+  <img src="img/cli.png" alt="[Pic: Use it]">
 </div>