[www-doc] [Git][VideoLAN.org/websites][master] 4 commits: footer: add additional_class parameter

Jean-Baptiste Kempf gitlab at videolan.org
Fri May 13 11:25:25 CEST 2016


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


Commits:
405d1417 by David Loiret at 2016-05-13T11:22:47+02:00
footer: add additional_class parameter

Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>

- - - - -
53b68497 by David Loiret at 2016-05-13T11:22:47+02:00
Add SVG icons

Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>

- - - - -
556c483c by David Loiret at 2016-05-13T11:22:47+02:00
Rework design of features page

Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>

- - - - -
abcd0e40 by Jean-Baptiste Kempf at 2016-05-13T11:25:10+02:00
Add more texts for features

- - - - -


18 changed files:

- + www.videolan.org/images/icons/android.svg
- + www.videolan.org/images/icons/apple-store.svg
- + www.videolan.org/images/icons/cross-platform.svg
- + www.videolan.org/images/icons/file-music.svg
- + www.videolan.org/images/icons/film.svg
- + www.videolan.org/images/icons/input.svg
- + www.videolan.org/images/icons/linux.svg
- + www.videolan.org/images/icons/mac.svg
- + www.videolan.org/images/icons/misc.svg
- + www.videolan.org/images/icons/money-off.svg
- + www.videolan.org/images/icons/play.svg
- + www.videolan.org/images/icons/rocket.svg
- + www.videolan.org/images/icons/subtitles.svg
- + www.videolan.org/images/icons/windows8.svg
- www.videolan.org/include/footer.php
- + www.videolan.org/style/icons.scss
- www.videolan.org/style/style.scss
- www.videolan.org/vlc/features.php


Changes:

