-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
124 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Love and Joy: A Delicate Balance</title> | ||
| <style> | ||
| @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Open+Sans:wght@300;400;700&display=swap'); | ||
|
|
||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| background: radial-gradient(circle, #ffafbd, #ffc3a0); | ||
| font-family: 'Open Sans', sans-serif; | ||
| color: #333; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| overflow: hidden; | ||
| perspective: 1000px; | ||
| } | ||
|
|
||
| .container { | ||
| background: rgba(255, 255, 255, 0.8); | ||
| padding: 2rem; | ||
| border-radius: 10px; | ||
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); | ||
| max-width: 700px; | ||
| text-align: center; | ||
| animation: fadeIn 2s ease-in-out, float 6s ease-in-out infinite; | ||
| transform: rotateX(15deg) rotateY(-10deg); | ||
| } | ||
|
|
||
| h1 { | ||
| font-family: 'Great Vibes', cursive; | ||
| font-size: 3rem; | ||
| margin-bottom: 1rem; | ||
| color: #ff6f61; | ||
| animation: slideIn 1s ease-out; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 1.2rem; | ||
| line-height: 1.6; | ||
| margin: 0.5rem 0; | ||
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| animation: textAppear 3s ease-out; | ||
| } | ||
|
|
||
| .highlight { | ||
| color: #ff6f61; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| @keyframes fadeIn { | ||
| from { | ||
| opacity: 0; | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideIn { | ||
| from { | ||
| transform: translateY(-100%); | ||
| } | ||
| to { | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes textAppear { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes float { | ||
| 0%, 100% { | ||
| transform: translateY(0); | ||
| } | ||
| 50% { | ||
| transform: translateY(-10px); | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Love and Joy: A Delicate Balance</h1> | ||
| <p>In his early thirties, a young man stood</p> | ||
| <p>Looking for love, like so many would</p> | ||
| <p>He searched high and low, both far and wide</p> | ||
| <p>But no joy within him, he could find</p> | ||
| <p>He thought that love would fill the void</p> | ||
| <p>And bring him happiness, he'd always avoid</p> | ||
| <p>The truth that joy must come from within</p> | ||
| <p>For love alone, is not enough to win</p> | ||
| <p>He met many people, both kind and true</p> | ||
| <p>But none of them brought him joy anew</p> | ||
| <p>He realized, with a heavy heart</p> | ||
| <p>That searching for love, was tearing him apart</p> | ||
| <p>So he began a journey of self-discovery</p> | ||
| <p>To find happiness within, was his discovery</p> | ||
| <p>He found passions, hobbies, and dreams</p> | ||
| <p>And learned to love himself, or so it seems</p> | ||
| <p>Now he's a man who's content and happy</p> | ||
| <p>No longer searching, he's free and snappy</p> | ||
| <p>For he knows that joy must come from within</p> | ||
| <p>And love will come, when he least expects it to begin</p> | ||
| <p>So to those who seek love, he has this to say</p> | ||
| <p>Look within yourself, find joy today</p> | ||
| <p>For love alone, can never be enough</p> | ||
| <p>Without joy from within, life is tough</p> | ||
| </div> | ||
| </body> | ||
| </html> |