generated from raja21068/yoga
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcellphone.html
186 lines (165 loc) · 4.88 KB
/
cellphone.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
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthy Screen Time Usage Guide</title>
<style>
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main styles */
body {
font-family: Arial, sans-serif;
background-color: #f7f9fc;
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 20px 0;
}
h1 {
font-size: 2.5rem;
color: #007bff;
margin-bottom: 10px;
}
h2 {
color: #333;
margin-top: 20px;
}
p, li {
font-size: 1rem;
margin-bottom: 15px;
color: #555;
}
ul {
list-style-type: disc;
margin-left: 20px;
}
/* Section styling */
.section {
margin-top: 30px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background-color: #ffffff;
}
.tips-section {
background-color: #e6f3ff;
}
/* Info Cards */
.info-cards {
display: flex;
flex-direction: column;
}
.card {
display: flex;
flex-direction: row;
align-items: center;
background-color: #fdfdfe;
border-radius: 8px;
margin: 10px 0;
padding: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card-icon {
font-size: 2rem;
color: #007bff;
margin-right: 15px;
}
/* Media queries */
@media (min-width: 600px) {
.info-cards {
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.card {
width: 48%;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header Section -->
<header>
<h1>Healthy Screen Time Usage Guide</h1>
<p>Explore ways to balance digital connection with healthy habits.</p>
</header>
<!-- For Adults Section -->
<section class="section">
<h2>For Adults</h2>
<ul>
<li><strong>2 to 3 hours per day</strong>: A moderate amount that includes essential tasks and limited entertainment.</li>
<li><strong>Reduce to under 1 hour</strong> before bed to improve sleep quality and avoid late-night screen disruptions.</li>
</ul>
</section>
<!-- For Teens and Kids Section -->
<section class="section">
<h2>For Teens and Kids</h2>
<ul>
<li><strong>1 to 2 hours</strong> of recreational screen time is a healthy limit, especially outside of schoolwork.</li>
<li>Excessive time on devices can lead to reduced attention span and sleep issues.</li>
</ul>
</section>
<!-- General Tips Section -->
<section class="section tips-section">
<h2>General Tips for Healthy Screen Usage</h2>
<ul>
<li><strong>Use tracking apps</strong>: Try tools like “Screen Time” (iOS) or “Digital Wellbeing” (Android) to monitor and set limits.</li>
<li><strong>Take breaks</strong>: Give your eyes a rest by taking short breaks every 30 minutes.</li>
<li><strong>Prioritize face-to-face interactions</strong> to foster more meaningful connections and mental stimulation.</li>
</ul>
</section>
<!-- Screen Time Disadvantages Section -->
<section class="section">
<h2>Potential Downsides of Excessive Screen Time</h2>
<div class="info-cards">
<div class="card">
<div class="card-icon">👁️</div>
<div>
<strong>Eye Strain and Vision Problems</strong>
<p>Digital eye strain can lead to dry eyes, blurred vision, and headaches.</p>
</div>
</div>
<div class="card">
<div class="card-icon">💤</div>
<div>
<strong>Poor Sleep Quality</strong>
<p>Blue light from screens can disrupt your sleep cycle, leading to poor sleep quality.</p>
</div>
</div>
<div class="card">
<div class="card-icon">💬</div>
<div>
<strong>Mental Health Impacts</strong>
<p>Too much screen time is linked to increased anxiety, depression, and feelings of loneliness.</p>
</div>
</div>
<div class="card">
<div class="card-icon">⚖️</div>
<div>
<strong>Reduced Physical Activity</strong>
<p>Excessive screen time encourages sedentary behavior, increasing health risks.</p>
</div>
</div>
</div>
</section>
</div>
</body>
</html>