-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheducation.html
121 lines (120 loc) · 6.3 KB
/
education.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Education</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="project.css">
<style>
body {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
font-family: "Roboto", sans-serif;
background-color: url("About.jpeg")
}
.navbar {
color: hsla(0, 0%, 95%, 0.92);
box-shadow: 5px 5px 5px rgba(16, 16, 16, 0.1);
position: fixed;
top: 0;
width: 100%;
z-index: 1000; /* Ensure the navbar stays on top */
}
.navbar-brand img {
width: 10%; /* Adjust the width to increase the size of the logo */
height: auto; /* Maintains the aspect ratio */
max-height: 60px; /* Optional: Set a maximum height to ensure the logo stays within the header */
margin-right: 10px; /* Adjust spacing if needed */
position: absolute;
top: 0; /* Ensures the logo is aligned with the top of the header */
}
.content {
padding: 80px 20px 20px; /* Added padding to account for fixed navbar */
background-image: url('about.jpeg');
background-size: cover; /* Ensures the image covers the whole section */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents repeating the image */
color: #0a0a0a; /* Adjust text color to ensure readability over the background */
}
.header {
font-size: 45px;
text-align: center;
width: 100%;
font-family: "Rowdies", sans-serif;
font-weight: 600;
margin-top: 40px;
background-color: #a2a91f;
border-radius: 20px;
color: aliceblue;
padding: 10px; /* Added padding to improve text readability */
}
h2 {
font-size: 45px;
}
p {
margin: 0 0 20px;
line-height: 1.6;
font-size: 20px;
font-weight: 600;
color: rgb(6, 5, 5);
}
ul {
list-style-type: disc;
margin: 20px 0;
padding-left: 20px;
font-size: 20px;
font-weight: 600;
color: rgb(6, 5, 5);
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navi">
<a class="navbar-brand" href="#"><img src="Logo.png" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="color: #fffdfd;">
<i class='bx bx-menu' style="color: rgb(255, 255, 255);"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" style="position: absolute;right: 0;margin-right: 20px;">
<li class="nav-item">
<a class="nav-link" href="./about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./genInfo.html">Mental Health</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./diet.html">Diet</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./education.html" style="text-decoration: underline;text-decoration-color:brown;">Education<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./signUp.html">Sign Up</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="content">
<div class="header">Education</div>
<p>Welcome to the Education section of ZenHaven. Here, we provide educational resources to help you understand various aspects of mental health. Our goal is to equip you with the knowledge you need to support your mental well-being and that of others. Explore our articles, guides, and tools designed to educate and empower.</p>
<p>Understanding mental health is key to recognizing the importance of mental well-being. Education about mental health can help reduce stigma, promote early intervention, and support those who are experiencing mental health issues.</p>
<h2>Topics Covered</h2>
<ul>
<li><strong><u>Mental Health Basics:</u></strong> Learn about the fundamentals of mental health, including common mental disorders, their symptoms, and treatment options.</li>
<li><strong><u> Strategies:</u></strong> Discover effective coping strategies for managing stress, anxiety, depression, and other mental health challenges.</li>
<li><strong><u>Supporting Others:</u></strong> Gain insights on how to support friends, family members, and colleagues who are dealing with mental health issues.</li>
<li><strong><u>Professional Help:</u></strong> Understand when and how to seek professional help for mental health concerns, including therapy and medication options.</li>
</ul>
</div>
</main>
</body>
</html>