Skip to content

Jul2024 group 1 options section. #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YauheniNatynchyk wants to merge 2 commits into
base: jul2024-group-1
Choose a base branch
from
Open

Jul2024 group 1 options section. #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f35d586
Updated options.
YauheniNatynchyk Oct 8, 2024
13872b8
Update page.html
YauheniNatynchyk Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,31 @@
<main>
<section class="hero"></section>
<section class="options">
<article>
<h2>Getting started is easy</h2>
<p>Earn Stars and get rewarded in a few easy steps.</p></article>
<article><img src="https://www.starbucks.com/weblx/images/rewards/getting-started/[email protected]">
<article class="intro">
<h2>Getting started is easy</h2>
<p>Earn Stars and get rewarded in a few easy steps.</p>
</article>

<article>
<img src="https://www.starbucks.com/weblx/images/rewards/getting-started/[email protected]" alt="Step 1">
<h3>Create an account</h3>
<p>Join in the app to get access to the full range of Starbucks® Rewards benefits. You can also join online.</p>
<p>To get started, <a href="#">Join now.</a> You can also <a href="#">join in the app</a> to get access to the full range of Starbucks® Rewards benefits.</p>
</article>
<article><img src="https://www.starbucks.com/weblx/images/rewards/getting-started/[email protected]">
<h3>Order and pay how you’d like</h3>
<p>Use cash, credit/debit card or save some time and pay right through the app. You’ll collect Stars all ways. Learn how</p>

<article>
<img src="https://www.starbucks.com/weblx/images/rewards/getting-started/[email protected]" alt="Step 2">
<h3>Order and pay how you’d like</h3>
<p>Use cash, credit/debit card or save some time and pay right through the app. You’ll collect Stars all ways. <a href="#">Learn how</a></p>
</article>
<article><img src="https://www.starbucks.com/weblx/images/rewards/getting-started/[email protected]">
<h3>Earn Stars, get Rewards</h3>
<p>As you earn Stars, you can redeem them for Rewards—like free food, drinks, and more. Start redeeming with as little as 25 Stars! </p>

<article>
<img src="https://www.starbucks.com/weblx/images/rewards/getting-started/[email protected]" alt="Step 3">
<h3>Earn Stars, get Rewards</h3>
<p>As you earn Stars, you can redeem them for Rewards—like free food, drinks, and more. Start redeeming with as little as 25 Stars!</p>
</article>
</section>
</main>

<footer></footer>
</body>
</html>
68 changes: 51 additions & 17 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;}
.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;
}