=====================================
www.videolan.org/images/icons/android.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/android.svg
@@ -0,0 +1,6 @@
+<?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="32" height="32" viewBox="0 0 32 32">
+<path d="M28 12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM4 12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM7 23c0 1.657 1.343 3 3 3v0 4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h4v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4c1.657 0 3-1.343 3-3v-11h-18v11z"></path>
+<path d="M24.944 10c-0.304-2.746-1.844-5.119-4.051-6.551l1.001-2.001c0.247-0.494 0.047-1.095-0.447-1.342s-1.095-0.047-1.342 0.447l-1.004 2.009-0.261-0.104c-0.893-0.297-1.848-0.458-2.84-0.458s-1.947 0.161-2.84 0.458l-0.261 0.104-1.004-2.009c-0.247-0.494-0.848-0.694-1.342-0.447s-0.694 0.848-0.447 1.342l1.001 2.001c-2.207 1.433-3.747 3.805-4.051 6.551v1h17.944v-1h-0.056zM13 8c-0.552 0-1-0.448-1-1s0.447-0.999 0.998-1c0.001 0 0.002 0 0.003 0s0.001-0 0.002-0c0.551 0.001 0.998 0.448 0.998 1s-0.448 1-1 1zM19 8c-0.552 0-1-0.448-1-1s0.446-0.999 0.998-1c0 0 0.001 0 0.002 0s0.002-0 0.003-0c0.551 0.001 0.998 0.448 0.998 1s-0.448 1-1 1z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/apple-store.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/apple-store.svg
@@ -0,0 +1,5 @@
+<?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="32" height="32" viewBox="0 0 32 32">
+<path d="M0 19.249v-4.342c0-0.398 0.327-0.723 0.727-0.723h7.673l-3.341 5.789h-4.332c-0.4 0-0.727-0.325-0.727-0.724zM5.466 28.141l-2.449 1.659c-0.329 0.224-0.563 0.082-0.517-0.313l0.327-2.839c0.045-0.395 0.366-0.557 0.713-0.359l1.895 1.083c0.346 0.199 0.36 0.546 0.031 0.769zM6.054 26.541l-1.895-1.083c-0.346-0.198-0.469-0.642-0.267-0.987l8.776-15.212c0.199-0.346 0.648-0.467 0.994-0.266l1.895 1.080c0.347 0.2 0.466 0.645 0.267 0.989l-8.775 15.213c-0.199 0.345-0.648 0.463-0.994 0.266zM12.733 19.973l3.341-5.789h1.924l2.713 5.789h-7.977zM23.614 21.701c-0.759-0.379-4.537-9.058-5.505-11.323-0.969-2.265-3.895-8.293-2.949-8.762 0.673-0.336 3.091 4.41 4.903 7.26 1.81 2.85 5.594 10.198 6.060 11.034 0.463 0.839-0.446 1.538-0.951 1.748s-0.799 0.418-1.557 0.042zM26.097 25.691l-1.142-1.796c-0.236-0.374-0.114-0.835 0.269-1.032l1.088-0.557c0.384-0.195 0.864-0.037 1.068 0.354l0.901 1.725c0.205 0.39 0.065 0.891-0.304 1.111l-0.778 0.463c-0.369 0.223-0.866 0.102-1.102-0.268zM30.298 30.4c-0.239-0.761-2.060-0.811-2.875-1.957-0.818-1.142-0.142-1.73 0.142-2.001 3.307-1.855 2.733 3.958 2.733 3.958zM32 19.249c0 0.399-0.327 0.724-0.727 0.724h-3.841c-0.042-0.223-0.111-0.447-0.227-0.656-0.1-0.178-0.353-0.659-0.705-1.328-0.508-0.967-1.238-2.349-2.020-3.805h6.793c0.4 0 0.727 0.325 0.727 0.723v4.342h0z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/cross-platform.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/cross-platform.svg
@@ -0,0 +1,9 @@
+<?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="32" height="32" viewBox="0 0 32 32">
+<path d="M16.577 22.774c-0.325-0.239-0.36-0.598-0.36-0.598l-0.122-0.78h-3.888l-0.122 0.78c0 0-0.034 0.359-0.359 0.598s-0.582 0.445-0.325 0.479c0.247 0.033 2.579 0.003 2.751 0 0.172 0.003 2.503 0.033 2.751 0 0.256-0.035-0.001-0.239-0.325-0.479z"></path>
+<path d="M7.534 16.231c0-0.361-0.293-0.653-0.653-0.653h-3.102c-0.361 0-0.653 0.293-0.653 0.653v6.857c0 0.361 0.293 0.653 0.653 0.653h3.102c0.361 0 0.653-0.292 0.653-0.653v-6.857h-0zM5.005 16.313h0.653c0.045 0 0.082 0.036 0.082 0.081s-0.037 0.082-0.082 0.082h-0.653c-0.045 0-0.082-0.037-0.082-0.082s0.037-0.081 0.082-0.081zM5.305 23.355c-0.18 0-0.327-0.146-0.327-0.327s0.146-0.327 0.327-0.327c0.18 0 0.327 0.146 0.327 0.327s-0.146 0.327-0.327 0.327zM7.126 22.436h-3.592v-5.47h3.592v5.47z"></path>
+<path d="M27.959 11.821h-6.719c-0.506 0-0.916 0.41-0.916 0.916v9.616c0 0.506 0.41 0.916 0.916 0.916h6.719c0.506 0 0.916-0.41 0.916-0.916v-9.616c-0-0.506-0.41-0.916-0.916-0.916zM23.284 22.76c-0.253 0-0.458-0.205-0.458-0.457s0.205-0.458 0.458-0.458c0.253 0 0.457 0.205 0.457 0.458s-0.205 0.457-0.457 0.457zM24.599 22.76c-0.253 0-0.458-0.205-0.458-0.457s0.205-0.458 0.458-0.458c0.253 0 0.458 0.205 0.458 0.458s-0.204 0.457-0.458 0.457zM25.916 22.76c-0.253 0-0.458-0.205-0.458-0.457s0.205-0.458 0.458-0.458c0.253 0 0.458 0.205 0.458 0.458s-0.205 0.457-0.458 0.457zM28.302 21.437h-7.406v-8.815h7.406v8.815z"></path>
+<path d="M22.409 11.049h1.126v-2.039c0-0.415-0.336-0.751-0.751-0.751h-17.266c-0.415 0-0.751 0.336-0.751 0.751v5.796h1.126v-5.421h16.516v1.664z"></path>
+<path d="M8.306 18.393v2.252h11.246v-2.252h-11.246zM14.151 20.034c-0.284 0-0.515-0.231-0.515-0.515s0.231-0.515 0.515-0.515c0.284 0 0.515 0.231 0.515 0.515s-0.231 0.515-0.515 0.515z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/file-music.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/file-music.svg
@@ -0,0 +1,6 @@
+<?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="24" height="24" viewBox="0 0 24 24">
+<path d="M21.511 5.369c-0.521-0.71-1.246-1.54-2.043-2.337s-1.627-1.523-2.337-2.043c-1.209-0.886-1.795-0.989-2.131-0.989h-11.625c-1.034 0-1.875 0.841-1.875 1.875v20.25c0 1.034 0.841 1.875 1.875 1.875h17.25c1.034 0 1.875-0.841 1.875-1.875v-14.625c0-0.336-0.102-0.922-0.989-2.131v0zM18.407 4.093c0.72 0.72 1.284 1.369 1.701 1.907h-3.608v-3.608c0.539 0.417 1.188 0.982 1.907 1.701v0zM21 22.125c0 0.203-0.172 0.375-0.375 0.375h-17.25c-0.203 0-0.375-0.172-0.375-0.375v-20.25c0-0.203 0.172-0.375 0.375-0.375 0 0 11.624-0 11.625 0v5.25c0 0.414 0.336 0.75 0.75 0.75h5.25v14.625z"></path>
+<path d="M17.726 9.17c-0.174-0.143-0.402-0.2-0.623-0.155l-7.5 1.5c-0.351 0.070-0.603 0.378-0.603 0.735v5.552c-0.441-0.192-0.953-0.302-1.5-0.302-1.657 0-3 1.007-3 2.25s1.343 2.25 3 2.25 3-1.007 3-2.25v-5.385l6-1.2v3.137c-0.441-0.192-0.953-0.302-1.5-0.302-1.657 0-3 1.007-3 2.25s1.343 2.25 3 2.25 3-1.007 3-2.25v-7.5c0-0.225-0.101-0.438-0.274-0.58z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/film.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/film.svg
@@ -0,0 +1,5 @@
+<?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="24" height="24" viewBox="0 0 24 24">
+<path d="M0 3v18h24v-18h-24zM4.5 19.5h-3v-3h3v3zM4.5 13.5h-3v-3h3v3zM4.5 7.5h-3v-3h3v3zM18 19.5h-12v-15h12v15zM22.5 19.5h-3v-3h3v3zM22.5 13.5h-3v-3h3v3zM22.5 7.5h-3v-3h3v3zM9 7.5v9l6-4.5z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/input.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/input.svg
@@ -0,0 +1,5 @@
+<?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="24" height="24" viewBox="0 0 24 24">
+<path d="M11.016 15.984v-3h-10.031v-1.969h10.031v-3l3.984 3.984zM21 3c1.078 0 2.016 0.891 2.016 2.016v14.016c0 1.078-0.938 1.969-2.016 1.969h-18c-1.078 0-2.016-0.891-2.016-1.969v-4.031h2.016v4.031h18v-14.063h-18v4.031h-2.016v-3.984c0-1.078 0.938-2.016 2.016-2.016h18z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/linux.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/linux.svg
@@ -0,0 +1,5 @@
+<?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="27" height="32" viewBox="0 0 27 32">
+<path d="M11.839 7.339q-0.196 0.018-0.277 0.188t-0.152 0.17q-0.089 0.018-0.089-0.089 0-0.214 0.339-0.268h0.179zM13.393 7.589q-0.071 0.018-0.205-0.116t-0.313-0.080q0.429-0.196 0.571 0.036 0.054 0.107-0.054 0.161zM7.125 15.214q-0.071-0.018-0.107 0.054t-0.080 0.223-0.098 0.241-0.179 0.232q-0.125 0.179-0.018 0.214 0.071 0.018 0.223-0.125t0.223-0.321q0.018-0.054 0.036-0.125t0.036-0.107 0.027-0.080 0.009-0.071v-0.054t-0.018-0.045-0.054-0.036zM22.393 21.625q0-0.321-0.982-0.75 0.071-0.268 0.134-0.491t0.089-0.464 0.054-0.384 0.009-0.402-0.018-0.348-0.063-0.393-0.071-0.366-0.089-0.446-0.098-0.473q-0.179-0.857-0.839-1.839t-1.286-1.339q0.429 0.357 1.018 1.482 1.554 2.893 0.964 4.964-0.196 0.714-0.893 0.75-0.554 0.071-0.688-0.33t-0.143-1.491-0.205-1.911q-0.161-0.696-0.348-1.232t-0.348-0.813-0.277-0.438-0.232-0.268-0.134-0.125q-0.25-1.107-0.554-1.839t-0.527-1-0.42-0.589-0.268-0.714q-0.071-0.375 0.107-0.955t0.080-0.884-0.795-0.446q-0.268-0.054-0.795-0.321t-0.634-0.286q-0.143-0.018-0.196-0.464t0.143-0.911 0.643-0.482q0.661-0.054 0.911 0.536t0.071 1.036q-0.196 0.339-0.036 0.473t0.536 0.009q0.232-0.071 0.232-0.643v-0.661q-0.089-0.536-0.241-0.893t-0.375-0.545-0.42-0.268-0.482-0.134q-1.911 0.143-1.589 2.393 0 0.268-0.018 0.268-0.161-0.161-0.527-0.188t-0.589 0.009-0.277-0.089q0.018-1.018-0.286-1.607t-0.804-0.607q-0.482-0.018-0.741 0.491t-0.295 1.063q-0.018 0.268 0.063 0.661t0.232 0.67 0.277 0.241q0.179-0.054 0.286-0.25 0.071-0.161-0.125-0.143-0.125 0-0.277-0.259t-0.17-0.598q-0.018-0.393 0.161-0.661t0.607-0.25q0.304 0 0.482 0.375t0.17 0.696-0.027 0.393q-0.393 0.268-0.554 0.518-0.143 0.214-0.491 0.42t-0.366 0.223q-0.232 0.25-0.277 0.482t0.134 0.321q0.25 0.143 0.446 0.348t0.286 0.339 0.33 0.232 0.634 0.116q0.839 0.036 1.821-0.268 0.036-0.018 0.411-0.125t0.616-0.188 0.527-0.232 0.375-0.313q0.161-0.25 0.357-0.143 0.089 0.054 0.116 0.152t-0.054 0.214-0.295 0.17q-0.357 0.107-1.009 0.384t-0.813 0.348q-0.786 0.339-1.25 0.411-0.446 0.089-1.411-0.036-0.179-0.036-0.161 0.036t0.304 0.339q0.446 0.411 1.196 0.393 0.304-0.018 0.643-0.125t0.643-0.25 0.598-0.313 0.536-0.304 0.438-0.214 0.313-0.045 0.152 0.196q0 0.036-0.018 0.080t-0.071 0.089-0.107 0.080-0.152 0.089-0.161 0.080-0.179 0.089-0.17 0.080q-0.5 0.25-1.205 0.786t-1.188 0.768-0.875 0.018q-0.375-0.196-1.125-1.304-0.393-0.554-0.446-0.393-0.018 0.054-0.018 0.179 0 0.446-0.268 1.009t-0.527 0.991-0.375 1.036 0.205 1.125q-0.411 0.107-1.116 1.607t-0.848 2.518q-0.036 0.321-0.027 1.232t-0.098 1.054q-0.143 0.429-0.518 0.054-0.571-0.554-0.643-1.679-0.036-0.5 0.071-1 0.071-0.339-0.018-0.321l-0.071 0.089q-0.643 1.161 0.179 2.964 0.089 0.214 0.446 0.5t0.429 0.357q0.357 0.411 1.857 1.616t1.661 1.366q0.286 0.268 0.313 0.679t-0.25 0.768-0.813 0.411q0.143 0.268 0.518 0.795t0.5 0.964 0.125 1.259q0.821-0.429 0.125-1.643-0.071-0.143-0.188-0.286t-0.17-0.214-0.036-0.107q0.054-0.089 0.232-0.17t0.357 0.045q0.821 0.929 2.964 0.643 2.375-0.268 3.161-1.554 0.411-0.679 0.607-0.536 0.214 0.107 0.179 0.929-0.018 0.446-0.411 1.643-0.161 0.411-0.107 0.67t0.429 0.277q0.054-0.339 0.259-1.375t0.241-1.607q0.036-0.375-0.116-1.313t-0.134-1.732 0.411-1.259q0.268-0.321 0.911-0.321 0.018-0.661 0.616-0.946t1.295-0.188 1.071 0.402zM11.179 6.857q0.054-0.304-0.045-0.536t-0.205-0.268q-0.161-0.036-0.161 0.125 0.036 0.089 0.089 0.107 0.179 0 0.125 0.268-0.054 0.357 0.143 0.357 0.054 0 0.054-0.054zM18.661 10.375q-0.036-0.143-0.116-0.205t-0.232-0.089-0.259-0.098q-0.089-0.054-0.17-0.143t-0.125-0.143-0.098-0.116-0.071-0.071-0.071 0.027q-0.25 0.286 0.125 0.777t0.696 0.563q0.161 0.018 0.259-0.143t0.063-0.357zM15.482 6.571q0-0.196-0.089-0.348t-0.196-0.223-0.161-0.054q-0.25 0.018-0.125 0.125l0.071 0.036q0.25 0.071 0.321 0.554 0 0.054 0.143-0.036zM16.446 2.411q0-0.036-0.045-0.089t-0.161-0.125-0.17-0.107q-0.268-0.268-0.429-0.268-0.161 0.018-0.205 0.134t-0.018 0.232-0.009 0.223q-0.018 0.071-0.107 0.188t-0.107 0.161 0.054 0.152q0.071 0.054 0.143 0t0.196-0.161 0.268-0.161q0.018-0.018 0.161-0.018t0.268-0.036 0.161-0.125zM26.536 26.357q0.357 0.214 0.554 0.438t0.214 0.429-0.045 0.402-0.277 0.393-0.42 0.348-0.536 0.33-0.563 0.295-0.571 0.277-0.482 0.232q-0.679 0.339-1.527 1t-1.348 1.143q-0.304 0.286-1.214 0.348t-1.589-0.259q-0.321-0.161-0.527-0.42t-0.295-0.455-0.393-0.348-0.839-0.17q-0.786-0.018-2.321-0.018-0.339 0-1.018 0.027t-1.036 0.045q-0.786 0.018-1.42 0.268t-0.955 0.536-0.777 0.509-0.955 0.205q-0.518-0.018-1.982-0.554t-2.607-0.768q-0.339-0.071-0.911-0.17t-0.893-0.161-0.705-0.17-0.598-0.259-0.304-0.348q-0.179-0.411 0.125-1.188t0.321-0.973q0.018-0.286-0.071-0.714t-0.179-0.759-0.080-0.652 0.188-0.482q0.25-0.214 1.018-0.25t1.071-0.214q0.536-0.321 0.75-0.625t0.214-0.911q0.375 1.304-0.571 1.893-0.571 0.357-1.482 0.268-0.607-0.054-0.768 0.179-0.232 0.268 0.089 1.018 0.036 0.107 0.143 0.321t0.152 0.321 0.080 0.304 0.018 0.393q0 0.268-0.304 0.875t-0.25 0.857q0.054 0.304 0.661 0.464 0.357 0.107 1.509 0.33t1.777 0.366q0.429 0.107 1.321 0.393t1.473 0.411 0.991 0.071q0.768-0.107 1.152-0.5t0.411-0.857-0.134-1.045-0.339-0.929-0.357-0.652q-2.161-3.393-3.018-4.321-1.214-1.321-2.018-0.714-0.196 0.161-0.268-0.268-0.054-0.286-0.036-0.679 0.018-0.518 0.179-0.929t0.429-0.839 0.393-0.75q0.143-0.375 0.473-1.286t0.527-1.393 0.536-1.089 0.696-0.964q1.964-2.554 2.214-3.482-0.214-2-0.286-5.536-0.036-1.607 0.429-2.705t1.893-1.866q0.696-0.375 1.857-0.375 0.946-0.018 1.893 0.241t1.589 0.741q1.018 0.75 1.634 2.17t0.527 2.634q-0.089 1.696 0.536 3.821 0.607 2.018 2.375 3.893 0.982 1.054 1.777 2.911t1.063 3.411q0.143 0.875 0.089 1.509t-0.214 0.991-0.357 0.393q-0.179 0.036-0.42 0.339t-0.482 0.634-0.723 0.598-1.089 0.25q-0.321-0.018-0.563-0.089t-0.402-0.241-0.241-0.277-0.205-0.366-0.161-0.348q-0.393-0.661-0.732-0.536t-0.5 0.875 0.125 1.732q0.357 1.25 0.018 3.482-0.179 1.161 0.321 1.795t1.304 0.589 1.518-0.634q1.054-0.875 1.598-1.188t1.848-0.759q0.946-0.321 1.375-0.652t0.33-0.616-0.446-0.509-0.92-0.42q-0.589-0.196-0.884-0.857t-0.268-1.295 0.277-0.848q0.018 0.554 0.143 1.009t0.259 0.723 0.366 0.509 0.375 0.339 0.384 0.232 0.295 0.17z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/mac.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/mac.svg
@@ -0,0 +1,16 @@
+<?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="32" height="32" viewBox="0 0 32 32">
+<path d="M17.788 24.32c-0-0.001-0-0.003-0-0.004 0 0.001 0 0.003 0 0.004z"></path>
+<path d="M17.831 25.454c-0-0.007-0.001-0.015-0.001-0.022 0 0.007 0.001 0.015 0.001 0.022z"></path>
+<path d="M17.807 24.885c-0-0.006-0-0.011-0.001-0.017 0 0.006 0 0.011 0.001 0.017z"></path>
+<path d="M30 0h-28c-1.1 0-2 0.9-2 2v28c0 1.1 0.9 2 2 2h15.432c0.001 0 0.003 0 0.004 0s0.003-0 0.004-0h12.56c1.1 0 2-0.9 2-2v-28c0-1.1-0.9-2-2-2zM6 7c0-0.552 0.448-1 1-1s1 0.448 1 1v2c0 0.552-0.448 1-1 1s-1-0.448-1-1v-2zM30 30h-11.721c-0.209-1.315-0.341-2.671-0.418-3.988 0 0.004 0 0.007 0.001 0.011-0.616 0.067-1.237 0.102-1.862 0.102-4.177 0-8.199-1.52-11.328-4.281-0.466-0.411-0.51-1.122-0.099-1.588s1.122-0.51 1.588-0.099c2.717 2.398 6.211 3.718 9.839 3.718 0.596 0 1.189-0.036 1.776-0.107-0.069-3.694 0.215-6.622 0.22-6.669 0.028-0.281-0.064-0.561-0.254-0.77s-0.459-0.329-0.741-0.329h-2.974c0.043-1.082 0.159-2.932 0.467-5.006 0.589-3.961 1.625-7.055 3.005-8.994h12.502v28z"></path>
+<path d="M25 10c-0.552 0-1-0.448-1-1v-2c0-0.552 0.448-1 1-1s1 0.448 1 1v2c0 0.552-0.448 1-1 1z"></path>
+<path d="M16.89 26.101c-0.114 0.006-0.228 0.011-0.342 0.014 0.114-0.004 0.228-0.008 0.342-0.014z"></path>
+<path d="M16 26.125c0.147 0 0.293-0.002 0.439-0.006-0.146 0.004-0.292 0.006-0.439 0.006z"></path>
+<path d="M16.846 23.85c0.024-0.001 0.049-0.003 0.073-0.004-0.024 0.002-0.049 0.003-0.073 0.004z"></path>
+<path d="M16.409 23.869c0.034-0.001 0.067-0.002 0.101-0.003-0.034 0.001-0.067 0.003-0.101 0.003z"></path>
+<path d="M27.427 20.256c-0.411-0.466-1.122-0.51-1.588-0.099-2.27 2.004-5.083 3.254-8.063 3.612 0.013 0.727 0.040 1.484 0.086 2.255 3.499-0.382 6.806-1.832 9.466-4.18 0.466-0.411 0.51-1.122 0.099-1.588z"></path>
+<path d="M17.859 26.023c-0.144 0.016-0.288 0.029-0.433 0.041 0.145-0.012 0.289-0.026 0.433-0.041z"></path>
+<path d="M17.359 26.070c-0.122 0.010-0.244 0.018-0.367 0.025 0.122-0.007 0.245-0.015 0.367-0.025z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/misc.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/misc.svg
@@ -0,0 +1,5 @@
+<?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="24" height="24" viewBox="0 0 24 24">
+<path d="M1 5l11-5 11 5v14l-11 5-11-5v-14zM11 10.641l-8-3.633v10.703l8 3.641v-10.711zM21 17.711v-10.703l-8 3.633v10.711zM19.375 5.547l-7.375-3.352-7.375 3.352 7.375 3.352z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/money-off.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/money-off.svg
@@ -0,0 +1,5 @@
+<?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="24" height="24" viewBox="0 0 24 24">
+<path d="M5.344 4.078l14.578 14.625-1.266 1.266-2.203-2.25c-0.609 0.563-1.5 0.938-2.438 1.125v2.156h-3v-2.156c-1.922-0.422-3.563-1.641-3.703-3.844h2.203c0.094 1.172 0.938 2.109 3 2.109 1.359 0 2.063-0.469 2.391-0.938l-3.516-3.469c-2.344-0.703-3.891-1.875-3.891-3.938l-3.422-3.422zM12.516 6.891c-0.609 0-1.125 0.094-1.547 0.281l-1.453-1.453c0.469-0.234 0.984-0.422 1.5-0.563v-2.156h3v2.203c2.109 0.516 3.141 2.063 3.188 3.797h-2.203c-0.047-1.266-0.703-2.109-2.484-2.109z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/play.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/play.svg
@@ -0,0 +1,5 @@
+<?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="24" height="24" viewBox="0 0 24 24">
+<path d="M4.5 3l15 9-15 9z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/rocket.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/rocket.svg
@@ -0,0 +1,5 @@
+<?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="32" height="32" viewBox="0 0 32 32">
+<path d="M22 2l-10 10h-6l-6 8c0 0 6.357-1.77 10.065-0.94l-10.065 12.94 13.184-10.255c1.839 4.208-1.184 10.255-1.184 10.255l8-6v-6l10-10 2-10-10 2z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/subtitles.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/subtitles.svg
@@ -0,0 +1,5 @@
+<?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="24" height="24" viewBox="0 0 24 24">
+<path d="M20.016 14.016v-2.016h-10.031v2.016h10.031zM20.016 18v-2.016h-4.031v2.016h4.031zM14.016 18v-2.016h-10.031v2.016h10.031zM3.984 12v2.016h4.031v-2.016h-4.031zM20.016 3.984c1.078 0 1.969 0.938 1.969 2.016v12c0 1.078-0.891 2.016-1.969 2.016h-16.031c-1.078 0-1.969-0.938-1.969-2.016v-12c0-1.078 0.891-2.016 1.969-2.016h16.031z"></path>
+</svg>


