Step 2 - Remix the code

Below is the code for your card! If you change the words above the dotted line, they'll change on your card too. Try it now!

Tap 'Preview' in the bar above to see how your card is looking! When you're ready to share it, tap 'Publish' on the preview screen.

When you’ve finished customising your card, click ‘Publish’ to share it.

If you want to remix all the code, click ‘Advanced’ in the top right.

<body>
<section class="card" >
<p>
</p>
<h1>
</h1>
<h1>
</h1>
<p>
</p>
<p>
</p>
<img src=" " alt="I’m glad you’re not dead yet" />
</section>
</body>
                                        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>I’m glad you’re not dead yet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        @font-face {
            font-family: "Playball-Regular";
            src: url("../fonts/Playball-Regular.ttf");
        }

        @font-face {
            font-family: "OpenSans-Regular";
            src: url("../fonts/OpenSans-Regular.ttf");
        }

        html, body {
            min-width: 100%;
            min-height: 100%;
        }

        body {
            font-family: "Playball-Regular";
            font-size: 70px;
            font-size: 11.6vw;
            margin: 0;
            padding: 0;
            background-image: -webkit-linear-gradient(bottom, #D9F0FF, #FFD7AE);
            background-image: -moz-linear-gradient(bottom, #D9F0FF, #FFD7AE);
            background-image: linear-gradient(bottom, #D9F0FF, #FFD7AE);
        }

        .card {
            max-width: 1080px;
            margin: auto;
            padding: 60px;
            padding: 10vw;
            position: relative;
            zoom: 0.6;
            transform-origin: top;
        }

        img {
            display: block;
            margin: -30px auto 0;
            margin: -5vw auto 0;
            width: 100%;
            height: auto;
        }

        h1 {
            color: #450F45;
            font-weight: normal;
            text-align: center;
            margin-top: 20px;
            margin-top: 3.2vw;
            font-size: 90px;
            font-size: 15vw;
            padding-left: 10%;
            padding-right: 10%;
            line-height: 120px;
        }

        p {
            font-family: "OpenSans-Regular";
            font-size: 30px;
            font-size: 5vw;
            text-align: left;
            margin: 10px 0;
            font-style: italic;
            line-height: 25px;
        }

        .wish {
            margin-top: -60px;
            padding-left: 60%;
        }

        .name {
            padding-left: 60%;
        }

        .to {
            font-family: "OpenSans-Regular";
            font-size: 30px;
            font-size: 5vw;
            text-align: left;
            font-style: normal;
            padding-left: 10%;
        }

        .mrup {
            margin-top: -10%;
        }

        .cc {
            max-width: 40%;
            position: absolute;
            left: 50px;
            left: 8.3vw;
            margin-top: -45px;
            margin-top: -6vw;
        }
    </style>
</head>
<body>
    <section class="card">
        <p id="adv_p1" class="to">To whom it may concern,</p>
        <h1 id="adv_h1">I’m glad you’re</h1>
        <h1 id="adv_h2" class="mrup">not dead yet</h1>
        <p id="adv_p2" class="wish">Yours Sincerly,</p>
        <p id="adv_p3" class="name"> Johnny McGrew</p>
        <img src="../images/valentineCards_card10.png" alt="I’m glad you’re not dead yet"> <img src="../images/promoLogo.png" alt="Erase all kitten" class="cc">
    </section>
</body>
</html>