diff options
| -rw-r--r-- | assets/styles.css | 46 | ||||
| -rw-r--r-- | assets/stylesheets/buttons.hcss | 4 | ||||
| -rw-r--r-- | assets/stylesheets/layout.hcss | 56 | ||||
| -rw-r--r-- | index.html | 14 |
4 files changed, 92 insertions, 28 deletions
diff --git a/assets/styles.css b/assets/styles.css index c3ba9c9..54ec607 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -27,8 +27,10 @@ h2 { } a:link { color: #b71863; } a:hover { color: #880442; } -a.button { +.button { padding: 13px 15px; +} +a.button { border: 1px solid; border-radius: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif; @@ -86,6 +88,39 @@ p { ul { list-style: disc; } +.display-inline-block { + display: inline-block; +} +.position-relative { + position: relative; +} +.position-absolute { + position: absolute; +} +.right-0 { + right: 0; +} +.bottom-0 { + bottom: 0; +} +.margin-top-0\.5 { + margin-top: 0.5em; +} +.margin-bottom-0\.5 { + margin-bottom: 0.5em; +} +.margin-bottom-0\.63 { + margin-bottom: 0.63em; +} +.margin-bottom-1\.8 { + margin-bottom: 1.8em; +} +.padding-top-9 { + padding-top: 9px; +} +.padding-bottom-9 { + padding-bottom: 9px; +} .content { width: 640px; margin-top: 1.8em; @@ -102,12 +137,3 @@ ul { color: #c9ccb4; text-shadow: 1px 3px 5px #230f0f; } -.margin-top-0\.5 { - margin-top: 0.5em; -} -.margin-bottom-0\.63 { - margin-bottom: 0.63em; -} -.margin-bottom-1\.8 { - margin-bottom: 1.8em; -} diff --git a/assets/stylesheets/buttons.hcss b/assets/stylesheets/buttons.hcss index 189ba0d..651e261 100644 --- a/assets/stylesheets/buttons.hcss +++ b/assets/stylesheets/buttons.hcss @@ -1,6 +1,8 @@ -a.button { +.button { padding: 13px 15px; +} +a.button { border: 1px solid; border-radius: 10px; diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss index 9f0f1c0..9f4259b 100644 --- a/assets/stylesheets/layout.hcss +++ b/assets/stylesheets/layout.hcss @@ -24,6 +24,50 @@ ul { list-style: disc; } +.display-inline-block { + display: inline-block; +} + +.position-relative { + position: relative; +} + +.position-absolute { + position: absolute; +} + +.right-0 { + right: 0; +} + +.bottom-0 { + bottom: 0; +} + +.margin-top-0\.5 { + margin-top: 0.5em; +} + +.margin-bottom-0\.5 { + margin-bottom: 0.5em; +} + +.margin-bottom-0\.63 { + margin-bottom: 0.63em; +} + +.margin-bottom-1\.8 { + margin-bottom: 1.8em; +} + +.padding-top-9 { + padding-top: 9px; +} + +.padding-bottom-9 { + padding-bottom: 9px; +} + .content { width: 640px; margin-top: 1.8em; @@ -43,15 +87,3 @@ ul { color: LIMEADE; text-shadow: 1px 3px 5px DARK_CHOCOLATE; } - -.margin-top-0\.5 { - margin-top: 0.5em; -} - -.margin-bottom-0\.63 { - margin-bottom: 0.63em; -} - -.margin-bottom-1\.8 { - margin-bottom: 1.8em; -} @@ -42,15 +42,19 @@ With up to three new button inputs, the possibilities are endless. </p> - <h2>Try it free for 30 days</h2> + <div class="position-relative margin-bottom-0.5"> + <h2 class="display-inline-block">Try it free for 30 days</h2> + <a href="#" + class="button button-magenta + padding-top-9 padding-bottom-9 + position-absolute right-0 bottom-0"> + Buy ($15) + </a> + </div> <div class="code code-block"> <span class="color-murky-pond">$</span> brew install teddywing/DomeKey/dome-key </div> - <p> - <a href="#" class="button button-magenta">Buy ($15)</a> - </p> - <h2>Examples</h2> <p>Video controls:</p> |