-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (148 loc) · 9.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107812563-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-107812563-1');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Mantra Meditation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff2cd">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="backdrop"></div>
<div class="player__wrapper">
<div class="player">
<audio class="player__audio"></audio>
<div class="player__img-wrapper">
<img src="images/sound.svg" alt="Icon" class="player__img">
<i class="fa fa-close player__close"></i>
</div>
<div class="player__main">
<h2 class="text text--title text--title-lessline player__title">Your mantra is: <span class="player__title-mantra">lam</span></h2>
<div class="player__controls">
<div class="player__controls-play">
<i class="fa fa-play player__controls-play__icon"></i>
</div>
<h3 class="text text--paragraph player__controls-text">Listen to the<br>mantra</h3>
</div>
<p class="text text--paragraph text--light text--italics text--paragraph-small player__info">Keep this mantra to yourself and try not to say it out loud. </p>
<h4 class="text text--paragraph text--bold text--paragraph-small text--italics text--underline player__refresh">Refresh</h4>
</div>
</div>
</div>
<section class="container intro">
<div class="row">
<div class="col-xs-12 container__content intro__wrapper">
<h1 class="intro__title"><span class="intro__title-content">Simple <span class="breaker-sm"></span>Mantra <span class="breaker-sm"></span>Meditation</span>
</h1>
<p class="intro__text"><span class="intro__text-content">Everyone can meditate. It doesn't have anything to do with religion or spirituality, it's simply a tool to help you think more clearly and to calm your monkey mind. On this site, you'll find a simple step-by-step guide to mantra-based meditation.</span></p>
</div>
</div>
</section>
<section class="container container--inner section">
<div class="row">
<div class="col-xs-12 container__content container__content--inner">
<h2 class="text text--title">How to Meditate</h2>
<p class="text text--paragraph">At its core, meditation is simply about abstaining from conscious mental activity. This is usually done by focusing on your breathing or on a mantra. Every time a thought pops into your mind, you calmly direct your attention back to your focus.</p>
<p class="text text--paragraph">There are many schools of thought around this, but on this site, we'll teach you a simple mantra-based meditation.</p>
</div>
</div>
</section>
<section class="container container--inner section">
<div class="row">
<div class="col-xs-12 container__content container__content--inner">
<h2 class="text text--title">Your Mantra</h2>
<p class="text text--paragraph">A mantra is a simple meaningless word that you repeat internally in your head.</p>
<p class="text text--paragraph">The key idea is to not associate the mantra with anything. That way it doesn't spur any thoughts or feelings while you meditate.</p>
<p class="text text--paragraph">To keep it neutral, you will be given a mantra. Avoid sharing your mantra with others or saying it out loud.</p>
<p class="text text--bold text--paragraph">To get your mantra, click here:</p>
<button class="cta player__open">GET YOUR MANTRA</button>
</div>
</div>
</section>
<section class="container container--inner section protocol">
<div class="row">
<div class="col-xs-12 container__content container__content--inner">
<h2 class="text text--title protocol__title">The Protocol</h2>
<div class="protocol__list">
<div class="protocol__item">
<img src="images/chair.svg" alt="Icon" class="protocol__item-img">
<div class="protocol__item-copy">
<h3 class="text text--subtitle protocol__item-title">1. Find a place to sit.</h3>
<p class="text text--paragraph protocol__item-text">Find a quiet space where you can sit uninterrupted for 20 minutes. Make sure you have a stopwatch or clock nearby so you can track your time.</p>
</div>
</div>
<div class="protocol__item">
<img src="images/eyes.svg" alt="Icon" class="protocol__item-img">
<div class="protocol__item-copy">
<h3 class="text text--subtitle protocol__item-title">2. Close your eyes and get comfortable.</h3>
<p class="text text--paragraph protocol__item-text">In the start, your body might feel itchy or uncomfortable. Take time to get comfortable; this is especially important.</p>
</div>
</div>
<div class="protocol__item">
<img src="images/repeat.svg" alt="Icon" class="protocol__item-img">
<div class="protocol__item-copy">
<h3 class="text text--subtitle protocol__item-title">3. Repeat your mantra internally for 15 minutes.</h3>
<p class="text text--paragraph protocol__item-text">There is no correct rhythm or speed; simply repeat your mantra in a way that feels natural to you. It might get louder or quieter as you meditate; that's very normal. If a thought pops into your head, calmly direct your attention back to your mantra.</p>
</div>
</div>
<div class="protocol__item">
<img src="images/wander.svg" alt="Icon" class="protocol__item-img">
<div class="protocol__item-copy">
<h3 class="text text--subtitle protocol__item-title">4. Let your mind wander.</h3>
<p class="text text--paragraph protocol__item-text">Once the 15 minutes are over, stop repeating the mantra and let your mind relax for 3-4 minutes. Feel free to lay down and let your mind wander during this time.</p>
</div>
</div>
</div>
<h3 class="text text--bold text--paragraph protocol__final">Repeat this protocol two times a day. Once in the morning and once in the evening.</h3>
</div>
</div>
</section>
<section class="container container--inner section section--moremargin faq">
<div class="row">
<div class="col-xs-12 container__content container__content--inner">
<h2 class="text text--title text--title-moremargin">Frequently Asked Questions</h2>
<div class="faq__list">
<div class="faq__item">
<h3 class="text text--subtitle faq__item-title">Q: I feel really restless while meditating. What should I do?</h3>
<p class="text text--paragraph faq__item-text">A: This will happen; just keep meditating. If it's particularly irritating, feel free to stop repeating the mantra and focus your attention on the sensations for a while as you lean into them.</p>
</div>
<div class="faq__item">
<h3 class="text text--subtitle faq__item-title">Q: I keep falling asleep while meditating. What should I do?</h3>
<p class="text text--paragraph faq__item-text">A: Get more sleep.</p>
</div>
<div class="faq__item">
<h3 class="text text--subtitle faq__item-title">Q: How long does it take before I start feeling any effects?</h3>
<p class="text text--paragraph faq__item-text">A: Some people feel a clear shift happening after doing two sessions a day for a week or more.</p>
</div>
</div>
</div>
</div>
</section>
<section class="container container--inner section">
<div class="row">
<div class="col-xs-12 container__content container__content--inner">
<h2 class="text text--title text--title-nomargin">Have any feedback?</h2>
<p class="text text--paragraph">If you have any ideas for how we can make this site better, drop us an email at <a href="mailto:[email protected]" class="text--block text--link">[email protected]</a></p>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>