typefluid/index.html at master · fewprojects/typefluid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="typefluid/index.css">
    <link rel="stylesheet" href="style.css ">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>typefluid.css | Fluid Typography Library</title>
</head>
<body>
    <header class="header">
        <div class="logo">
            <h6>typefluid.css</h6>
        </div>
        <div class="links">
            <p class="link-github"><a href="https://github.com/fewprojects/typefluid" target="_blank">github</a></p>
            <p class="link-github"><a href="https://theankitnet.com/" target="_blank">author</a></p>
        </div>
    </header>
    <main class="main">
        <section class="section">
            <div class="container">
                   <div class="warning">
                       <p class="italic">Resize the browser window to see how the typography below changes according to window size</p>
                   </div>
            </div>
    </section>
        <section class="section">
            <div class="container">
                    <h6 class="tags"># about</h6>
                    <p>Add <span class="bold">typefluid.css</span> in your website and forget everything about making typography responsive.</p>
            </div>
    </section>
    <section class="section">
        <div class="container">
                <h6 class="tags"># installation</h6>
               <p>Install through npm</p>
                <div class="codebox"><code>npm i typefluid</code></div>
                <br>
                <p>Or</p>
                <br>
                <p>Copy <a href="https://typefluid.netlify.app/typefluid/index.css" target="_blank">these CSS styles </a> into your a sperate CSS file and link it to your html document, learn more <a href="https://github.com/fewprojects/typefluid" target="_blank">here</a></p>

        </div>
</section>
        <section class="section">
            <div class="container">
                    <h6 class="tags"># headings</h6>

                    <h1>Heading One h1</h1>
                    <br>
                    <h2>Heading Two h2</h2>
                    <br>
                    <h3>Heading three h3</h3>
                    <br>
                    <h4>Heading four h4</h4>
                    <br>
                    <h5>Heading five h5</h5>
                    <br>
                    <h6>Heading six h6</h6>
                    <br>
                    <p>This is normal paragraph called Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate enim ab magni sed voluptas ipsa eligendi aut qui aspernatur nisi omnis, commodi voluptates porro illo dolorem ea hic distinctio repellendus.</p>
            </div>
    </section>
    <section class="section">
        <div class="container">
                <h6 class="tags"># text-styles</h6>
                <p>This is <span class="highlight">a highlighted word</span></p>
                <br>
                <p>This is <span class="bold">pretty bold word</span></p>
                <br>
                <p>This is <span class="italic">an italic word</span></p>
                <br>
                <p>This is <span class="underline">underlined word</span></p>
                <br>
                <p>You should <span class="line-cut">cut the word</span> with single line while yo make mistake</p>
                <br>
                <p>This is a <span class="code">code</span> word like </p>
        </div>
    </section>
    </main>
    <footer></footer>
</body>
</html>