=====================================
www.videolan.org/images/icons/windows8.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/windows8.svg
@@ -0,0 +1,5 @@
+<?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="32" height="32" viewBox="0 0 32 32">
+<path d="M0.011 16l-0.011-9.752 12-1.63v11.382zM14 4.328l15.996-2.328v14h-15.996zM30 18l-0.004 14-15.996-2.25v-11.75zM12 29.495l-11.99-1.644-0.001-9.851h11.991z"></path>
+</svg>


=====================================
www.videolan.org/include/footer.php
=====================================
--- a/www.videolan.org/include/footer.php
+++ b/www.videolan.org/include/footer.php
@@ -1,11 +1,11 @@
 <?php
 require_once($_SERVER["DOCUMENT_ROOT"]."/include/layout_helper.php");
 /* Footer */
-function footer($tag = "", $alternate_lang=array()) {
+function footer($tag = "", $alternate_lang=array(), $additional_class = "") {
 ?>
     </div> <!-- BodyInner -->
     <div class="clearfix"></div>
-    <div id='footer'>
+    <div id='footer' class="<?= $additional_class ?>">
         <div class="container">
             <div class="row">
                 <div class="col-sm-12 col-md-3">


=====================================
www.videolan.org/style/icons.scss
=====================================
--- /dev/null
+++ b/www.videolan.org/style/icons.scss
@@ -0,0 +1,60 @@
+$baseImgSrc: '/images/icons/';
+ at mixin setBackroundImg($img, $type) {
+    background-image: url("#{$baseImgSrc}#{$img}.#{$type}");
+}
+
+.icon-video {
+    @include setBackroundImg(film, svg);
+}
+
+.icon-audio {
+    @include setBackroundImg(file-music, svg);
+}
+
+.icon-subtitles {
+    @include setBackroundImg(subtitles, svg);
+}
+
+.icon-play {
+    @include setBackroundImg(play, svg);
+}
+
+.icon-money-off {
+    @include setBackroundImg(money-off, svg);
+}
+
+.icon-windows8-svg {
+    @include setBackroundImg(windows8, svg);
+}
+
+.icon-mac-svg {
+    @include setBackroundImg(mac, svg);
+}
+
+.icon-linux-svg {
+    @include setBackroundImg(linux, svg);
+}
+
+.icon-android-svg {
+    @include setBackroundImg(android, svg);
+}
+
+.icon-ios-svg {
+    @include setBackroundImg(apple-store, svg);
+}
+
+.icon-rocket {
+    @include setBackroundImg(rocket, svg);
+}
+
+.icon-cross-platform {
+    @include setBackroundImg(cross-platform, svg);
+}
+
+.icon-input {
+    @include setBackroundImg(input, svg);
+}
+
+.icon-misc {
+    @include setBackroundImg(misc, svg);
+}


=====================================
www.videolan.org/style/style.scss
=====================================
--- a/www.videolan.org/style/style.scss
+++ b/www.videolan.org/style/style.scss
@@ -1,5 +1,6 @@
 /* =================================== CSS RESET =============================== */
 @import "style/theme";
+ at import "style/icons";
 @import "style/mixins";
 @import "bootstrap/mixins/vendor-prefixes";
 
@@ -1294,3 +1295,99 @@ a.icon {
         padding: 20px 0 0 0;
     }
 }
+
+.section-header-spacer {
+    float: left;
+    width: 200px;
+    border-top: 3px solid #e7e7e7;
+}
+
+.section-heading {
+    margin-bottom: 30px;
+}
+
+.lead {
+    font-size: 18px;
+    font-weight: 400px;
+}
+
+.features-item-list {
+    text-align: center;
+    .icon, i {
+        width: 80px;
+        height: 80px;
+        display: inline-block;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 50%;
+        background-color: #e7e7e7;
+        border-radius: 50%;
+        margin-bottom: 16px;
+        &.box-shadow {
+            @include box-shadow(0 3px 5px rgba(0, 0, 0, 0.1));
+        }
+        &:hover {
+            &.box-shadow-hover {
+                @include box-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
+            }
+        }
+    }
+    ul {
+        display: inline-block;
+    }
+    ul li {
+        margin-bottom: 6px;
+        &:before {
+            width: 12px;
+            height: 12px;
+        }
+        text-align: left;
+        font-size: 14px;
+    }
+    h2 {
+        margin-bottom: 26px;
+    }
+    .section-header-spacer {
+        width: 25%;
+        margin-left: 37%;
+        float: none;
+    }
+    h4 {
+        i {
+            background-color: transparent;
+            margin-bottom: 0;
+            vertical-align: middle;
+            width: 60px;
+            height: 60px;
+        }
+        span {
+            vertical-align: middle;
+        }
+    }
+}
+
+.features-os {
+    .icon {
+        background-color: transparent;
+        width: 40px;
+        height: 40px;
+    }
+    .icon-cross-platform {
+        background-size: 70%;
+    }
+}
+
+#features-advanced-formats {
+    text-align: left;
+    h4 {
+        margin-left: -15px;
+    }
+}
+
+.no-margin-top {
+    margin-top: 0 !important;
+}
+
+.margin-bottom-32 {
+    margin-bottom: 32px;
+}


