[www-doc] [Git][VideoLAN.org/websites][master] Make the goodies page responsive and improve layout

Jean-Baptiste Kempf gitlab at videolan.org
Fri Jul 1 23:18:54 CEST 2016


Jean-Baptiste Kempf pushed to branch master at VideoLAN organization / websites


Commits:
3aca2edb by Marvin Scholz at 2016-07-01T23:17:08+02:00
Make the goodies page responsive and improve layout

Makes the goodies page responsive and improves the overall
layout of the page.
Still TODO is the banners section and all sections after that.

Add small thumbnails all with the same size necessary to make
the thumbnails display aligned.

- - - - -


44 changed files:

- www.videolan.org/goodies.php
- + www.videolan.org/images/goodies/thumbnails/cone_26xPG.png
- + www.videolan.org/images/goodies/thumbnails/cone_8oPi.png
- + www.videolan.org/images/goodies/thumbnails/cone_FQCw.png
- + www.videolan.org/images/goodies/thumbnails/cone_RNF1.png
- + www.videolan.org/images/goodies/thumbnails/cone_altglass_1.png
- + www.videolan.org/images/goodies/thumbnails/cone_altglass_2.png
- + www.videolan.org/images/goodies/thumbnails/cone_audio.png
- + www.videolan.org/images/goodies/thumbnails/cone_blue_strip.png
- + www.videolan.org/images/goodies/thumbnails/cone_blue_strip_orange.png
- + www.videolan.org/images/goodies/thumbnails/cone_buB2.png
- + www.videolan.org/images/goodies/thumbnails/cone_eT5x.png
- + www.videolan.org/images/goodies/thumbnails/cone_f9my.png
- + www.videolan.org/images/goodies/thumbnails/cone_forum.png
- + www.videolan.org/images/goodies/thumbnails/cone_gA4v.png
- + www.videolan.org/images/goodies/thumbnails/cone_i2Es.png
- + www.videolan.org/images/goodies/thumbnails/cone_icon_transparent.png
- + www.videolan.org/images/goodies/thumbnails/cone_input.png
- + www.videolan.org/images/goodies/thumbnails/cone_interface.png
- + www.videolan.org/images/goodies/thumbnails/cone_list.png
- + www.videolan.org/images/goodies/thumbnails/cone_nightly.png
- + www.videolan.org/images/goodies/thumbnails/cone_noyel.png
- + www.videolan.org/images/goodies/thumbnails/cone_original.png
- + www.videolan.org/images/goodies/thumbnails/cone_osx.png
- + www.videolan.org/images/goodies/thumbnails/cone_raGi.png
- + www.videolan.org/images/goodies/thumbnails/cone_screaming.png
- + www.videolan.org/images/goodies/thumbnails/cone_shortcuts.png
- + www.videolan.org/images/goodies/thumbnails/cone_snowman.png
- + www.videolan.org/images/goodies/thumbnails/cone_soppera_1.png
- + www.videolan.org/images/goodies/thumbnails/cone_soppera_10.png
- + www.videolan.org/images/goodies/thumbnails/cone_soppera_2.png
- + www.videolan.org/images/goodies/thumbnails/cone_soppera_3.png
- + www.videolan.org/images/goodies/thumbnails/cone_subs.png
- + www.videolan.org/images/goodies/thumbnails/cone_video.png
- + www.videolan.org/images/goodies/thumbnails/wall_day_of_cones.png
- + www.videolan.org/images/goodies/thumbnails/wall_garf.png
- + www.videolan.org/images/goodies/thumbnails/wall_hpep.png
- + www.videolan.org/images/goodies/thumbnails/wall_jason.png
- + www.videolan.org/images/goodies/thumbnails/wall_karibu_1.png
- + www.videolan.org/images/goodies/thumbnails/wall_karibu_2.png
- + www.videolan.org/images/goodies/thumbnails/wall_karibu_3.png
- + www.videolan.org/images/goodies/thumbnails/wall_siddiqui.png
- + www.videolan.org/images/goodies/thumbnails/wall_wikingsoft_1.png
- + www.videolan.org/images/goodies/thumbnails/wall_wikingsoft_2.png


Changes:

=====================================
www.videolan.org/goodies.php
=====================================
--- a/www.videolan.org/goodies.php
+++ b/www.videolan.org/goodies.php
@@ -1,488 +1,856 @@
 <?php
    $title = "Goodies";
    $lang = "en";
+   $new_design = true;
    $menu = array( "project", "goodies" );
-   $additional_css = array("/style/panels.css");
+   //$additional_css = array("/style/panels.css");
    require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
 ?>
 
-        <h1 class="bigtitle" style='margin-bottom: 25px;'>VideoLAN Goodies</h1>
-        <p>You are now a true VideoLAN fan? Help yourself in this page!</p>
+<div class="container">
 
-        <div class="clearme" style='padding-top: 30px;'>
-            <div style='float: left; width: 475px;'>
-                <div class='audienceCallout'>For your computer</div>
-                <div class="clearme">
+<h1 class="bigtitle" style='margin-bottom: 25px;'>VideoLAN Goodies</h1>
+<p>You are now a true VideoLAN fan? Help yourself in this page!</p>
+
+<div class="row">
+    <div class="col-md-6" style="padding-top: 1em">
+        <h2 class='audienceCallout'>For your computer</h2>
+        <ul class="media-list">
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#videos">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
+                    </a>
+                </div>
+                <div class="media-body">
                     <a href="#videos" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Videos</span>
-                        <span class='productDescription'>VLC promotion movies authored by community</span>
+                        <h3 class='productName'>Videos</h3>
+                        <p class='productDescription'>VLC promotion movies authored by community</p>
+                    </a>
+                </div>
+            </li>
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#cones">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
                     </a>
                 </div>
-                <div class="clearme" style='padding-top: 40px;'>
+                <div class="media-body">
                     <a href="#cones" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Cones</span>
-                        <span class='productDescription'>The well known VideoLAN Cone, redesigned by community</span>
+                        <h3 class='productName'>Cones</h3>
+                        <p class='productDescription'>The well known VideoLAN Cone, redesigned by community</p>
+                    </a>
+                </div>
+            </li>
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#wallpaper">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
                     </a>
                 </div>
-                <div class="clearme" style='padding-top: 40px;'>
+                <div class="media-body">
                     <a href="#wallpaper" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Wallpaper</span>
