<!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>