From 77cfa385093dcc2fc41a8d109d8a7a01511c7b27 Mon Sep 17 00:00:00 2001
From: Carsten Schoenert <c.schoenert@t-online.de>
Date: Sun, 24 Mar 2019 11:27:42 +0100
Subject: 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.
---
 english/download/img/cli.png          | Bin 0 -> 3544 bytes
 english/download/img/download.png     | Bin 0 -> 3215 bytes
 english/download/img/installer.png    | Bin 0 -> 115305 bytes
 english/download/img/try.png          | Bin 0 -> 4457 bytes
 english/download/img/try1.png         | Bin 0 -> 3577 bytes
 english/download/img/usb-stick.png    | Bin 0 -> 3853 bytes
 english/download/img/verify.png       | Bin 0 -> 3288 bytes
 english/download/img/write-cd-dvd.png | Bin 0 -> 4789 bytes
 english/download/img/write-usb.png    | Bin 0 -> 5176 bytes
 english/download/index.wml            |  45 +++++++++++++++++++++++++++-------
 10 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 english/download/img/cli.png
 create mode 100644 english/download/img/download.png
 create mode 100644 english/download/img/installer.png
 create mode 100644 english/download/img/try.png
 create mode 100644 english/download/img/try1.png
 create mode 100644 english/download/img/usb-stick.png
 create mode 100644 english/download/img/verify.png
 create mode 100644 english/download/img/write-cd-dvd.png
 create mode 100644 english/download/img/write-usb.png

diff --git a/english/download/img/cli.png b/english/download/img/cli.png
new file mode 100644
index 00000000000..a91303a5854
Binary files /dev/null and b/english/download/img/cli.png differ
diff --git a/english/download/img/download.png b/english/download/img/download.png
new file mode 100644
index 00000000000..a0e52fc6cdb
Binary files /dev/null and b/english/download/img/download.png differ
diff --git a/english/download/img/installer.png b/english/download/img/installer.png
new file mode 100644
index 00000000000..23c3d16f0d3
Binary files /dev/null and b/english/download/img/installer.png differ
diff --git a/english/download/img/try.png b/english/download/img/try.png
new file mode 100644
index 00000000000..f036361fb15
Binary files /dev/null and b/english/download/img/try.png differ
diff --git a/english/download/img/try1.png b/english/download/img/try1.png
new file mode 100644
index 00000000000..28b99c2ec55
Binary files /dev/null and b/english/download/img/try1.png differ
diff --git a/english/download/img/usb-stick.png b/english/download/img/usb-stick.png
new file mode 100644
index 00000000000..e02d125e97e
Binary files /dev/null and b/english/download/img/usb-stick.png differ
diff --git a/english/download/img/verify.png b/english/download/img/verify.png
new file mode 100644
index 00000000000..2c1b083fa2c
Binary files /dev/null and b/english/download/img/verify.png differ
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
Binary files /dev/null and b/english/download/img/write-cd-dvd.png differ
diff --git a/english/download/img/write-usb.png b/english/download/img/write-usb.png
new file mode 100644
index 00000000000..5d2657e4c91
Binary files /dev/null and b/english/download/img/write-usb.png differ
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>
-- 
cgit v1.2.3