-                        <span class='productDescription'>Background images featuring VLC Media Player</span>
+                        <h3 class='productName'>Wallpapers</h3>
+                        <p class='productDescription'>Background images featuring VLC Media Player</p>
+                    </a>
+                </div>
+            </li>
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#boot">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
                     </a>
                 </div>
-                <div class="clearme" style='padding-top: 40px;'>
+                <div class="media-body">
                     <a href="#boot" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Boot Screens</span>
-                        <span class='productDescription'>VLC Media Player from instant zero</span>
+                        <h3 class='productName'>Boot Screens</h3>
+                        <p class='productDescription'>VLC Media Player from instant zero</p>
+                    </a>
+                </div>
+            </li>
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#banners">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
                     </a>
                 </div>
-                <div class="clearme" style='padding-top: 40px;'>
+                <div class="media-body">
                     <a href="#banners" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Banners</span>
-                        <span class='productDescription'>Promote your favorite project through your website</span>
+                        <h3 class='productName'>Banners</h3>
+                        <p class='productDescription'>Promote your favorite project through your website</p>
                     </a>
                 </div>
-            </div>
+            </li>
+
+        </ul>
+    </div>
 
-            <div style='float: left; padding-left: 30px; width: 475px;'>
-                <div class='audienceCallout'>For YourSelf</div>
-                <div class="clearme">
+    <div class="col-md-6" style="padding-top: 1em">
+        <h2 class='audienceCallout'>For yourself</h2>
+        <ul class="media-list">
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#clothing">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
+                    </a>
+                </div>
+                <div class="media-body">
                     <a href="#clothing" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Clothing</span>
-                        <span class='productDescription'>Wear the famous cone</span>
+                        <h3 class='productName'>Clothing</h3>
+                        <p class='productDescription'>Wear the famous cone</p>
+                    </a>
+                </div>
+            </li>
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#food">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
                     </a>
                 </div>
-                <div class="clearme" style='padding-top: 40px;'>
+                <div class="media-body">
                     <a href="#food" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Food</span>
-                        <span class='productDescription'>Eat the Cone ! Featuring VLC Chocolate</span>
+                        <h3 class='productName'>Food</h3>
+                        <p class='productDescription'>Eat the Cone! Featuring VLC Chocolate</p>
                     </a>
                 </div>
-                <div class="clearme" style='padding-top: 40px;'>
+            </li>
+
+            <li class="media">
+                <div class="media-left">
+                    <a href="#stationery">
+                        <img class="media-object" src="//images.videolan.org/images/VLC-IconSmall.png" alt="">
+                    </a>
+                </div>
+                <div class="media-body">
                     <a href="#stationery" class='noUnderline'>
-                        <img src='//images.videolan.org/images/VLC-IconSmall.png' alt='VLC icon' class='smallProjectImg' />
-                        <span class='productName'>Stationery</span>
-                        <span class='productDescription'>VLC Lights and stickers</span>
+                        <h3 class='productName'>Stationery</h3>
+                        <p class='productDescription'>VLC Lights and stickers</p>
                     </a>
                 </div>
-            </div>
-        </div>
+            </li>
+
+        </ul>
+    </div>
+</div>
+
+<hr />
+
+<section>
+    <h2 id="videos">Videos</h2>
+    <p>Videos about VLC</p>
 
-        <div class="clearme" style='padding-top: 30px;'></div>
+    <div class="row">
+      <div class="col-sm-6 col-md-4">
 
-        <a name="videos"></a>
-        <h2>Videos</h2>
+        <div class="thumbnail">
+          <img src="//images.videolan.org/images/goodies/vlc-player-promo.png" alt="Adam Vian's movie">
+          <div class="caption">
+            <h3>Adam Vian's movie</h3>
+            <p>A VLC promotion movie made by Adam Vian</p>
+            <p>
+                <a href="//images.videolan.org/images/vlc-player.mp4" class="btn btn-default" role="button">Download</a>
+            </p>
+          </div>
+        </div>
 
-<p>Videos about vlc</p>
 
-<ul>
-<li>
-<p>VLC promotion movie made by Adam Vian</p>
-<a href="http://images.videolan.org/images/vlc-player.mp4">
-<img src="//images.videolan.org/images/goodies/vlc-player-promo.png" alt="Adam Vian's movie" height="100"></a>
-</li>
-</ul>
+      </div>
+    </div>
+</section>
 
-        <div class="clearme" style='padding-top: 30px;'></div>
+<hr />
 
-        <a name="cones"></a>
-        <h2>Cones</h2>
+<section>
+    <h2 id="cones">Cones</h2>
 
-<p>You may freely use these VideoLAN logos using the following
-copyright:</p>
+    <p>You may freely use these VideoLAN logos using the following
+    copyright:</p>
 
-<pre>Copyright (c) 1996-2010 VideoLAN. This logo or a modified version
+    <pre>Copyright (c) 1996-2010 VideoLAN. This logo or a modified version
 may be used or modified by anyone to refer to the VideoLAN project
 or any product developed by the VideoLAN team, but does not indicate
 endorsement by the project.</pre>
 
