Back

Remix

Preview
Back

Preview

Publish

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" >
<h1>
</h1>
<img src=" " alt="It's time to leverage our feelings to a mutual advantage" />
<p>
</p>
<p>
</p>
</section>
</body> 
                                        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>It's time to leverage our feelings to a mutual advantage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">
    <style>
        @font-face {
            font-family: "Tangerine-Regular";
            src: url("../fonts/Tangerine-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: "Tangerine-Regular";
            font-size: 80px;
            color: #000000;
            margin: 0;
            padding: 0;
            background: -webkit-linear-gradient(bottom, #e9eab2, #9fdeed);
            background: -moz-linear-gradient(bottom, #e9eab2, #9fdeed);
            background: linear-gradient(bottom, #e9eab2, #9fdeed);
            /*height: 100%;*/
            background-repeat:no-repeat;
        }

        h1 {
            font-weight: normal;
            text-align: center;
            margin-top: -10px;
            font-size: 100px;
            font-size: 13.8vw;
            margin-left: 12%;
            margin-right: 12%;
            line-height: 110px;
        }

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

        p {
            color: #000;
            padding-left: 52%;
            font-style: italic;
            margin-top: -20px;
            font-family: "OpenSans-Regular";
            font-size: 32px;
            font-size: 4.5vw;
            text-align: left;
            margin: 10px 0;
            line-height: 35px;
        }

        #adv_p1 {
            margin-top: -60px;
        }

        .from {
            margin-top: -5px;
        }

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

        .cc {
            max-width: 40%;
            position: absolute;
            bottom: 20px;
            left: 30px;
        }
    </style>
</head>
<body>
    <section class="card">
        <h1 id="adv_h1">It's time to leverage our feelings 
            to a mutual advantage</h1>
        <img src="../images/valentineCards_card01.png" alt="It's time to leverage our feelings to a mutual advantage">
        <p id="adv_p1">With love and ubiquitous synergy,</p>
        <p id="adv_p2" class="from">Tarquin Glitterquiff</p>
        <img src="../images/promoLogo.png" alt="Erase all kitten" class="cc">
    </section>
</body>
</html>