Skip to content

Commit 8ad79fe

Browse files
AMZheleva21AMZheleva21
committed
Update the design of tips.html
1 parent 73a4c87 commit 8ad79fe

File tree

1 file changed

+191
-54
lines changed

1 file changed

+191
-54
lines changed

‎My_path_team9/student/templates/tips.html‎

Lines changed: 191 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,202 @@
11
{% extends "base.html" %}
2-
32
{% block title %}Tips{% endblock %}
43

54
{% block content %}
65
<style>
7-
.content-box {
8-
border-radius: 10px;
9-
padding: 30px;
10-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
11-
max-width: 1000px;
12-
margin: 20px auto;
13-
}
14-
15-
.section {
16-
margin-top: 10px;
17-
}
18-
19-
h1 {
20-
text-align: center;
21-
}
226

7+
body {
8+
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
9+
overflow-x: hidden;
10+
}
11+
12+
.main-title {
13+
text-align: center;
14+
font-size: 2.8rem;
15+
font-weight: 700;
16+
background: linear-gradient(135deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);
17+
background-size: 200% 200%;
18+
-webkit-background-clip: text;
19+
-webkit-text-fill-color: transparent;
20+
margin-bottom: 3rem;
21+
animation: titleGradient 4s ease-in-out infinite, fadeInDown 1s ease-out;
22+
text-shadow: 0 0 30px rgba(25, 118, 210, 0.3);
23+
}
24+
25+
@keyframes titleGradient {
26+
0%, 100% { background-position: 0% 50%; }
27+
50% { background-position: 100% 50%; }
28+
}
29+
30+
@keyframes fadeInDown {
31+
from { opacity: 0; transform: translateY(-50px); }
32+
to { opacity: 1; transform: translateY(0); }
33+
}
34+
35+
.tip-section {
36+
background: rgba(255, 255, 255, 0.85);
37+
backdrop-filter: blur(16px);
38+
border-radius: 20px;
39+
padding: 2rem;
40+
margin-bottom: 2rem;
41+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
42+
transition: all 0.5s ease;
43+
border: 1px solid rgba(255, 255, 255, 0.3);
44+
}
45+
46+
.tip-section:hover {
47+
transform: translateY(-4px);
48+
background: rgba(255, 255, 255, 0.95);
49+
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
50+
}
51+
52+
.section-header {
53+
display: flex;
54+
align-items: center;
55+
margin-bottom: 1.5rem;
56+
}
57+
58+
.section-icon {
59+
font-size: 2rem;
60+
margin-right: 1rem;
61+
padding: 0.75rem;
62+
background: rgba(25, 118, 210, 0.1);
63+
border-radius: 16px;
64+
}
65+
66+
.section-title {
67+
font-size: 1.6rem;
68+
font-weight: 600;
69+
color: #1565c0;
70+
position: relative;
71+
}
72+
73+
.tips-grid {
74+
display: grid;
75+
gap: 1rem;
76+
}
77+
78+
.tip-card {
79+
background: #ffffffcc;
80+
border-radius: 16px;
81+
padding: 1rem;
82+
transition: 0.3s ease;
83+
border: 1px solid rgba(25, 118, 210, 0.08);
84+
display: flex;
85+
align-items: flex-start;
86+
gap: 1rem;
87+
}
88+
89+
.tip-card:hover {
90+
transform: translateX(6px);
91+
box-shadow: 0 10px 25px rgba(25, 118, 210, 0.1);
92+
border-color: rgba(25, 118, 210, 0.15);
93+
}
94+
95+
.tip-icon {
96+
font-size: 1.4rem;
97+
background: #1976d2;
98+
color: white;
99+
border-radius: 10px;
100+
width: 42px;
101+
height: 42px;
102+
display: flex;
103+
align-items: center;
104+
justify-content: center;
105+
flex-shrink: 0;
106+
}
107+
108+
.tip-text {
109+
font-size: 1rem;
110+
color: #2c3e50;
111+
line-height: 1.6;
112+
}
113+
114+
.tip-text strong {
115+
color: #1565c0;
116+
}
117+
118+
@media (max-width: 768px) {
119+
.main-title {
120+
font-size: 2.2rem;
121+
}
122+
123+
.tip-section {
124+
padding: 1.5rem;
125+
}
126+
127+
.section-title {
128+
font-size: 1.3rem;
129+
}
130+
}
23131
</style>
24132

