Add Verification Badge to Your Website
    
    
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1000px;
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #8a2be2, #4b0082);
            color: white;
            padding: 40px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .header-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .profile-pic {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            margin-right: 20px;
            object-fit: cover;
        }
        
        .profile-info {
            text-align: left;
        }
        
        .name-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        h2 {
            font-size: 2rem;
            margin-right: 15px;
        }
        
        .verified-badge {
            color: white;
            background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .tagline {
            font-style: italic;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
        }
        
        .card {
            background: #f9f9f9;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        h3 {
            color: #6a11cb;
            margin-bottom: 20px;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }
        
        h3 i {
            margin-right: 10px;
        }
        
        p {
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .steps {
            margin-left: 20px;
            margin-bottom: 20px;
        }
        
        .steps li {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .code-container {
            background: #2d2d2d;
            color: #f8f8f2;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
        }
        
        .code-comment {
            color: #75715e;
        }
        
        .css-selector {
            color: #a6e22e;
        }
        
        .css-property {
            color: #66d9ef;
        }
        
        .css-value {
            color: #ae81ff;
        }
        
        .note {
            background: #fff4e6;
            border-left: 4px solid #ffa94d;
            padding: 15px;
            border-radius: 0 8px 8px 0;
            margin: 20px 0;
        }
        
        .implementation {
            background: #eef7ff;
            border-left: 4px solid #3897f0;
            padding: 20px;
            border-radius: 0 8px 8px 0;
            margin: 20px 0;
        }
        
        footer {
            text-align: center;
            padding: 30px;
            color: #777;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
        }
        
        .btn {
            display: inline-block;
            background: linear-gradient(90deg, #8a2be2, #4b0082);
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 10px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(138, 43, 226, 0.4);
        }
        
        .badge-variations {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        
        .badge-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
    


    
        
            Add a Verification Badge to Your Website
            
                
                
                    
                        Your Name
                        
                            
                        
                    
                    Web Developer & Designer
                
            
        
        
        
            
                 How to Add to Your Website
                Since you already have a website, follow these steps to add a verification badge:
                
                
                    Implementation Steps:
                    
                        Locate the section in your HTML where your name appears
                        Add the verification badge HTML right after your name
                        Copy the CSS code and add it to your website's stylesheet
                        Adjust the badge size and colors to match your website's design
                    
                
                
                 Badge Variations
                Choose a style that matches your website's design:
                
                
                    
                        
                            
                        
                        Blue
                    
                    
                        
                            
                        
                        Green
                    
                    
                        
                            
                        
                        Orange
                    
                    
                        
                            
                        
                        Purple
                    
                
            
            
            
                 Code Implementation
                Add this HTML where you want the badge to appear:
                
                
                    <!-- Add this after your name -->
                    <div class="verified-badge">
                      <i class="fas fa-check"></i>
                    </div>
                
                
                Add this CSS to your stylesheet:
                
                
                    .verified-badge {
                      color: white;
                      background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
                      width: 28px;
                      height: 28px;
                      border-radius: 50%;
                      display: inline-flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 14px;
                      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
                      animation: pulse 2s infinite;
                    }
                    
                    @keyframes pulse {
                      0% { transform: scale(1); }
                      50% { transform: scale(1.1); }
                      100% { transform: scale(1); }
                    }
                
                
                
                    Note: Make sure you've included Font Awesome in your website's head section:
                    
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                    
                
                
                Copy CSS Code
            
        
        
        
            © 2023 Your Website. This verification badge is a decorative element for your personal website.
        
    

    
        function copyCode() {
            const cssCode = `.verified-badge {
    color: white;
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}`;

            navigator.clipboard.writeText(cssCode)
                .then(() => {
                    alert('CSS code copied to clipboard!');
                })
                .catch(err => {
                    console.error('Error copying text: ', err);
                });
        }