forked from turingschool-examples/self-care-center
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (59 loc) · 2.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 class="white-text">✨ Self Care Center ✨</h1>
</header>
<main>
<section class="home-view">
<h2 class="white-text">Which type of message?</h2>
<section class="white-box1">
<div class="radio-buttons">
<div class='affirm-selection'>
<input type="radio" id='affirmation' name='message-type' value="affirmation" />
<label for="affirmation">affirmation</label>
<div class='mantra-selection'>
<input type="radio" id='mantra' name="message-type" value="mantra" />
<label for="mantra">mantra</label>
</div>
</div>
</div>
<div class="main-buttons">
<button id='receive-btn' class='white-text' type='button'>Receive Message</button>
</div>
</section>
<section class="white-box2">
<img class="meditate-icon" src="assets/meditate.svg" alt="Meditating Emoji/Icon">
<p class="message-pop-up hidden"></p>
<button type="button" class='white-text hidden' id="favorite-button">Favorite Message</button>
<button type="button" class='white-text hidden' id="view-favorites-button">View Favorites</button>
</section>
</section>
<section class="favorites-view hidden">
<h2 class="white-text">Favorites</h2>
<div class="white-box3">
<div>
<button id='home-btn' class='white-text' type='button'>Home</button>
</div>
<section id="affirmation-section">
<h3 class="affirm-heading hidden">✨Affirmations✨</h3>
<div class="fav-affirm-msg"></div>
</section>
<section id="mantra-section">
<h3 class="mantra-heading hidden">✨Mantras✨</h3>
<div class="fav-mantra-msg"></div>
</section>
<div>
<img class="meditate-icon-fav" src="assets/meditate.svg" alt="Meditating Emoji/Icon">
</div>
</div>
</section>
</main>
<script type="text/javascript" src="assets/messages.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>