-<p>There have been many many versions of the VideoLAN cone: </p>
-
-<ul>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-26xPG.png">
-<img src="//images.videolan.org/images/goodies/cone-26xPG.png" alt="made by Nirzar" width="300">
-</a>
-<p>made by <a href="http://twitter.com/nirzardp">Nirzar</a></p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/snowman.png">
-<img src="//images.videolan.org/images/goodies/snowman.png" alt="made by Cory Simmons" width="300">
-</a>
-<p>made by <a href="http://mscns.com/">Cory Simmons</a></p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-i2Es.png">
-<img src="//images.videolan.org/images/goodies/cone-i2Es.png" alt="made by Mr. Lee" width="300">
-</a>
-<p>made by <a href="http://www.design-fu.co.uk/">Mr. Lee</a></p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-buB2.png">
-<img src="//images.videolan.org/images/goodies/cone-buB2.png" alt="made by Joel Shaw" width="300">
-</a>
-<p>made by Joel Shaw</p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-eT5x.png">
-<img src="//images.videolan.org/images/goodies/cone-eT5x.png" alt="made by Gautham aka Gapo" width="300">
-</a>
-<p>made by Gautham aka Gapo</p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-raGi.png">
-<img src="//images.videolan.org/images/goodies/cone-raGi.png" alt="made by Nick Pierno" width="300">
-</a>
-<a href="http://images.videolan.org/images/goodies/cone-RNF1.png">
-<img src="//images.videolan.org/images/goodies/cone-RNF1.png" alt="made by Nick Pierno" width="300">
-</a>
-<p>made by <a href="http://www.topdraw.com/">Nick Pierno</a></p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-gA4v.png">
-<img src="//images.videolan.org/images/goodies/cone-gA4v.png" alt="made by SavTheCoder" width="300">
-</a>
-<p>made by SavTheCoder</p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-FQCw.png">
-<img src="//images.videolan.org/images/goodies/cone-FQCw.png" alt="made by digoncreative" width="300">
-</a>
-<p>made by digoncreative</p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-8oPi.png">
-<img src="//images.videolan.org/images/goodies/cone-8oPi.png" alt="made by TheBDutchman" width="300">
-</a>
-<p>made by TheBDutchman</p>
-</li>
-
-<li>
-<a href="http://images.videolan.org/images/goodies/cone-f9my.png">
-<img src="//images.videolan.org/images/goodies/cone-f9my.png" alt="made by mishnak" width="300">
-</a>
-<p>(joke) made by <a href="http://www.reddit.com/user/mishnak">mishnak</a></p>
-</li>
-
-<li>
-
-<p>The version made by Stephane Soppera (with Blender):</p>
-<a href="http://images.videolan.org/images/goodies/cone-soppera10.png">
-<img src="//images.videolan.org/images/goodies/cone-soppera10-moyen.png" alt="Stephane Soppera's cone" height="100" width="77">
-</a>
-
-<p>Download the Blender sources <a href="http://images.videolan.org/images/goodies/cone10-soppera.blend">here</a>.</p>
-
-</li>
-
-<li>
-
-<p>The first version of the logo made by Sam Hocevar (with The Gimp):</p>
-
-<img src="//images.videolan.org/images/goodies/cone.png" alt="VideoLAN's first cone" height="100" width="78">
-
-</li>
-<li>
-
-<p>Another version made by Benjamin Mironer that is still used in VLC
-for Mac OS X:</p>
-
-<img src="//images.videolan.org/images/goodies/cone-osx.png" alt="VideoLAN" height="127" width="115">
-
-</li>
-<li>
-
-<p>A christmas icon made by Geoffrey Roussel:</p>
-<p><img src="//images.videolan.org/images/goodies/CNoyel128.png" alt="Nowwwel"></p>
-<p>Download the Blender sources <a href="http://images.videolan.org/images/goodies/vlcNoyel.blend">here</a>.</p>
-
-</li>
-
-<li>
-<p>Two 3D cones made by Daniel Dreibrodt:</p>
-<p>
-<a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass.png" target="_blank">
-<img src="//images.videolan.org/images/goodies/cone_altglass_128.png" alt="Cone">
-</a>
-
-<a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass_2.png" target="_blank">
-<img src="//images.videolan.org/images/goodies/cone_altglass_2_128.png" alt="Cone">
-</a>
-</p>
-
-<p>
-<a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass.ico">Download cone #1 as Windows XP/Vista icon</a><br>
-<a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass.blend">Download Blender sources of cone #1</a><br>
-<a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass_2.ico">Download cone #2 as Windows XP/Vista icon</a><br>
-<a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass_2.blend">Download Blender sources of cone #1</a><br>
-</p>
-</li>
-
-<li>
-<p>A nightly build cone based on the current icon made by Daniel Dreibrodt:</p>
-<p>
-<img src="//images.videolan.org/images/goodies/nightly_notext.png" alt="Nightly cone">
-</p>
-<p>
-<a href="http://d-gfx.kognetwork.ch/VLC/nightly_notext.ico">Download it as a Windows icon.</a>
-</p>
-</li>
-
-</ul>
-
-
-        <div class="clearme" style='padding-top: 30px;'></div>
+    <p>There have been many many versions of the VideoLAN cone: </p>
 
-        <a name="wallpaper"></a>
-        <h2>Misc Images and Wallpaper</h2>
+    <div class="row">
 
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-26xPG.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_26xPG.png" alt="VLC Cone made by Nirzar">
+                </a>
+                <div class="caption">
+                    <p>Cone made by <a href="http://twitter.com/nirzardp">Nirzar</a></p>
+                </div>
+            </div>
+        </div>
 
-<p>PlaysItAll made by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a>: </p>
-<img src="//images.videolan.org/images/goodies/vlc_playsitall.png"><img src="//images.videolan.org/images/goodies/cone_blue_strip_bluetriangle.png">
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/snowman.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_snowman.png" alt="Snowman with Cone nose">
+                </a>
+                <div class="caption">
+                    <p>Snowman made by <a href="http://mscns.com/">Cory Simmons</a></p>
+                </div>
+            </div>
+        </div>
 
-<p>Cone Icons with blue strip made by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a>: </p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-i2Es.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_i2Es.png" alt="made by Mr. Lee">
+                </a>
+                <div class="caption">
+                    <p>Cone made by <a href="http://www.design-fu.co.uk/">Mr. Lee</a></p>
+                </div>
+            </div>
+        </div>
 
-<img src="//images.videolan.org/images/goodies/cone_blue_strip_orangeround.png"><img src="//images.videolan.org/images/goodies/cone_blue_strip.png">
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-buB2.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_buB2.png" alt="made by Joel Shaw">
+                </a>
+                <div class="caption">
+                    <p>Cone made by Joel Shaw</p>
+                </div>
+            </div>
+        </div>
 
-<img src="//images.videolan.org/images/goodies/cone_blue_strip-audio64.png"><img src="//images.videolan.org/images/goodies/cone_blue_strip-video64.png"><img src="//images.videolan.org/images/goodies/cone_blue_strip-dvd64.png">
+    </div>
 
-<h3>Funny cones for VLC preferences</h3>
-<p>High-Quality Cone icons done by Tom Bigelajzen</p>
-<p><a href="http://images.videolan.org/images/goodies/Cone-Shortcuts-large.png"><img src="//images.videolan.org/images/goodies/Cone-Shortcuts-small.png"></a>
-<a href="http://images.videolan.org/images/goodies/Cone-Subs-large.png"><img src="//images.videolan.org/images/goodies/Cone-Subs-small.png"></a>
-<a href="http://images.videolan.org/images/goodies/Cone-Forum-large.png"><img src="//images.videolan.org/images/goodies/Cone-Forum-small.png"></a>
-<a href="http://images.videolan.org/images/goodies/Cone-Video-large.png"><img src="//images.videolan.org/images/goodies/Cone-Video-small.png"></a>
-</p>
-<p>
-<a href="http://images.videolan.org/images/goodies/Cone-Audio-large.png"><img src="//images.videolan.org/images/goodies/Cone-Audio-small.png"></a>
-<a href="http://images.videolan.org/images/goodies/Cone-Input-large.png"><img src="//images.videolan.org/images/goodies/Cone-Input-small.png"></a>
-<a href="http://images.videolan.org/images/goodies/Cone-Interface-large.png"><img src="//images.videolan.org/images/goodies/Cone-Interface-small.png"></a>
-<a href="http://images.videolan.org/images/goodies/Cone-List-large.png"><img src="//images.videolan.org/images/goodies/Cone-List-small.png"></a>
-</p>
+    <div class="row">
 
