hover effect for platforms and bindings thumbs changed ..

- few layout changes for platforms .

2 files changed, 9 insertions, 22 deletions

diff --git a/images/bindings/bind_more.png b/images/bindings/bind_more.png
new file mode 100644
index 0000000..b18e0e8
--- /dev/null
+++ b/images/bindings/bind_more.png
diff --git a/index.html b/index.html
index 5580d70..db6bc76 100644
--- a/index.html
+++ b/index.html
@@ -47,12 +47,12 @@
         </script>
         <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6023277399201&amp;cd[value]=0.00&amp;cd[currency]=EUR&amp;noscript=1" /></noscript>
         <style>
-            img {
-              background: none;
-              transition: all .3s linear;
+            #platforms>img, #bindings>a>img {
+              border: 2px solid #f5f5f5;
+              transition: all .2s ease;
             }
-            img:hover { 
-              background: #eaeaea;
+            #platforms>img:hover, #bindings>a>img:hover { 
+              border: 2px solid #797979;
             }
         </style>
     </head>
@@ -102,29 +102,16 @@
                 <br>
                 <p>raylib supports multiple target platforms, it has been tested in the following platforms but, technically, any platform that supports C language and OpenGL graphics is valid for raylib or can be very easily ported to.</p>
                 <br>
-                <p style="text-align: center">
-                    <strong>_________________________ desktop _________________________</strong>
-                </p>
-                <br>
                 <div style="display: flex;">
-                    <div style="margin: 0 auto;">
+                    <div id="platforms" style="margin: 0 auto;">
                         <img src="images/platforms/windows.png" title="windows" style="margin-right:8px;" alt="windows platform" width="84" height="84"/>
                         <img src="images/platforms/linux.png" title="linux" style="margin-right:8px;" alt="linux platform" width="84" height="84"/>
                         <img src="images/platforms/macos.png" title="macos" style="margin-right:8px;" alt="macos platform" width="84" height="84"/>
                         <img src="images/platforms/freebsd.png" title="freebsd" style="margin-right:8px;" alt="freebsd platform" width="84" height="84"/>
+                        <img src="images/platforms/rpi_native.png" title="raspberry pi" style="margin-right:8px;" alt="raspberrypi platform" width="84" height="84"/>
                         <img src="images/platforms/rpi_desktop.png" title="raspberry pi desktop" style="margin-right:8px;" alt="raspberrypi desktop platform" width="84" height="84"/>
-                    </div>
-                </div>
-                <br>
-                <p style="text-align: center">
-                    <strong>__________________ mobile &amp; misc devices __________________</strong>
-                </p>
-                <br>
-                <div style="display: flex;">
-                    <div style="margin: 0 auto;">
                         <img src="images/platforms/android.png" title="android" style="margin-right:8px;" alt="android platform" width="84" height="84"/>
                         <img src="images/platforms/html5.png" title="html5 (web)" style="margin-right:8px;" alt="html5 platform" width="84" height="84"/>
-                        <img src="images/platforms/rpi_native.png" title="raspberry pi" style="margin-right:8px;" alt="raspberrypi platform" width="84" height="84"/>
                     </div>
                 </div>
                 <br>
@@ -133,7 +120,7 @@
                 <p>You can code using raylib in multiple languages! Some raylib users have created raylib bindings to multiple languages. Here's a list of the bindings I'm aware of</p>
                 <br>
                 <div style="display: flex;">
-                    <div style="margin: 0 auto;">
+                    <div id="bindings" style="margin: 0 auto;">
                         <!--<a href="#"><img src="images/bindings/bind_cpp.png" title="windows" style="margin-right:8px;" alt="cpp raylib binding" width="84" height="84"/></a>-->
                         <a href="https://github.com/ChrisDill/Raylib-cs" target="_blank"><img src="images/bindings/bind_csharp.png" style="margin-right:8px;" alt="c-sharp raylib binding" width="84" height="84"/></a>
                         <a href="https://github.com/overdev/raylib-py" target="_blank"><img src="images/bindings/bind_python.png" style="margin-right:8px;" alt="python raylib binding" width="84" height="84"/></a>
@@ -142,7 +129,7 @@
                         <a href="https://github.com/XoanaIO/raylib-java" target="_blank"><img src="images/bindings/bind_java.png" style="margin-right:8px;" alt="java raylib binding" width="84" height="84"/></a>
                         <a href="https://github.com/raysan5/raylib-lua" target="_blank"><img src="images/bindings/bind_lua.png" style="margin-right:8px;" alt="lua raylib binding" width="84" height="84"/></a>
                         <a href="https://github.com/gen2brain/raylib-go" target="_blank"><img src="images/bindings/bind_go.png" style="margin-right:8px;" alt="go raylib binding" width="84" height="84"/></a>
-                        ... [<a href="https://github.com/raysan5/raylib/blob/master/CONTRIBUTING.md#raylib-bindings" target="_blank" class="simplelink">more</a>]
+                        <a href="https://github.com/raysan5/raylib/blob/master/CONTRIBUTING.md#raylib-bindings" target="_blank"><img src="images/bindings/bind_more.png" style="margin-right:8px;" alt="more raylib bindings" width="84" height="84"/></a>
                     </div>
                 </div>
                 <br>