share-page: Implement final design

index.html

Index: index.html
===================================================================
--- a/index.html
+++ b/index.html
@@ -5,16 +5,17 @@
 <style>
 body
 {
-  width: 600px;
-  height: 540px;
+  width: 680px;
+  height: 570px;
   margin: auto;
+  padding-left: 30px;
   border: 5px solid #a42c23;
   background: white;
 }
 
 #headline
 {
-  height: 120px;
+  height: 100px;
   font-family: Arial, Helvetica, sans;
   font-size: 28px;
   text-align: center;
@@ -32,11 +33,13 @@
 
 #facebook, #twitter, #gplus
 {
-  padding-left: 125px;
+  margin-bottom: 10px;
+  padding-left: 140px;
+  width: 500px;
   height: 140px;
   background-repeat: no-repeat;
-  background-size: 64px;
-  background-position: 30px 50%;
+  background-size: 140px;
+  background-position: 0px 50%;
 
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -45,34 +48,44 @@
   display: box;
   box-orient: vertical;
   box-pack: center;
-}
 
-#facebook, #twitter
-{
-  padding-left: 135px;
+  border-radius: 7px;
 }
 
 #facebook
 {
   background-image: url("/facebook.png");
-  background-color: #f3f4f8;
+  background-color: #8e9bb2;
 }
 
 #twitter
 {
   background-image: url("/twitter.png");
-  background-color: #d7e8f1;
+  background-color: #64abcb;
 }
 
 #gplus
 {
   background-image: url("/googleplus.png");
-  background-color: #f1f1f1;
+  background-color: #cf6d5c;
 }
 
-#___plus_0
+.widget-container
 {
-  margin-top: 12px !important;
+  width: 490px;
+  height: 118px;
+  border-radius: 0px 3px 3px 0px;
+  background-color: white;
+}
+
+.fb-like {
+  margin-top: 30px;
+  margin-left: 12px;
+}
+
+#twitter iframe {
+  margin-top: 40px;
+  margin-left: 10px;
 }
 </style>
 <script><!--
@@ -155,17 +168,23 @@
 <div id="headline">Think Adblock Plus is worth sharing?</div>
 
 <div id="facebook">
-  <div id="fb-root"></div>
-  <div class="fb-like" data-href="https://www.facebook.com/adblockplus" data-send="true" data-width="450" data-show-faces="true"></div>
+  <div class="widget-container">
+    <div id="fb-root"></div>
+    <div class="fb-like" data-href="https://www.facebook.com/adblockplus" data-send="true" data-width="450" data-show-faces="true"></div>
+  </div>
 </div>
 
 <div id="twitter">
-  <a href="https://twitter.com/AdblockPlus" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @AdblockPlus</a>
-  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://adblockplus.org" data-text="I browse the web without annoying ads thanks to @AdblockPlus!" data-size="large">Tweet</a>
+  <div class="widget-container">
+    <a href="https://twitter.com/AdblockPlus" class="twitter-follow-button" data-show-count="false" data-size="large">@AdblockPlus folgen</a>
+    <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://adblockplus.org" data-text="I browse the web without annoying ads thanks to @AdblockPlus!" data-size="large">Twittern</a>
+  </div>
 </div>
 
 <div id="gplus">
-  <div class="g-plus" data-href="https://plus.google.com/110020691898167279887" data-rel="publisher"></div>
+  <div class="widget-container">
+    <div class="g-plus" data-href="https://plus.google.com/110020691898167279887" data-width="490" data-rel="publisher"></div>
+  </div>
 </div>
 
 </body>