William Melody

<!DOCTYPE html>  <html> <head> <meta charset="utf-8" > <meta content="ie=edge" http-equiv="x-ua-compatible" > <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" > <title>William Melody</title> <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet" > <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" rel="stylesheet" > <link href="https://fonts.googleapis.com/css?family=Anton|Roboto+Mono" rel="stylesheet" > <style> html { height: 100%; min-width: 0; } body { background-color: #fff; color: #fff; min-height: 100vh; padding: 2rem; } a, a:hover { color: #fff; text-decoration: none; } .content { -webkit-animation: color-animation 140s ease infinite; -moz-animation: color-animation 140s ease infinite; -o-animation: color-animation 140s ease infinite; animation: color-animation 140s ease infinite; background: linear-gradient(135deg, #FBEEFF, #f61098, #ffff00, #1de840, #2b1de8 ); background-size: 3000% 3000%; min-height: 93.5vh; padding: 0; text-align: center; width: 100%; } @-webkit-keyframes color-animation { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @-moz-keyframes color-animation { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @-o-keyframes color-animation { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @keyframes color-animation { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .email { font-family: 'Roboto Mono', monospace; font-size: 1.1rem; margin: 0 0 1rem 0; text-transform: lowercase; } @media only screen and (min-width: 325px) { .email { font-size: 1.25rem; } } @media only screen and (min-width: 768px) { .email { font-size: 1.5rem; } } .initials { font-family: 'Anton', sans-serif; font-size: 15rem; line-height: 1em; margin: 0; padding: 0.20em 0 0.1em; word-break: break-all; } @media only screen and (min-width: 400px) { .initials { font-size: 20rem; } } @media only screen and (min-width: 768px) { .initials { font-size: 25rem; line-height: 1.25em; } } .initials .head { display: inline-block; } .initials .tail { display: none; } .links { list-style-type: none; margin-bottom: 0; padding-bottom: 5rem; padding-top: 1rem; } .links li { font-size: 4rem; margin: 0 !important; padding: 0 0.25em; } ::selection { background: #fff; color: #fff; } ::-moz-selection { background: #fff; color: #fff; } </style>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-190590-9"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-190590-9'); </script> </head> <body> <div class="content"> <div class="id"> <h1 class="initials"> <span class="head">W</span><span class="tail">illiam</span><span class="head">M</span><span class="tail">elody</span> </h1> </div> <ul class="links list-inline">      <li class="list-inline-item"> <a href="https://github.com/xwmx" arial-label="github"> <i aria-hidden class="fab fa-github"></i> </a> </li> <li class="list-inline-item"> • </li> <li class="list-inline-item"> <a href="http://pinterest.com/williammelody/pins/" arial-label="pinterest"> <i aria-hidden class="fab fa-pinterest"></i> </a> </li>  </ul> </div> </body> </html>

CINXE.COM

William Melody