<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>I like you more than cupcakes</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: "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(top, #F8F9DB, #DDD9FC); background-image: -moz-linear-gradient(top, #F8F9DB, #DDD9FC); background-image: linear-gradient(top, #F8F9DB, #DDD9FC); } .card { max-width: 1080px; margin: auto; padding: 30px; padding: 5vw; position: relative; transform-origin: top; zoom: 0.6; } img { display: block; margin: -60px auto 0; width: 100%; height: auto; } h1 { color: #450F45; font-weight: normal; text-align: center; margin-top: 40px; font-size: 80px; font-size: 13.3vw; padding-left: 10%; padding-right: 10%; line-height: 90px; } p { font-family: "OpenSans-Regular"; font-size: 30px; font-size: 5vw; text-align: left; margin: 20px 0; font-style: italic; line-height: 25px; } .wish { margin-top: -40px; line-height: 25px; 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%; } .cc { max-width: 40%; position: absolute; left: 30px; left: 5vw; bottom: 20px; } </style> </head> <body> <section class="card"> <p id="adv_p1" class="to">Dear Flynn,</p> <h1 id="adv_h1">I like you more than cupcakes</h1> <p id="adv_p2" class="wish">Happy Valentines Day</p> <p id="adv_p3" class="name">- Bert</p> <img src="../images/valentineCards_card12.png" alt="cup cups!"> <img src="../images/promoLogo.png" alt="Erase all kitten" class="cc"> </section> </body> </html>