Skip to content

Commit f8e400f

Browse files
fromdevfromdev
authored
affirmations
affirmations
1 parent 65ec03f commit f8e400f

1 file changed

Lines changed: 321 additions & 0 deletions

File tree

‎affirmations.html‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Daily Affirmations</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
min-height: 100vh;
17+
background: linear-gradient(135deg,
18+
#667eea 0%,
19+
#764ba2 25%,
20+
#f093fb 50%,
21+
#f5576c 75%,
22+
#4facfe 100%);
23+
background-size: 400% 400%;
24+
animation: gradientShift 15s ease infinite;
25+
overflow-x: hidden;
26+
}
27+
28+
@keyframes gradientShift {
29+
0% { background-position: 0% 50%; }
30+
50% { background-position: 100% 50%; }
31+
100% { background-position: 0% 50%; }
32+
}
33+
34+
.container {
35+
max-width: 1200px;
36+
margin: 0 auto;
37+
padding: 2rem;
38+
position: relative;
39+
}
40+
41+
.header {
42+
text-align: center;
43+
margin-bottom: 3rem;
44+
animation: fadeInDown 1s ease-out;
45+
}
46+
47+
.header h1 {
48+
font-size: clamp(2.5rem, 5vw, 4rem);
49+
font-weight: 800;
50+
background: linear-gradient(45deg, #fff, #f0f0f0, #fff);
51+
-webkit-background-clip: text;
52+
-webkit-text-fill-color: transparent;
53+
background-clip: text;
54+
text-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
55+
margin-bottom: 1rem;
56+
letter-spacing: -2px;
57+
}
58+
59+
.header p {
60+
font-size: clamp(1rem, 2vw, 1.2rem);
61+
color: rgba(255, 255, 255, 0.8);
62+
font-weight: 300;
63+
}
64+
65+
.affirmations-grid {
66+
display: grid;
67+
gap: 2rem;
68+
animation: fadeInUp 1s ease-out 0.3s both;
69+
}
70+
71+
.affirmation-card {
72+
background: rgba(255, 255, 255, 0.1);
73+
backdrop-filter: blur(20px);
74+
border: 1px solid rgba(255, 255, 255, 0.2);
75+
border-radius: 24px;
76+
padding: 2.5rem;
77+
box-shadow:
78+
0 8px 32px rgba(0, 0, 0, 0.1),
79+
inset 0 1px 0 rgba(255, 255, 255, 0.2);
80+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
81+
position: relative;
82+
overflow: hidden;
83+
}
84+
85+
.affirmation-card:hover {
86+
transform: translateY(-8px);
87+
box-shadow:
88+
0 20px 40px rgba(0, 0, 0, 0.2),
89+
inset 0 1px 0 rgba(255, 255, 255, 0.3);
90+
background: rgba(255, 255, 255, 0.15);
91+
}
92+
93+
.affirmation-card::before {
94+
content: '';
95+
position: absolute;
96+
top: 0;
97+
left: 0;
98+
right: 0;
99+
height: 1px;
100+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
101+
opacity: 0;
102+
transition: opacity 0.3s ease;
103+
}
104+
105+
.affirmation-card:hover::before {
106+
opacity: 1;
107+
}
108+
109+
.om-symbol {
110+
font-size: clamp(2rem, 4vw, 3rem);
111+
text-align: center;
112+
margin-bottom: 1.5rem;
113+
color: #fff;
114+
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
115+
animation: pulse 3s ease-in-out infinite;
116+
}
117+
118+
@keyframes pulse {
119+
0%, 100% {
120+
opacity: 0.8;
121+
transform: scale(1);
122+
}
123+
50% {
124+
opacity: 1;
125+
transform: scale(1.05);
126+
}
127+
}
128+
129+
.affirmation-text {
130+
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
131+
line-height: 1.7;
132+
color: rgba(255, 255, 255, 0.95);
133+
text-align: center;
134+
font-weight: 400;
135+
letter-spacing: 0.3px;
136+
}
137+
138+
.floating-elements {
139+
position: fixed;
140+
top: 0;
141+
left: 0;
142+
width: 100%;
143+
height: 100%;
144+
pointer-events: none;
145+
z-index: -1;
146+
}
147+
148+
.floating-circle {
149+
position: absolute;
150+
border-radius: 50%;
151+
background: rgba(255, 255, 255, 0.1);
152+
animation: float 20s infinite linear;
153+
}
154+
155+
.floating-circle:nth-child(1) {
156+
width: 100px;
157+
height: 100px;
158+
top: 20%;
159+
left: 10%;
160+
animation-duration: 25s;
161+
}
162+
163+
.floating-circle:nth-child(2) {
164+
width: 150px;
165+
height: 150px;
166+
top: 60%;
167+
right: 10%;
168+
animation-duration: 30s;
169+
animation-direction: reverse;
170+
}
171+
172+
.floating-circle:nth-child(3) {
173+
width: 80px;
174+
height: 80px;
175+
bottom: 20%;
176+
left: 20%;
177+
animation-duration: 35s;
178+
}
179+
180+
@keyframes float {
181+
0% { transform: translateY(0px) rotate(0deg); }
182+
50% { transform: translateY(-50px) rotate(180deg); }
183+
100% { transform: translateY(0px) rotate(360deg); }
184+
}
185+
186+
@keyframes fadeInDown {
187+
from {
188+
opacity: 0;
189+
transform: translate3d(0, -50px, 0);
190+
}
191+
to {
192+
opacity: 1;
193+
transform: translate3d(0, 0, 0);
194+
}
195+
}
196+
197+
@keyframes fadeInUp {
198+
from {
199+
opacity: 0;
200+
transform: translate3d(0, 30px, 0);
201+
}
202+
to {
203+
opacity: 1;
204+
transform: translate3d(0, 0, 0);
205+
}
206+
}
207+
208+
.scroll-indicator {
209+
position: fixed;
210+
bottom: 2rem;
211+
left: 50%;
212+
transform: translateX(-50%);
213+
color: rgba(255, 255, 255, 0.6);
214+
font-size: 0.9rem;
215+
animation: bounce 2s infinite;
216+
}
217+
218+
@keyframes bounce {
219+
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
220+
40% { transform: translateX(-50%) translateY(-10px); }
221+
60% { transform: translateX(-50%) translateY(-5px); }
222+
}
223+
224+
@media (max-width: 768px) {
225+
.container {
226+
padding: 1rem;
227+
}
228+
229+
.affirmation-card {
230+
padding: 1.5rem;
231+
margin-bottom: 1rem;
232+
}
233+
}
234+
235+
/* Smooth scroll behavior */
236+
html {
237+
scroll-behavior: smooth;
238+
}
239+
240+
/* Custom scrollbar */
241+
::-webkit-scrollbar {
242+
width: 8px;
243+
}
244+
245+
::-webkit-scrollbar-track {
246+
background: rgba(255, 255, 255, 0.1);
247+
}
248+
249+
::-webkit-scrollbar-thumb {
250+
background: rgba(255, 255, 255, 0.3);
251+
border-radius: 4px;
252+
}
253+
254+
::-webkit-scrollbar-thumb:hover {
255+
background: rgba(255, 255, 255, 0.5);
256+
}
257+
</style>
258+
</head>
259+
<body>
260+
<div class="floating-elements">
261+
<div class="floating-circle"></div>
262+
<div class="floating-circle"></div>
263+
<div class="floating-circle"></div>
264+
</div>
265+
266+
<div class="container">
267+
<div class="header">
268+
<h1>Daily Affirmations</h1>
269+
<p>Manifest positivity and abundance in your life</p>
270+
</div>
271+
272+
<div class="affirmations-grid">
273+
<div class="affirmation-card">
274+
<div class="om-symbol">ॐ</div>
275+
<div class="affirmation-text">
276+
With love I affirm that my son Sarthak is healthy, happy, well-educated, and well-behaved. He is surrounded by love, guided by wisdom, and protected by the universe. He grows with kindness, confidence, and clarity, effortlessly attracting prosperity, knowledge, and lasting joy into his life.
277+
</div>
278+
</div>
279+
280+
<div class="affirmation-card">
281+
<div class="om-symbol">ॐ</div>
282+
<div class="affirmation-text">
283+
I am grateful that Sarika is surrounded by vibrant health, joy, love, and abundance. Her mind, body, and spirit are in perfect harmony, and her life flows with peace, strength, and happiness.
284+
</div>
285+
</div>
286+
287+
<div class="affirmation-card">
288+
<div class="om-symbol">ॐ</div>
289+
<div class="affirmation-text">
290+
I am deeply grateful that my daughter Shivali is blessed with radiant health, happiness, wisdom, and love. Her life flows with ease, success, and joy, and she continues to grow in strength, confidence, and grace each day.
291+
</div>
292+
</div>
293+
294+
<div class="affirmation-card">
295+
<div class="om-symbol">ॐ</div>
296+
<div class="affirmation-text">
297+
I am grateful that my family is surrounded by love, health, harmony, and abundance. Each day, we grow stronger, happier, and more connected. Well-being flows to us easily and naturally.
298+
</div>
299+
</div>
300+
301+
<div class="affirmation-card">
302+
<div class="om-symbol">ॐ</div>
303+
<div class="affirmation-text">
304+
I am deeply grateful for my strong, healthy heart. Every beat flows with perfect rhythm, vitality, and love. My heart supports me with strength, energy, and peace each day.
305+
</div>
306+
</div>
307+
308+
<div class="affirmation-card">
309+
<div class="om-symbol">ॐ</div>
310+
<div class="affirmation-text">
311+
I am grateful for my strong, healthy, and beautifully thick hair. Every strand grows with vitality, and my scalp is nourished with perfect balance. I radiate confidence and well-being.
312+
</div>
313+
</div>
314+
</div>
315+
</div>
316+
317+
<div class="scroll-indicator">
318+
↓ Scroll for more affirmations ↓
319+
</div>
320+
</body>
321+
</html>

0 commit comments

Comments
 (0)