-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmindfulness.html
107 lines (101 loc) · 6.56 KB
/
mindfulness.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
<!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>HealthierMind</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Fredoka+One&family=Roboto&family=Source+Sans+Pro:wght@300&display=swap"rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body class="mindBody">
<i class="fa-solid fa-circle-play"></i>
<header>
<!-- <div class="container row"> -->
<nav class="nav">
<img class="logo" src="https://i.ibb.co/DtMnwsF/healthier-mind-logo.png" alt="healthier-mind-logo">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul class="nav__list">
<li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
<li class="nav__item"><a href="activities.html" class="nav__link">Activities</a></li>
<li class="nav__item"><a href="mindfulness.html" class="nav__link">Mindfulness</a></li>
<li class="nav__item"><a href="about.html" class="nav__link">About</a></li>
</ul>
</div>
</nav>
<!-- </div> -->
</header>
<section>
<div class="mindfulness-top">
<h1 class="mindfulness-h1">What Is Mindfulness?</h1>
<p class="mindfulness-page-p">Mindfulness is the ability to pay full attention to any task you are doing. This can be playing video games, studying, or even eating a meal. Being mindful means taking things slow, to focus and enjoy what you are doing instead of rushing or multi-tasking.</p>
<p class="mindfulness-page-p">If you develop the ability to be mindful in your day-to-day tasks, you are building your own superpower. By practicing and training your mind, you can learn to control your emotions and focus your attention on almost anything. Like any sport, practice makes perfect, so if you continue to practice mindfulness exercises, you will naturally be mindful of everything you do. </p>
<p class="mindfulness-page-p">Click on any video below to practice mindful exercises!</p>
</div>
<div class="container__video">
<div class="main-video">
<div class="video">
<iframe src="https://player.vimeo.com/video/734171689?h=fcd7ce25ce" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<h3 class="video-title">5 Minute Guided Meditation</h3>
</div>
</div>
<div class="sidebar">
<div class="vid active">
<iframe src="https://player.vimeo.com/video/734171689?h=fcd7ce25ce" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<h3 class="video-title">5 Minute Guided Meditation</h3>
</div>
<div class="vid">
<iframe src="https://player.vimeo.com/video/734173258?h=9322963de2" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<h3 class="video-title">Rainbow Relaxation</h3>
</div>
<div class="vid">
<iframe src="https://player.vimeo.com/video/734172775?h=61e43c7ef9" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<h3 class="video-title">Mindful Looking</h3>
</div>
<div class="vid">
<iframe src="https://player.vimeo.com/video/734167613?h=2b321f4263"frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<h3 class="video-title">Thought Bubbles</h3>
</div>
<div class="vid">
<iframe src="https://player.vimeo.com/video/734170057?h=654493eb2c" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<h3 class="video-title">Balloon Guided Meditation</h3>
</div>
<div class="vid">
<iframe src="https://player.vimeo.com/video/734167228?h=d9928bb161" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<h3 class="video-title">Weather The Storm Guided Meditation</h3>
</div>
</div>
</section>
<section class="breathing-exercises-section">
<header class="breathing-exercises-header">
<h1>Step-by-step breathing exercises that you can try by yourself</h1>
<h3>Swipe for next exercise</h3>
</header>
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img class="slide-img" src="breathingExercises/breathingExercise1.png" alt="Breathing Exercise Slide"></div>
<div class="swiper-slide"><img class="slide-img" src="breathingExercises/breathingExercise2.png" alt="Breathing Exercise Slide"></div>
<div class="swiper-slide"><img class="slide-img" src="breathingExercises/breathingExercise3.png" alt="Breathing Exercise Slide"></div>
<div class="swiper-slide"><img class="slide-img" src="breathingExercises/breathingExercise4.png" alt="Breathing Exercise Slide"></div>
<div class="swiper-slide"><img class="slide-img" src="breathingExercises/breathingExercise5.png" alt="Breathing Exercise Slide"></div>
<div class="swiper-slide"><img class="slide-img" src="breathingExercises/breathingExercise6.png" alt="Breathing Exercise Slide"></div>
</div>
</div>
</section>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="js/mindfulness.js"></script>
<script src="js/main.js"></script>
</body>
</html>