Side by Side Diff: index.html
Issue 29646555:
Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter (Closed)
Patch Set: Update confirmation and success texts
Created Jan. 3, 2018, 11:43 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« gulpfile.js ('K')
|
« img/abp-logo.svg ('k')
|
package.json » ('j')
|
scss/_content.scss » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!doctype html> | |
| 2 <html lang="en" dir="ltr"> | |
| 3 <head> | |
| 4 <!-- website-defaults/includes/meta/standard --> | |
| 5 <meta charset="utf-8"> | |
| 6 <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| 7 <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 8 <title>Adblock Plus newsletter signup form</title> | |
| 9 <meta name="description" content="A newsletter sign up form, so users can stay up to date with all things related to Adblock Plus."> | |
| 10 | |
| 11 <!-- styles:start --> | |
| 12 <style> | |
| 13 .unstyled, .unstyled * { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none !important; } | |
| 14 | |
| 15 .sr-only { position: absolute !important; overflow: hidden !important; clip: rec t(0, 0, 0, 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } | |
| 16 | |
| 17 /** Center within a responsive fixed width Use modifier classes defined in _widt h.scss to change said fixed width */ | |
| 18 .container { width: 1140px; max-width: 100%; margin-right: auto; margin-left: au to; padding-right: 1em; padding-left: 1em; } | |
| 19 | |
| 20 /** Clear without collapsed margin */ | |
| 21 .clearfix:after, .clearfix:before { display: table; content: " "; } | |
| 22 | |
| 23 .clearfix:after { clear: both; } | |
| 24 | |
| 25 /** Align a block to the start of a line */ | |
| 26 .float-start { float: left; } | |
| 27 | |
| 28 [dir="rtl"] .float-start { float: right; } | |
| 29 | |
| 30 /** Align a block to the end of a line */ | |
| 31 .float-end { float: right; } | |
| 32 | |
| 33 [dir="rtl"] .float-end { float: left; } | |
| 34 | |
| 35 /** Force full-width */ | |
| 36 .full-width { display: block; width: 100%; } | |
| 37 | |
| 38 /** Fix a block to the width of a phone */ | |
| 39 .phone-width { width: auto; } | |
| 40 | |
| 41 /** Fix a block to the width of a phablet */ | |
| 42 .phablet-width { width: 540px; } | |
| 43 | |
| 44 /** Fix a block to the width of a tablet */ | |
| 45 .tablet-width { width: 720px; } | |
| 46 | |
| 47 /** Fix a block to the width of a desktop */ | |
| 48 .desktop-width { width: 960px; } | |
| 49 | |
| 50 /** Fix a block to the width of a large desktop */ | |
| 51 .large-desktop-width { width: 1140px; } | |
| 52 | |
| 53 /******************************************************************************* CSS Reset */ | |
| 54 /* Reset margins, paddings, and font globally */ | |
| 55 html, body, h1, h2, h3, h4, h5, h6, a, p, span, em, small, strong, sub, sup, str ike, s, mark, del, ins, abbr, dfn, blockquote, q, cite, code, pre, kbd, samp, va r, output, ruby, ol, ul, li, dl, dt, dd, div, section, article, main, aside, nav , header, hgroup, footer, img, figure, figcaption, address, time, audio, video, canvas, object, iframe, embed, details, summary, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0px; padding: 0px; bor der: 0px; font-size: 100%; font: inherit; vertical-align: baseline; } | |
| 56 | |
| 57 /* Add the correct display in IE 9-. */ | |
| 58 article, aside, footer, header, nav, section, main { display: block; } | |
| 59 | |
| 60 /* Set default box-sizing (opinionated) */ | |
| 61 *, *:before, *:after { box-sizing: inherit; } | |
| 62 | |
| 63 html { box-sizing: border-box; } | |
| 64 | |
| 65 /* Remove the margin in all browsers (opinionated). */ | |
| 66 body { margin: 0px; } | |
| 67 | |
| 68 /* Remove list styles (opinionated) */ | |
| 69 ol, ul { list-style: none; } | |
| 70 | |
| 71 /* Remove quotes ("") in most browsers (opinionated) */ | |
| 72 blockquote, q { quotes: none; } | |
| 73 | |
| 74 /* Remove quotes ("") in Safari (opinionated) */ | |
| 75 blockquote:before, blockquote:after, q:before, q:after { content: ""; content: n one; } | |
| 76 | |
| 77 /* Share borders between adjacent cells (opinionated) */ | |
| 78 table { border-collapse: collapse; border-spacing: 0; } | |
| 79 | |
| 80 /* Normalize inline content (opinionated) */ | |
| 81 b, strong { font-weight: bolder; } | |
| 82 | |
| 83 small { font-size: smaller; } | |
| 84 | |
| 85 abbr { text-decoration: underline; cursor: help; } | |
| 86 | |
| 87 sup { position: relative; font-size: 75%; vertical-align: super; } | |
| 88 | |
| 89 a, a:visited { color: inherit; /* Remove the gray background on active links in IE 10. */ background-color: transparent; text-decoration: none; /* Set default p ointer regardless of href (opinionated) */ cursor: pointer; } | |
| 90 | |
| 91 a:hover, a:active, a:focus { text-decoration: underline; } | |
| 92 | |
| 93 img { /* Make fixed width images responsive */ max-width: 100%; /* Remove the bo rder on images inside links in IE 10-. */ border-style: none; } | |
| 94 | |
| 95 /* Set correct display for hidden attribute in IE 10- */ | |
| 96 [hidden] { display: none; } | |
| 97 | |
| 98 /******************************************************************************* Base styles */ | |
| 99 html { color: #212121; background-color: #fff; font-family: "Source Sans Pro", s ans-serif; line-height: 1.5; } | |
| 100 | |
| 101 /******************************************************************************* Basic forms fields /* 1. Reset */ | |
| 102 /* Change the font styles in all browsers (opinionated). */ | |
| 103 input, optgroup, select, textarea { font: inherit; } | |
| 104 | |
| 105 /* Show the overflow in IE and Edge */ | |
| 106 input { overflow: visible; } | |
| 107 | |
| 108 /* Remove the inheritance of text transform in Edge, Firefox, and IE. */ | |
| 109 select { text-transform: none; } | |
| 110 | |
| 111 /* Set block display (opinionated) */ | |
| 112 fieldset { display: block; } | |
| 113 | |
| 114 /* Correct the text wrapping in Edge and IE. */ | |
| 115 legend { display: table; max-width: 100%; white-space: normal; } | |
| 116 | |
| 117 /* Remove the default vertical scrollbar in IE. */ | |
| 118 textarea { overflow: auto; } | |
| 119 | |
| 120 /* Remove the padding in IE 10-. */ | |
| 121 [type="checkbox"], [type="radio"] { padding: 0px; } | |
| 122 | |
| 123 /******************************************************************************* Buttons /* 1. Reset */ | |
| 124 button { margin: 0px; color: inherit; font: inherit; /* Show the overflow in IE and Edge */ overflow: visible; /* Remove rounded corners in Chrome 62+ */ border -radius: 0; /* Remove the inheritance of text transform in Edge, Firefox, and IE . */ text-transform: none; } | |
| 125 | |
| 126 /** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` contro ls in Android 4. 2. Correct the inability to style clickable types in iOS and Sa fari. */ | |
| 127 button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearan ce: button; } | |
| 128 | |
| 129 /* Remove the inner border and padding in Firefox. */ | |
| 130 button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-mo z-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0px; border-style: n one; } | |
| 131 | |
| 132 /* Restore the focus styles unset by the previous rule. */ | |
| 133 button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focus ring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } | |
| 134 | |
| 135 /******************************************************************************* Layout */ | |
| 136 html { background-color: #F3F3F3; } | |
| 137 | |
| 138 @media (min-width: 576px) { body { display: table; width: 100%; min-height: 100v h; } } | |
| 139 | |
| 140 /* .outer-container */ | |
| 141 @media (min-width: 576px) { .outer-container { display: table-cell; vertical-ali gn: middle; } } | |
| 142 | |
| 143 /* #page-header */ | |
| 144 #page-header { margin-top: 2em; margin-bottom: 1em; } | |
| 145 | |
| 146 @media (min-width: 576px) { #page-header { margin-top: 0; margin-bottom: 2em; te xt-align: center; } } | |
| 147 | |
| 148 #page-header figure { display: inline-table; font-size: 1.5em; font-weight: 300; } | |
| 149 | |
| 150 @media (min-width: 576px) { #page-header figure { font-size: 2em; } } | |
| 151 | |
| 152 #page-header figure img, #page-header figure figcaption { display: table-cell; v ertical-align: middle; } | |
| 153 | |
| 154 #page-header figure img { height: 1.5em; } | |
| 155 | |
| 156 @media (min-width: 576px) { #page-header figure img { height: 2em; } } | |
| 157 | |
| 158 #page-header figure figcaption { padding: 0 0.5em; } | |
| 159 | |
| 160 #page-header figure strong { font-weight: 700; } | |
| 161 | |
| 162 #page-header h1 { margin: 1em auto 0.5em; font-weight: 700; } | |
| 163 | |
| 164 /* #sign-up, #page-footer */ | |
| 165 #sign-up, #page-footer { width: 100%; } | |
| 166 | |
| 167 @media (min-width: 576px) { #sign-up, #page-footer { max-width: 320px; margin-ri ght: auto; margin-left: auto; } } | |
| 168 | |
| 169 #page-footer { margin-top: 1em; text-align: center; } | |
| 170 | |
| 171 @media (min-width: 576px) { #page-footer { text-align: left; } } | |
| 172 | |
| 173 /******************************************************************************* Content */ | |
| 174 a, a:visited { color: #077CA6; text-decoration: underline; } | |
| 175 | |
| 176 /******************************************************************************* Form */ | |
| 177 input, button { width: 100%; height: 2.6em; border-radius: 4px; } | |
| 178 | |
| 179 /* Input field */ | |
| 180 input { margin-bottom: 2em; padding: 0 0.5em; border: 1px solid #CDCDCD; } | |
| 181 | |
| 182 /* Error state */ | |
| 183 .invalid { border-color: #f44336; } | |
| 184 | |
| 185 .error-message { display: none; } | |
| 186 | |
| 187 .invalid + .error-message { display: block; margin-top: -0.5em; margin-bottom: 1 em; color: #f44336; } | |
| 188 | |
| 189 /* Buttons */ | |
| 190 button { border: 0; text-transform: uppercase; } | |
| 191 | |
| 192 .secondary { color: #fff; background-color: #C70D2B; } | |
| 193 | |
| 194 </style> | |
| 195 <!-- styles:end --> | |
| 196 </head> | |
| 197 <body> | |
| 198 <div class="outer-container"> | |
| 199 <div class="container phablet-width"> | |
| 200 | |
| 201 <header id="page-header"> | |
| 202 <figure> | |
| 203 <img src="https://eyeo.com/images/backclick/abp-logo.png" srcset="http s://eyeo.com/images/backclick/abp-logo.svg 2x" alt="ABP inside red octagon"> | |
| 204 <figcaption>Adblock <strong>Plus</strong></figcaption> | |
| 205 </figure> | |
| 206 <h1>Sign up for the Adblock Plus newsletter</h1> | |
| 207 <p>Stay up to date with all things Adblock Plus</p> | |
| 208 </header> | |
| 209 | |
| 210 <form id="sign-up"> | |
| 211 <label for="email">Email Address *</label> | |
|
juliandoucette
2018/01/04 02:34:23
NIT/Suggest: <a title="Required field">*</a>?
ire
2018/01/04 11:14:42
I think the <abbr> element is better here? Done.
| |
| 212 <input type="email" id="email" name="email" required> | |
| 213 <div class="error-message">Please enter a valid email address</div> | |
| 214 | |
| 215 <label for="fullname">Full name</label> | |
| 216 <input type="text" id="fullname" name="fullname"> | |
| 217 | |
| 218 <button type="submit" class="secondary">Sign Up</button> | |
| 219 </form> | |
| 220 <footer id="page-footer"> | |
| 221 <a href="https://eyeo.com/en/privacy" target="_blank">Privacy Policy</a> | |
| 222 </footer> | |
| 223 </div> | |
| 224 </div> | |
| 225 </body> | |
| 226 </html> | |
| OLD | NEW |
