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.

<section class="card" >
<img src=" " alt="You have disrupted my soul." />
                                        <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Our love is a real game-changer. You have disrupted my soul.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        @font-face {
            font-family: "JosefinSlab-SemiBold";
            src: url("../fonts/JosefinSlab-SemiBold.ttf");
         @font-face {
            font-family: "OpenSans-Regular";
            src: url("../fonts/OpenSans-Regular.ttf");

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

        body {
            font-family: "JosefinSlab-SemiBold";
            font-size: 20px;
            font-size: 3.3vw;
            color: #000000;
            margin: 0;
            padding: 0;
            background-color: #EBFDFF;
            background-image: -webkit-linear-gradient(top, #FEE6D6, #FCF3C5, #EBFDFF);
            background-image: -moz-linear-gradient(top, #FEE6D6, #FCF3C5, #EBFDFF);
            background-image: linear-gradient(top, #FEE6D6, #FCF3C5, #EBFDFF);
            /*height: 100%;*/
            background-repeat: no-repeat;

        h1 {
            font-weight: normal;
            margin-left: 7%;
            margin-right: 7%;
            text-align: center;
            margin-top: 25px;
            font-size: 55px;
            font-size: 9.1vw;
            line-height: 70px;

        .card {
            max-width: 1080px;
            margin: 50px auto;
            position: relative;
            transform-origin: top;
            zoom: 0.6;

        p {
            color: #000;
            padding-right: 30px;
            font-family: "OpenSans-Regular";
            font-size: 28px;
            font-size: 4.5vw;
            font-style: italic;

        .from {
            margin-left: 38%;
            margin-top: -170px;
        .from2 {
            margin-left: 38%;
            margin-top: -28px;

        img {
            margin-top: -20%;
            display: block;
            width: 100%;
            height: auto;

        .cc {
            max-width: 40%;
            position: absolute;
            bottom: -80px;
            left: 30px;
    <section class="card">
        <h1 id="adv_h1">Our love is a real game-changer. <br/>You have disrupted my soul.</h1>
        <img src="../images/valentineCards_card09.png" alt="You have disrupted my soul">
        <p id="adv_p1" class="from">Peaches Jerome, will you be my co-founder?</p>
        <p id="adv_p2" class="from2">- Bob, Squirrel of the South Seas</p>
        <img src="../images/promoLogo.png" alt="Erase all kitten" class="cc">