-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
296 lines (292 loc) · 16.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mindbodygreen 2</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/main.min.css">
</head>
<body>
<section class="toggleSlider">
<div class="toggleSlider__padding">
<div class="toggleSlider__navigation">
<button class="toggleSlider__navigation__button toggleSlider__navigation__button--prev toggleSlider__navigation__button--hidden">
<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.75 3.1733L6.92347 10.9998L14.75 18.8263L11.6633 21.9131L0.75 10.9998L11.6633 0.0865593L14.75 3.1733H14.75Z" fill="white"/>
</svg>
</button>
<button class="toggleSlider__navigation__button toggleSlider__navigation__button--next">
<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.25 18.8267L8.07653 11.0002L0.25 3.17365L3.33674 0.0869141L14.25 11.0002L3.33674 21.9134L0.25 18.8267H0.25Z" fill="white"/>
</svg>
</button>
</div>
<div class="toggleSlider__wrapper toggleSlider__wrapper--one">
<div class="toggleSlider__section toggleSlider__section--tea toggleSlider__section--open toggleSlider__section--animated">
<div class="toggleSlider__section__title toggleSlider__section__title--tea">
<span>M</span>
<span>o</span>
<span>n</span>
<span>d</span>
<span>a</span>
<span>y</span>
</div>
<div class="toggleSlider__section__content toggleSlider__section__content--tea">
<img class="animated fadeInRight desktop" src="images/tab-1.png" alt="Monday, Read up">
<img class="animated fadeInRight mobile" src="images/tab-1-m.png" alt="Monday, Read up">
<div class="toggleSlider__section__content__text">
<div class="toggleSlider__section__content__text__heading left">
<h2>
<span class="animated fadeInUp">R</span>
<span class="animated fadeInUp">e</span>
<span class="animated fadeInUp">a</span>
<span class="animated fadeInUp">d</span>
<span> </span>
<span class="animated fadeInUp">u</span>
<span class="animated fadeInUp">p</span>
</h2>
</div>
<div class="toggleSlider__section__content__text__description animated fadeInRight">
<p>It’s probably safe to say that you’re (at least partially) familiar with who's running for president, but Election Day is about way more than that. Kick off the week by educating yourself on the down-ballot candidates running for local office in your community. Why? Because local legislation has a direct impact on your day-to-day life (think pandemic response, funding for education, public transportation, housing, and so much more).</p>
<p>Not sure where to start? There are plenty of handy guides on who’s up for election in your state, where they stand on the issues, and how they align (or not!) on the issues that are most important to you.This may seem like information overload, so steep a cup of bright and fruity <a href="https://yogiproducts.com/teas/green-teas/sweet-tangerine-positive-energy/" target="_blank" rel="noreferrer">Yogi Sweet Tangerine Positive Energy tea</a> to help you stay focused & energized.</p>
</div>
<div class="toggleSlider__section__content__sponsored animated fadeInRight">
<div class="toggleSlider__section__content__sponsored__title">
Steep:
</div>
<div>
<a href="https://yogiproducts.com/teas/green-teas/sweet-tangerine-positive-energy/" target="_blank" rel="noreferrer" class="toggleSlider__section__content__sponsored__content">
<img src="images/YT-US-SweetTangerinePositiveEnergy.jpg" alt="Sweet Tangerine Positive Energy by Yogi Tea">
<p>Yogi Tea<br>
<span>Sweet Tangerine Positive Energy</span>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="toggleSlider__section toggleSlider__section--absolute toggleSlider__section--morning">
<div class="toggleSlider__section__title toggleSlider__section__title--morning">
<span>T</span>
<span>u</span>
<span>e</span>
<span>s</span>
<span>d</span>
<span>a</span>
<span>y</span>
</div>
<div class="toggleSlider__section__content toggleSlider__section__content--portrait">
<div class="toggleSlider__section__content__image animated fadeInRight">
<img class="desktop" src="images/tab-2.png" alt="Tuesday, Expand">
<img class="mobile" src="images/tab-2-m.png" alt="Tuesday, Expand">
</div>
<div class="toggleSlider__section__content__text">
<div>
<h2>
<div>
<span class="animated fadeInUp">E</span>
<span class="animated fadeInUp">x</span>
<span class="animated fadeInUp">p</span>
<span class="animated fadeInUp">a</span>
<span class="animated fadeInUp">n</span>
<span class="animated fadeInUp">d</span>
</div>
</h2>
<h2 class="secondWord">
<div>
<span class="animated fadeInUp">y</span>
<span class="animated fadeInUp">o</span>
<span class="animated fadeInUp">u</span>
<span class="animated fadeInUp">r</span>
<span class="animated fadeInUp"> </span>
<span class="animated fadeInUp">P</span>
<span class="animated fadeInUp">O</span>
<span class="animated fadeInUp">V</span>
</div>
</h2>
<p class="animated fadeInRight">In the days of social media and endless scroll, it’s (too) easy to find ourselves in echo chambers of like-minded friends and family who reinforce our already-held beliefs. Today, we want you to actively seek out alternative opinions and voices to expand your point of viewTry engaging in friendly discussion with that friend from high school who sees things differently than you. Or, see different perspectives in your feed by following 10 people you don’t agree with, or by getting your news for the day from a site or network you’ve never engaged with before.</p>
<p class="animated fadeInRight">We get it—this kind of dissonance can be stressful. So take some time to chill out over a comforting cup of <a href="https://yogiproducts.com/teas/herbal-teas/honey-lavender-stress-relief/" target="_blank" rel="noreferrer">Yogi Honey Lavender Stress Relief Tea</a>, taking in the soothing aroma of Lavender and Chamomile with each sip.</p>
</div>
<div class="toggleSlider__section__content__sponsored animated fadeInRight">
<div class="toggleSlider__section__content__sponsored__title">
Steep:
</div>
<div>
<a href="https://yogiproducts.com/teas/herbal-teas/honey-lavender-stress-relief/" target="_blank" rel="noreferrer" class="toggleSlider__section__content__sponsored__content">
<img src="images/YT-US-HoneyLavenderStressRelief.jpg" alt="Honey Lavendar Stress Relief Tea by Yogi Tea">
<p>Yogi Tea<br>
<span>Honey Lavendar Stress Relief Tea</span>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="toggleSlider__section toggleSlider__section--absolute toggleSlider__section--afternoon">
<div class="toggleSlider__section__title toggleSlider__section__title--afternoon">
<span>W</span>
<span>e</span>
<span>d</span>
<span>n</span>
<span>e</span>
<span>s</span>
<span>d</span>
<span>a</span>
<span>y</span>
</div>
<div class="toggleSlider__section__content toggleSlider__section__content--portrait">
<div class="toggleSlider__section__content__image animated fadeInRight">
<img class="desktop" src="images/tab-3.png" alt="Wednesday, Get Involved">
<img class="mobile" src="images/tab-3-m.png" alt="Wednesday, Get Involved">
</div>
<div class="toggleSlider__section__content__text">
<div>
<h2>
<div>
<span class="animated fadeInUp">G</span>
<span class="animated fadeInUp">e</span>
<span class="animated fadeInUp">t</span>
</div>
</h2>
<h2 class="secondWord">
<div>
<span class="animated fadeInUp">i</span>
<span class="animated fadeInUp">n</span>
<span class="animated fadeInUp">v</span>
<span class="animated fadeInUp">o</span>
<span class="animated fadeInUp">l</span>
<span class="animated fadeInUp">v</span>
<span class="animated fadeInUp">e</span>
<span class="animated fadeInUp">d</span>
</div>
</h2>
<p class="animated fadeInRight">Whether you sign up to be a poll worker, volunteer for an organization that’s supporting a policy you feel strongly about (like your local League of Women Voters), or inquire about mentorship programs at the public school in your district, there are no shortage of opportunities to empower your community during this pivotal time.</p>
<p class="animated fadeInRight">Need some motivation to get out there and get involved? Sip an invigorating cup of <a href="https://yogiproducts.com/teas/herbal-teas/honey-chai-turmeric-vitality-tea/" target="_blank" rel="noreferrer">Yogi Honey Chai Turmeric Vitality tea</a>, blended with delicious, warming Chai spices.</p>
</div>
<div class="toggleSlider__section__content__sponsored animated fadeInRight">
<div class="toggleSlider__section__content__sponsored__title">
Steep:
</div>
<div>
<a href="https://yogiproducts.com/teas/herbal-teas/honey-chai-turmeric-vitality-tea/" target="_blank" rel="noreferrer" class="toggleSlider__section__content__sponsored__content">
<img src="images/YT-US-HoneyChaiTurmericVitality.jpg" alt="Honey Chai Tumeric Vitality Tea by Yogi Tea">
<p>Yogi Tea<br>
<span>Honey Chai Tumeric Vitality Tea</span>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="toggleSlider__section toggleSlider__section--absolute toggleSlider__section--evening">
<div class="toggleSlider__section__title toggleSlider__section__title--evening">
<span>T</span>
<span>h</span>
<span>u</span>
<span>r</span>
<span>s</span>
<span>d</span>
<span>a</span>
<span>y</span>
</div>
<div class="toggleSlider__section__content toggleSlider__section__content--tea">
<img class="animated fadeInRight desktop" src="images/tab-4.png" alt="Thursday, Spread the word">
<img class="animated fadeInRight mobile" src="images/tab-4-m.png" alt="Thursday, Spread the word">
<div class="toggleSlider__section__content__text">
<div class="toggleSlider__section__content__text__heading mobile-break">
<h2>
<span class="animated fadeInUp">S</span>
<span class="animated fadeInUp">p</span>
<span class="animated fadeInUp">r</span>
<span class="animated fadeInUp">e</span>
<span class="animated fadeInUp">a</span>
<span class="animated fadeInUp">d</span>
<span> </span>
<h2 class="secondWord">
<span class="animated fadeInUp">t</span>
<span class="animated fadeInUp">h</span>
<span class="animated fadeInUp">e</span>
<span> </span>
<span class="animated fadeInUp">w</span>
<span class="animated fadeInUp">o</span>
<span class="animated fadeInUp">r</span>
<span class="animated fadeInUp">d</span>
</h2>
</div>
<div class="toggleSlider__section__content__text__description animated fadeInRight">
<p>If you’re reading this, you’re probably already mindful of what’s going on next week. But—shocker—this isn’t the case for everyone around you. Today, we encourage you to uplift others in your community by empowering them with tools to help make their voices heard. Post a short video to your social feed explaining why voting is so important to you, try reaching out to 10 friends and ask exactly how they plan to vote, or, get right to the point and directly send them (vs. passively sharing on your feed) some voting resources to help them get started. One of our favorite resources? This couldn’t-be-easier-to-use site that confirms voter registration status in seconds. After all, you can’t make your voice heard if you’re not registered to vote.</p>
<p>This is your chance to make your voice heard, but spreading the word can be draining. So tonight, wind down and support your overall wellbeing with a lightly sweet and soothing cup of <a href="https://yogiproducts.com/teas/herbal-teas/echinacea-immune-support/" target="_blank" rel="noreferrer">Yogi Echinacea Immune Support tea</a>.</p>
</div>
<div class="toggleSlider__section__content__sponsored animated fadeInRight">
<div class="toggleSlider__section__content__sponsored__title">
Steep:
</div>
<div>
<a href="https://yogiproducts.com/teas/herbal-teas/echinacea-immune-support/" target="_blank" rel="noreferrer" class="toggleSlider__section__content__sponsored__content">
<img src="images/YT-US-EchinaceaImmuneSupport.jpg" alt="Echinacea Immune Support tea by Yogi Tea">
<p>Yogi Tea<br>
<span>Echinacea Immune Support tea</span>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="toggleSlider__section toggleSlider__section--absolute toggleSlider__section--friday">
<div class="toggleSlider__section__title toggleSlider__section__title--friday">
<span>F</span>
<span>r</span>
<span>i</span>
<span>d</span>
<span>a</span>
<span>y</span>
</div>
<div class="toggleSlider__section__content toggleSlider__section__content--tea">
<div class="animated fadeInRight">
<img class="desktop" src="images/tab-5.png" alt="Friday, Restore">
<img class="mobile" src="images/tab-5-m.png" alt="Friday, Restore">
</div>
<div class="toggleSlider__section__content__text">
<div class="toggleSlider__section__content__text__heading left">
<h2>
<span class="animated fadeInUp">R</span>
<span class="animated fadeInUp">e</span>
<span class="animated fadeInUp">s</span>
<span class="animated fadeInUp">t</span>
<span class="animated fadeInUp">o</span>
<span class="animated fadeInUp">r</span>
<span class="animated fadeInUp">e</span>
</h2>
</div>
<div class="toggleSlider__section__content__text__description animated fadeInRight">
<p>You made it through the week! And although the big day is still yet to come, today is the perfect chance to take a restorative moment away from the hubbub of election season. Your assignment today is to end the week on a relaxing note by focusing on self-care—take a bubble bath, make your favorite comfort food for dinner, and read something that has nothing to do with what’s going on in the world (start a book club, maybe?)</p>
<p>But most importantly, cap it all off in the most soothing way possible—with a warm, zestycup of <a href="https://yogiproducts.com/teas/herbal-teas/mango-ginger/" target="_blank" rel="noreferrer">Yogi Mango Ginger tea</a> (ideally while in aforementioned bubble bath). </p>
</div>
<div class="toggleSlider__section__content__sponsored animated fadeInRight">
<div class="toggleSlider__section__content__sponsored__title">
Steep:
</div>
<div>
<a href="https://yogiproducts.com/teas/herbal-teas/mango-ginger/" target="_blank" rel="noreferrer" class="toggleSlider__section__content__sponsored__content">
<img src="images/YT-US-MangoGinger.jpg" alt="Mango Ginger tea by Yogi Tea">
<p>Yogi Tea<br>
<span>Mango Ginger tea</span>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/main.min.js"></script>
</body>
</html>