Reword and embiggen the headings

Also reword some of the `<p>`s so that they flow better from the
headings.

This was a bit me, and a bit sitting down and hammering this stuff out
with Stephen and Sheryll.
This commit is contained in:
Chris Hill-Scott
2016-11-30 13:52:12 +00:00
parent 63e13836b0
commit 4af8206723
2 changed files with 29 additions and 18 deletions

View File

@@ -71,12 +71,23 @@
&-section { &-section {
@extend %site-width-container; @extend %site-width-container;
margin-bottom: $gutter-half;
h2 { h2 {
@include bold-24; @include bold-24;
margin: $gutter-half 0 10px 0; margin: $gutter-half 0 10px 0;
} }
h2 {
@include bold-36;
margin: 0 0 $gutter;
}
.with-keyline {
border-top: 1px solid $border-colour;
padding: $gutter * 1.5 0 0 0;
}
img { img {
max-width: 100%; max-width: 100%;
margin: 0 0 $gutter * 1.5 0; margin: 0 0 $gutter * 1.5 0;

View File

@@ -18,8 +18,8 @@
Send emails and text messages to your users Send emails and text messages to your users
</h1> </h1>
<p> <p>
If you work for a UK government department or agency you can Try GOV.UK Notify now if you work for a UK government
try GOV.UK Notify now. department or agency.
</p> </p>
<div class="button-container"> <div class="button-container">
<a class="button button-start" href='{{ url_for('.register' )}}'> <a class="button button-start" href='{{ url_for('.register' )}}'>
@@ -37,28 +37,28 @@
<div class="grid-row"> <div class="grid-row">
<div class="column-half"> <div class="column-half">
<h2> <h2>
Get control of your content Control your content
</h2> </h2>
<p> <p>
Straightforward templating means you dont need technical You dont need any technical knowledge to create email and
knowledge to create emails and text messages. text&nbsp;message templates.
</p> </p>
</div> </div>
<div class="column-half"> <div class="column-half">
<h2> <img src="/static/images/product/01-templates.svg">
See how your messages are performing
</h2>
<p>
Track how many messages youve sent and which ones arent
getting delivered.
</p>
</div> </div>
</div> </div>
</div> </div>
<div class="product-page-section"> <div class="product-page-section">
<div class="grid-row"> <div class="grid-row">
<div class="column-half"> <div class="column-half">
<img src="/static/images/product/01-templates.svg"> <h2>
See how your messages perform
</h2>
<p>
Track how many messages youve sent and
find out which ones arent getting delivered.
</p>
</div> </div>
<div class="column-half"> <div class="column-half">
<img src="/static/images/product/02-reporting.svg"> <img src="/static/images/product/02-reporting.svg">
@@ -66,20 +66,20 @@
</div> </div>
</div> </div>
<div class="product-page-section bottom-gutter-2"> <div class="product-page-section bottom-gutter-2">
<h2> <h2 class="with-keyline">
Works with your existing systems Send messages manually or automatically
</h2> </h2>
<div class="grid-row"> <div class="grid-row">
<div class="column-half"> <div class="column-half">
<p> <p>
Use the web interface to upload a spreadsheet of Upload a spreadsheet of email&nbsp;addresses or
email&nbsp;addresses or phone&nbsp;numbers. phone&nbsp;numbers and Notify sends the messages.
</p> </p>
<img src="/static/images/product/03-spreadsheet.svg"> <img src="/static/images/product/03-spreadsheet.svg">
</div> </div>
<div class="column-half"> <div class="column-half">
<p> <p>
Integrate the GOV.UK Notify API with your web application or Integrate the GOV.UK Notify API with your web&nbsp;application or
back office system. back office system.
</p> </p>
<img src="/static/images/product/04-api.svg"> <img src="/static/images/product/04-api.svg">