From f35d586866c3ed02e75a97e5c38633007c9dc5a0 Mon Sep 17 00:00:00 2001 From: konorid Date: Tue, 8 Oct 2024 20:05:13 +0200 Subject: [PATCH 1/2] Updated options. second iteration --- page.html | 33 +++++++++++++++----------- styles.css | 68 ++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 71 insertions(+), 30 deletions(-) diff --git a/page.html b/page.html index 30838af..f3cf06f 100644 --- a/page.html +++ b/page.html @@ -9,25 +9,32 @@
-
-
-
-

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; +} + From 13872b830593834236d11b0e610eff63f0fe3e0a Mon Sep 17 00:00:00 2001 From: konorid Date: Tue, 8 Oct 2024 20:07:12 +0200 Subject: [PATCH 2/2] Update page.html --- page.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/page.html b/page.html index f3cf06f..44bb5aa 100644 --- a/page.html +++ b/page.html @@ -9,7 +9,8 @@
-
+
+

Getting started is easy

Earn Stars and get rewarded in a few easy steps.