Skip to content

Commit

Permalink
Testing font loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChrisBews
ChrisBews committed Oct 1, 2020
1 parent 9ac0cfb commit b59bd83
Showing 1 changed file with 172 additions and 0 deletions.
172 changes: 172 additions & 0 deletions testing.html
View file
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ut-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="LUMI" />
<meta name="twitter:title" content="LUMI" />
<meta
name="description"
content="Choose songs you love in the app, follow the lights on the keyboard, and build skills that last a lifetime.&nbsp;Unlock your musical potential with an easy, all-in-one system. LUMI is the fun, instant, rewarding way to learn to play the piano."
/>
<meta
name="og:description"
content="Choose songs you love in the app, follow the lights on the keyboard, and build skills that last a lifetime.&nbsp;Unlock your musical potential with an easy, all-in-one system. LUMI is the fun, instant, rewarding way to learn to play the piano."
/>
<meta
name="twitter:description"
content="Choose songs you love in the app, follow the lights on the keyboard, and build skills that last a lifetime.&nbsp;Unlock your musical potential with an easy, all-in-one system. LUMI is the fun, instant, rewarding way to learn to play the piano."
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
property="og:image"
content="https://d1ag85ptixulvl.cloudfront.net/2azq4ayq3grn/BEGjAzP1QdBZb4e6Z5zdA/6ff0e3f9cc2989951110afbdac5ac9c9/Overview_-_Hero.jpg?w=1200&amp;h=630"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
name="twitter:image"
content="https://d1ag85ptixulvl.cloudfront.net/2azq4ayq3grn/BEGjAzP1QdBZb4e6Z5zdA/6ff0e3f9cc2989951110afbdac5ac9c9/Overview_-_Hero.jpg?w=1024&amp;h=512"
/>
<meta property="og:type" content="website" />
<title>LUMI</title>
<link
rel="icon"
href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAVNQTFRF/////Pz8tbW1s7Oz+/v7wsLCpKSk8fHx4+PjnZ2d1dXV7e3txcXF/v7+19fXzMzMtLS09/f3SUlJRUVF9vb2a2trIiIi3t7eurq6EBAQmZmZt7e3Pj4+4eHhenp6cnJyR0dHSEhIS0tLRkZGIyMju7u7ERERmpqagICACQkJn5+fNDQ0NjY26urq+Pj4/f39WFhYBAQETk5O9PT0lZWVCwsLExMT+vr6nJycKSkpFhYWpqamISEhFRUVkJCQbGxsHx8f2traDw8PEhISh4eHMjIyMTExhYWF8PDwSkpKRERE8/PzDg4Oo6Ojd3d3JSUl29vbdHR0BQUFLCws2dnZz8/PWlpaX19fXV1de3t7PT09Z2dnFxcXQEBAW1tbw8PDGhoav7+/VlZWPz8/YGBg7+/v0NDQbW1tNTU1Ozs7gYGB9fX1eHh45ubmi4uLj4+P+fn5MTAfqAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAD/SURBVDjLY2AYBfQDjEzMLECKlY2dgYGDk4uBm4eXgYGPn4GRWYARrEBQSFgESImKiTMwSEhKMUjLyDIwyMkzCCooCkIUKCmDFagAFaiqqTNoaGoxcGjr6OopYlegb2BoZGxiaiZhjl2BhbilipW1kY2tHbICEMPewZGBgdmJk83ZxdXNyl3BwEMIpsDTy1tfn8HFx5eB0c9JQN4/IDAoOEReLNQTqoAlzNYgPCIyNEolOiImnCM2Tj8+QY6BzYfTUwGigCExKTlWJiU1LT0jM4sjO0eAQS+QlSE3PTEvXx8aVAXGxsYivAyM3B7AIGIBinoAQ46Rl4VxoONwZAEARD4mt/FEhFcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDYtMThUMTU6Mzc6MDkrMDA6MDDT/SjeAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA2LTE4VDE1OjM3OjA5KzAwOjAwoqCQYgAAABF0RVh0anBlZzpjb2xvcnNwYWNlADIsdVWfAAAAIHRFWHRqcGVnOnNhbXBsaW5nLWZhY3RvcgAxeDEsMXgxLDF4MemV/HAAAABGdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuNy44LTkgMjAxNC0wNS0xMiBRMTYgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmfchu0AAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAGHRFWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAxOTIPAHKFAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADE5MtOsIQgAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTU2MDg3MjIyOUH50p8AAAAPdEVYdFRodW1iOjpTaXplADBCQpSiPuwAAABWdEVYdFRodW1iOjpVUkkAZmlsZTovLy9tbnRsb2cvZmF2aWNvbnMvMjAxOS0wNi0xOC9mNDc0ZTAxNjQzZjYzZTY2YWM1Mzg5ZGI1YTcxNWQwZS5pY28ucG5neYT3nAAAAABJRU5ErkJggg=="
/>
<style>
@font-face {
font-family: "Contax Pro";
font-weight: 500;
src: url("//d30pueezughrda.cloudfront.net/fonts/contax-pro/contaxpro65med.woff2")
format("woff2"),
url("//d30pueezughrda.cloudfront.net/fonts/contax-pro/contaxpro65med.woff")
format("woff");
}