25-
<h1>Tips</h1><br>
26-
27-
<div class="content-box">
28-
<div class="section">
29-
<h2>Study Techniques</h2>
30-
<ul>
31-
<li>Use the Pomodoro Technique: Study for 25 minutes, then take a 5-minute break.</li>
32-
<li>Teach someone else: Explaining concepts out loud helps solidify understanding.</li>
33-
<li>Use active recall and spaced repetition for long-term retention.</li>
34-
<li>Create mind maps and diagrams to visualize information.</li>
35-
<li>Summarize chapters in your own words.</li>
36-
</ul>
37-
</div>
38-
</div>
133+
<div class="container">
134+
<h1 class="main-title">Tips</h1>
39135

40-
<div class="content-box">
41-
<div class="section">
42-
<h2>Time Management Tips</h2>
43-
<ul>
44-
<li>Set SMART goals (Specific, Measurable, Achievable, Relevant, Time-bound).</li>
45-
<li>Use a planner or digital calendar to block study sessions.</li>
46-
<li>Prioritize tasks with the Eisenhower Matrix: urgent vs. important.</li>
47-
<li>Avoid multitasking — focus on one task at a time for better productivity.</li>
48-
<li>Review your goals weekly and adjust as needed.</li>
49-
</ul>
50-
</div>
51-
</div>
136+
<!-- Study Smarter -->
137+
<div class="tip-section">
138+
<div class="section-header">
139+
<div class="section-icon">🧠</div>
140+
<h2 class="section-title">Study Smarter</h2>
141+
</div>
142+
<div class="tips-grid">
143+
<div class="tip-card">
144+
<div class="tip-icon">🍅</div>
145+
<div class="tip-text">Use the <strong>Pomodoro method</strong>: 25 min study, 5 min break.</div>
146+
</div>
147+
<div class="tip-card">
148+
<div class="tip-icon">🧪</div>
149+
<div class="tip-text">Practice <strong>active recall</strong> — test yourself instead of rereading.</div>
150+
</div>
151+
<div class="tip-card">
152+
<div class="tip-icon">🎤</div>
153+
<div class="tip-text"><strong>Teach others</strong> to retain better. If you can explain it, you get it.</div>
154+
</div>
155+
</div>
156+
</div>
157+
158+
<!-- Time Management -->
159+
<div class="tip-section">
160+
<div class="section-header">
161+
<div class="section-icon">⏰</div>
162+
<h2 class="section-title">Manage Your Time</h2>
163+
</div>
164+
<div class="tips-grid">
165+
<div class="tip-card">
166+
<div class="tip-icon">📅</div>
167+
<div class="tip-text"><strong>Plan your day</strong> using a calendar or digital to-do app.</div>
168+
</div>
169+
<div class="tip-card">
170+
<div class="tip-icon">🎯</div>
171+
<div class="tip-text"><strong>Focus on one task</strong> — multitasking drops productivity.</div>
172+
</div>
173+
<div class="tip-card">
174+
<div class="tip-icon">📈</div>
175+
<div class="tip-text"><strong>Reflect weekly</strong> on what worked and what didn’t.</div>
176+
</div>
177+
</div>
178+
</div>
52179

53-
<div class="content-box">
54-
<div class="section">
55-
<h2>Getting Help as a Student</h2>
56-
<ul>
57-
<li>Talk to your school counselor or psychologist if you're feeling overwhelmed, anxious, or stressed.</li>
58-
<li>Reach out to a trusted teacher, mentor, or family member for support.</li>
59-
<li>Join student support groups or peer mentoring programs at your school.</li>
60-
<li>Utilize mental health resources provided by your school or community.</li>
61-
<li>Don't hesitate to ask for help — it's a sign of strength, not weakness.</li>
62-
</ul>
63-
</div>
180+
<!-- Get Help -->
181+
<div class="tip-section">
182+
<div class="section-header">
183+
<div class="section-icon">🤝</div>
184+
<h2 class="section-title">When You Need Help</h2>
185+
</div>
186+
<div class="tips-grid">
187+
<div class="tip-card">
188+
<div class="tip-icon">💬</div>
189+
<div class="tip-text"><strong>Talk to someone</strong>: a teacher, mentor, or counselor.</div>
190+
</div>
191+
<div class="tip-card">
192+
<div class="tip-icon">👥</div>
193+
<div class="tip-text"><strong>Join study groups</strong> — learning with others makes it easier.</div>
194+
</div>
195+
<div class="tip-card">
196+
<div class="tip-icon">💪</div>
197+
<div class="tip-text"><strong>Asking for help</strong> isn’t weakness — it’s wisdom.</div>
198+
</div>
199+
</div>
200+
</div>
64201
</div>
65-
{% endblock %}
202+
{% endblock %}

0 commit comments

Comments
 (0)