diff --git a/page.html b/page.html index 30838af..44bb5aa 100644 --- a/page.html +++ b/page.html @@ -11,23 +11,31 @@
-
-

Getting started is easy

-

Earn Stars and get rewarded in a few easy steps.

-
+
+

Getting started is easy

+

Earn Stars and get rewarded in a few easy steps.

+
+ +
+ Step 1

Create an account

-

Join in the app to get access to the full range of Starbucks® Rewards benefits. You can also join online.

+

To get started, Join now. You can also join in the app to get access to the full range of Starbucks® Rewards benefits.

-
-

Order and pay how you’d like

-

Use cash, credit/debit card or save some time and pay right through the app. You’ll collect Stars all ways. Learn how

+ +
+ Step 2 +

Order and pay how you’d like

+

Use cash, credit/debit card or save some time and pay right through the app. You’ll collect Stars all ways. Learn how

-
-

Earn Stars, get Rewards

-

As you earn Stars, you can redeem them for Rewards—like free food, drinks, and more. Start redeeming with as little as 25 Stars!

+ +
+ Step 3 +

Earn Stars, get Rewards

+

As you earn Stars, you can redeem them for Rewards—like free food, drinks, and more. Start redeeming with as little as 25 Stars!

+ diff --git a/styles.css b/styles.css index ac0ade2..b163239 100644 --- a/styles.css +++ b/styles.css @@ -10,20 +10,54 @@ --normal-green: #00754a; --gold-color: #cba258; } -.options {display: flex; - justify-content: center; - flex-wrap: wrap; - } -.options article h3{text-align: center;} -.options article p {text-align: center;} - -.options article {justify-content: center; - margin: 10px 35px 10px; - width: 30%;} -.options article img {width: 48px; - height: 48px; - margin: 10px 30%;} - -.options article:first-child {justify-self: center; - margin: 10px 45%; - width: 100%;} \ No newline at end of file +.options { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + justify-content: center; + width: 100%; +} + +.intro { + text-align: center; + margin-bottom: 40px; + margin-top: 80px; + width: 100%; +} + +.intro p { + margin-top: 15px; + font-weight: 400; + font-size: 1.2rem ; +} + +.options article:not(.intro) { + flex: 1; + max-width: 350px; + + text-align: center; + margin: 0 20px; + margin-top: 20px; +} + +.options a { + color: #006241;; +} +.options article img { + width: 48px; + height: 48px; + margin: 10px auto; + display: block; +} + +.options article h3 { + margin: 10px 0; +} + +.options article p { + font-size: 1.2rem ; + line-height: 1.5; + font-weight: 400; +} +