diff --git a/app/index.html b/app/index.html index 10490e9..64c4ed1 100644 --- a/app/index.html +++ b/app/index.html @@ -33,6 +33,14 @@ + + + + + + + +
@@ -98,37 +106,58 @@
-

How will you validate your domain?

-
- -
- -
- +

Let's verify your domain

+
+ + +

Verify Domains & Sub-Domains

diff --git a/app/styles/main.css b/app/styles/main.css index 187c988..4844298 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -68,6 +68,7 @@ body { font-family: Source Sans Pro, sans-serif; margin: 0; line-height: 1.33; + color: #1a1a1a; } .greenlock-name { @@ -84,7 +85,93 @@ body { display: initial; } -svg { +svg {} + +.js-progress-step-complete > .circle {} + +h1 { + font-size: 1.77777778em; } -.js-progress-step-complete > .circle {} \ No newline at end of file +input[type=email], input[type=text] { + font-size: 1em; + padding: 0.444444444em 0.888889em; + width: 100%; +} + +.checkbox-array { + display: flex; + flex-direction: column; + align-items: start; + padding: 1em 0; +} + +.checkbox-array input[type=checkbox] { + display: none; +} + +.checkbox-array input[type=checkbox] ~ .icon-checked-box { + display: none; +} + +.checkbox-array input[type=checkbox] ~ .icon-unchecked-box { + display: initial; +} + + +.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box { + display: initial; +} + +.checkbox-array input[type=checkbox]:checked ~ .icon-unchecked-box { + display: none; +} + +.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box { + width: 1.333333333em; + fill: #5bc17f; + margin-right: 0.666666667em; +} + +.checkbox-array label { + display: flex; + align-items: center; + height: 1.333333333em; + font-size: 0.833333333em; + margin: 0.4em 0; +} + +a { + color: #1a1a1a; +} + +.email-usage { + color: #666666; + text-align: start; + font-size: 0.833333333em; + margin: 2em 0; +} + +.button-next { + width: 100%; + background-color: #5bc17f; + border: none; + font-size: 1em; + color: white; + padding: 0.44444em; + margin: 1em 0; +} + +.tabbed-selector label { + width: 50%; + padding: 0.5em 0; +} + +.tabbed-selector { + display: flex; + font-weight: bold; +} + +.tabbed-selector input[type=radio] { + display: none; +} \ No newline at end of file