Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: index.html

Issue 29646555: Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter (Closed)
Patch Set: Add gulp task to inline css, update templates Created Jan. 3, 2018, 11:17 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « img/abp-logo.svg ('k') | package.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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>
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>
OLDNEW
« no previous file with comments | « img/abp-logo.svg ('k') | package.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld