Issue 2844 - Create Microsoft Edge coming soon landing page

static/css/index.css

 #content h1, #content h2
 {
   font-size: 16px;
 }
 
 #content .sprite
 {
   background-image: url(../img/sprite-index.png);
 }
 
@@ skipping 51 matching lines @@
 #content.ua-ios #adblock-browser-notification
 {
   display: none;
 }
 
 #main, #video
 {
   display: inline-block;
 }
 
-#video, #maxthon-instruction
+#video, #maxthon-instruction, #edge-teaser
 {
   background: #ffffff;
   padding: 10px;
   border: 1px solid #c9c9c9;
   box-shadow: 1px 1px 0 0 #dbdbdb;
 }
 
 #maxthon-instruction,
 html[lang^="zh_"] #content.maxthon #video,
 #content.maxthon #feature-free,
-#feature-maxthon
+#feature-maxthon, #edge-subscription, #edge-teaser
 {
   display: none;
 }
 
 html[lang^="zh_"] #content.maxthon #maxthon-instruction
 {
   display: inline-block;
   padding: 0px;
 }
 
 #content.maxthon #feature-maxthon
 {
   display: inline-block;
 }
 
+#content.edge #video
+{
+  display: none;
+}
+
+#content.edge #edge-subscription
+{
+  display: block;
+}
+
 #summary h1, #summary h2
 {
   font-weight: normal;
   margin: 0;
 }
 
 #summary h1
 {
   font-size: 60px;
   line-height: 50px;
@@ skipping 301 matching lines @@
 #platform-maxthon
 {
   background-position: -128px -130px;
 }
 
 #content.maxthon #platform-maxthon
 {
   background-position: -128px -109px;
 }
 
+#platform-edge
+{
+  background-position: -68px -171px;
+}
+
+#content.edge #platform-edge
+{
+  background-position: -68px -151px;
+}
+
 .warning-platform,
 .disclaimer,
 #maxthon-notification
 {
   display: none;
   color: #D00;
   text-align: center;
   border: 1px solid #D00;
   padding: 5px;
   border-radius: 5px;
@@ skipping 172 matching lines @@
   display: none;
 }
 
 #more-container.firefox #tab-firefox,
 #more-container.chrome #tab-chrome,
 #more-container.opera #tab-opera,
 #more-container.android #tab-android,
 #more-container.internet-explorer #tab-internet-explorer,
 #more-container.safari #tab-safari,
 #more-container.yandex-browser #tab-yandex-browser,
-#more-container.maxthon #tab-maxthon
+#more-container.maxthon #tab-maxthon,
+#more-container.edge #tab-edge
 {
   display: inline-block;
 }
 
 #more-container.firefox #more-firefox,
 #more-container.chrome #more-chrome,
 #more-container.opera #more-opera,
 #more-container.android #more-android,
 #more-container.internet-explorer #more-internet-explorer,
 #more-container.safari #more-safari,
 #more-container.yandex-browser #more-yandex-browser,
 #more-container.maxthon #more-maxthon
+#more-container.edge #more-edge
 {
   background-color: #dbd4c7;
 }
+#content h3.subscribe-header
+{
+  font-size: 18px;
+  margin-bottom: 0px;
+}
+
+#edge-subscription h3
+{
+  margin: 19px 0px 10px 0px;
+  color: #2d79c0;
+  font-weight: bold;
+  font-family: Arial;
+  font-size: 14px;
+}
+
+#edge-subscription
+{
+  margin: 0px 0px 10px 40px;

[saroyanm, 2015/09/23 12:44:21]

In general I'd be fan of not aligning this with the UL element indentation, but
now I see that in the mockup we are doing so, so in that case we should also
consider RTL direction. 
so please use html[dir="rtl"], to make it consistent with other RTL hacks in the
page.

+}
+
+#other-browsers
+{
+  display: none;
+}
+
+#subscribe-textbox
+{
+  border: solid 2px #a5a5a5;
+  margin-right: 0px;
+  padding-left: 10px;

[saroyanm, 2015/09/23 12:44:22]

Please use padding: 0px 10px; here to make it consistent with other similar
implementations.

+  padding-right: 10px;
+  font-size: 14px;
+  font-family: Arial;
+  line-height: 36px;
+  height: 36px; /* IE 8 */
+}
+
+#subscribe-textbox.placeholder
+{
+  color: #a5a5a5;
+}
+
+#subscribe-button
+{
+  border: solid 1px #357EBD;
+  border-radius: 3px;
+  background-color: #428BCA;
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: bold;
+  min-width: 146px;

[saroyanm, 2015/09/23 12:44:21]

Please use width instead of min-width, so we will be sure that the button will
not exceed the limits for different translations.

+  height: 40px;
+  margin-left: 0px;
+}
+
+#subscribe-button span

[saroyanm, 2015/09/23 12:44:22]

Please remove this rule, we should also consider, longer text for translations,
also in Firefox the layout is broken, probably because of the font rendering
difference.
IMO in this case it's better for text to wrap.

+{
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+#subscribe-form .sucess-label, #subscribe-form .response-error,
+#subscribe-form .invalid-label, #subscribe-form.success input,
+#subscribe-form.success button

[saroyanm, 2015/09/23 12:44:21]

Probably can be merged with rule above (#other-browsers).

+{
+  display: none;
+}
+
+#subscribe-form .invalid-label
+{
+  margin-top: 15px;
+}
+
+#subscribe-form.success .sucess-label,
+#subscribe-form.invalid .invalid-label,
+#subscribe-form.error .response-error
+{
+  display: block;
+}