-<p>Transparent cone by Yvo Schaap</p>
-<p>
-<a href="http://images.videolan.org/images/goodies/cone-icon-transparent.png"><img src="//images.videolan.org/images/goodies/cone-icon-transparent.png" width="200"></a>
-</p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-eT5x.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_eT5x.png" alt="made by Gautham aka Gapo">
+                </a>
+                <div class="caption">
+                    <p>Cone made by Gautham aka Gapo</p>
+                </div>
+            </div>
+        </div>
 
-<p>All videolan background images can now be downloaded in one
-RPM package. The (relocatable) package has been built by <a href="http://www.jpsaman.org/">Jean-Paul Saman</a> on RH 9.0,
-but should also be useable on SuSE, Mandrake and other RPM-aware
-distributions. </p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-raGi.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_raGi.png" alt="made by Nick Pierno">
+                </a>
+                <div class="caption">
+                    <p>Cone made by <a href="http://www.topdraw.com/">Nick Pierno</a></p>
+                </div>
+            </div>
+        </div>
 
-<p>To install the package:</p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-RNF1.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_RNF1.png" alt="made by Nick Pierno">
+                </a>
+                <div class="caption">
+                    <p>Cone made by <a href="http://www.topdraw.com/">Nick Pierno</a></p>
+                </div>
+            </div>
+        </div>
 
-<ul class="bullets">
-<li>Download the rpm here: <a href="http://images.videolan.org/images/videolan-backgrounds-base-2-1.noarch.rpm">videolan-backgrounds-base-2-1.noarch.rpm</a>.</li>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-gA4v.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_gA4v.png" alt="made by SavTheCoder">
+                </a>
+                <div class="caption">
+                    <p>Cone made by SavTheCoder</p>
+                </div>
+            </div>
+        </div>
 
-<li>Use "rpm ivh -prefix=<newpath>
-videolan-backgrounds-base-2-1.noarch.rpm" to relocated the installed
-images to a new location on e.g: SuSE systems.</li>
-</ul>
-<p>The source package can be found <a href="http://images.videolan.org/images/videolan-backgrounds-base-2-1.src.rpm">here</a>.</p>
+    </div>
 
-<hr>
+    <div class="row">
 
-<p>Jason Jaeger made this VLC background:</p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-FQCw.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_FQCw.png" alt="made by digoncreative">
+                </a>
+                <div class="caption">
+                    <p>Cone made by digoncreative</p>
+                </div>
+            </div>
+        </div>
 
-<div>
-  <img src="//images.videolan.org/images/goodies/v3-wallpaper_300x240.jpg" alt="Jason Jaeger" height="240" width="300"><br>
-  <a href="http://images.videolan.org/images/goodies/v3-wallpaper_1280x1024.jpg">Image 1280x1024</a> (163kB)<br>
-  <a href="http://images.videolan.org/images/goodies/v3-wallpaper_1024x768.jpg">Image 1024x768</a> (167kB)<br>
-  <a href="http://images.videolan.org/images/goodies/v3-wallpaper_800x600.jpg">Image 800x600</a> (121kB)
-</div>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-8oPi.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_8oPi.png" alt="made by TheBDutchman">
+                </a>
+                <div class="caption">
+                    <p>Cone made by TheBDutchman</p>
+                </div>
+            </div>
+        </div>
 
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-f9my.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_f9my.png" alt="made by mishnak">
+                </a>
+                <div class="caption">
+                    <p>Joke Cone made by <a href="http://www.reddit.com/user/mishnak">mishnak</a></p>
+                </div>
+            </div>
+        </div>
 
-<p>HPep made this VLC background:</p>
-<div>
-  <img src="//images.videolan.org/images/goodies/vlc-hpep-300x225.jpg" alt="hpep" height="225" width="300"><br>
-  <a href="http://images.videolan.org/images/goodies/vlc-hpep-1024x768.jpg">Image 1024x768</a> (159 kB)
-</div>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-soppera10-large.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_soppera_10.png" alt="Stephane Soppera's cone">
+                </a>
+                <div class="caption">
+                    <p>Cone made by Stephane Soppera (with Blender)</p>
+                    <p>Download: <a href="http://images.videolan.org/images/goodies/cone10-soppera.blend">Blender</a></p>
+                </div>
+            </div>
+        </div>
 
-<p>Emmanuel Puig (alias Karibu) made these VideoLAN logos:</p>
-<div style="float:both;">
-  <img src="//images.videolan.org/images/goodies/videolan/vl1_250x188.jpg" alt="Logo 1" height="188" width="250"><br>
-    <a href="http://images.videolan.org/images/goodies/videolan/vl1_1600x1200.jpg">Image 1600x1200</a> (136 kB)<br>
-    <a href="http://images.videolan.org/images/goodies/videolan/vl1_1024x768.jpg">Image 1024x768</a> (85 kB)
-</div>
-<div style="float:left;">
-  <img src="//images.videolan.org/images/goodies/videolan/vl2_250x177.jpg" alt="Logo 2" height="177" width="250">
-<br><a href="http://images.videolan.org/images/goodies/videolan/vl2_1600x1131.jpg">Image 1600x1131</a> (106 kB)<br>
-<a href="http://images.videolan.org/images/goodies/videolan/vl2_1024x724.jpg">Image 1024x724</a> (67 kB)
-</div>
-<div>
-  <img src="//images.videolan.org/images/goodies/videolan/vl3_250x188.jpg" alt="Logo 3" height="188" width="250">
-<br><a href="http://images.videolan.org/images/goodies/videolan/vl3_1600x1200.jpg">Image 1600x1200</a> (75 kB)<br>
-<a href="http://images.videolan.org/images/goodies/videolan/vl3_1024x768.jpg">Image 1024x768</a> (47 kB)
-</div>
+    </div>
 