=====================================
www.videolan.org/vlc/features.php
=====================================
--- a/www.videolan.org/vlc/features.php
+++ b/www.videolan.org/vlc/features.php
@@ -1,562 +1,197 @@
 <?php
-function writeonefeature( $a )
-{
-    if ( $a == "yes" )
-       echo '<td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>';
-    else if ($a == "no" )
-       echo '<td class="no"><img src="/images/features/cross.png" alt="No" /></td>';
-    else if ( $a == "part" )
-       echo '<td class="partial"><img src="/images/features/partial.png" alt="Partial" /></td>';
-    else if ( $a == "unt" )
-       echo '<td class="partial"><img src="/images/features/untested.png" alt="Untested" /></td>';
-    else if ($a == "none" )
-       echo '<td class="none">-</td>';
-    echo "\n";
-}
-
-function writefeature_simple( $title, $windows, $mac, $linux, $beos, $bsd, $fam )
-{
-   echo '<td class="type">'.$title.'</td>';
-   writeonefeature( $windows );
-   writeonefeature( $mac );
-   writeonefeature( $linux );
-   writeonefeature( $beos );
-   writeonefeature( $bsd );
-   echo "</tr>\n";
-}
-
-function writefeature( $title, $windows, $mac, $linux, $beos, $bsd, $fam )
-{
-   echo "<tr>\n";
-   writefeature_simple( $title, $windows, $mac, $linux, $beos, $bsd, $fam );
-}
-
-function writeInputFeatures() {
-?>
-<div id="feature-list-input">
-          <table class="feature-list-table table table-striped table-hover">
-            <?php headers( "yes" ); ?>
-            <tr>
-            <td class="category" rowspan="14"><b>Input media</b></td>
-
-            <?php writefeature_simple( "UDP/RTP Unicast", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "UDP/RTP Multicast", "yes", "yes", "yes", "no", "yes", "yes" ); ?>
-            <?php writefeature( "HTTP / FTP", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "MMS", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "TCP/RTP Unicast", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "DCCP/RTP Unicast", "no", "no", "yes", "no", "no", "unt" ); ?>
-            <?php writefeature( "File ", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( 'DVD Video <sup><a href="#input_notes">1</a></sup>', "yes", "yes", "yes", "yes", "yes", "none" ); ?>
-            <?php writefeature( "Video CD / VCD ", "yes", "yes", "yes", "no", "yes", "none" ); ?>
-            <?php writefeature( 'SVCD <sup><a href="#input_notes">2</a></sup>', "part", "part", "part", "no", "part", "none" ); ?>
-            <?php writefeature( "Audio CD (no DTS-CD)", "yes", "yes", "yes", "no", "yes", "none" ); ?>
-            <tr>
-            <td class="type">DVB (Satellite, <br/>Digital TV, Cable TV)</td>
-            <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-            <td class="part"><img src="http://images.videolan.org/images/features/partial.png" alt="part" /> EyeTV <sup><a href="#input_notes">3</a></sup></td>
-            <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-            <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-            <td class="no"><img src="http://images.videolan.org/images/features/cross.png" alt="No" /></td>
-            </tr>
-            <?php writefeature( 'MPEG encoder <sup><a href="#input_notes">4</a></sup>', "yes", "no", "yes", "no", "no", "none" ); ?>
-
-            <tr>
-            <td class="type">Video acquisition</td>
-            <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> Direct Show</td>
-
-            <td class="part"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> QTKit <sup><a href="#input_notes">5</a></sup></td>
-            <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> V4L, V4L2</td>
-            <td class="no"><img src="http://images.videolan.org/images/features/cross.png" alt="No" /></td>
-            <td class="no"><img src="http://images.videolan.org/images/features/cross.png" alt="No" /></td>
-            </tr>
-
-            <tr style="background:#D4E0F7 !important">
-              <td colspan="8" style="background:#D4E0F7 !important"> </td>
-            </tr>
-
-            <tr>
-            <td class="category" rowspan="17"><b>Input formats</b></td>
-            <?php writefeature_simple( "MPEG (ES,PS,TS,PVA,MP3)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "AVI", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "ASF / WMV / WMA", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "MP4 / MOV / 3GP", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "OGG / OGM / Annodex", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Matroska (MKV)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Real", "part", "part", "part", "part", "part", "part" ); ?>
-            <?php writefeature( "WAV (including DTS)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Raw Audio: DTS, AAC, AC3/A52", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Raw DV", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "FLAC", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "FLV (Flash)", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "MXF", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "Nut", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "Standard MIDI / SMF", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Creative™ Voice", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          </table>
-          <div class="notes">
-            <ol id="input_notes">
-              <li value="1">DVD decryption is done through the libdvdcss library.</li>
-              <li value="2">VLC on GNU/Linux, Solaris, and Microsoft Windows has playback
-              control support via libcdio and libvcdinfo. On other platforms,
-              SVCD support varies depending on the availability of these libraries.
-              (Volunteers for adding support are always welcome.). Handling still
-              frames (often used in menus) and switching between different video
-              formats is problematic.</li>
-              <li value="3">On Mac OS X 10.4 or later, VLC is able to grab video and audio from EyeTV applications and therefore all EyeTV-compatible capture devices. The user needs to install a plugin to EyeTV.app in order to use this feature. Guidance is provided in the User Interface. Requires VLC 0.9.0 or later.</li>
-              <li value="4">VLC for GNU/Linux supports V4L2 compatible encoding cards as well as two kinds of MPEG-2 encoding cards: Hauppauge WinTV-PVR-250/350 and Visiontech Kfir.</li>
-              <li value="5">VLC can capture video from internal iSights on Mac OS X 10.5 or later (video only) since version 0.9.0. VLC 1.2 adds capturing from all devices supported by QTKit. It also enables audio capturing support on Mac OS X 10.6 and later.</li>
-            </ol>
-          </div>
-        </div>
-<?php
-}
-
-function writeVideoFeatures() {
-?>
-<div id="feature-list-video">
-          <table class="feature-list-table table table-striped table-hover">
-            <?php headers( "no" ); ?>
-            <?php writefeature( "MPEG-1/2", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "DivX® (1/2/3)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "MPEG-4 ASP, DivX® 4/5/6, XviD, 3ivX D4", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "H.261", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "H.263 / H.263i", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "H.264 / MPEG-4 AVC", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Cinepak", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Theora", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Dirac / VC-2", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "MJPEG (A/B)", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "WMV 1/2", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-          <tr>
-          <td class="type">WMV 3 / WMV-9 / VC-1 <sup><a href="#video_notes">1</a></sup></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          </tr>
-
-            <?php writefeature( "Sorenson 1/3 (Quicktime)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "DV (Digital Video)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-
-            <?php writefeature( "On2 VP3/VP5/VP6", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "Indeo Video v3 (IV32)", "yes", "yes", "part", "yes", "part", "yes" ); ?>
-            <?php writefeature( "Indeo Video 4/5 (IV41, IV51)", "no", "no", "no", "no", "no", "no" ); ?>
-            <?php writefeature( 'Real Video 1/2', "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( 'Real Video 3/4', "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-
-          </table>
-          <div class="notes">
-          <ol id="video_notes">
-            <li value="1">Windows DMO codecs can be used by VLC on 32-bit x86 platforms and
-            allow WMV-3/WMA-3 decoding. This feature is untested on Intel-based Macs.</li>
-          </ol>
-          </div>
-        </div>
-<?php
-}
-
-function writeAudioFeatures() {
-?>
-<div id="feature-list-audio">
-        <table class="feature-list-table table table-striped table-hover">
-        <?php headers( "no" ); ?>
-            <?php writefeature( "MPEG Layer 1/2", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "MP3 - MPEG Layer 3", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "AAC - MPEG-4 part3", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Vorbis", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "AC3 - A/52 (Dolby Digital)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( 'E-AC-3 (Dolby Digital Plus) ', "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( 'MLP / TrueHD">3</a></sup>', "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "DTS", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "WMA 1/2", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( 'WMA 3 <sup><a href="#audio_notes">1</a></sup>', "yes", "yes", "yes", "no", "no", "no" ); ?>
-            <?php writefeature( "FLAC", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "ALAC", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Speex", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "Musepack / MPC", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "ATRAC 3", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "Wavpack", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "Mod (.s3m, .it, .mod)", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "TrueAudio (TTA)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "APE (Monkey Audio)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( 'Real Audio <sup><a href="#audio_notes">2</a></sup>', "part", "part", "part", "unt", "part", "no" ); ?>
-            <?php writefeature( "Alaw/µlaw", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "AMR (3GPP)", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( 'MIDI <sup><a href="#audio_notes">3 </a></sup>', "yes", "unt", "yes", "no", "yes", "unt" ); ?>
-            <?php writefeature( "LPCM", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "ADPCM", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "QCELP", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "DV Audio", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-            <?php writefeature( "QDM2/QDMC (QuickTime)", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "MACE", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-
-        </table>
-
-        <div class="notes">
-        <ol id="audio_notes">
-          <li value="1">Native playback supported by VLC 1.0.3 and later. Previous versions could use Windows DMO codecs on 32-bit x86 platforms and 
-          allow WMV-3/WMA-3 decoding. This feature was never tested on Intel-based Macs.</li>
-          <li value="2">Sipr codec playback is not supported.</li>
-          <li value="3">Requires a .sf2 soundfont, see <a href="http://wiki.videolan.org/Midi">our wiki</a>.</li>
-        </ol>
-        </div>
-
-        </div>
-<?php
-}
-function writeSubFeatures() {
-?>
-<div id="feature-list-sub">
-          <table class="feature-list-table table table-striped table-hover">
-	<?php headers( "yes" ); ?>
-        <tr>
-          <td class="category" rowspan="10"><b>Subtitles</b></td>
-            <?php writefeature_simple( 'DVD <sup><a href="#sub_notes">1</a></sup>', "part", "part", "part", "part", "part", "none" ); ?>
-
-            <?php writefeature( "Text files (MicroDVD,<br/>SubRIP, SubViewer, SSA1-5, SAMI, VPlayer)" , "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "Closed captions", "no", "yes", "yes", "no", "unt", "unt" ); ?>
-            <?php writefeature( "Vobsub", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "Universal Subtitle Format (USF)", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "SVCD / CVD", "yes", "unt", "yes", "unt", "yes", "unt" ); ?>
-            <?php writefeature( "DVB", "yes", "yes", "yes", "yes", "yes", "none" ); ?>
-            <?php writefeature( "OGM", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "CMML", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "Kate", "yes", "yes", "yes", "unt", "yes", "unt" ); ?>
-        
-          <tr style="background:#D4E0F7 !important">
-            <td colspan="8" style="background:#D4E0F7 !important"> </td>
-          </tr>
-
-          <tr>
-            <td class="category" rowspan="4"><b>Tags</b></td>
-            <?php writefeature_simple( "ID3 tags", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "APEv2", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-            <?php writefeature( "Vorbis comment", "yes", "yes", "yes", "yes", "yes", "unt" ); ?>
-          </table>
-          <div class="notes">
-          <ol id="sub_notes">
-          <li value="1">
-          Full color for YUV-type chromas is not handled, only the gray-scale value. Subtitle transparency is not fully supported for all chromas. Some chromas are not handled at all.
-          </li>
-          </ol>
-          </div>
-
-        </div>
-<?php
-}
-function writeAVFeatures() {
-?>
-<div id="feature-list-av">
-          <table class="feature-list-table table table-striped table-hover">
-        <?php headers( "yes" ); ?>
-        <tr>
-          <td class="category" rowspan="6"><b>Video Outputs</b></td>
-
-          <td class="type">Native</td>
-          <td class="yes">Direct3D<br/>DirectX<br/>GDI</td>
-          <td class="yes">OpenGL</td>
-
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          </tr>
-
-	  <?php writefeature( "X11", "none", "unt", "yes", "none", "yes", "yes" ); ?>
-	  <?php writefeature( "XVideo", "none", "none", "yes", "none", "yes", "yes" ); ?>
-	  <?php writefeature( "SDL", "yes", "no", "yes", "unt", "yes", "yes" ); ?>
-	  <?php writefeature( "FrameBuffer", "none", "none", "yes", "none", "none", "unt" ); ?>
-	  <?php writefeature( "ASCII Art", "yes", "yes", "yes", "unt", "yes", "no" ); ?>
-
-          <tr style="background:#D4E0F7 !important">
-          <td colspan="8" style="background:#D4E0F7 !important"> </td>
-          </tr>
-          <tr>
-          <td class="category" rowspan="7"><b>Audio Outputs</b></td>
-          <td class="type">Native</td>
-          <td class="yes">DirectX<br/>WaveOut</td>
-
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes">OSS<br/>ALSA</td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes">OSS</td>
-
-          </tr>
-
-          <tr>
-          <td class="type">S/PDIF</td>
-          <td class="yes">DirectX<br/>WaveOut</td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-
-          <td class="yes">OSS<br/>ALSA</td>
-          <td class="no"><img src="http://images.videolan.org/images/features/cross.png" alt="No" /></td>
-          <td class="partial"><img src="http://images.videolan.org/images/features/untested.png" alt="Untested" /></td>
-
-          </tr>
-
-          <tr>
-          <td class="type">Multi-channel</td>
-          <td class="yes">DirectX<br/>WaveOut</td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes">OSS<br/>ALSA</td>
-
-          <td class="no"><img src="http://images.videolan.org/images/features/cross.png" alt="No" /></td>
-          <td class="partial"><img src="http://images.videolan.org/images/features/untested.png" alt="Untested" /></td>
-          </tr>
-
-	  <?php writefeature( "PulseAudio", "none", "none", "yes", "none", "unt", "unt" ); ?>
-	  <?php writefeature( "PortAudio", "yes", "unt", "unt", "none", "unt", "unt" ); ?>
-	  <?php writefeature( "JACK", "none", "unt", "yes", "none", "unt", "unt" ); ?>
-
-          </table>
-        </div>
-<?php
-}
-function writeFilterFeatures() {
+    $title = "VLC - Features";
+    $lang = "en";
+    $menu = array( "vlc", "features" );
+    $new_design = true;
+
+    require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
+
+    function startFeatureSection($align, $sectionClass='') {
+        echo '<section class="features ' . $sectionClass . '"><div class="container"><div class="row">';
+        $col = $align == 'left' ? 'col-lg-5 col-sm-6' : 'col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6';
+        echo '<div class="' . $col . '">';
+    }
+
+    function endFeatureSection($align, $imgSrc) {
+        echo '</div>';
+        $col = $align == 'left' ? 'col-lg-5 col-lg-offset-2 col-sm-6' : 'col-lg-5 col-sm-pull-6 col-sm-6';
+        echo '<div class="' . $col . '"><img class="center-sm center-xs img-responsive" src="' . $imgSrc . '"></div></div></div></section>';
+    }
+
+    $mediaFormats = array(
+        "MPEG-1/2", "DivX® (1/2/3/4/5/6)",
+        "MPEG-4 ASP", "XviD",
+        "3ivX D4", "H.261",
+        "H.263 / H.263i",
+        "H.264 / MPEG-4 AVC",
+        "Cinepak", "Theora",
+        "Dirac / VC-2",
+        "MJPEG (A/B)", "WMV 1/2",
+        "WMV 3 / WMV-9 / VC-1",
+        "Sorenson 1/3", "DV",
+        "On2 VP3/VP5/VP6", "Indeo Video v3 (IV32)",
+        "Real Video (1/2/3/4)"
+    );
+
+    $audioFormats = array(
+        "MPEG Layer 1/2", "MP3 - MPEG Layer 3",
+        "AAC - MPEG-4 part3", "Vorbis",
+        "AC3 - A/52", "E-AC-3",
+        "MLP / TrueHD>3", "DTS",
+        "WMA 1/2, WMA 3",
+        "FLAC, ALAC",
+        "Speex, Musepack / MPC",
+        "ATRAC 3, Wavpack",
+        "Mod", "TrueAudio",
+        "APE", "Real Audio",
+        "Alaw/µlaw, AMR (3GPP)",
+        "MIDI", "LPCM",
+        "ADPCM, QCELP",
+        "DV Audio, QDM2/QDMC",
+        "MACE"
+    );
+
+    $subtitleFormats = array(
+        "DVD, Text files (MicroDVD, SubRIP, SubViewer, SSA1-5, SAMI, VPlayer)",
+        "Closed captions", "Vobsub",
+        "Universal Subtitle Format (USF)", "SVCD / CVD",
+        "DVB", "OGM",
+        "CMML", "Kate"
+    );
+
+    $tagFormats = array(
+        "ID3 tags", "APEv2",
+        "Vorbis comment"
+    );
+
+    $inputMedia = array(
+        "UDP/RTP Unicast", "UDP/RTP Multicast",
+        "HTTP / FTP", "MMS",
+        "TCP/RTP Unicast", "DCCP/RTP Unicast",
+        "File", "DVD Video",
+        "Video CD / VCD", "SVCD",
+        "Audio CD (no DTS-CD)", "DVB (Satellite, Digital TV, Cable TV)",
+        "MPEG encoder", "Video acquisition"
+    );
+
+    $inputFormats = array(
+        "MPEG (ES,PS,TS,PVA,MP3)", "AVI",
+        "ASF / WMV / WMA", "MP4 / MOV / 3GP",
+        "OGG / OGM / Annodex", "Matroska (MKV)",
+        "Real", "WAV (including DTS)",
+        "Raw Audio: DTS, AAC, AC3/A52", "Raw DV",
+        "FLAC", "FLV (Flash)",
+        "MXF", "Nut",
+        "Standard MIDI / SMF", "Creative™ Voice"
+    );
+
+    $miscFormats = array(
+        "SAP/SDP announces", "Bonjour protocol",
+        "Mozilla/Firefox plugin", "ActiveX plugin",
+        "SVCD Menus", "Localization",
+        "CD-Text", "CDDB CD info",
+        "IGMPv3", "IPv6",
+        "MLDv2", "CPU acceleration"
+    );
+
+    function renderListItems($array) {
+        foreach($array as $key => $value) {
+            if ($key == count($array) - 1) {
+                $value .= '.';
+            } else {
+                $value .= ', ';
+            }
+            echo $value;
+        }
+    }
 ?>
-<div id="feature-list-filters">
-          <table class="feature-list-table table table-striped table-hover">
-	     <?php headers( "yes" ); ?>
-                    <tr>
-          <td class="category" rowspan="10"><b>Video Filters</b></td>
-
-          <?php writefeature_simple( "Deinterlace", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Cropping", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Image wall", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Image adjust", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Rotate/Mirror", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Logo overlay", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Magnification", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Image distortion", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Bluescreen", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "RSS/Atom feeds", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-
-          <tr style="background:#D4E0F7 !important">
-          <td colspan="8" style="background:#D4E0F7 !important"> </td>
-          </tr>
-          <tr><td class="category" rowspan="2"><b>Audio Filters</b></td>
-          <?php writefeature_simple( "Visualization effects", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Equalizer", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Spatializer", "yes", "yes", "yes", "unt", "yes", "yes" ); ?>
-          <?php writefeature( "Dynamic Range Compressor", "yes", "yes", "yes", "unt", "yes", "yes" ); ?>
+<div class="container">
+    <h1 class="text-center margin-bottom-32">VLC Features</h1>
+</div>
 
-          </table>
+<section class="features-item-list features bg-gray">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-4">
+                <i class="icon-play box-shadow"></i>
+                <p><?= _("VLC plays Files, Discs, Webcams, Devices and Streams."); ?></p>
+            </div>
+            <div class="col-md-4 features-os">
+                <i class="icon-cross-platform box-shadow"></i>
+                <div class="clearfix"></div>
+                    <a class="icon icon-windows8-svg box-shadow-hover" href="/vlc/download-windows.html"></a>
+                    <a class="icon icon-mac-svg box-shadow-hover" href="/vlc/download-macosx.html"></a>
+                    <a class="icon icon-linux-svg box-shadow-hover" href="/vlc/#download"></a>
+                    <a class="icon icon-android-svg box-shadow-hover" href="/vlc/download-android.html"></a>
+                    <a class="icon icon-ios-svg box-shadow-hover" href="/vlc/download-ios.html"></a>
+            </div>
+            <div class="col-md-4">
+                <i class="icon-money-off box-shadow"></i>
+                <p class="lead"><?= _("No spyware, No ads, No user tracking."); ?></p>
+            </div>
         </div>
-<?php
-}
-function writeIntfFeatures() {
-?>
-<div id="feature-list-intf">
-          <table class="feature-list-table table table-striped table-hover">
-	   <?php headers( "no" ); ?>
-          <tr>
-          <td class="type">Default</td>
-
-          <td class="yes">Qt4</td>
-
-          <td class="yes">Cocoa</td>
-          <td class="yes">Qt4</td>
-          <td class="yes">Native</td>
-          <td class="yes">Qt4</td>
-          </tr>
-
-          <?php writefeature( "Qt4", "yes", "part", "yes", "none", "unt", "none" ); ?>
-          <?php writefeature( "Skins", "yes", "no", "yes", "no", "unt", "none" ); ?>
-          <?php writefeature( "Web", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Telnet", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "Command line", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          <?php writefeature( "ncurses", "no", "yes", "yes", "unt", "unt", "unt" ); ?>
-          <?php writefeature( "Infrared", "no", "no", "yes", "no", "no", "no" ); ?>
-          <?php writefeature( "Mouse Gestures", "yes", "yes", "yes", "yes", "yes", "yes" ); ?>
-          </table>
+    </div>
+</section>
+
+<?php startFeatureSection('right') ?>
+    <hr class="section-header-spacer"><div class="clearfix"></div>
+    <h2 class="section-heading"><?= _("Fast - Hardware Decoding") ?></h2>
+    <p class="lead"><b>VLC</b> has hardware decoding on most platforms. It supports 0-copy on the GPU and can fallback on software when required.</p>
+<?php endFeatureSection('right', '//images.videolan.org/vlc/screenshots/2.2.0/vlc-ios-2.4-iphone-playback.jpg') ?>
+
+<section id="features-all-formats" class="features-item-list features bg-gray">
+    <div class="container">
+        <div class="row">
+            <h2 class="section-heading text-center"><?= _("Plays all formats") ?></h2>
+            <div class="col-md-4">
+                <i class="icon-video box-shadow"></i>
+                <p>
+                    <?= renderListItems($mediaFormats); ?>
+                </p>
+            </div>
+            <div class="col-md-4">
+                <i class="icon-audio box-shadow"></i>
+                <p>
+                    <?= renderListItems($audioFormats); ?>
+                </p>
+            </div>
+            <div class="col-md-4">
+                <i class="icon-subtitles box-shadow"></i>
+                <p>
+                    <?= renderListItems($subtitleFormats); ?>
+                </p>
+                <p>
+                    <?= renderListItems($tagFormats); ?>
+                </p>
+            </div>
         </div>
-<?php
-}
-function writeMiscFeatures() {
-?>
-<div id="feature-list-misc">
-          <table class="feature-list-table table table-striped table-hover">
-	   <?php headers( "no" ); ?>
-           <?php writefeature( "SAP/SDP announces", "yes", "yes", "yes", "no", "yes", "no" ); ?>
-           <?php writefeature( "Bonjour protocol", "no", "yes", "yes", "unt", "unt", "unt" ); ?>
-           <?php writefeature( "Mozilla/Firefox plugin", "yes", "yes", "yes", "no", "yes", "no" ); ?>
-           <?php writefeature( "ActiveX plugin", "yes", "none", "none", "none", "none", "none" ); ?>
-          <tr><td class="type">SVCD Menus</td><td class="partial"><img src="/images/features/partial.png" alt="Partial" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="partial"><img src="/images/features/partial.png" alt="Partial" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="partial"><img src="/images/features/partial.png" alt="Partial" /></td>
-          </tr>
-          <tr><td class="type">Localization</td><td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-
-          </tr>
-
-          <tr><td class="type">CD-Text <sup><a href="#bottom_notes">1</a></sup></td><td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="partial"><img src="/images/features/partial.png" alt="Partial" /></td>
-          </tr>
-          <tr><td class="type">CDDB CD info</td><td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-
-          <td class="partial"><img src="/images/features/partial.png" alt="Partial" /></td>
-
-          </tr>
-          <tr><td class="type">IGMPv3 <sup><a href="#bottom_notes">2</a></sup></td><td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          </tr>
-          <tr><td class="type">IPv6 <sup><a href="#bottom_notes">2</a></sup></td><td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-
-          </tr>
-          <tr><td class="type">MLDv2 <sup><a href="#bottom_notes">2</a></sup></td><td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          <td class="no"><img src="/images/features/cross.png" alt="No" /></td>
-          <td class="yes"><img src="/images/features/tick.png" alt="Yes" /></td>
-          </tr>
-
-          <tr>
-          <td class="type">CPU acceleration <sup><a href="#bottom_notes">3</a></sup></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          <td class="yes"><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /></td>
-          </tr>
-          </table>
-          <div class="notes">
-          <ol id="bottom_notes">
-
-            <li value="1">CD-Text information provided via libcdio. This service is available
-            on all platforms supported by the library.</li>
-            <li value="2">Depending on the operating system's support.</li>
-            <li value="3">Supported CPU extensions are MMX, MMXEXT, SSE, SSE2 and 3D Now! on x86
-            processors, and AltiVec on G4/G5 processors.</li>
-            </ol>
-          </div>
-
+    </div>
+</section>
+
+<?php startFeatureSection('right') ?>
+    <hr class="section-header-spacer"><div class="clearfix"></div>
+    <h2 class="section-heading"><?= _("Advanced control") ?></h2>
+    <p class="lead"><b>VLC</b> has the most complete feature-set over the video, subtitle synchronisation, video and audio filters.</p>
+<?php endFeatureSection('right', '//images.videolan.org/vlc/screenshots/2.2.0/vlc-2.2-macosx-audio-playback-dark.jpg') ?>
+
+<section id="features-advanced-formats" class="features-item-list features bg-gray">
+    <div class="container">
+        <div class="row">
+            <h2 class="section-heading text-center"><?= _("Advanced formats") ?></h2>
+            <div class="col-md-8 col-md-offset-2">
+                <h4><i class="icon-input"></i> <span>Input Media</span></h4>
+                    <p class="lead"><?= renderListItems($inputMedia); ?></p>
+            </div>
+            <div class="col-md-8 col-md-offset-2">
+                <h4><i class="icon-input"></i> <span>Input Formats</span></h4>
+                    <p class="lead"><?= renderListItems($inputFormats); ?></p>
+            </div>
+            <div class="col-md-8 col-md-offset-2">
+                <h4><i class="icon-misc"></i> <span>Miscellaneous</span></h4>
+                    <p class="lead"><?= renderListItems($miscFormats); ?></p>
+            </div>
         </div>
-<?php
-}
-function headers( $extra )
-{
-?>
-       <tr>
-            <th class="type"></th>
-<?php  if ( $extra == "yes" ) echo  '<th class="category"></th>'; ?>
-            <th class="th-os"><a href="/vlc/download-windows.html">
-              <img src="http://images.videolan.org/images/icons/winvista.png" alt="Windows" height="32" width="32" />
-            </a></th>
-            <th class="th-os"><a href="/vlc/download-macosx.html">
-              <img src="http://images.videolan.org/images/icons/macosx.png" alt="Mac OS X" width="32" height="32" />
-            </a></th>
-
-            <th class="th-os"><a href="/vlc/index.html">
-              <img src="http://images.videolan.org/images/icons/linux.png" alt="Linux" width="32" height="32" />
-
-            </a></th>
-            <th class="th-os"><a href="/vlc/download-beos.html">
-              <img src="http://images.videolan.org/images/icons/beos.png" alt="BeOS" width="32" height="32" />
-            </a></th>
-            <th class="th-os"><a class="inline-block" href="/vlc/download-sources.html">
-              <img src="http://images.videolan.org/images/icons/freebsd.png" alt="FreeBSD" width="32" height="32" />
+    </div>
+</section>
 
-              <img src="http://images.videolan.org/images/icons/openbsd.png" alt="OpenBSD" width="32" height="32" />
-            </a></th>
-          </tr>
-<?php
-}
-if(!isset($_GET['fdiv'])) {
-   $title = "VLC - Features";
-   $lang = "en";
-   $menu = array( "vlc", "features" );
-   $new_design = true;
-   $additional_css = array("/vlc/features.css");
-   require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
-?>
-<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>
-<?php footer('$Id: features.php 4814 2008-12-12 13:30 CEST altglass $'); ?>
-<?php
-} else {
-  $cat = $_GET['fdiv'];
-  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();
-}
-?>
+<?php footer('$Id: features.php 4814 2008-12-12 13:30 CEST altglass $', array(), "no-margin-top"); ?>



View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/compare/f725647c61d7a64d8d31031f0b60f1ea43207202...abcd0e40d1acc3b5eeb9de2c40234fb4ca5e8945
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/www-doc/attachments/20160513/3b4ba573/attachment.html>


More information about the www-doc mailing list