<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Let’s throw our love against a wall and see if it sticks</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @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; color: #000000; margin: 0; padding: 0; background-color: #BCF3FF; background-image: -webkit-linear-gradient(top, #DDD9FC, #BCF3FF); background-image: -moz-linear-gradient(top, #DDD9FC, #BCF3FF); background-image: linear-gradient(top, #DDD9FC, #BCF3FF); /*height: 100%;*/ background-repeat: no-repeat; } h1 { font-weight: normal; text-align: center; margin-left: 10%; margin-right: 10%; margin-top: 25px; font-size: 50px; font-size: 8.3vw; } .card { max-width: 1080px; margin: 0 auto; padding: 60px; position: relative; transform-origin: top; zoom: 0.6; } p { color: #000; padding-right: 30px; font-family: OpenSans-Regular; font-size: 28px; font-size: 4.6vw; font-style: italic; } .from { margin-top: -160px; margin-left: 65%; } .from2{ margin-top: -25px; margin-left: 65%; } img { margin-top: -250px; display: block; width: 100%; height: auto } .cc { max-width: 40%; position: absolute; left: 50px; bottom: 20px; } </style> </head> <body> <section class="card"> <h1 id="adv_h1">Let’s throw our love against a wall and see if it sticks</h1> <img src="../images/valentineCards_card05.png" alt="Let’s throw our love against a wall and see if it sticks"> <p id="adv_p1" class="from">YOLO</p> <p id="adv_p2" class="from2">Flynn the cupcake</p> <img src="../images/promoLogo.png" alt="Erase all kitten" class="cc"> </section> </body> </html>