-<p>Simon Latapie (alias Garf) made this VideoLAN logo:</p>
-<div>
-  <img src="//images.videolan.org/images/goodies/videolan/vl4_251x188.jpg" alt="Logo 4" height="188" width="251">
-<br>
-<a href="http://images.videolan.org/images/goodies/videolan/vl4_2872x2154.jpg">Image 2872x2154</a> (379 kB)<br>
-<a href="http://images.videolan.org/images/goodies/videolan/vl4_1600x1200.jpg">Image 1600x1200</a> (99 kB)<br>
-<a href="http://images.videolan.org/images/goodies/videolan/vl4_1024x768.jpg">Image 1024x768</a> (55 kB)
-</div>
+    <div class="row">
 
-<p>This nice high-quality image was done by Tom Bigelajzen</p>
-<p>
-<a href="http://images.videolan.org/images/goodies/day-of-the-cones-ex2.jpg"><img src="//images.videolan.org/images/goodies/day-of-the-cones-small.jpg"></a>
-</p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_original.png" alt="VideoLAN's first cone">
+                </a>
+                <div class="caption">
+                    <p>The first version of the logo made by Sam Hocevar (with The Gimp)</p>
+                </div>
+            </div>
+        </div>
 
-<p>These nice logos where drawn by BRi7X:</p>
-<p>
-<a href="http://images.videolan.org/images/goodies/videolan-bri7x-6.png"><img src="//images.videolan.org/images/goodies/tn_videolan-bri7x-6.png" alt="Yet another VideoLAN logo" height="89" width="130"></a>
-<a href="http://images.videolan.org/images/goodies/videolan-bri7x-5.png"><img src="//images.videolan.org/images/goodies/tn_videolan-bri7x-5.png" alt="Yet another VideoLAN logo" height="89" width="130"></a>
-<a href="http://images.videolan.org/images/goodies/videolan-bri7x-4.png"><img src="//images.videolan.org/images/goodies/tn_videolan-bri7x-4.png" alt="Yet another VideoLAN logo" height="89" width="130"></a>
-<a href="http://images.videolan.org/images/goodies/videolan-bri7x-3.png"><img src="//images.videolan.org/images/goodies/tn_videolan-bri7x-3.png" alt="Yet another VideoLAN logo" height="89" width="130"></a>
-<a href="http://images.videolan.org/images/goodies/videolan-bri7x-2.png"><img src="//images.videolan.org/images/goodies/tn_videolan-bri7x-2.png" alt="Yet another VideoLAN logo" height="89" width="130"></a>
-<a href="http://images.videolan.org/images/goodies/videolan-bri7x-1.png"><img src="//images.videolan.org/images/goodies/tn_videolan-bri7x-1.png" alt="Yet another VideoLAN logo" height="89" width="130"></a>
-</p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-osx.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_osx.png" alt="VideoLAN">
+                </a>
+                <div class="caption">
+                    <p>Another version, by Benjamin Mironer (used for OS X)</p>
+                </div>
+            </div>
+        </div>
 
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/CNoyel128.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_noyel.png" alt="Nowwwel">
+                </a>
+                <div class="caption">
+                    <p>A christmas cone made by Geoffrey Roussel</p>
+                    <p>Download: <a href="http://images.videolan.org/images/goodies/vlcNoyel.blend">Blender</a></p>
+                </div>
+            </div>
+        </div>
 
-<p>These nice background images were made by <a href="mailto:graphics at wikingsoft.net">Peter Bauer</a> from Wikingsoft:</p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_altglass_1.png" alt="Cone">
+                </a>
+                <div class="caption">
+                    <p>A 3D cone made by Daniel Dreibrodt</p>
+                    <p>Download:
+                    <a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass.ico">ICO</a>
+                    /
+                    <a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass.blend">Blender</a></p>
+                </div>
+            </div>
+        </div>
 
-<div>
-  <img src="//images.videolan.org/images/goodies/videolan-wikingsoft.png" alt="Background" height="188" width="251"><br>
-<a href="http://images.videolan.org/images/goodies/VideoLAN.png">Image 640x480</a> (188 kB)
-</div>
-<div>
-  <img src="//images.videolan.org/images/goodies/videolan-wikingsoft2.png" alt="Background" height="188" width="251"><br>
-<a href="http://images.videolan.org/images/goodies/videolan-wikingsoft2.png">Image 1024x768</a> (56 kB)
-</div>
+    </div>
+
+    <div class="row">
+
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass_2.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_altglass_2.png" alt="Cone">
+                </a>
+                <div class="caption">
+                    <p>Another 3D cone made by Daniel Dreibrodt</p>
+                    <p>Download:
+                    <a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass_2.ico">ICO</a>
+                    /
+                    <a href="http://d-gfx.kognetwork.ch/VLC/cone_altglass_2.blend">Blender</a></p>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/nightly_notext.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_nightly.png" alt="Nightly cone">
+                </a>
+                <div class="caption">
+                    <p>Nightly builds cone, by Daniel Dreibrodt</p>
+                    <p>Download: <a href="http://d-gfx.kognetwork.ch/VLC/nightly_notext.ico">ICO</a></p>
+                </div>
+            </div>
+        </div>
 
-<p>This background image was made by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a>:</p>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone_blue_strip_orangeround.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_blue_strip_orange.png" alt="Nightly cone">
+                </a>
+                <div class="caption">
+                    <p>Cone Icons with blue strip made by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a></p>
+                </div>
+            </div>
+        </div>
 
-<div>
-  <img src="//images.videolan.org/images/goodies/tn_videolan_org.png" alt="Background" height="187" width="250"><br>
-<a href="http://images.videolan.org/images/goodies/videolan_org_1024x768.png">Image 1024x768</a> (15 kB)<br><br>
-<a href="http://images.videolan.org/images/goodies/videolan_org_1280x960.png">Image 1280x960</a> (19 kB)<br><br>
-<a href="http://images.videolan.org/images/goodies/videolan_org_1600x1200.png">Image 1600x1200</a> (26 kB)
-</div>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone_blue_strip.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_blue_strip.png" alt="Nightly cone">
+                </a>
+                <div class="caption">
+                    <p>Cone Icons with blue strip made by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a></p>
+                </div>
+            </div>
+        </div>
 
-<p></p>
+    </div>
 
+    <div class="row">
 
