111 lines
2.9 KiB
HTML
111 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Materia Webfont</title>
|
|
<link
|
|
rel="shortcut icon"
|
|
type="image/png"
|
|
href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_White-on-Coral_Gap.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_White-on-Coral_Gap.png"
|
|
/>
|
|
<!--
|
|
<link
|
|
rel="shortcut icon"
|
|
type="image/png"
|
|
href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_Coral-on-White_Gap.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
href="../../Materia-Logomark-Logotype/PNG/Materia-Logomark_Coral-on-White_Gap.png"
|
|
/>
|
|
-->
|
|
<style>
|
|
@import url("./Materia.min.css");
|
|
body {
|
|
background: rgba(255,133,89,1);
|
|
color: rgba(255,255,255,1);
|
|
margin: 1em;
|
|
padding: 2em;
|
|
text-align: left;
|
|
}
|
|
p {
|
|
line-height: 1;
|
|
font-size: 2em;
|
|
}
|
|
.n100 {
|
|
font-weight: 100;
|
|
}
|
|
.n200 {
|
|
font-weight: 200;
|
|
}
|
|
.n300 {
|
|
font-weight: 300;
|
|
}
|
|
.n400 {
|
|
font-weight: 400;
|
|
}
|
|
.n500 {
|
|
font-weight: 500;
|
|
}
|
|
.n600 {
|
|
font-weight: 600;
|
|
}
|
|
.n700 {
|
|
font-weight: 700;
|
|
}
|
|
.n800 {
|
|
font-weight: 800;
|
|
}
|
|
.n900 {
|
|
font-weight: 900;
|
|
}
|
|
.i {
|
|
font-style: italic;
|
|
}
|
|
.materia-logomark,
|
|
.materia-logotype {
|
|
line-height: 1;
|
|
font-size: 4em;
|
|
}
|
|
.ligaless {
|
|
font-feature-settings: "liga" 0;
|
|
font-weight: 200;
|
|
color: rgba(255,255,255,.3);
|
|
font-size: 0.5em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="materia-webfont">
|
|
<p class="materia-logomark">:M: <span class="ligaless"> :M:</span></p>
|
|
<p class="materia-logotype">
|
|
:Materia: <span class="ligaless"> :Materia:</span>
|
|
</p>
|
|
<p class="n100">Materia Webfont 100</p>
|
|
<p class="n100 i">Materia Webfont 100 Italic</p>
|
|
<p class="n200">Materia Webfont 200</p>
|
|
<p class="n200 i">Materia Webfont 200 Italic</p>
|
|
<p class="n300">Materia Webfont 300</p>
|
|
<p class="n300 i">Materia Webfont 300 Italic</p>
|
|
<p class="n400">Materia Webfont 400</p>
|
|
<p class="n400 i">Materia Webfont 400 Italic</p>
|
|
<p class="n500">Materia Webfont 500</p>
|
|
<p class="n500 i">Materia Webfont 500 Italic</p>
|
|
<p class="n600">Materia Webfont 600</p>
|
|
<p class="n600 i">Materia Webfont 600 Italic</p>
|
|
<p class="n700">Materia Webfont 700</p>
|
|
<p class="n700 i">Materia Webfont 700 Italic</p>
|
|
<p class="n800">Materia Webfont 800</p>
|
|
<p class="n800 i">Materia Webfont 800 Italic</p>
|
|
<p class="n900">Materia Webfont 900</p>
|
|
<p class="n900 i">Materia Webfont 900 Italic</p>
|
|
</body>
|
|
</html>
|