-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
338 lines (312 loc) · 20.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
<!--
***************************************LOVE CARDS ORACLE PROJECT**************************************
******************************************************************************************************
This website is created for Genie Joseph. It's purpose is to provide advice and guidance to those who have struggled to find a meaningful connection in thier love life. The content is based off of the work of Genie's blogs and the principles discussed in them. The blog posts are linked on this page in the sidebar from Healthy-Relationship-Advice.com.
Project began in October, 2019
First iteration of this website was completed in February 7th, 2020.
Second iteration: March 21st, 2020.
Third iteration: March 29th, 2020 (Thanks, Coronavirus...).
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/icon-font.css"> -->
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="shortcut icon" type="image/png" href="img/favicon.png">-->
<!--
HTML structure using the BEM methodology.
-->
<title>Love Cards Oracle</title>
</head>
<body class="container">
<header class="header">
<div class="header__text">
<h1 class="heading-primary">
<span class="heading-primary--main">Love Cards Oracle</span>
</h1>
<h2 class="heading-primary">
<span class="heading-primary--sub">Whatever the Problem</span>
<span class="heading-primary--sub">Love Finds the Solution</span>
</h2>
</div>
<div class="nav">
<nav class="nav__box">
<ul class="nav__list">
<li class="nav__item"><a href="#cards" class="nav__link">Readings</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#users" class="nav__link">Testimonials</a></li>
<li class="nav__item"><a href="#genie" class="nav__link">Genie</a></li>
</ul>
</nav>
</div>
<!-- <div class="header__logo">
<img src="img/genie.jpg" alt="placeholder image" class="header__logo--img">
</div> -->
</header>
<section class="cards" id="cards">
<div class="reading">
<h2 class="heading-secondary reading__heading">Here is the guidance you seek</h2>
<div class="reading__info">
<p class="paragraph reading__large">The Love Cards Oracle is not for predictions or fortune-telling.
</p>
<p class="paragraph reading__large">These insights are designed to help you understand the changes you need to make to find the partnership of your dreams.
</p>
</div>
<div class="reading__container">
<div class="reading__cupid">
<p class="reading__paragraph">Take a chance with “Cupid’s Arrow"</p>
<button class="btn-inline cupid">Cupid's Arrow</button>
</div>
<div class="reading__guidance">
<p class="reading__paragraph">Get guidance for inspired action</p>
<div class="reading__input">
<input name="number" id="number" type="interger" class="reading__input--number" placeholder="Enter a number from 1-333" required="required">
<select name="color" id="color" class="reading__input--color" required="required">
<option value="blue" class="reading__input--colors">Blue</option>
<option value="red" class="reading__input--colors">Red</option>
<option value="orange" class="reading__input--colors">Orange</option>
<option value="green" class="reading__input--colors">Green</option>
<option value="yellow" class="reading__input--colors">Yellow</option>
<option value="purple" class="reading__input--colors">Purple</option>
<option value="purple" class="reading__input--colors">Pink</option>
</select>
<select name="direction" id="direction" class="reading__input--direction" required="required">
<option value="north" class="reading__input--directions">North</option>
<option value="south" class="reading__input--directions">South</option>
<option value="east" class="reading__input--directions">East</option>
<option value="west" class="reading__input--directions">West</option>
<option value="north-east"
class="reading__input--directions">North East</option>
<option value="north-west" class="reading__input--directions">North West</option>
<option value="south-east" class="reading__input--directions">South East</option>
<option value="south-west" class="reading__input--directions">South West</option>
</select>
</div>
<button class="btn-inline inspired">Inspired Guidance</button>
</div>
</div>
<div class="reading__content">
<div class="reading__left">
<img src="img/psyche-large.jpg" alt="angel image" class="reading__left--img">
</div>
<div class="reading__right">
<!-- <a href="#cards" class="reading__right--close">×</a> -->
<!-- <p class="reading__right--num">122</p>
<h2 class="heading-secondary reading-heading">The Mirage</h2>
<h3 class="heading-tertiary reading-tertiary">It is Easy to Think the Grass is Greener Somewhere Else, But When You Get Closer, It is the Same.</h3>
<p class="reading__right--text">
Sometimes someone appears who seems to be everything that you are missing. It is easy to look at someone else’s relationship and imagine that they have a perfect one, or that their partner is the one for you. If there is a quality you admire in another, how can you use this as an opportunity to develop more of that quality within yourself? When the perfect charmer appears you can enjoy the gifts they have to offer, but don’t be seduced into thinking they are something that they are not.
</p>
<h3 class="heading-secondary reading-guidance">Guidance:</h3>
<h3 class="heading-tertiary reading-guide">Mermaids and mer-men will eventually slip back into the sea.</h3>
<p class="reading__right--genie">© Genie Joseph, PhD</p> -->
<p class="paragrah reading__right--placeHolder">You're reading awaits you. Make a selection above - either Cupid's Arrow or Inspired Guidance - to reveal the advice of the Love Card Oracle.</p>
</div>
</div>
</div>
</section>
<section class="info" id="about">
<div class="about">
<h2 class="heading-secondary about__heading">
What's holding you back from real love?
</h2>
<h3 class="heading-tertiary about-tertiary">
The purpose of the Love Card Oracle is to:
</h3>
<div class="about__container">
<p class="paragraph about__paragraph">
Dissolve Obstacles to Love
</p>
<hr class="about-line">
<p class="paragraph about__paragraph">
Through deeper insight into patterns
</p>
</div>
<div class="about__container">
<p class="paragraph about__paragraph">
Release Old Blocks
</p>
<hr class="about-line">
<p class="paragraph about__paragraph">
Learn to open your heart to true intimacy
</p>
</div>
<div class="about__container">
<p class="paragraph about__paragraph">
Provide Advice
</p>
<hr class="about-line">
<p class="paragraph about__paragraph">
For those who seek to open the door to love
</p>
</div>
</div>
</section>
<section class="users" id="users">
<div class="user">
<h2 class="heading-secondary user-heading">Meet others like you</h2>
<figure class="user__card">
<blockquote class="user__quote">
"Genie's advice has changed my whole life."
</blockquote>
<figcaption class="user__fig">
<img src="/img/user6.jpg" alt="user" class="user__img">
<div class="user__box">
<p class="user__name">Brittany Bates</p>
</div>
</figcaption>
</figure>
<figure class="user__card">
<blockquote class="user__quote">
"Love card readings really helped give me perspective on myself."
</blockquote>
<figcaption class="user__fig">
<img src="/img/user2.jpg" alt="user" class="user__img">
<div class="user__box">
<p class="user__name">Kate Smith</p>
</div>
</figcaption>
</figure>
<figure class="user__card">
<blockquote class="user__quote">
"I found true inspiration to love again."
</blockquote>
<figcaption class="user__fig">
<img src="/img/user3.jpg" alt="user" class="user__img">
<div class="user__box">
<p class="user__name">Dolores Ford</p>
</div>
</figcaption>
</figure>
<figure class="user__card">
<blockquote class="user__quote">
"My boyfriend and I were able to finally connect with each other."
</blockquote>
<figcaption class="user__fig">
<img src="/img/user4.jpg" alt="user" class="user__img">
<div class="user__box">
<p class="user__name">Addison Stewart</p>
</div>
</figcaption>
</figure>
<figure class="user__card">
<blockquote class="user__quote">
"I was able to rekindle the spark with my wife."
</blockquote>
<figcaption class="user__fig">
<img src="/img/user5.jpg" alt="user" class="user__img">
<div class="user__box">
<p class="user__name">Jerome Austin</p>
</div>
</figcaption>
</figure>
<figure class="user__card">
<blockquote class="user__quote">
"The readings helped me find meaning in my relationships."
</blockquote>
<figcaption class="user__fig">
<img src="/img/user1.jpg" alt="user" class="user__img">
<div class="user__box">
<p class="user__name">Carrie Boyd</p>
</div>
</figcaption>
</figure>
</div>
</section>
<section class="genies" id="genie">
<div class="genie">
<h2 class="heading-secondary genie-heading">Genie Joseph, PhD</h2>
<div class="genie__container genie__container--img">
<img src="/img/genie.jpg" alt="genie" class="genie__img">
<p class="paragraph genie__quote">"I want to help make your relationships successful!"</p>
<div class="genie__private">
<h3 class="genie__private--heading">Would you like a private reading?</h3>
<h3 class="genie__private--heading">Fill out the below information. (this does not work yet)</h3>
<form action="#" class="genie__private--form" id="privateForm">
<ul class="genie__private--list"></ul>
<li class="genie__private--item"></li>
<input type="text" class="genie__private--input" id="name" placeholder="Your Name" required>
</li>
<li class="genie__private--item"></li>
<input type="email" class="genie__private--input" id="email" placeholder="Email Address" required>
</li>
<li class="genie__private--item"></li>
<button type="submit" action="#" id="submit" class="genie__private--btn btn-inline">Submit</button>
</li>
</ul>
</form>
</div>
</div>
<div class="genie__container genie__container--text">
<h2 class="heading-secondary genie__blog--heading">CV</h2>
<div class="genie__about">
<ul class="genie__list">
<li class="genie__item">Relationship Coach 20 + years</li>
<li class="genie__item">Co-Host of Love Life Radio 6 + years</li>
<li class="genie__item">Published Author</li>
<li class="genie__item">Frequent Guest on Radio & TV shows</li>
<li class="genie__item">Experienced Public Speaker and Seminar Presenter</li>
<li class="genie__item">Licensed Minister</li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://lightwave7.wixsite.com/act-resilient" class="genie__link">Founder of Act Resilient</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.animal-consciousness.org" class="genie__link">Creator of Animal Consciousness</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://lightwave7.wixsite.com/freefilmschool" class="genie__link">Founder of Free Film School</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://independentfilmarizona.com" class="genie__link">President of Indpendent Film Arizona</a></li>
</ul>
</div>
</div>
<div class="genie__container genie__container--blog">
<h2 class="heading-secondary genie__blog--heading">Genie's Blogs</h2>
<div class="genie__blog">
<ul class="genie__list">
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/avoiding-fights.html" class="genie__link">Avoiding Fights
And Improving Understanding</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/art-of-apology.html" class="genie__link">The Art of Apology Five Tips For Men</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/communication-tips-for-men.html" class="genie__link">Communication Tips For Men</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/Love-yourself.html" class="genie__link">Love Yourself First</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/sexual-shame.html" class="genie__link">Healing Sexual Shame</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/apologize.html" class="genie__link">How To Apologize in 5 Steps</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/Conquering-Anger.html" class="genie__link">Conquer Anger by Being For Giving</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/sensitive-people.html" class="genie__link">Why do Sensitive People Fall in Love with Narcissists?</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com/Intuition-And-Love.html" class="genie__link">Intuition and Love</a></li>
<li class="genie__item"><a target="_blank" rel="noopener noreferrer" href="https://www.healthy-relationship-advice.com" class="genie__link">Read more at Healthy-Relationship-Advice.com</a></li>
</ul>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__text">
© Copyright Genie Joseph, 2020. All rights reserved.
</div>
<div class="footer__nav">
<nav class="footer__box">
<ul class="footer__list">
<li class="footer__item"><a href="#cards" class="footer__link">Readings</a></li>
<li class="footer__item"><a href="#about" class="footer__link">About</a></li>
<li class="footer__item"><a href="#users" class="footer__link">Testimonials</a></li>
<li class="footer__item"><a href="#genie" class="footer__link">Genie</a></li>
</ul>
</nav>
</div>
</footer>
<script type="text/javascript" src="js/index.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- <script>
$('form').on('submit', (e) => {
e.preventDefault();
const name = $('#name').val().trim();
const email = $('#email').val().trim();
const data = {
name,
email
};
$.post('/email', data, function() {
console.log('Server received our data');
});
});
</script> -->
</body>
</html>