-        <div class="clearme" style='padding-top: 30px;'></div>
+        <div class="col-xs-6 col-md-3">
+            <div class="thumbnail" style="height: 300px;">
+                <a href="//images.videolan.org/images/goodies/cone-icon-transparent.png">
+                    <img src="//images.videolan.org/images/goodies/thumbnails/cone_icon_transparent.png" alt="Nightly cone">
+                </a>
+                <div class="caption">
+                    <p>Transparent cone by Yvo Schaap</p>
+                </div>
+            </div>
+        </div>
 
-        <a name="boot"></a>
-        <h2>Boot Screens</h2>
+    </div>
 
+    <h3>High-Quality Cone icons by Tom Bigelajzen</h3>
 
-<p>Karibu also made a VideoLAN LILO bootscreen:</p>
+    <div class="row">
 
-<p><a href="http://images.videolan.org/images/goodies/lilo-videolan.jpg">
-<img src="//images.videolan.org/images/goodies/lilo-videolan-small.jpg" alt="LILO bootscreen" height="300" width="401"></a></p>
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-Shortcuts-large.png" class="thumbnail">
+              <img src="//images.videolan.org/images/goodies/thumbnails/cone_shortcuts.png" alt="Shortcuts Cone">
+            </a>
+        </div>
 
-<p>Download the image and the instructions: <a href="http://images.videolan.org/images/goodies/lilo-videolan.tar.gz">lilo-videolan.tar.gz</a>.</p>
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-Subs-large.png" class="thumbnail">
+              <img src="//images.videolan.org/images/goodies/thumbnails/cone_subs.png" alt="Subtitles cone">
+            </a>
+        </div>
 
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-Forum-large.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/thumbnails/cone_forum.png" alt="Forum cone">
+            </a>
+        </div>
 
-</div>
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-Video-large.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/thumbnails/cone_video.png" alt="Video cone">
+            </a>
+        </div>
 
-        <div class="clearme" style='padding-top: 30px;'></div>
+    </div>
 
-        <a name="banners"></a>
-        <h2>Banners</h2>
+    <div class="row">
 
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-Audio-large.png" class="thumbnail">
+              <img src="//images.videolan.org/images/goodies/thumbnails/cone_audio.png" alt="Audio Cone">
+            </a>
+        </div>
 
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-Input-large.png" class="thumbnail">
+              <img src="//images.videolan.org/images/goodies/thumbnails/cone_input.png" alt="Input cone">
+            </a>
+        </div>
 
-<?php panel_start("blue" ); ?>
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-Interface-large.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/thumbnails/cone_interface.png" alt="Interface cone">
+            </a>
+        </div>
 
-<p class="center"><a href="http://www.videolan.org/vlc" title="Get VLC media player - It plays, it streams, it kills WiMPs!!">
-<img src="//images.videolan.org/images/goodies/buttons_getVLC/GetVLC_110.png" alt="Get VLC media player" height="45" width="110"></a></p>
-<p>
-Use the following code to include this banner in your site:</p>
-<pre><a href="http://www.videolan.org/vlc"
- title="Get VLC media player -
-        It plays, it streams, it kills WiMPs!!">
-<img
- src="http://www.videolan.org/images/
-goodies/buttons_getVLC/GetVLC_110.png" width="110"
-height="45" alt="Get VLC media player" /></a>
-</pre>
-<p>
-The following sizes are available:</p>
-<ul class="bullets">
-<li>
-<a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC_110.png">Small banner</a></li>
-<li>
-<a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC_120.png">Medium banner</a></li>
-<li><a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC_150.png">Large banner</a></li>
-<li><a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC.png">Supersized banner</a></li>
-<li><a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC.psd">Original Photoshop document</a></li>
-</ul>
+        <div class="col-xs-6 col-md-3">
+            <a href="//images.videolan.org/images/goodies/Cone-List-large.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/thumbnails/cone_list.png" alt="List cone">
+            </a>
+        </div>
 
-<p>This banner was created by
-<a href="http://www.sidequest.org/">Derk-Jan Hartman</a>
-and licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">this Creative Commons License</a>.
-</p>
+    </div>
 
-<p>Another banner made by Gen:</p>
-<p><a href="http://www.videolan.org/vlc/index.html"><img src="//images.videolan.org/images/goodies/getvlc.png" class="nofix" style="vertical-align: middle; border-width: 0px;" alt="get VLC !" height="15" width="80"></a>
-</p>
+</section>
 
-<p>And another one by snis:</p>
-<p><img src="//images.videolan.org/images/goodies/videolan-community.png" alt="VideoLAN.org Community Member"><br><img src="//images.videolan.org/images/goodies/videolan-community-small.png" alt="VideoLAN.org Community Member"></p>
-<p>Get <a href="http://images.videolan.org/images/goodies/videolan-community.xcf">the sources</a>.</p>
+<hr />
 
-<p>An older banner:</p>
-<p><a href="http://www.videolan.org/vlc/index.html"><img src="//images.videolan.org/images/goodies/getvlcnow.png" style="vertical-align: middle; border-width: 0px;" alt="get VLC NOW!" height="32" width="100"></a>
-</p>
+<section>
+    <h2 id="misc">Misc Images</h2>
+    <h3>PlaysItAll</h3>
+    <p>made by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a></p>
+    <div class="row">
 
-<?php panel_end(); ?>
+        <div class="col-xs-12 col-md-6">
+            <a href="//images.videolan.org/images/goodies/vlc_playsitall.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/vlc_playsitall.png" alt="VLC - Plays it all">
+            </a>
+        </div>
 
+        <div class="col-xs-12 col-md-6">
+            <a href="//images.videolan.org/images/goodies/vlc_playsitall.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/vlc_playsitall.png" alt="VLC - Plays it all">
+            </a>
+        </div>
 
-        <div class="clearme" style='padding-top: 30px;'></div>
+    </div>
 
-        <a name="clothing"></a>
-        <h2>Clothing</h2>
+    <h3>Media Icons</h3>
+    <p>Media icons with blue strip cone made by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a></p>
 
-        <p>Soon !</p>
+    <div class="row">
 
+        <div class="col-xs-4 col-md-4">
+            <a href="//images.videolan.org/images/goodies/cone_blue_strip-video64.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/cone_blue_strip-video64.png" alt="">
+            </a>
+        </div>
 
+        <div class="col-xs-4 col-md-4">
+            <a href="//images.videolan.org/images/goodies/cone_blue_strip-audio64.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/cone_blue_strip-audio64.png" alt="">
+            </a>
+        </div>
 
