1001

static P2P wikisoft.
Log | Files | Refs | README

demo.html (43908B)


      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="utf-8">
      5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6     <meta name="viewport" content="width=device-width, initial-scale=1">
      7     <meta name="robots" content="noindex, noarchive">
      8     <meta name="format-detection" content="telephone=no">
      9     <title>Transfonter demo</title>
     10     <link href="stylesheet.css" rel="stylesheet">
     11     <style>
     12         /*
     13         http://meyerweb.com/eric/tools/css/reset/
     14         v2.0 | 20110126
     15         License: none (public domain)
     16         */
     17         html, body, div, span, applet, object, iframe,
     18         h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     19         a, abbr, acronym, address, big, cite, code,
     20         del, dfn, em, img, ins, kbd, q, s, samp,
     21         small, strike, strong, sub, sup, tt, var,
     22         b, u, i, center,
     23         dl, dt, dd, ol, ul, li,
     24         fieldset, form, label, legend,
     25         table, caption, tbody, tfoot, thead, tr, th, td,
     26         article, aside, canvas, details, embed,
     27         figure, figcaption, footer, header, hgroup,
     28         menu, nav, output, ruby, section, summary,
     29         time, mark, audio, video {
     30             margin: 0;
     31             padding: 0;
     32             border: 0;
     33             font-size: 100%;
     34             font: inherit;
     35             vertical-align: baseline;
     36         }
     37         /* HTML5 display-role reset for older browsers */
     38         article, aside, details, figcaption, figure,
     39         footer, header, hgroup, menu, nav, section {
     40             display: block;
     41         }
     42         body {
     43             line-height: 1;
     44         }
     45         ol, ul {
     46             list-style: none;
     47         }
     48         blockquote, q {
     49             quotes: none;
     50         }
     51         blockquote:before, blockquote:after,
     52         q:before, q:after {
     53             content: '';
     54             content: none;
     55         }
     56         table {
     57             border-collapse: collapse;
     58             border-spacing: 0;
     59         }
     60         /* common styles */
     61         body {
     62             background: #f1f1f1;
     63             color: #000;
     64         }
     65         .page {
     66             background: #fff;
     67             width: 920px;
     68             margin: 0 auto;
     69             padding: 20px 20px 0 20px;
     70             overflow: hidden;
     71         }
     72         .font-container {
     73             overflow-x: auto;
     74             overflow-y: hidden;
     75             margin-bottom: 40px;
     76             line-height: 1.3;
     77             white-space: nowrap;
     78             padding-bottom: 5px;
     79         }
     80         h1 {
     81             position: relative;
     82             background: #444;
     83             font-size: 32px;
     84             color: #fff;
     85             padding: 10px 20px;
     86             margin: 0 -20px 12px -20px;
     87         }
     88         .letters {
     89             font-size: 25px;
     90             margin-bottom: 20px;
     91         }
     92         .s10:before {
     93             content: '10px';
     94         }
     95         .s11:before {
     96             content: '11px';
     97         }
     98         .s12:before {
     99             content: '12px';
    100         }
    101         .s14:before {
    102             content: '14px';
    103         }
    104         .s18:before {
    105             content: '18px';
    106         }
    107         .s24:before {
    108             content: '24px';
    109         }
    110         .s30:before {
    111             content: '30px';
    112         }
    113         .s36:before {
    114             content: '36px';
    115         }
    116         .s48:before {
    117             content: '48px';
    118         }
    119         .s60:before {
    120             content: '60px';
    121         }
    122         .s72:before {
    123             content: '72px';
    124         }
    125         .s10:before, .s11:before, .s12:before, .s14:before,
    126         .s18:before, .s24:before, .s30:before, .s36:before,
    127         .s48:before, .s60:before, .s72:before {
    128             font-family: Arial, sans-serif;
    129             font-size: 10px;
    130             font-weight: normal;
    131             font-style: normal;
    132             color: #999;
    133             padding-right: 6px;
    134         }
    135         pre {
    136             display: block;
    137             position: relative;
    138             padding: 9px;
    139             margin: 0 0 10px;
    140             font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
    141             font-size: 13px;
    142             line-height: 1.428571429;
    143             color: #333;
    144             font-weight: normal !important;
    145             font-style: normal !important;
    146             background-color: #f5f5f5;
    147             border: 1px solid #ccc;
    148             overflow-x: auto;
    149             border-radius: 4px;
    150         }
    151         pre:after {
    152             display: block;
    153             position: absolute;
    154             right: 0;
    155             top: 0;
    156             content: 'Usage';
    157             line-height: 1;
    158             padding: 5px 8px;
    159             font-size: 12px;
    160             color: #767676;
    161             background-color: #fff;
    162             border: 1px solid #ccc;
    163             border-right: none;
    164             border-top: none;
    165             border-radius: 0 4px 0 4px;
    166             z-index: 10;
    167         }
    168         /* responsive */
    169         @media (max-width: 959px) {
    170             .page {
    171                 width: auto;
    172                 margin: 0;
    173             }
    174         }
    175     </style>
    176 </head>
    177 <body>
    178 <div class="page">
    179     <div class="demo" style="font-family: 'Basis Grotesque Pro Mono'; font-weight: bold; font-style: italic;">
    180         <h1>Basis Grotesque Pro Mono Bold Italic</h1>
    181         <pre>.your-style {
    182     font-family: 'Basis Grotesque Pro Mono';
    183     font-weight: bold;
    184     font-style: italic;
    185 }</pre>
    186         <div class="font-container">
    187             <p class="letters">
    188                 abcdefghijklmnopqrstuvwxyz<br>
    189 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    190                 0123456789.:,;()*!?'@#<>$%&^+-=~
    191             </p>
    192             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    193             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    194             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    195             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    196             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    197             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    198             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    199             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    200             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    201             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    202             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    203         </div>
    204     </div>
    205     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 300; font-style: normal;">
    206         <h1>Basis Grotesque Pro Light</h1>
    207         <pre>.your-style {
    208     font-family: 'Basis Grotesque Pro';
    209     font-weight: 300;
    210     font-style: normal;
    211 }</pre>
    212         <div class="font-container">
    213             <p class="letters">
    214                 abcdefghijklmnopqrstuvwxyz<br>
    215 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    216                 0123456789.:,;()*!?'@#<>$%&^+-=~
    217             </p>
    218             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    219             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    220             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    221             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    222             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    223             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    224             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    225             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    226             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    227             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    228             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    229         </div>
    230     </div>
    231     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 500; font-style: italic;">
    232         <h1>Basis Grotesque Pro Medium Italic</h1>
    233         <pre>.your-style {
    234     font-family: 'Basis Grotesque Pro';
    235     font-weight: 500;
    236     font-style: italic;
    237 }</pre>
    238         <div class="font-container">
    239             <p class="letters">
    240                 abcdefghijklmnopqrstuvwxyz<br>
    241 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    242                 0123456789.:,;()*!?'@#<>$%&^+-=~
    243             </p>
    244             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    245             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    246             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    247             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    248             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    249             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    250             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    251             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    252             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    253             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    254             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    255         </div>
    256     </div>
    257     <div class="demo" style="font-family: 'Basis Grotesque Pro Off White'; font-weight: normal; font-style: italic;">
    258         <h1>Basis Grotesque Pro Off White Italic</h1>
    259         <pre>.your-style {
    260     font-family: 'Basis Grotesque Pro Off White';
    261     font-weight: normal;
    262     font-style: italic;
    263 }</pre>
    264         <div class="font-container">
    265             <p class="letters">
    266                 abcdefghijklmnopqrstuvwxyz<br>
    267 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    268                 0123456789.:,;()*!?'@#<>$%&^+-=~
    269             </p>
    270             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    271             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    272             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    273             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    274             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    275             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    276             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    277             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    278             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    279             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    280             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    281         </div>
    282     </div>
    283     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: normal; font-style: italic;">
    284         <h1>Basis Grotesque Pro Italic</h1>
    285         <pre>.your-style {
    286     font-family: 'Basis Grotesque Pro';
    287     font-weight: normal;
    288     font-style: italic;
    289 }</pre>
    290         <div class="font-container">
    291             <p class="letters">
    292                 abcdefghijklmnopqrstuvwxyz<br>
    293 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    294                 0123456789.:,;()*!?'@#<>$%&^+-=~
    295             </p>
    296             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    297             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    298             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    299             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    300             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    301             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    302             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    303             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    304             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    305             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    306             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    307         </div>
    308     </div>
    309     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 300; font-style: italic;">
    310         <h1>Basis Grotesque Pro Light Italic</h1>
    311         <pre>.your-style {
    312     font-family: 'Basis Grotesque Pro';
    313     font-weight: 300;
    314     font-style: italic;
    315 }</pre>
    316         <div class="font-container">
    317             <p class="letters">
    318                 abcdefghijklmnopqrstuvwxyz<br>
    319 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    320                 0123456789.:,;()*!?'@#<>$%&^+-=~
    321             </p>
    322             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    323             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    324             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    325             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    326             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    327             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    328             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    329             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    330             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    331             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    332             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    333         </div>
    334     </div>
    335     <div class="demo" style="font-family: 'Basis Grotesque Pro Off White'; font-weight: normal; font-style: normal;">
    336         <h1>Basis Grotesque Pro Off White</h1>
    337         <pre>.your-style {
    338     font-family: 'Basis Grotesque Pro Off White';
    339     font-weight: normal;
    340     font-style: normal;
    341 }</pre>
    342         <div class="font-container">
    343             <p class="letters">
    344                 abcdefghijklmnopqrstuvwxyz<br>
    345 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    346                 0123456789.:,;()*!?'@#<>$%&^+-=~
    347             </p>
    348             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    349             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    350             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    351             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    352             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    353             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    354             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    355             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    356             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    357             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    358             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    359         </div>
    360     </div>
    361     <div class="demo" style="font-family: 'Basis Grotesque Pro Mono'; font-weight: bold; font-style: normal;">
    362         <h1>Basis Grotesque Pro Mono Bold</h1>
    363         <pre>.your-style {
    364     font-family: 'Basis Grotesque Pro Mono';
    365     font-weight: bold;
    366     font-style: normal;
    367 }</pre>
    368         <div class="font-container">
    369             <p class="letters">
    370                 abcdefghijklmnopqrstuvwxyz<br>
    371 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    372                 0123456789.:,;()*!?'@#<>$%&^+-=~
    373             </p>
    374             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    375             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    376             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    377             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    378             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    379             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    380             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    381             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    382             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    383             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    384             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    385         </div>
    386     </div>
    387     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 900; font-style: italic;">
    388         <h1>Basis Grotesque Pro Black Italic</h1>
    389         <pre>.your-style {
    390     font-family: 'Basis Grotesque Pro';
    391     font-weight: 900;
    392     font-style: italic;
    393 }</pre>
    394         <div class="font-container">
    395             <p class="letters">
    396                 abcdefghijklmnopqrstuvwxyz<br>
    397 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    398                 0123456789.:,;()*!?'@#<>$%&^+-=~
    399             </p>
    400             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    401             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    402             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    403             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    404             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    405             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    406             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    407             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    408             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    409             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    410             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    411         </div>
    412     </div>
    413     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: bold; font-style: italic;">
    414         <h1>Basis Grotesque Pro Bold Italic</h1>
    415         <pre>.your-style {
    416     font-family: 'Basis Grotesque Pro';
    417     font-weight: bold;
    418     font-style: italic;
    419 }</pre>
    420         <div class="font-container">
    421             <p class="letters">
    422                 abcdefghijklmnopqrstuvwxyz<br>
    423 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    424                 0123456789.:,;()*!?'@#<>$%&^+-=~
    425             </p>
    426             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    427             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    428             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    429             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    430             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    431             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    432             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    433             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    434             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    435             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    436             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    437         </div>
    438     </div>
    439     <div class="demo" style="font-family: 'Basis Grotesque Pro Mono'; font-weight: normal; font-style: italic;">
    440         <h1>Basis Grotesque Pro Mono Italic</h1>
    441         <pre>.your-style {
    442     font-family: 'Basis Grotesque Pro Mono';
    443     font-weight: normal;
    444     font-style: italic;
    445 }</pre>
    446         <div class="font-container">
    447             <p class="letters">
    448                 abcdefghijklmnopqrstuvwxyz<br>
    449 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    450                 0123456789.:,;()*!?'@#<>$%&^+-=~
    451             </p>
    452             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    453             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    454             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    455             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    456             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    457             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    458             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    459             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    460             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    461             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    462             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    463         </div>
    464     </div>
    465     <div class="demo" style="font-family: 'Basis Grotesque Pro Mono'; font-weight: normal; font-style: normal;">
    466         <h1>Basis Grotesque Pro Mono</h1>
    467         <pre>.your-style {
    468     font-family: 'Basis Grotesque Pro Mono';
    469     font-weight: normal;
    470     font-style: normal;
    471 }</pre>
    472         <div class="font-container">
    473             <p class="letters">
    474                 abcdefghijklmnopqrstuvwxyz<br>
    475 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    476                 0123456789.:,;()*!?'@#<>$%&^+-=~
    477             </p>
    478             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    479             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    480             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    481             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    482             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    483             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    484             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    485             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    486             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    487             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    488             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    489         </div>
    490     </div>
    491     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 500; font-style: normal;">
    492         <h1>Basis Grotesque Pro Medium</h1>
    493         <pre>.your-style {
    494     font-family: 'Basis Grotesque Pro';
    495     font-weight: 500;
    496     font-style: normal;
    497 }</pre>
    498         <div class="font-container">
    499             <p class="letters">
    500                 abcdefghijklmnopqrstuvwxyz<br>
    501 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    502                 0123456789.:,;()*!?'@#<>$%&^+-=~
    503             </p>
    504             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    505             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    506             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    507             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    508             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    509             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    510             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    511             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    512             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    513             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    514             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    515         </div>
    516     </div>
    517     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: bold; font-style: normal;">
    518         <h1>Basis Grotesque Pro Bold</h1>
    519         <pre>.your-style {
    520     font-family: 'Basis Grotesque Pro';
    521     font-weight: bold;
    522     font-style: normal;
    523 }</pre>
    524         <div class="font-container">
    525             <p class="letters">
    526                 abcdefghijklmnopqrstuvwxyz<br>
    527 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    528                 0123456789.:,;()*!?'@#<>$%&^+-=~
    529             </p>
    530             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    531             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    532             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    533             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    534             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    535             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    536             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    537             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    538             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    539             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    540             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    541         </div>
    542     </div>
    543     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: normal; font-style: normal;">
    544         <h1>Basis Grotesque Pro</h1>
    545         <pre>.your-style {
    546     font-family: 'Basis Grotesque Pro';
    547     font-weight: normal;
    548     font-style: normal;
    549 }</pre>
    550         <div class="font-container">
    551             <p class="letters">
    552                 abcdefghijklmnopqrstuvwxyz<br>
    553 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    554                 0123456789.:,;()*!?'@#<>$%&^+-=~
    555             </p>
    556             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    557             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    558             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    559             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    560             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    561             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    562             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    563             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    564             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    565             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    566             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    567         </div>
    568     </div>
    569     <div class="demo" style="font-family: 'Basis Grotesque Pro'; font-weight: 900; font-style: normal;">
    570         <h1>Basis Grotesque Pro Black</h1>
    571         <pre>.your-style {
    572     font-family: 'Basis Grotesque Pro';
    573     font-weight: 900;
    574     font-style: normal;
    575 }</pre>
    576         <div class="font-container">
    577             <p class="letters">
    578                 abcdefghijklmnopqrstuvwxyz<br>
    579 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    580                 0123456789.:,;()*!?'@#<>$%&^+-=~
    581             </p>
    582             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    583             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    584             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    585             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    586             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    587             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    588             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    589             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    590             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    591             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    592             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    593         </div>
    594     </div>
    595     <div class="demo" style="font-family: 'Archive Pro'; font-weight: 800; font-style: normal;">
    596         <h1>Archive Pro ExtraBold</h1>
    597         <pre>.your-style {
    598     font-family: 'Archive Pro';
    599     font-weight: 800;
    600     font-style: normal;
    601 }</pre>
    602         <div class="font-container">
    603             <p class="letters">
    604                 abcdefghijklmnopqrstuvwxyz<br>
    605 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    606                 0123456789.:,;()*!?'@#<>$%&^+-=~
    607             </p>
    608             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    609             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    610             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    611             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    612             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    613             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    614             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    615             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    616             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    617             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    618             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    619         </div>
    620     </div>
    621     <div class="demo" style="font-family: 'Archive Pro'; font-weight: normal; font-style: normal;">
    622         <h1>Archive Pro</h1>
    623         <pre>.your-style {
    624     font-family: 'Archive Pro';
    625     font-weight: normal;
    626     font-style: normal;
    627 }</pre>
    628         <div class="font-container">
    629             <p class="letters">
    630                 abcdefghijklmnopqrstuvwxyz<br>
    631 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    632                 0123456789.:,;()*!?'@#<>$%&^+-=~
    633             </p>
    634             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    635             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    636             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    637             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    638             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    639             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    640             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    641             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    642             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    643             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    644             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    645         </div>
    646     </div>
    647     <div class="demo" style="font-family: 'Archive Pro'; font-weight: normal; font-style: italic;">
    648         <h1>Archive Pro Italic</h1>
    649         <pre>.your-style {
    650     font-family: 'Archive Pro';
    651     font-weight: normal;
    652     font-style: italic;
    653 }</pre>
    654         <div class="font-container">
    655             <p class="letters">
    656                 abcdefghijklmnopqrstuvwxyz<br>
    657 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    658                 0123456789.:,;()*!?'@#<>$%&^+-=~
    659             </p>
    660             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    661             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    662             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    663             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    664             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    665             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    666             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    667             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    668             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    669             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    670             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    671         </div>
    672     </div>
    673     <div class="demo" style="font-family: 'Archive Pro'; font-weight: 600; font-style: italic;">
    674         <h1>Archive Pro SemiBold Italic</h1>
    675         <pre>.your-style {
    676     font-family: 'Archive Pro';
    677     font-weight: 600;
    678     font-style: italic;
    679 }</pre>
    680         <div class="font-container">
    681             <p class="letters">
    682                 abcdefghijklmnopqrstuvwxyz<br>
    683 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    684                 0123456789.:,;()*!?'@#<>$%&^+-=~
    685             </p>
    686             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    687             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    688             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    689             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    690             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    691             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    692             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    693             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    694             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    695             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    696             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    697         </div>
    698     </div>
    699     <div class="demo" style="font-family: 'Archive Pro'; font-weight: 800; font-style: italic;">
    700         <h1>Archive Pro ExtraBold Italic</h1>
    701         <pre>.your-style {
    702     font-family: 'Archive Pro';
    703     font-weight: 800;
    704     font-style: italic;
    705 }</pre>
    706         <div class="font-container">
    707             <p class="letters">
    708                 abcdefghijklmnopqrstuvwxyz<br>
    709 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    710                 0123456789.:,;()*!?'@#<>$%&^+-=~
    711             </p>
    712             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    713             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    714             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    715             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    716             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    717             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    718             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    719             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    720             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    721             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    722             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    723         </div>
    724     </div>
    725     <div class="demo" style="font-family: 'Archive Pro'; font-weight: 600; font-style: normal;">
    726         <h1>Archive Pro SemiBold</h1>
    727         <pre>.your-style {
    728     font-family: 'Archive Pro';
    729     font-weight: 600;
    730     font-style: normal;
    731 }</pre>
    732         <div class="font-container">
    733             <p class="letters">
    734                 abcdefghijklmnopqrstuvwxyz<br>
    735 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    736                 0123456789.:,;()*!?'@#<>$%&^+-=~
    737             </p>
    738             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    739             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    740             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    741             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    742             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    743             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    744             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    745             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    746             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    747             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    748             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    749         </div>
    750     </div>
    751     <div class="demo" style="font-family: 'Archive Pro'; font-weight: bold; font-style: normal;">
    752         <h1>Archive Pro Bold</h1>
    753         <pre>.your-style {
    754     font-family: 'Archive Pro';
    755     font-weight: bold;
    756     font-style: normal;
    757 }</pre>
    758         <div class="font-container">
    759             <p class="letters">
    760                 abcdefghijklmnopqrstuvwxyz<br>
    761 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    762                 0123456789.:,;()*!?'@#<>$%&^+-=~
    763             </p>
    764             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    765             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    766             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    767             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    768             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    769             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    770             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    771             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    772             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    773             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    774             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    775         </div>
    776     </div>
    777     <div class="demo" style="font-family: 'Archive Pro'; font-weight: bold; font-style: italic;">
    778         <h1>Archive Pro Bold Italic</h1>
    779         <pre>.your-style {
    780     font-family: 'Archive Pro';
    781     font-weight: bold;
    782     font-style: italic;
    783 }</pre>
    784         <div class="font-container">
    785             <p class="letters">
    786                 abcdefghijklmnopqrstuvwxyz<br>
    787 ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
    788                 0123456789.:,;()*!?'@#<>$%&^+-=~
    789             </p>
    790             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
    791             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
    792             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
    793             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
    794             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
    795             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
    796             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
    797             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
    798             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
    799             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
    800             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
    801         </div>
    802     </div>
    803 </div>
    804 </body>
    805 </html>