update graphics

Author: acarioni

screen_messenger_large.png

@@ -15,7 +15,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- .ribbon {
+ .banner {
+  height: 150px;
+  position: relative;
+  background-image: url("../images/banner.jpg");
+  background-size: cover;
+  background-position: bottom;
+}  
+.logo {
+  width: 400px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}  
+.banner p {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 60px;
+  font-family: "Amazon Ember", Arial, Helvetica, Sans-serif;
+  font-size: x-large;
+  color: #063d27;
+  font-weight: bold;
+  text-align: center;
+}
+.ribbon {
+  z-index: 1;
   background-color: #003D06;
   overflow: hidden;
   white-space: nowrap;
@@ -41,6 +66,7 @@
   text-decoration: none;
   text-shadow: 0 0 5px #444;
 }
+
 .demoTitle {
   font-family: Verdana, Arial, Helvetica, Sans-serif;
   font-size: 9pt;

src/css/im.css

@@ -32,13 +32,14 @@
     <a href="https://github.com/Lightstreamer/Lightstreamer-example-Messenger-client-javascript">Fork me on GitHub</a>
   </div>
   <div id="wrap">
-    <table width="518" border="0">  
-      <tr>
-        <td><a href="http://www.lightstreamer.com" target="_blank">
-          <img src="images/logo.png" alt="LIGHTSTREAMER" hspace="0" border="0" /></a></td>
-        <td class="demoTitle">BASIC INSTANT MESSENGER DEMO</td>
-      </tr>
-    </table>
+    <div class="banner">
+      <a href="https://www.lightstreamer.com">
+        <img src="images/logo.png" alt="Logo" class="logo">
+      </a>
+      <p>
+        Basic Instant Messenger Demo
+      </p>
+    </div>
 
     <br />
     <br />