+        <div class="col-xs-4 col-md-4">
+            <a href="//images.videolan.org/images/goodies/cone_blue_strip-dvd64.png" class="thumbnail">
+                <img src="//images.videolan.org/images/goodies/cone_blue_strip-dvd64.png" alt="">
+            </a>
+        </div>
 
-        <div class="clearme" style='padding-top: 30px;'></div>
+    </div>
+</section>
+
+<hr />
+
+<section>
+    <h2 id="wallpaper">Wallpapers</h2>
+
+    <div class="row">
+
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_jason.png" alt="Jason Jaeger">
+                <div class="caption">
+                    <p>by Jason Jaeger</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/v3-wallpaper_1280x1024.jpg">1280×1024</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/v3-wallpaper_1024x768.jpg">1024×768</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/v3-wallpaper_800x600.jpg">800×600</a>
+                    </p>
+                </div>
+            </div>
+        </div>
 
-        <a name="food"></a>
-        <h2>Food</h2>
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_hpep.png" alt="hpep">
+                <div class="caption">
+                    <p>by HPep</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/vlc-hpep-1024x768.jpg">1024×768</a>
+                    </p>
+                </div>
+            </div>
+        </div>
 
-            <h3>VLC Chocolate bars</h3>
-            <p>Get a hand on the famous and unique <a href="http://shop.borgodoro.it/products/vlc-chocolate">VLC Chocolate</a> made in Italia ! (from 30€/25 bars)</p>
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_day_of_cones.png" alt="hpep">
+                <div class="caption">
+                    <p>by Tom Bigelajzen</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/day-of-the-cones-ex2.jpg">1498×1001</a>
+                    </p>
+                </div>
+            </div>
+        </div>
 
-            <img width="250" height="250" src="http://cdn.shopify.com/s/files/1/0293/4893/products/borgodoro-box_1024x1024.png?v=1384180629" alt="VLC Chocolate">
+    </div>
+
+    <div class="row">
+
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_karibu_1.png" alt="Jason Jaeger">
+                <div class="caption">
+                    <p>by Emmanuel Puig (alias Karibu)</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/videolan/vl1_1600x1200.jpg">1600×1200</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/videolan/vl1_1024x768.jpg">1024×768</a>
+                    </p>
+                </div>
+            </div>
+        </div>
 
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_karibu_2.png" alt="hpep">
+                <div class="caption">
+                    <p>by Emmanuel Puig (alias Karibu)</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/videolan/vl2_1600x1131.jpg">1600×1131</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/videolan/vl2_1024x724.jpg">1024×724</a>
+                    </p>
+                </div>
+            </div>
+        </div>
 
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_karibu_3.png" alt="hpep">
+                <div class="caption">
+                    <p>by Emmanuel Puig (alias Karibu)</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/videolan/vl3_1600x1200.jpg">1600×1200</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/videolan/vl3_1024x768.jpg">1024×768</a>
+                    </p>
+                </div>
+            </div>
+        </div>
 
+    </div>
+
+    <div class="row">
+
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_garf.png" alt="">
+                <div class="caption">
+                    <p>by Simon Latapie (alias Garf)</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/videolan/vl4_2872x2154.jpg">2872×2154</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/videolan/vl4_1600x1200.jpg">1600×1200</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/videolan/vl4_1024x768.jpg">1024×768</a>
+                    </p>
+                </div>
+            </div>
+        </div>
 
-        <div class="clearme" style='padding-top: 30px;'></div>
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_wikingsoft_1.png" alt="">
+                <div class="caption">
+                    <p>by <a href="mailto:graphics at wikingsoft.net">Peter Bauer</a> from Wikingsoft</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/VideoLAN.png">640×480</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_wikingsoft_2.png" alt="">
+                <div class="caption">
+                    <p>by <a href="mailto:graphics at wikingsoft.net">Peter Bauer</a> from Wikingsoft</p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/videolan-wikingsoft2.png">1024×768</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="row">
+
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <img width="300" src="//images.videolan.org/images/goodies/thumbnails/wall_siddiqui.png" alt="">
+                <div class="caption">
+                    <p>by <a href="http://www.xtremestuff.net/">Asim Siddiqui</a></p>
+                    <p>
+                        Download:
+                        <a href="//images.videolan.org/images/goodies/videolan_org_1024x768.png">1024×768</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/videolan_org_1280x960.png">1280×960</a>
+                        /
+                        <a href="//images.videolan.org/images/goodies/videolan_org_1600x1200.png">1600×1200</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+
+    <h3>RPM Repository</h3>
+    <p>All videolan background images can now be downloaded in one RPM package. The (relocatable) package
+    has been built by <a href="http://www.jpsaman.org/">Jean-Paul Saman</a> on RH 9.0, but should also be
+    useable on SuSE, Mandrake and other RPM-aware distributions.</p>
+    <p>To install the package:</p>
+    <p>Download the rpm here: <code><a href="http://images.videolan.org/images/videolan-backgrounds-base-2-1.noarch.rpm">videolan-backgrounds-base-2-1.noarch.rpm</a></code>.</p>
+    <p>Use <code>rpm ivh -prefix=<newpath> videolan-backgrounds-base-2-1.noarch.rpm</code> to relocated the installed images to a new location on e.g: SuSE systems.</p>
+    <p>The source package can be found <a href="http://images.videolan.org/images/videolan-backgrounds-base-2-1.src.rpm">here</a>.</p>
+
+</section>
+
+<hr />
+
+<section>
+
+    <h2 id="boot">Boot Screens</h2>
+
+    <div class="row">
+
+        <div class="col-xs-12 col-md-4">
+            <div class="thumbnail">
+                <a href="//images.videolan.org/images/goodies/lilo-videolan.jpg">
+                    <img width="300" src="//images.videolan.org/images/goodies/lilo-videolan-small.jpg" alt="">
+                </a>
+                <div class="caption">
+                    <p>VideoLAN LILO bootscreen by Karibu</p>
+                    <p>
+                        <a href="//images.videolan.org/images/goodies/lilo-videolan.tar.gz">Download</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</section>
 
-        <a name="stationery"></a>
-        <h2>Stationeries</h2>
+<hr />
 
-            <h3>VLC Stickers and Bumpers</h3>
+<section>
 
