<html lang='en'>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<title>
GitLab
</title>
</meta>
</head>
<style>
  img {
    max-width: 100%;
    height: auto;
  }
  p.details {
    font-style:italic;
    color:#777
  }
  .footer p {
    font-size:small;
    color:#777
  }
  pre.commit-message {
    white-space: pre-wrap;
  }
  .file-stats a {
    text-decoration: none;
  }
  .file-stats .new-file {
    color: #090;
  }
  .file-stats .deleted-file {
    color: #B00;
  }
</style>
<body>
<div class='content'>
<h3>Jean-Baptiste Kempf pushed to branch master at <a href="https://code.videolan.org/VideoLAN.org/websites">VideoLAN organization / websites</a></h3>
<h4>
Commits:
</h4>
<ul>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/f50327cb834f2fdf65b54dd88afb89fc3eb537e6">f50327cb</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>Add features styles

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/21b724248e9668706c1da4c1ec747547691f5c07">21b72424</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>Add check outline SVG icon

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/8ebd0883be1a09fea0eaad88059cf1e058e05527">8ebd0883</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>vlc page: add main features

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/46bfc740707519cd580824354080c6ab1fc85957">46bfc740</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>style: add v-align mixin

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/1ee833450d0a4bd94bf8bb9ba618b68b4fc45fec">1ee83345</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>home: remove unused additional css & js

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/7dc012900c8808524bd7f96040819bcbf77c5fa1">7dc01290</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>vlc page: improve design of features section

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/b2b408e464b008a78749667ab5535c73ca6b865f">b2b408e4</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>Add carousel of 4/3 screenshots

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/4bd87dc4beb059d14af07f9952699953f175cf73">4bd87dc4</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>Add more Windows screenshots

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/f60b1cca6439ccf9c187b4e2f701cbcbe04f5f33">f60b1cca</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>features page: hide AV/filters & AV/outputs

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
<li>
<strong><a href="https://code.videolan.org/VideoLAN.org/websites/commit/a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55">a675f8ed</a></strong>
<div>
<span>by David Loiret</span>
<i>at 2016-01-20T19:38:23Z</i>
</div>
<pre class='commit-message'>features page: use Bootstrap responsive layout

Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org></pre>
</li>
</ul>
<h4>8 changed files:</h4>
<ul>
<li class='file-stats'>
<a href='#diff-0'>
<span class='new-file'>
+
www.videolan.org/images/icons/check-outline.svg
</span>
</a>
</li>
<li class='file-stats'>
<a href='#diff-1'>
www.videolan.org/include/os-specific.php
</a>
</li>
<li class='file-stats'>
<a href='#diff-2'>
www.videolan.org/index.php
</a>
</li>
<li class='file-stats'>
<a href='#diff-3'>
www.videolan.org/js/slick-init.js
</a>
</li>
<li class='file-stats'>
<a href='#diff-4'>
www.videolan.org/style/mixins.scss
</a>
</li>
<li class='file-stats'>
<a href='#diff-5'>
www.videolan.org/style/style.scss
</a>
</li>
<li class='file-stats'>
<a href='#diff-6'>
www.videolan.org/vlc/features.php
</a>
</li>
<li class='file-stats'>
<a href='#diff-7'>
www.videolan.org/vlc/index.php
</a>
</li>
</ul>
<h4>Changes:</h4>
<li id='diff-0'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-0'>
<strong>
www.videolan.org/images/icons/check-outline.svg
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- /dev/null
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/images/icons/check-outline.svg
</span><span style="color: #aaaaaa">@@ -0,0 +1,5 @@
</span><span style="color: #000000;background-color: #ddffdd">+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="32" viewBox="0 0 36 32">
+<path fill="#444" d="M30 0l-18 20-6.4-6.4-5.6 6.4 12 12 24-25.6z"></path>
+</svg>
</span></code></pre>