html,
body {
height: 100%;
margin: 0;
padding: 0;
}

.site-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 40px;
background: rgba(26, 30, 201, 1)
url("https://d1ag85ptixulvl.cloudfront.net/2azq4ayq3grn/2t6Z0IruOWfFVQ6Ka8taLv/1501ac866b0970a6b2345c220d1ab780/Header_Generic_D__2x.jpg")
no-repeat 50% 50%;
background-size: cover;
}

.lumi-logo {
margin: 0;
padding: 0;
fill: rgba(255, 255, 255, 1);
}

.lumi-logo svg {
width: 9rem;
height: 3.05187375;
margin: 0;
padding: 0;
vertical-align: top;
}

.message {
max-width: 260px;
margin: 0;
padding: 30px 0 0 0;
color: rgba(215, 246, 255, 1);
font-family: "Contax Pro", "HelveticaNeue", "Helvetica Neue",
"HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman",
"Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
font-weight: 500;
text-align: center;
}

.message-first-line {
display: block;
}

.message-last-line {
display: block;
padding: 10px 0 0 0;
}

@media (min-width: 420px) {
.message {
max-width: none;
}
}

@media (min-width: 550px) {
.lumi-logo svg {
width: 10rem;
height: 3.390970833333333rem;
}

.message {
padding-top: 30px;
font-size: 1.5rem;
line-height: 1.75rem;
}

.message-first-line {
display: inline;
}

.message-first-line::after {
content: " ";
}

.message-last-line {
padding-top: 10px;
}
}

@media (min-width: 960px) {
.lumi-logo svg {
width: 15rem;
height: 5.08645625rem;
}

.message {
padding-top: 50px;
font-size: 2.375rem;
line-height: 2.75rem;
}

.message-last-line {
padding-top: 10px;
}
}
</style>
</head>
<body>
<div class="site-wrapper">
<h1 class="lumi-logo">
<svg viewBox="0 0 236 84" xmlns="http://www.w3.org/2000/svg">
<path
d="M195.623 5.074c-.711-2.582-4.291-2.815-5.335-.35l-19.51 46.086-19.51-46.086c-1.043-2.465-4.624-2.232-5.335.35l-18.413 66.86c-1.044 3.792 1.195 7.708 4.998 8.748 3.804 1.042 7.735-1.189 8.779-4.98l9.662-35.085 17.213 40.659c.972 2.299 4.24 2.299 5.213 0l17.213-40.659 9.662 35.085c1.044 3.791 4.974 6.022 8.778 4.98 3.805-1.04 6.042-4.956 4.998-8.748l-18.413-66.86zm25.405 68.62V4.355H236v69.337c0 4.121-3.353 7.46-7.486 7.46-4.135 0-7.486-3.339-7.486-7.46zM89.511 82.108c-17.366 0-32.456-12.652-32.456-33.42V4.356h14.97v43.736c0 12.174 7.187 20.052 17.486 20.052 10.3 0 17.487-7.878 17.487-20.052V4.356h14.97V48.69c0 20.768-15.09 33.42-32.457 33.42zM0 65.918V4.373l.017-.017h14.939l.016.017v58.28a3.893 3.893 0 003.9 3.886h33.904v14.615H15.289C6.846 81.154 0 74.332 0 65.918z"
fill-rule="evenodd"
></path>
</svg>
</h1>
<p class="message">
<span class="message-first-line">LUMI pre-orders</span>are going live
today.
<span class="message-last-line"> Come back soon!</span>
</p>
</div>
</body>
</html>

0 comments on commit b59bd83

Please sign in to comment.