-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (156 loc) · 7.36 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="social,media,meditation,mindfulness,contemporary,post-internet">
<meta name="author" content="Matthias Pitscher">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<title>Social Media Meditation</title>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/audioplayer.js"></script>
<script src="js/scroll.js"></script>
</head>
<body>
<div id="bgvid">
<video playsinline autoplay muted loop poster="img/smm-preview.jpg">
<source src="video/scrolling_loop.webm" type="video/webm">
<source src="video/scrolling_loop.mp4" type="video/mp4">
</video>
</div>
<audio id="guidedMeditation" preload="none">
<source src="audio/SMMLesson1.m4a" type="audio/mp4" />
<source src="audio/SMMLesson1.ogg" type="audio/ogg" /> Your Browser does not support HTML5 audio.
</audio>
<div id="center">
<div class="social">
<a class="socialElement" target="_blank" href="http://www.facebook.com/socialmediameditation">facebook</a>
<a class="socialElement" target="_blank" href="https://twitter.com/SMMeditation">twitter</a>
<a class="socialElement" target="_blank" href="https://www.instagram.com/socialmediameditation/">instagram</a>
<a class="socialElement" target="_blank" href="https://www.youtube.com/channel/UCArWA2fklkznxBCj5tMPyRQ">youtube</a>
<a class="socialElement" target="_blank" href="https://ko-fi.com/socialmediameditation">support</a>
<a class="socialElement topright" href="de.html">DE</a>
</div>
<h1>
TRY A FREE GUIDED
<br /> SOCIAL MEDIA MEDITATION
</h1>
<button id="playpausebtn"></button>
<p class="undertitle">Headphones recommended</p>
<!--
<iframe src="https://mixlr.com/users/6701571/embed" width="80%" height="180px" scrolling="no" frameborder="no" marginheight="0"
marginwidth="0" style="border-radius: 25px; max-width: 500px;"></iframe>
<br>
<a href="http://mixlr.com/socialmediameditation"> Social Media Meditation
<br> is now live on Mixlr</a>
-->
<!-- <a class="socialElement" target="_blank" style=" font-size:2em;" href="https://mixlr.com/socialmediameditation">LIVE!</a> -->
<!-- <a href="#first-post" onclick="scroll.To('first-post');return false"><h1> <br> ⬇ </h1></a> -->
<div class="box">
<div name="first-post" id="first-post">
<h2 class="first--post">What is Social Media Meditation?</h2>
</div>
<div class="whiteBox">
<p>
Social Media Meditation is a practice that helps internet users to be more mindful online. With simple techniques like
<a target="_blank" href="http://mindfulscrolling.net">#mindfulscrolling</a> everyone can benefit from a healthy lifestyle with technology.
</p>
</div>
<h2>Where can you learn it?</h2>
<div class="whiteBox">
<p>
Free courses are available in different locations on an irregular basis. Just follow our
<a target="_blank" href="http://www.facebook.com/socialmediameditation">facebook</a> page to always be up to date for upcoming events. You can also try out a guided meditation now if
you scroll up and press play.
</p>
</div>
<h2>Why?</h2>
<div class="whiteBox">
<p>
<a target="_blank" href="https://www.rsph.org.uk/our-work/policy/social-media-and-young-people-s-mental-health-and-wellbeing.html">Researchers</a> have found out that people feel worse after using social networks. Still companies have figured
out a way to make us hooked on their services.
<br /> Join our movement of mindful users, who will make the internet a happier place.
</p>
</div>
<h2 style="padding-top:80px; padding-bottom: 40px;">What People Say</h2>
<div class="whiteBox">
<img src="img/jessica.jpg" alt="Jessica" class="img-circle">
<p>
“Social Media Meditation allowed me to focus on myself again and rekindle with the self love I had lost. I spend my day and
nights at other people, only to realize that I ignored… myself. Now that I reconnected I realize I am a better
manager, friend, lover, daughter and sister.”
<br /> ~ Jessica Seaman, Founder of Passion Co.
</p>
</div>
<div class="whiteBox">
<img src="img/mark.jpg" alt="Mark" class="img-circle">
<p>
“Since I started mindful scrolling I stopped using facebook completely.”
<br /> ~ Mark Zuckeberg, CEO of Facebook.
</p>
</div>
<div class="whiteBox">
<img src="img/rachel.png" alt="Rachel" class="img-circle">
<p>
“I never thought that meditation is something for me, but now that I can share it with my friends, I started doing it every
day!”
<br /> ~ Rachel Smith, Twitter user.
</p>
</div>
<h2 style="padding-top:80px;">Impressions</h2>
<div class="whiteBox">
<img src="img/Impressions/Warsaw.jpg" alt="Social Media Meditation in Warsaw">
<p class="caption">
The very first Social Media Meditation at WISPAW in Warsaw.
</p>
</div>
<div class="whiteBox">
<img src="img/Impressions/Weimar.jpg" alt="Social Media Meditation in Weimar">
<p class="caption">
Social Media Meditation at MNEUN in Weimar.
</p>
</div>
<div class="whiteBox">
<img src="img/Impressions/Weimar2.jpg" alt="Social Media Meditation in Weimar">
<p class="caption">
Another successful Meditation Session in a Yoga Studio in Weimar.
</p>
</div>
<div class="whiteBox">
<img src="img/Impressions/Node.jpg" alt="Social Media Meditation in Frankfurt">
<p class="caption">
Smart walking meditation during the
<a href="https://nodeforum.org/">Node Forum for Digital Arts</a> in Frankfurt.
</p>
</div>
<div class="whiteBox">
<img src="img/Impressions/Weimar3.jpg" alt="Social Media Meditation in Weimar">
<p class="caption">
"Scrolling 'til the end of my feed" during
<a href="https://www.facebook.com/events/1736183623346429">Medienkunstpreis</a> in Weimar.
</p>
</div>
<div class="whiteBox">
<img src="img/Impressions/adaf.jpg" alt="Social Media Meditation in Athens">
<p class="caption">
Meditation session during <a href="https://2018.adaf.gr/events/social-media-meditation/">Athens Digital Arts Festival</a>
</p>
</div>
<div class="whiteBox">
<img src="img/Impressions/bitkom.jpg" alt="Social Media Meditation at Bitkom">
<p class="caption">
Meditation session at Bitkom with <a href="http://sofiabraga.com/">Sofia Braga</a>
</p>
</div>
<h2 style="padding-top:20px; font-size:0.9em;">No more posts</h2>
<p class="info">
<a class="socialElement" href="info.html">info</a>
</p>
</div>
<!-- BOX -->
</div>
</body>
</html>