<br>
</li>
<li id='diff-1'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-1'>
<strong>
www.videolan.org/include/os-specific.php
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/include/os-specific.php
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/include/os-specific.php
</span><span style="color: #aaaaaa">@@ -352,6 +352,22 @@ function getScreenshots($os) {
</span>             array(
                 "name"  => "VLC media player - Windows 7 - Qt Interface",
                 "src"   => "//images.videolan.org/vlc/screenshots/1.0.0/vlc_101_w7_2.jpg"
<span style="color: #000000;background-color: #ddffdd">+            ),
+            array(
+                "name"  => "VLC media player - Windows Vista - Qt Interface",
+                "src"   => "//images.videolan.org/vlc/screenshots/1.0.0/VLC_Qt4.jpg"
+            ),
+            array(
+                "name"  => "VLC media player - Windows 7 - Qt Interface",
+                "src"   => "//images.videolan.org/vlc/screenshots/1.0.0/vlc_101_w7_1.jpg"
+            ),
+            array(
+                "name"  => "VLC media player - Windows Vista - Skins Interface",
+                "src"   => "//images.videolan.org/vlc/screenshots/1.0.0/VLC_Goldneye.jpg"
+            ),
+            array(
+                "name"  => "VLC media player - Windows 7 - Qt Interface",
+                "src"   => "//images.videolan.org/vlc/screenshots/1.0.0/vlc_101_w7.jpg"
</span>             )
         ),
         "linux" => array(
</code></pre>

<br>
</li>
<li id='diff-2'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-2'>
<strong>
www.videolan.org/index.php
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/index.php
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/index.php
</span><span style="color: #aaaaaa">@@ -4,8 +4,8 @@ $language = "";
</span> $title = _("VLC: Official site - Free multimedia solutions for all OS!");
 $body_color = "blue";
 $new_design = true;
<span style="color: #000000;background-color: #ffdddd">-$additional_js = array("/js/slimbox2.js", "/js/slick-init.js", "/js/slick.min.js");
-$additional_css = array("/js/css/slimbox2.css", "/style/slick.min.css");
</span><span style="color: #000000;background-color: #ddffdd">+$additional_js = array("/js/slick-init.js", "/js/slick.min.js");
+$additional_css = array("/style/slick.min.css");
</span> 
 require($_SERVER["DOCUMENT_ROOT"] . "/include/language.php");
 require($_SERVER["DOCUMENT_ROOT"] . "/include/header.php");
</code></pre>

<br>
</li>
<li id='diff-3'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-3'>
<strong>
www.videolan.org/js/slick-init.js
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/js/slick-init.js
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/js/slick-init.js
</span><span style="color: #aaaaaa">@@ -7,11 +7,27 @@ $(document).ready(function() {
</span>         autoplaySpeed: 3000,
         infinite: true,
         responsive: [{
<span style="color: #000000;background-color: #ffdddd">-            breakpoint: 767,
</span><span style="color: #000000;background-color: #ddffdd">+            breakpoint: 768,
</span>             settings: {
                 arrows: false,
                 autoplay: false
             }
         }]
     });
<span style="color: #000000;background-color: #ddffdd">+
+    $('#content-carousel').slick({
+        centerMode: true,
+        slidesToShow: 8,
+        slidesToScroll: 2,
+        variableWidth: true,
+        responsive: [{
+            breakpoint: 768,
+            settings: {
+                arrows: false,
+                autoplay: false,
+                centerMode: true,
+                slidesToShow: 3
+            }
+        }]
+    });
</span> });
</code></pre>

<br>
</li>
<li id='diff-4'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-4'>
<strong>
www.videolan.org/style/mixins.scss
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/style/mixins.scss
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/style/mixins.scss
</span><span style="color: #aaaaaa">@@ -26,3 +26,10 @@
</span>     bottom: 0;
   }
 }
<span style="color: #000000;background-color: #ddffdd">+
+@mixin v-align() {
+    display: inline-block;
+    float: none;
+    vertical-align: middle;
+    margin-right: -4px;
+}
</span></code></pre>

<br>
</li>
<li id='diff-5'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-5'>
<strong>
www.videolan.org/style/style.scss
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/style/style.scss
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/style/style.scss
</span><span style="color: #aaaaaa">@@ -943,82 +943,6 @@ img, .normalButton {
</span>     font-size: 14px;
 }
 
