-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
390 lines (328 loc) · 18.1 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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trust Us, We're Single</title>
<!-- ADOBE FONTS -->
<link rel="stylesheet" href="https://use.typekit.net/ulx1ldv.css">
<!-- MAIN CSS STYLES -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header">
<div class="site-id">
<div class="logo">
<a href="index.html"><img src="img/tuws-web-logo.png" alt="tuws logo"></a>
</div>
<h1 class="hide-visually"><a href="index.html">tuws</a></h1>
</div>
<div class="top-name">
<p>trust us, we're single.</p>
</div>
<nav class="site-nav" data-navstate="closed">
<h2 class="menu-button">
<span class="hide-visually">Menu</span>
<svg width="30" height="30">
<title>Menu</title>
<rect id="menubar-top" y="0" width="30" height="3"></rect>
<rect id="menubar-middle" y="8" width="30" height="3"></rect>
<rect id="menubar-bottom" y="16" width="30" height="3"></rect>
</svg>
</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="subpage.html">About</a></li>
<li><a href="subpage.html">Us</a></li>
<li><a href="subpage.html">Monthly Theme</a></li>
<li><a href="subpage.html">Scubscriptions</a></li>
<li><a href="subpage.html">Connect with us</a></li>
</ul>
</nav>
</header>
<main class="site-main">
<section class="hero animate-on-scroll">
<div class="container">
<div class="mygrid">
<div class="hero-right">
<h2 class="special-header">Like really, just trust us...</h2>
<p class="hero-body">At trust us, we’re single, we’ll get you ready<br />to mingle. Primarily,
we’ll
have you
ready<br />for
healthy
relationships with people.<br />
<h4 class="hero-body-bold">Platonic. Romantic. Business.</h4>
</p>
<a href="#section01" class="button">
<h4 class="button-type">Get to know us!</h4>
</a>
</div>
<div class="hero-left">
<img src="img/tuws hero illustration.gif">
</div>
</div>
</section>
<section id="section01" class="animate-on-scroll">
<div class="container">
<h2 class="italic">About</h2>
<div class="row swapped">
<div class="one-half">
<img src="img/tuws chairs and faces smaller.png" alt="Placeholder">
</div>
<div class="one-half">
<h3>Who we are...</h3>
<p>A pre-, present, and post relationship advising company that helps individuals and couples
identify steps to improve their relationships with people. Started by two single people who
had issues finding the right person and realized that finding yourself was the first step in
developing great relationships (platonic, business, and romantic). Those same two single
people went on to pursue degrees in psychology with a focus in counseling; combining their
own experiences and education to help those going through social challenges.</p>
</div>
</div>
<div class="row">
<div class="one-half">
<img src="img/couch and line smaller.png" alt="Placeholder">
</div>
<div class="one-half">
<h3>We’re not your average single joe or joelet...</h3>
<p>You see, we are educated and dedicated to your growth. Not that you have anything wrong with
you, psshhh you’re totally not here for fixing. In all seriousness though, we started this
as a learning experience for all parties involved. Our expertise and compassionate ear,
mixed with your experiences and honesty help both parties to grow for the benefit of
everyone.</p>
</div>
</div>
</div>
</section>
<section id="section02" class="animate-on-scroll">
<div class="container">
<h2 class="italic">Us</h2>
<div class="mygrid2">
<div class="ellie">
<div class="one-half animate-scale-in">
<img src="img/ellie for web.png" alt="Placeholder">
</div>
<div class="one-half animate-slid-up">
<h3 class="center-ellie">Ellie</h3>
<p class="position">Co-Founder</p>
<p class="position"><b>Education:</b> Masters degree in Counseling</p>
<p class="position"><b>Loves:</b> Photography, a good quinoa, art</p>
<hr />
<p>Hey! I was a successful photographer for 3 years before I found my interest in
psychology. I noticed my shortcomings in developing
meaningful and lasting relationships, but I had a passion for helping others,
this led me to pursue a Masters Degree in Counseling at Penn State and becoming a high
school Counselor.
<p style="margin-left:10%; margin-right:10%;"></p>While working, I was able to further
understand the main reasons for conflicts between
students were because of some of the same things I lacked, interpersonal skills. I met
Autumn at Penn State, we were both in the same program. I always admired Autumn; always
enthusiastic about what you have to say and very attentive. We were both single at the
time and would joke around about how people should trust us with relationship advice
because we were smart enough to stay single. </p>
</div>
</div>
<div class="autumn">
<div class="one-half animate-scale-in">
<img src="img/autumn for web.png" alt="Placeholder">
</div>
<div class="one-half animate-slid-up">
<h3 class="center-autumn">Autumn</h3>
<p class="position">Co-Founder</p>
<p class="position"><b>Education:</b> Masters degree in Counseling</p>
<p class="position"><b>Loves:</b> Traveling, camping, Brazilian Jiu-Jitsu</p>
<hr />
<p>What's up ya'll! Not sure how to start these, but I was always a people person. I like to
make people happy, it makes me happy, and I like to think that people enjoy my company
(Ellie edit: EVERYONE LOVES HER). While I love people, I never truly became vulnerable
enough to fully give my self to them. This was due to traumatic experiences with family
relationships and relationships in general that I've had as a child. I knew this had to
change and it would start with understanding, so I went to Penn State to pursue a
psychology degree.
<p style="margin-left:10%; margin-right:10%;"></p>After graduating I worked as a Juvenile
Counselor to help troubled youth get back on
track. At Penn State is where I met Ellie. We connected, I loved her honesty with
herself and others, and the unwavering standard she holds herself to. We would always
joke around about how we are single by choice to work on ourselves and people should
look to us for advice on relationships. </p>
</div>
</div>
</div>
<div class="row">
<div class="two-thirds centered animate-scale-in">
<img src="img/ellie and autumn for web.png" alt="Placeholder">
</div>
<div class="two-thirds centered animate-slid-up">
<p class="centered">While we were in college together, the phrase "trust us, we're
single" was thrown
around jokingly to mutual friends and between each other. Poking fun at our
struggles with relationships and acting as if we are superior when we know that is
definitely not the case. Though, we realized that this allowed us to self reflect
and work together to figure out what the root of our challenges were and how to
solve them. Eventually we worked on this together on and off after college and now
what was once a joke between friends, is now our dream of helping others that share
our struggles, coming to reality.</p>
</div>
</div>
</div>
</section>
<section id="section03" class="animate-on-scroll">
<div class="container">
<h2 class="italic">Monthly Theme</h2>
<div class="row">
<div class="one-half animate-drop-in-with-delay">
<h3>Peace of mind...</h3>
<p>In this months tier 1 box, try some eucalyptus shampoo and body wash, and lavendar essential
oils for peace of mind. We find that eucalyptus is good at any time of the day to ease daily
stress. Then at the end of your day, lavendar essential oils for winding down just before
bed.</p>
</div>
<div class="one-half">
<div class="monthly-theme-image">
<img class="animate-scale-in" src="img/tuws peace of mind smaller.png" alt="Placeholder" max
width="150px">
</div>
</div>
</div>
<div class="row">
<div class="one-half animate-drop-in-with-delay">
<h3>Clarity...</h3>
<p>For clarity, we added some lions mane to provide better focus and overall mental clarity.
Also, lion's mane is thought to help protect against Alzheimer's disease and memory loss.
This is good to take before you start your day!</p>
</div>
<div class="one-half">
<div class="monthly-theme-image">
<img class="animate-scale-in" src="img/tuws clarity smaller.png" alt="Placeholder" max
width="150px">
</div>
</div>
</div>
<div class="row">
<div class="one-third">
<img class="animate-scale-in" src="img/tuws box diagonal.png" alt="Placeholder">
</div>
<div class="one-third">
<img class="animate-scale-in" src="img/tuws box v5.png" alt="Placeholder">
</div>
<div class="one-third">
<img class="animate-scale-in" src="img/tuws box v6.png" alt="Placeholder">
</div>
</div>
</div>
</section>
<section id="section04" class="animate-on-scroll">
<div class="container">
<h2 class="italic">Subscriptions</h2>
<div class="top">
<div class="toggle-btn">
<span style="margin: 0.8em;">Monthly</span>
<label class="switch">
<input type="checkbox" id="checbox" onclick="check()" ; />
<span class="slider round"></span>
</label>
<span style="margin: 0.8em;">Annually (2 months free!)</span>
</div>
</div>
<div class="package-container">
<div class="packages-essentials">
<h2 class="essentials">Essentials</h2>
<h2 class="text1">$30</h2>
<h2 class="text2">$300</h2>
<h4 class="subhead-essentials">Everything you need to maintain</h4>
<ul class="list">
<li class="first">Our monthly themed box</li>
<li class="hide-color1">Our monthly themed box</li>
<li class="hide-color1">Our monthly themed box</li>
</ul>
<a href="#" class="button1">Get essentials</a>
</div>
<div class="packages-growth">
<h2 class="growth">Growth</h2>
<h2 class="text1">$60</h2>
<h2 class="text2">$600</h2>
<h4 class="subhead-growth">The tools to grow at a
steady pace.</h4>
<ul class="list">
<li class="first">Our monthly themed box</li>
<li>Monthly 45min video call with tuws founders</li>
<li>Access to private facebook focus group</li>
</ul>
<a href="#" class="button2">Growth</a>
</div>
<div class="packages-growth-bigger">
<h2 class="growth-bigger">GROWTH</h2>
<h2 class="text1">$120</h2>
<h2 class="text2">$1200</h2>
<h4 class="subhead-growth-bigger">There are no shortcuts in personal growth, but you’ll get the
best tools we have to offer!</h4>
<ul class="list">
<li class="first">Our monthly themed box</li>
<li>Weekly 45min video call with tuws founders</li>
<li>Access to private facebook focus group</li>
</ul>
<a href="#" class="button3">Go GROWTH</a>
</div>
</div>
</div>
</section>
<section id="section05" class="animate-on-scroll">
<div class="container">
<h2 class="italic">Connect with us!</h2>
<div class="row2">
<div class="two-thirds column centered">
<form>
<label for="contact_name">Name:</label>
<input class="text" type="text" value="" name="contact_name" id="contact_name" />
<label for="contact_email">Email Address:</label>
<input class="text" type="text" value="" name="contact_email" id="contact_email" />
<label for="contact_subject">Subject:</label>
<input class="text" type="text" value="" name="contact_subject" id="contact_subject" />
<label for="contact_message">Message:</label>
<textarea name="contact_message" id="contact_message"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<nav class="site-nav">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
</footer>
<!-- SMOOTH SCROLL BY CHRIS FERDINANDI https://github.com/cferdinandi/smooth-scroll -->
<script src="js/smooth-scroll.polyfills.min.js"></script>
<script>
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 800,
speedAsDuration: true
});
</script>
<!-- SUBSCRIPTION TOGGLE -->
<script>
function check() {
var checkBox = document.getElementById("checbox");
var text1 = document.getElementsByClassName("text2");
var text2 = document.getElementsByClassName("text1");
for (var i = 0; i < text1.length; i++) {
if (checkBox.checked == true) {
text1[i].style.display = "block";
text2[i].style.display = "none";
} else if (checkBox.checked == false) {
text1[i].style.display = "none";
text2[i].style.display = "block";
}
}
}
check();
</script>
<!-- MAIN JS -->
<script src="js/script.js"></script>
</body>
</html>