CodeWizard/index.html at main · AKR4PC/CodeWizard · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MindMelody</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <main>
        <section class="hero">
            <div class="header-nav">
                <div class="logo">MindMelody</div>
                <a href="#services" class="service-button">Services</a>
            </div>

            <div class="thought-bubbles">
                <div class="thought-bubble healthy">
                    <div class="bubble-tail">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    HEALTHY LIFE
                </div>
                <div class="thought-bubble anxiety">
                    <div class="bubble-tail">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    ANXIETY FREE
                </div>
                <div class="thought-bubble happy">
                    <div class="bubble-tail">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    HAPPY MIND
                </div>
            </div>

            <div class="hero-image">
                <img src="union.png" alt="Mental Wellness Journey">
            </div>

            <div class="stair-text">
                <div class="first-stair">THE JOURNEY TO</div>
                <div class="second-stair">MENTAL WELLNESS</div>
            </div>

            <div class="cta-button">
                <span>TAKE A MENTAL HEALTH TEST</span>
                <span class="arrow">→</span>
            </div>
        </section>

        <section class="services" id="services">
            <div class="service-grid">
                <div class="service-card wide">
                    <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3" alt="Therapist Consultation" class="service-bg">
                    <div class="card-content">
                        <h3>Consult with Best<br>Therapist</h3>
                        <button class="service-button">CONSULT</button>
                    </div>
                </div>
                <div class="service-card">
                    <img src="https://images.unsplash.com/photo-1505751172876-fa1923c5c528?ixlib=rb-4.0.3" alt="Health Test" class="service-bg">
                    <div class="card-content">
                        <h3>Take Mental<br>Health Test</h3>
                        <button class="service-button">TAKE TEST</button>
                    </div>
                </div>
                <div class="service-card">
                    <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&w=1200&fit=crop&q=80&h=800" alt="Track Activities" class="service-bg">
                    <div class="card-content">
                        <h3>Track Your Daily<br>Activities</h3>
                        <button class="service-button">TRACK</button>
                    </div>
                </div>
                <div class="service-card chat-card">
                    <img src="https://images.unsplash.com/photo-1527430253228-e93688616381?ixlib=rb-4.0.3" alt="Chat with ChatBot" class="chat-bg">
                    <div class="card-content">
                        <h3>Chat with our<br>ChatBot</h3>
                        <button class="chat-button">Chat Now</button>
                    </div>
                </div>
                <div class="service-card music-card">
                    <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3" alt="Music Generator" class="music-bg">
                    <div class="card-content">
                        <h3>AI Music<br>Generator</h3>
                        <button class="music-button">Generate Now</button>
                    </div>
                </div>
            </div>
        </section>

        <section class="issues" id="issues">
            <div class="section-title">
                <h2>-ISSUES-</h2>
                <h3>COMMON MENTAL HEALTH<br>ISSUES WE IDENTIFY</h3>
            </div>

            <div class="issues-grid">
                <div class="issue-card">
                    <div class="issue-content">
                        <h4>Anxiety</h4>
                        <img src="group 2.png" alt="Anxiety">
                        <div class="arrow-icon blue">→</div>
                    </div>
                </div>

                <div class="issue-card">
                    <div class="issue-content">
                        <h4>Depression</h4>
                        <img src="group 3.png" alt="Depression">
                        <div class="arrow-icon black">→</div>
                    </div>
                </div>

                <div class="issue-card">
                    <div class="issue-content">
                        <h4>Anger Issues</h4>
                        <img src="group 4.png" alt="Anger Issues">
                        <div class="arrow-icon blue">→</div>
                    </div>
                </div>
            </div>

            <div class="learn-more">
                <button class="learn-more-btn">LEARN MORE</button>
            </div>
        </section>

        <section class="tests">
            <h2>ISSUES WE TACKLE</h2>
            <div class="tests-grid">
                <div class="test-card">
                    <img src="https://images.unsplash.com/photo-1541199249251-f713e6145474?ixlib=rb-4.0.3" alt="Depression Test">
                    <div class="test-content">
                        <h3>Depression Test</h3>
                        <p>Depression is a mental health disorder characterized by persistently depressed mood or loss of interest in activities.</p>
                        <button class="test-button">TAKE A TEST</button>
                    </div>
                </div>
                <div class="test-card">
                    <img src="https://images.unsplash.com/photo-1541199249251-f713e6145474?ixlib=rb-4.0.3" alt="Anxiety Test">
                    <div class="test-content">
                        <h3>Anxiety Test</h3>
                        <p>Anxiety is a normal and often healthy emotion. However, when it becomes excessive, it can interfere with daily life.</p>
                        <button class="test-button">TAKE A TEST</button>
                    </div>
                </div>
                <!-- Add more test cards as needed -->
            </div>
        </section>

        <section class="relax-section">
            <h2>READY TO RELAX AND LET<br>YOUR MINDFLOW</h2>
            <p>MindFlow is a user-friendly mental health website designed to provide support, resources, and guidance to individuals struggling with mental health challenges.</p>
            <div class="hashtag">#STAYHEALTHY</div>
            <a href="#test" class="free-test-button">FREE MENTAL HEALTH TEST</a>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="logo">MindMelody</div>
            <p>Your Path to Mental Wellness</p>
            <div class="footer-links">
                <a href="#about">About</a>
                <a href="#services">Services</a>
                <a href="#support">Support</a>
            </div>
            <button class="back-to-top">BACK TO TOP</button>
        </div>
    </footer>

    <div class="music-player" id="musicPlayer">
        <h2>Relax, Listen to Calm Music</h2>
        <p>Your result will be shared with you soon. Check your Email!</p>
        <p>Click on the MINDFLOW to go to homepage</p>
    </div>

    <script src="script.js"></script>
</body>
</html>