-            <p>Stickers designed to customize your notebook, pc, workstation, server with a professional look and a fresh design, at <a href="http://www.unixstickers.com/vlc-videolan-software-shaped-sticker">UnixStickers</a></p>
-            <img width="180" height="180" src="http://www.unixstickers.com/image/cache/data/stickers/vlc/vlc_bumper.sh-180x180.png" alt="VLC Stickers">
+    <h2 id="banners">Banners</h2>
 
+    <p class="center"><a href="http://www.videolan.org/vlc" title="Get VLC media player - It plays, it streams, it kills WiMPs!!">
+    <img src="//images.videolan.org/images/goodies/buttons_getVLC/GetVLC_110.png" alt="Get VLC media player" height="45" width="110"></a></p>
+    <p>
+    Use the following code to include this banner in your site:</p>
+    <pre><a href="http://www.videolan.org/vlc"
+     title="Get VLC media player -
+            It plays, it streams, it kills WiMPs!!">
+    <img
+     src="http://www.videolan.org/images/
+    goodies/buttons_getVLC/GetVLC_110.png" width="110"
+    height="45" alt="Get VLC media player" /></a>
+    </pre>
+    <p>
+    The following sizes are available:</p>
+    <ul class="bullets">
+    <li>
+    <a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC_110.png">Small banner</a></li>
+    <li>
+    <a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC_120.png">Medium banner</a></li>
+    <li><a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC_150.png">Large banner</a></li>
+    <li><a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC.png">Supersized banner</a></li>
+    <li><a href="http://images.videolan.org/images/goodies/buttons_getVLC/GetVLC.psd">Original Photoshop document</a></li>
+    </ul>
 
-            <p>Another set of stickers is provided by <a href="http://www.it2l.com/videolan-vlc-d-31.html">it2l</a> (shipping only to France)</p>
+    <p>This banner was created by
+    <a href="http://www.sidequest.org/">Derk-Jan Hartman</a>
+    and licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">this Creative Commons License</a>.
+    </p>
+
+    <p>Another banner made by Gen:</p>
+    <p><a href="http://www.videolan.org/vlc/index.html"><img src="//images.videolan.org/images/goodies/getvlc.png" class="nofix" style="vertical-align: middle; border-width: 0px;" alt="get VLC !" height="15" width="80"></a>
+    </p>
+
+    <p>And another one by snis:</p>
+    <p><img src="//images.videolan.org/images/goodies/videolan-community.png" alt="VideoLAN.org Community Member"><br><img src="//images.videolan.org/images/goodies/videolan-community-small.png" alt="VideoLAN.org Community Member"></p>
+    <p>Get <a href="http://images.videolan.org/images/goodies/videolan-community.xcf">the sources</a>.</p>
+
+    <p>An older banner:</p>
+    <p><a href="http://www.videolan.org/vlc/index.html"><img src="//images.videolan.org/images/goodies/getvlcnow.png" style="vertical-align: middle; border-width: 0px;" alt="get VLC NOW!" height="32" width="100"></a>
+    </p>
+
+</section>
+
+<hr />
+
+<section>
+
+    <h2 id="clothing">Clothing</h2>
+    <p>Soon!</p>
+
+</section>
+
+<hr />
+
+<section>
+
+    <h2 id="food">Food</h2>
+
+    <h3>VLC Chocolate bars</h3>
+    <p>
+        Get a hand on the famous and unique <a href="http://shop.borgodoro.it/products/vlc-chocolate">VLC Chocolate</a> made in Italia ! (from 30€/25 bars)
+    </p>
+
+    <img width="250" height="250" src="http://cdn.shopify.com/s/files/1/0293/4893/products/borgodoro-box_1024x1024.png?v=1384180629" alt="VLC Chocolate">
+
+</section>
+
+<hr />
+
+<section>
+
+    <h2 id="stationery">Stationeries</h2>
+
+    <h3>VLC Stickers and Bumpers</h3>
+    <p>
+        Stickers designed to customize your notebook, pc, workstation, server with a professional look and a fresh design, at <a href="http://www.unixstickers.com/vlc-videolan-software-shaped-sticker">UnixStickers</a>
+    </p>
+
+    <img width="180" height="180" src="http://www.unixstickers.com/image/cache/data/stickers/vlc/vlc_bumper.sh-180x180.png" alt="VLC Stickers">
+
+    <p>Another set of stickers is provided by <a href="http://www.it2l.com/videolan-vlc-d-31.html">it2l</a> (shipping only to France)</p>
+
+</section>
+
+</div>
 
 <?php footer('$Id: goodies.php  4462 2008-02-23 13:20 altglass$'); ?>


=====================================
www.videolan.org/images/goodies/thumbnails/cone_26xPG.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_26xPG.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_8oPi.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_8oPi.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_FQCw.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_FQCw.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_RNF1.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_RNF1.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_altglass_1.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_altglass_1.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_altglass_2.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_altglass_2.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_audio.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_audio.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_blue_strip.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_blue_strip.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_blue_strip_orange.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_blue_strip_orange.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_buB2.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_buB2.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_eT5x.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_eT5x.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_f9my.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_f9my.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_forum.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_forum.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_gA4v.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_gA4v.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_i2Es.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_i2Es.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_icon_transparent.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_icon_transparent.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_input.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_input.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_interface.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_interface.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_list.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_list.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_nightly.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_nightly.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_noyel.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_noyel.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_original.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_original.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_osx.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_osx.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_raGi.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_raGi.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_screaming.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_screaming.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_shortcuts.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_shortcuts.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_snowman.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_snowman.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_soppera_1.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_soppera_1.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_soppera_10.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_soppera_10.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_soppera_2.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_soppera_2.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_soppera_3.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_soppera_3.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_subs.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_subs.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/cone_video.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/cone_video.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_day_of_cones.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_day_of_cones.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_garf.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_garf.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_hpep.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_hpep.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_jason.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_jason.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_karibu_1.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_karibu_1.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_karibu_2.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_karibu_2.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_karibu_3.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_karibu_3.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_siddiqui.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_siddiqui.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_wikingsoft_1.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_wikingsoft_1.png differ


=====================================
www.videolan.org/images/goodies/thumbnails/wall_wikingsoft_2.png
=====================================
Binary files /dev/null and b/www.videolan.org/images/goodies/thumbnails/wall_wikingsoft_2.png differ



View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/commit/3aca2edb08b5d27edfbd348f3ffbf5f98381a2c3
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/www-doc/attachments/20160701/ece13e3c/attachment.html>


More information about the www-doc mailing list