<span style="color: #000000;background-color: #ffdddd">-/* Media queries */
-
-@media (min-width: 768px) and (max-width: 991px) {
-    .center-sm {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    .center-font-sm {
-        text-align: center;
-    }
-    .new-design {
-        h1.bigtitle {
-            font-size: 36px;
-        }
-    }
-}
-
-@media (max-width: 767px) {
-    .donate2 {
-        padding-right: 10px;
-    }
-    .donate2 button {
-        height: 30px;
-        padding: 5px;
-    }
-    .center-xs {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    .center-font-xs {
-        text-align: center;
-    }
-    .new-design .download-wrapper {
-        padding-bottom: 10px;
-        .big-vlc-img {
-            width: 44px;
-            margin: 0 6px 12px -6px;
-        }
-        h1.bigtitle {
-            font-size: 32px;
-        }
-        .projectDescription {
-            font-size: 14px;
-        }
-    }
-    //Fix Bootstrap bug on mobile
-    .caret {
-        border-top: 4px solid;
-    }
-    #nonprofitOrganizationDiv2 {
-        margin-top: 5px;
-        margin-bottom: 5px;
-        font-size: 16px;
-    }
-    .row.reorder-xs {
-        @include rotate(180deg);
-    }
-    .row.reorder-xs > [class*="col-"] {
-        @include rotate(-180deg);
-    }
-    html[dir="rtl"] .row.reorder-xs {
-        direction: ltr;
-    }
-    html[dir="rtl"] .row.reorder-xs {
-        direction: ltr;
-    }
-    html[dir="rtl"] .row.reorder-xs > [class*="col-"] {
-        direction: rtl; /* Fix the horizontal alignment */
-    }
-    .carousel-padding-xs {
-        padding: 20px 0 0 0;
-    }
-}
-
</span> /* ============================ BOOTSTRAP ADJUSTMENTS =========================== */
 
 .btn {
<span style="color: #aaaaaa">@@ -1046,10 +970,7 @@ img, .normalButton {
</span> }
 
 .v-align {
<span style="color: #000000;background-color: #ffdddd">-    display: inline-block;
-    float: none;
-    vertical-align: middle;
-    margin-right: -4px;
</span><span style="color: #000000;background-color: #ddffdd">+    @include v-align();
</span> }
 
 /* ============================ VLC Download =========================== */
<span style="color: #aaaaaa">@@ -1145,3 +1066,165 @@ a.icon {
</span>     text-align: center;
     padding-top: 10px;
 }
<span style="color: #000000;background-color: #ddffdd">+
+.bg-gray {
+    background-color: #f7f7f7;
+}
+
+//Features
+.features {
+    $left: 19px;
+    padding: 50px 15px;
+    h2 {
+        font-size: 26px;
+        margin-bottom: 16px;
+    }
+    p, li, li a {
+        color: rgb(77, 77, 77);
+        font-size: 16px;
+        line-height: 24px;
+    }
+    /*
+    img {
+        margin-top: -30px;
+    }
+    */
+    .feat-margin-left {
+        margin-left: $left;
+    }
+    ul {
+        margin-left: $left;
+        li {
+            margin-bottom: 16px;
+            &:before {
+                content: '';
+                display: inline-block;
+                height: 16px;
+                width: 16px;
+                background-image: url('/images/icons/check-outline.svg');
+                background-size: contain;
+                background-repeat: no-repeat;
+                padding-left: $left;
+            }
+        }
+    }
+}
+
+.screenshot-4-3-responsive {
+    @include aspect-ratio(4, 3);
+    display: inline-block;/* no js */
+    overflow: hidden;
+    margin: 0 5px;
+}
+
+.screenshot-small {
+    width: 120px;
+}
+
+/* Media queries */
+@media (max-width: 991px) {
+    .features .items {
+        padding-top: 26px;
+    }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+    .v-align-md {
+        @include v-align();
+    }
+}
+
+@media (min-width: 1200px) {
+    .v-align-lg {
+        @include v-align();
+    }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .center-sm {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .center-font-sm {
+        text-align: center;
+    }
+    .new-design {
+        h1.bigtitle {
+            font-size: 36px;
+        }
+    }
+    .row.reorder-sm {
+        @include rotate(180deg);
+    }
+    .row.reorder-sm > [class*="col-"] {
+        @include rotate(-180deg);
+    }
+    html[dir="rtl"] .row.reorder-sm {
+        direction: ltr;
+    }
+    html[dir="rtl"] .row.reorder-sm {
+        direction: ltr;
+    }
+    html[dir="rtl"] .row.reorder-sm > [class*="col-"] {
+        direction: rtl; /* Fix the horizontal alignment */
+    }
+}
+
+@media (max-width: 767px) {
+    .donate2 {
+        padding-right: 10px;
+    }
+    .donate2 button {
+        height: 30px;
+        padding: 5px;
+    }
+    .center-xs {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .center-font-xs {
+        text-align: center;
+    }
+    .new-design .download-wrapper {
+        padding-bottom: 10px;
+        .big-vlc-img {
+            width: 44px;
+            margin: 0 6px 12px -6px;
+        }
+        h1.bigtitle {
+            font-size: 32px;
+        }
+        .projectDescription {
+            font-size: 14px;
+        }
+    }
+    //Fix Bootstrap bug on mobile
+    .caret {
+        border-top: 4px solid;
+    }
+    #nonprofitOrganizationDiv2 {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        font-size: 16px;
+    }
+    .row.reorder-xs {
+        @include rotate(180deg);
+    }
+    .row.reorder-xs > [class*="col-"] {
+        @include rotate(-180deg);
+    }
+    html[dir="rtl"] .row.reorder-xs {
+        direction: ltr;
+    }
+    html[dir="rtl"] .row.reorder-xs {
+        direction: ltr;
+    }
+    html[dir="rtl"] .row.reorder-xs > [class*="col-"] {
+        direction: rtl; /* Fix the horizontal alignment */
+    }
+    .carousel-padding-xs {
+        padding: 20px 0 0 0;
+    }
+}
</span></code></pre>

<br>
</li>
<li id='diff-6'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-6'>
<strong>
www.videolan.org/vlc/features.php
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/vlc/features.php
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/vlc/features.php
</span><span style="color: #aaaaaa">@@ -486,65 +486,66 @@ if(!isset($_GET['fdiv'])) {
</span>    $title = "VLC - Features";
    $lang = "en";
    $menu = array( "vlc", "features" );
<span style="color: #000000;background-color: #ddffdd">+   $new_design = true;
</span>    $additional_css = array("/vlc/features.css");
    require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
 ?>
<span style="color: #000000;background-color: #ffdddd">-
-<h1>VLC playback Features</h1>
-<table class="feature-table">
-  <tr>
-    <td class="feature-cat-list">
-        <!--Categories-->
-        <?php
-        $cat = "input";
-        if (isset($_GET['cat'])) {
-            $cat = $_GET['cat'];
-        }
-
-        function getActiveCat($currentCat) {
-            global $cat;
-            echo $currentCat == $cat ? 'cat-active' : '';
-        }
-        ?>
-        <a class="feature-cat <?php getActiveCat('input'); ?>" id="cat-input" href="/vlc/features.php?cat=input">Input formats</a>
-        <a class="feature-cat <?php getActiveCat('video'); ?>" id="cat-video" href="/vlc/features.php?cat=video">Video formats</a>
-        <a class="feature-cat <?php getActiveCat('audio'); ?>" id="cat-audio" href="/vlc/features.php?cat=audio">Audio formats</a>
-        <a class="feature-cat <?php getActiveCat('sub'); ?>" id="cat-sub" href="/vlc/features.php?cat=sub">Subtitle/Tag formats</a>
-        <a class="feature-cat <?php getActiveCat('av'); ?>" id="cat-av" href="/vlc/features.php?cat=av">A/V outputs</a>
-        <a class="feature-cat <?php getActiveCat('filters'); ?>" id="cat-filters" href="/vlc/features.php?cat=filters">A/V filters</a>
-        <a class="feature-cat <?php getActiveCat('intf'); ?>" id="cat-intf" href="/vlc/features.php?cat=intf">Interfaces</a>
-        <a class="feature-cat <?php getActiveCat('misc'); ?>" id="cat-misc" href="/vlc/features.php?cat=misc">Miscellaneous</a>
-    </td>
-    <td class="feature-list">
-      <div class="feature-div">
-        <?php
-          if($cat=="input") writeInputFeatures();
-          else if($cat=="video") writeVideoFeatures();
-          else if($cat=="audio") writeAudioFeatures();
-          else if($cat=="sub") writeSubFeatures();
-          else if($cat=="av") writeAVFeatures();
-          else if($cat=="filters") writeFilterFeatures();
-          else if($cat=="intf") writeIntfFeatures();
-          else if($cat=="misc") writeMiscFeatures();
-        ?>
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td></td>
-    <td>
-      <ul class="feature-icon list-inline">
-        <li><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> = Yes</li>
-        <li><img src="http://images.videolan.org/images/features/partial.png" alt="Partial" /> = Partial</li>
-        <li><img src="http://images.videolan.org/images/features/cross.png" alt="No" /> = No</li>
-        <li><img src="http://images.videolan.org/images/features/untested.png" alt="Untested" /> = Untested</li>
-      </ul>
-    </td>
-  </tr>
-</table>
-<h2>Streaming</h2>
-<p>See the <a href="/streaming-features.html">Streaming features page</a></p>
-<br/>
</span><span style="color: #000000;background-color: #ddffdd">+<div class="container">
+    <h1>VLC playback Features</h1>
+    <table class="feature-table">
+    <tr>
+        <td class="feature-cat-list">
+            <!--Categories-->
+            <?php
+            $cat = "input";
+            if (isset($_GET['cat'])) {
+                $cat = $_GET['cat'];
+            }
+
+            function getActiveCat($currentCat) {
+                global $cat;
+                echo $currentCat == $cat ? 'cat-active' : '';
+            }
+            ?>
+            <a class="feature-cat <?php getActiveCat('input'); ?>" id="cat-input" href="/vlc/features.php?cat=input">Input formats</a>
+            <a class="feature-cat <?php getActiveCat('video'); ?>" id="cat-video" href="/vlc/features.php?cat=video">Video formats</a>
+            <a class="feature-cat <?php getActiveCat('audio'); ?>" id="cat-audio" href="/vlc/features.php?cat=audio">Audio formats</a>
+            <a class="feature-cat <?php getActiveCat('sub'); ?>" id="cat-sub" href="/vlc/features.php?cat=sub">Subtitle/Tag formats</a>
+            <!--<a class="feature-cat <?php getActiveCat('av'); ?>" id="cat-av" href="/vlc/features.php?cat=av">A/V outputs</a>-->
+            <!--<a class="feature-cat <?php getActiveCat('filters'); ?>" id="cat-filters" href="/vlc/features.php?cat=filters">A/V filters</a>-->
+            <a class="feature-cat <?php getActiveCat('intf'); ?>" id="cat-intf" href="/vlc/features.php?cat=intf">Interfaces</a>
+            <a class="feature-cat <?php getActiveCat('misc'); ?>" id="cat-misc" href="/vlc/features.php?cat=misc">Miscellaneous</a>
+        </td>
+        <td class="feature-list">
+        <div class="feature-div">
+            <?php
+            if($cat=="input") writeInputFeatures();
+            else if($cat=="video") writeVideoFeatures();
+            else if($cat=="audio") writeAudioFeatures();
+            else if($cat=="sub") writeSubFeatures();
+            else if($cat=="av") writeAVFeatures();
+            else if($cat=="filters") writeFilterFeatures();
+            else if($cat=="intf") writeIntfFeatures();
+            else if($cat=="misc") writeMiscFeatures();
+            ?>
+        </div>
+        </td>
+    </tr>
+    <tr>
+        <td></td>
+        <td>
+        <ul class="feature-icon list-inline">
+            <li><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> = Yes</li>
+            <li><img src="http://images.videolan.org/images/features/partial.png" alt="Partial" /> = Partial</li>
+            <li><img src="http://images.videolan.org/images/features/cross.png" alt="No" /> = No</li>
+            <li><img src="http://images.videolan.org/images/features/untested.png" alt="Untested" /> = Untested</li>
+        </ul>
+        </td>
+    </tr>
+    </table>
+    <h2>Streaming</h2>
+    <p>See the <a href="/streaming-features.html">Streaming features page</a></p>
+</div>
</span> <?php footer('$Id: features.php 4814 2008-12-12 13:30 CEST altglass $'); ?>
 <?php
 } else {
</code></pre>

<br>
</li>
<li id='diff-7'>
<a href='https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55#diff-7'>
<strong>
www.videolan.org/vlc/index.php
</strong>
</a>
<hr>
<pre class="highlight"><code><span style="color: #000000;background-color: #ffdddd">--- a/www.videolan.org/vlc/index.php
</span><span style="color: #000000;background-color: #ddffdd">+++ b/www.videolan.org/vlc/index.php
</span><span style="color: #aaaaaa">@@ -12,132 +12,175 @@
</span>    require($_SERVER["DOCUMENT_ROOT"]."/include/os-specific.php");
    
    function vlcscreenshot($img, $thumb, $desc) {
<span style="color: #000000;background-color: #ffdddd">-        echo"<div class='screenshot' style='overflow: hidden; width: 120px;'><a href='http://images.videolan.org/vlc/screenshots/$img' rel='lightbox-vlc'><img
</span><span style="color: #000000;background-color: #ddffdd">+        echo"<div class='screenshot-4-3-responsive screenshot-small'><a href='http://images.videolan.org/vlc/screenshots/$img' rel='lightbox-vlc'><img
</span>         src='//images.videolan.org/vlc/screenshots/$thumb' alt='VLC media player - $desc' /></a>
         </div>";
     }
<span style="color: #000000;background-color: #ffdddd">-    
</span><span style="color: #000000;background-color: #ddffdd">+
</span>     function addos($name, $class, $url, $bold=false) {
         echo "<div class='$class'>"._("Get VLC for")." <a href='$url'><strong>$name</strong></a></div>";
     }
 ?>
 <div class="container">
     <?php drawVLCdownloadSection(); ?>
<span style="color: #000000;background-color: #ffdddd">-    <div class="row">
-        <div class="col-sm-6 padding-bottom-24">
-           <h1 style='margin-bottom: 25px;' class='red'><?php echo _("Features"); ?></h1>
-            <?php echo _("Simple, fast and powerful media player."); ?>
-            <br /><br />
-            <?php echo _("Plays everything: Files, Discs, Webcams, Devices and Streams."); ?>
-            <br /><br />
-            <?php echo _("Plays most codecs with no codec packs needed:")."<br />
-                MPEG-2, MPEG-4, H.264, MKV, WebM, WMV, MP3..."; ?>
-            <br /><br />
-            <?php echo _("Runs on all platforms:")." Windows, Linux, Mac OS X, Unix..."; ?>
-            <br /><br />
-            <?php echo _("Completely Free, no spyware, no ads and no user tracking."); ?>
-            <br /><br />
-            <?php echo _("Can do media conversion and streaming."); ?>
-            <br />
-            <a class="extra-info-link2 padding-top" href='/vlc/features.html'><?php echo _("Discover all features"); ?></a> 
-        </div>
-
-        <div class="col-sm-6 padding-bottom-24">
-            <h1 style='margin-bottom: 25px;' class='red'><?php echo _("Screenshots"); ?></h1>
-            <?php
-            vlcscreenshot( "1.0.0/VLC_Gnome.png",
-                           "1.0.0/tm_VLC_Gnome.jpg",
-                           "Linux - Gnome");
-            vlcscreenshot( "1.0.0/vlc_101_w7_2.jpg",
-                           "1.0.0/tm_vlc_101_w7_2.jpg",
-                           "Windows 7 - Qt Interface" );
-            vlcscreenshot( "1.0.0/vlc_101_w7_1.jpg",
-                           "1.0.0/tm_vlc_101_w7_1.jpg",
-                           "Windows 7 - Qt Interface" );
-            vlcscreenshot( "1.0.0/vlc_101_w7.jpg",
-                           "1.0.0/tm_vlc_101_w7.jpg",
-                           "Windows 7 - Qt Interface" );
-            vlcscreenshot( "1.0.0/VLC_Goldneye.jpg",
-                           "1.0.0/tm_VLC_Goldneye.jpg",
-                           "Windows Vista - Skins Interface" );
-            vlcscreenshot( "1.0.0/VLC_Qt4.jpg",
-                           "1.0.0/tm_VLC_Qt4.jpg",
-                           "Windows Vista - Qt Interface" );
-            vlcscreenshot( "appletv/Apple-TV-device-playback-large.jpg",
-                           "appletv/tm_Apple-TV-device-playback.jpg",
-                           "VLC on Apple TV" );
-            vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback-dark.jpg",
-                           "2.2.0/tm_vlc-2.2-macosx-playback-dark.jpg",
-                           "VLC on OS X" );
-            vlcscreenshot( "2.2.0/vlc-2.2-macosx-audio-playback-dark.jpg",
-                           "2.2.0/tm_vlc-2.2-macosx-audio-playback-dark.jpg",
-                           "VLC on OS X" );
-            vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback.jpg",
-                           "2.2.0/tm_vlc-2.2-macosx-playback.jpg",
-                           "VLC on OS X" );
-            vlcscreenshot( "2.2.0/vlc-ios-2.4-ipad-library-large.jpg",
-                           "2.2.0/tm_vlc-ios-2.4-ipad-library.jpg",
-                           "VLC on iPad" );
-            vlcscreenshot( "winrt/artistpage-medium.jpg",
-                           "winrt/tm_artistpage.jpg",
-                           "VLC for Windows Store (Windows 10)" );
-            ?>
-            <div class="ltrClearLeft">
</span><span style="color: #000000;background-color: #ddffdd">+</div>
+<section class="features bg-gray">
+    <div class="container">
+        <h2 class="visible-xs visible-sm center-font-xs center-font-sm"><?php echo _("Simple, fast and powerful"); ?></h2>
+        <div class="row reorder-sm reorder-xs">
+            <div class="items col-md-7 col-md-offset-1 col-md-pull-1 v-align-md v-align-lg">
+                <h2 class="hidden-xs hidden-sm"><?php echo _("Simple, fast and powerful"); ?></h2>
+                <ul>
+                    <li>
+                        <?php echo "<b>"._("Plays everything")."</b> - "._("Files, Discs, Webcams, Devices and Streams."); ?>
+                    </li>
+                    <li>
+                        <?php echo "<b>"._("Plays most codecs with no codec packs needed")."</b> - MPEG-2, MPEG-4, H.264, MKV, WebM, WMV, MP3..."; ?>
+                    </li>
+                    <li>
+                        <?php echo "<b>"._("Runs on all platforms")."</b> - Windows, Linux, Mac OS X, Unix, iOS, Android ..."; ?>
+                    </li>
+                    <li>
+                        <?php echo "<b>"._("Completely Free")."</b> - "._("no spyware, no ads and no user tracking."); ?>
+                    </li>
+                </ul>
+                <a class="feat-margin-left extra-info-link2 padding-top" href='/vlc/features.html'><?php echo _("learn more"); ?></a>
+            </div>
+            <div class="col-md-4 v-align-md v-align-lg">
+                <img src="//images.videolan.org/vlc/screenshots/android/playback-medium.jpg" class="center-sm center-xs img-responsive">
</span>             </div>
<span style="color: #000000;background-color: #ffdddd">-            <a class="extra-info-link2 padding-top" style='padding-left: 5px;' href='/vlc/screenshots.html'><?php echo _("View all screenshots"); ?></a>
</span>         </div>
     </div>
<span style="color: #000000;background-color: #ffdddd">-
-    <div class="row">
-        <div class="col-md-12">
-            <h1><a name="download"><?php echo _("Official Downloads of VLC media player"); ?> </a></h1>
</span><span style="color: #000000;background-color: #ddffdd">+</section>
+<section class="features">
+    <div class="container">
+        <h2 class="visible-xs visible-sm center-font-xs center-font-sm"><?php echo _("Customize"); ?></h2>
+        <div class="row">
+            <div class="col-md-4 v-align-md v-align-lg col-md-offset-1 col-md-pull-1">
+                <img src="//images.videolan.org/images/screenshots/skins.png" class="center-xs center-sm img-responsive">
+            </div>
+            <div class="items v-align-md v-align-lg col-md-7">
+                <h2 class="hidden-xs hidden-sm"><?php echo _("Customize"); ?></h2>
+                <ul>
+                    <li>
+                         <a href="/vlc/skins.html"><?php echo _("Add")." <b>"._("skins")."</b>."; ?></a>
+                    </li>
+                    <li>
+                         <a href="/vlc/skineditor.html"><?php echo _("Create skins with")." <b>"._("VLC skin editor")."</b>."; ?></a>
+                    </li>
+                    <li>
+                        <a href="http://addons.videolan.org/index.php?xcontentmode=903"><?php echo _("Install")." <b>"._("extensions")."</b>."; ?></a>
+                    </li>
+                </ul>
+            </div>
</span>         </div>
<span style="color: #000000;background-color: #ffdddd">-        <div class="col-sm-4">
-            <h2>Windows</h2>
-            <?php addos( "Windows", "windows", "download-windows.html", true ); ?>
-            <?php addos( "Windows Store", "winrt", "download-winrt.html" ); ?>
-            <?php addos( "Windows Phone", "windowsphone", "download-windowsphone.html" ); ?>
-            <h2>Apple Platforms</h2>
-            <?php addos( "Mac&nbsp;OS&nbsp;X", "macosx", "download-macosx.html", true );
-                  addos( "iOS", "ios", "download-ios.html" );
-                  addos( "Apple TV", "appletv", "download-appletv.html" ); ?>
-            <h2><?php echo _("Sources"); ?></h2>
-            <p><?php echo _("You can also directly get the").' <strong><a href="download-sources.html">'
-                ._("source code").'</a></strong>.</p>'; ?>
</span><span style="color: #000000;background-color: #ddffdd">+    </div>
+</section>
+<section class="bg-gray">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12 padding-bottom-24">
+                <h1 style='margin-bottom: 25px;' class='red'><?php echo _("Screenshots"); ?></h1>
+                <div id="content-carousel">
+                    <?php
+                    vlcscreenshot( "1.0.0/VLC_Gnome.png",
+                                "1.0.0/tm_VLC_Gnome.jpg",
+                                "Linux - Gnome");
+                    vlcscreenshot( "1.0.0/vlc_101_w7_2.jpg",
+                                "1.0.0/tm_vlc_101_w7_2.jpg",
+                                "Windows 7 - Qt Interface" );
+                    vlcscreenshot( "1.0.0/vlc_101_w7_1.jpg",
+                                "1.0.0/tm_vlc_101_w7_1.jpg",
+                                "Windows 7 - Qt Interface" );
+                    vlcscreenshot( "1.0.0/vlc_101_w7.jpg",
+                                "1.0.0/tm_vlc_101_w7.jpg",
+                                "Windows 7 - Qt Interface" );
+                    vlcscreenshot( "1.0.0/VLC_Goldneye.jpg",
+                                "1.0.0/tm_VLC_Goldneye.jpg",
+                                "Windows Vista - Skins Interface" );
+                    vlcscreenshot( "1.0.0/VLC_Qt4.jpg",
+                                "1.0.0/tm_VLC_Qt4.jpg",
+                                "Windows Vista - Qt Interface" );
+                    vlcscreenshot( "appletv/Apple-TV-device-playback-large.jpg",
+                                "appletv/tm_Apple-TV-device-playback.jpg",
+                                "VLC on Apple TV" );
+                    vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback-dark.jpg",
+                                "2.2.0/tm_vlc-2.2-macosx-playback-dark.jpg",
+                                "VLC on OS X" );
+                    vlcscreenshot( "2.2.0/vlc-2.2-macosx-audio-playback-dark.jpg",
+                                "2.2.0/tm_vlc-2.2-macosx-audio-playback-dark.jpg",
+                                "VLC on OS X" );
+                    vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback.jpg",
+                                "2.2.0/tm_vlc-2.2-macosx-playback.jpg",
+                                "VLC on OS X" );
+                    vlcscreenshot( "2.2.0/vlc-ios-2.4-ipad-library-large.jpg",
+                                "2.2.0/tm_vlc-ios-2.4-ipad-library.jpg",
+                                "VLC on iPad" );
+                    vlcscreenshot( "winrt/artistpage-medium.jpg",
+                                "winrt/tm_artistpage.jpg",
+                                "VLC for Windows Store (Windows 10)" );
+                    ?>
+                </div>
+                <div class="ltrClearLeft">
+                </div>
+                <a class="extra-info-link2 padding-top" style='padding-left: 5px;' href='/vlc/screenshots.html'><?php echo _("View all screenshots"); ?></a>
+            </div>
</span>         </div>
<span style="color: #000000;background-color: #ddffdd">+    </div>
+</section>
+<section>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <h1><a name="download"><?php echo _("Official Downloads of VLC media player"); ?> </a></h1>
+            </div>
+            <div class="col-sm-4">
+                <h2>Windows</h2>
+                <?php addos( "Windows", "windows", "download-windows.html", true ); ?>
+                <?php addos( "Windows Store", "winrt", "download-winrt.html" ); ?>
+                <?php addos( "Windows Phone", "windowsphone", "download-windowsphone.html" ); ?>
+                <h2>Apple Platforms</h2>
+                <?php addos( "Mac&nbsp;OS&nbsp;X", "macosx", "download-macosx.html", true );
+                    addos( "iOS", "ios", "download-ios.html" );
+                    addos( "Apple TV", "appletv", "download-appletv.html" ); ?>
+                <h2><?php echo _("Sources"); ?></h2>
+                <p><?php echo _("You can also directly get the").' <strong><a href="download-sources.html">'
+                    ._("source code").'</a></strong>.</p>'; ?>
+            </div>
</span> 
<span style="color: #000000;background-color: #ffdddd">-        <div class="col-sm-4">
-            <h2>GNU/Linux</h2>
-            <?php
-                addos( "Debian GNU/Linux", "debian", "download-debian.html" );
-                addos( "Ubuntu", "ubuntu", "download-ubuntu.html" );
-                addos( "Mint", "mint", "http://community.linuxmint.com/software/view/vlc" );
-                addos( "openSUSE", "suse", "download-suse.html" );
-                addos( "Gentoo Linux", "gentoo", "download-gentoo.html" );
-                addos( "Fedora", "fedora", "download-fedora.html" );
-                addos( "Arch Linux", "archlinux", "download-archlinux.html" );
-                addos( "Slackware Linux", "slackware", "download-slackware.html" );
-                addos( "ALT Linux", "altlinux", "download-altlinux.html" );
-                addos( "Red Hat Enterprise Linux", "redhat", "download-redhat.html" );
-            ?>
-        </div>
</span><span style="color: #000000;background-color: #ddffdd">+            <div class="col-sm-4">
+                <h2>GNU/Linux</h2>
+                <?php
+                    addos( "Debian GNU/Linux", "debian", "download-debian.html" );
+                    addos( "Ubuntu", "ubuntu", "download-ubuntu.html" );
+                    addos( "Mint", "mint", "http://community.linuxmint.com/software/view/vlc" );
+                    addos( "openSUSE", "suse", "download-suse.html" );
+                    addos( "Gentoo Linux", "gentoo", "download-gentoo.html" );
+                    addos( "Fedora", "fedora", "download-fedora.html" );
+                    addos( "Arch Linux", "archlinux", "download-archlinux.html" );
+                    addos( "Slackware Linux", "slackware", "download-slackware.html" );
+                    addos( "ALT Linux", "altlinux", "download-altlinux.html" );
+                    addos( "Red Hat Enterprise Linux", "redhat", "download-redhat.html" );
+                ?>
+            </div>
</span> 
<span style="color: #000000;background-color: #ffdddd">-        <div class="col-sm-4">
-            <h2><?php echo _("Other Systems"); ?></h2>
-            <?php
-                addos( "Android", "android", "download-android.html" );
-                addos( "Chrome OS", "chromeos", "download-chromeos.html" );
-                addos( "FreeBSD", "freebsd", "download-freebsd.html" );
-                addos( "NetBSD", "netbsd", "download-sources.html" );
-                addos( "OpenBSD", "openbsd", "download-sources.html" );
-                addos( "Solaris", "solaris", "download-sources.html" );
-                addos( "QNX", "qnx", "download-sources.html" );
-                addos( "Syllable", "syllable", "download-syllable.html" );
-                addos( "OS/2", "os2", "http://hobbes.nmsu.edu/h-search.php?sh=1&button=Search&key=vlc&stype=all&sort=date&dir=%2Fpub%2Fos2%2Fapps%2Fmmedia%2Fvideo%2Fplayers" );
-            ?>
</span><span style="color: #000000;background-color: #ddffdd">+            <div class="col-sm-4">
+                <h2><?php echo _("Other Systems"); ?></h2>
+                <?php
+                    addos( "Android", "android", "download-android.html" );
+                    addos( "Chrome OS", "chromeos", "download-chromeos.html" );
+                    addos( "FreeBSD", "freebsd", "download-freebsd.html" );
+                    addos( "NetBSD", "netbsd", "download-sources.html" );
+                    addos( "OpenBSD", "openbsd", "download-sources.html" );
+                    addos( "Solaris", "solaris", "download-sources.html" );
+                    addos( "QNX", "qnx", "download-sources.html" );
+                    addos( "Syllable", "syllable", "download-syllable.html" );
+                    addos( "OS/2", "os2", "http://hobbes.nmsu.edu/h-search.php?sh=1&button=Search&key=vlc&stype=all&sort=date&dir=%2Fpub%2Fos2%2Fapps%2Fmmedia%2Fvideo%2Fplayers" );
+                ?>
+            </div>
</span>         </div>
     </div>
<span style="color: #000000;background-color: #ffdddd">-
</span><span style="color: #000000;background-color: #ddffdd">+</section>
</span> <!--        <div style="margin-top: 30px;">
             <a href="/vlc/stats/downloads.php">VLC download statistics</a>
         </div>
</code></pre>

<br>
</li>

</div>
<div class='footer' style='margin-top: 10px;'>
<p>

<br>
<a href="https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55">View it on GitLab</a>
<br>
You're receiving this email because of your account on <a href="https://code.videolan.org/">code.videolan.org</a>.
If you'd like to receive fewer emails, you can adjust your notification settings.
<script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","action":{"@type":"ViewAction","name":["merge_requests","issues","commit"],"url":"https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55"}}</script>
</p>
</div>
</body>
</html>