HTML CERTIFICATE CHALLENGE

Copy the code snippets below and arrange them properly in the editor to create your certificate. Edit your name in the code.

CODE SNIPPETS TO COPY

HTML Structure + Viewport

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Certificate</title>
</head>

Certificate Styles

    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #7c3aed, #0f0820);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .certificate {
            background: white;
            padding: 40px;
            max-width: 800px;
            width: 100%;
            box-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
        }
        .logo {
            text-align: center;
            margin-bottom: 30px;
        }
        .logo img {
            width: 150px;
            height: 150px;
        }
        h1 {
            text-align: center;
            color: #7c3aed;
            font-size: 36px;
            margin: 20px 0;
        }
        .subtitle {
            text-align: center;
            color: #00d9ff;
            font-size: 20px;
            margin-bottom: 30px;
        }
        .content {
            text-align: center;
            font-size: 18px;
            line-height: 1.8;
        }
        .name {
            color: #00d9ff;
            font-size: 32px;
            font-weight: bold;
            margin: 20px 0;
        }
        .date {
            margin-top: 40px;
            text-align: center;
            color: #666;
        }
    </style>

Body Opening

<body>
    <div class="certificate">

Logo Section

        <div class="logo">
            <img src="html-letos-logo.png" alt="Certificate Logo">
        </div>

Certificate Title

        <h1>CERTIFICATE OF ACHIEVEMENT</h1>
        <div class="subtitle">HTML Challenge Completed</div>

Content (EDIT YOUR NAME HERE)

        <div class="content">
            <p>This certifies that</p>
            <div class="name">YOUR NAME HERE</div>
            <p>has successfully completed the HTML Challenge</p>
            <div class="date">November 10, 2025</div>
        </div>

Closing Tags

    </div>
</body>
</html>

CODE EDITOR

← Go Back Color & Font Picker

index.html

Helpful Keyboard Shortcuts

Screenshot Your Certificate

Windows: Win + Shift + S Snipping Tool

macOS: Cmd + Shift + 4 Screenshot Selection

Linux: Shift + PrtSc Screenshot Area

Basic Shortcuts

Copy: Ctrl + C / Cmd + C

Paste: Ctrl + V / Cmd + V

Undo: Ctrl + Z / Cmd + Z

Redo: Ctrl + Y / Cmd + Shift + Z

Select All: Ctrl + A / Cmd + A

Editor Shortcuts

Find: Ctrl + F / Cmd + F

Replace: Ctrl + H / Cmd + Alt + F

Save: Use "Save .html" button