Highly Styled Paragraph

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highly Styled Paragraph</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
        body {
            font-family: 'Montserrat', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
            margin: 0;
        }
        .styled-paragraph-container {
            position: relative;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            padding: 20px 30px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.5s ease;
            cursor: pointer;
        }
        .styled-paragraph-container:hover {
            transform: scale(1.05);
        }
        .styled-paragraph {
            color: #333;
            font-size: 1.2em;
            font-weight: 400;
            text-align: center;
            position: relative;
            line-height: 1.5;
            z-index: 2;
        }
        .styled-paragraph strong {
            font-weight: 700;
            color: #000;
        }
        .styled-paragraph .icon {
            color: #ff5f6d;
            margin: 0 5px;
            animation: bounce 1.5s infinite alternate;
        }
        .styled-paragraph::before, .styled-paragraph::after {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: linear-gradient(135deg, rgba(255,255,255,0.3) 25%, transparent 25%), 
                        linear-gradient(225deg, rgba(255,255,255,0.3) 25%, transparent 25%), 
                        linear-gradient(45deg, rgba(255,255,255,0.3) 25%, transparent 25%), 
                        linear-gradient(315deg, rgba(255,255,255,0.3) 25%, transparent 25%);
            background-size: 50px 50px;
            animation: rotate 6s linear infinite;
            z-index: 1;
        }
        .styled-paragraph::after {
            filter: blur(10px);
        }
        @keyframes bounce {
            from { transform: translateY(0); }
            to { transform: translateY(-10px); }
        }
        @keyframes rotate {
            from { transform: rotate(0); }
            to { transform: rotate(360deg); }
        }
        /* Additional Decorations */
        .decoration {
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            animation: float 4s infinite ease-in-out;
        }
        .decoration:nth-child(1) {
            top: 10%;
            left: 15%;
            animation-duration: 3s;
        }
        .decoration:nth-child(2) {
            top: 70%;
            left: 30%;
            animation-duration: 4s;
        }
        .decoration:nth-child(3) {
            top: 50%;
            left: 80%;
            animation-duration: 5s;
        }
        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="styled-paragraph-container">
        <div class="styled-paragraph">
            <strong>✨ Welcome to the Future of Text ✨</strong><br>
            This paragraph is not just a block of text; it's an <i class="fas fa-magic icon"></i> experience! 
            Featuring stunning <i class="fas fa-star icon"></i> animations, vibrant <i class="fas fa-heart icon"></i> colors, 
            and dynamic <i class="fas fa-bolt icon"></i> icons, your content will <strong>stand out</strong> like never before. 
            <i class="fas fa-smile icon"></i>
        </div>
        <div class="decoration"></div>
        <div class="decoration"></div>
        <div class="decoration"></div>
    </div>
</body>
</html>

Highly Styled Paragraph - MeggiTools