css-framework/examples.html at main · emsad87/css-framework · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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">

    <!--  Essential META Tags -->

    <meta property="og:title" content="TINT CSS Framework | TINT Is Not Tailwind">
    <meta property="og:description"
        content="TINT CSS Framework is a utility-first css-framework | TINT CSS Framework | TINT Is Not Tailwind">
    <meta property="og:image" content="https://emsad87.github.io/css-framework/css-framework.png">
    <meta property="og:url" content="https://emsad87.github.io/css-framework/">
    <meta name="twitter:card" content="summary_large_image">

    <meta name="author" content="Emsad Ahmetašević">


    <!--  Non-Essential, But Recommended -->

    <meta property="og:site_name" content="TINT CSS Framework | TINT Is Not Tailwind">
    <meta name="twitter:image:alt" content="TINT CSS Framework | TINT Is Not Tailwind">

    <title>TINT CSS Framework | TINT Is Not Tailwind</title>

    <link rel="stylesheet" href="./css/style.css">
</head>

<body class="c-white fsize-120 overX-hidden">

    <nav class="fixed w-100 z-99 p-15-y no-deco bg-steel shadow-sharp">

        <div class="container-fluid j-center md-j-between a-center">
            <div class="row j-between a-center w-80 sm-text-center">
                <div class="navbar__toggle" id="js-navbar-toggle"></div>
                <a class="col-md-4 col-12 fsize-150" href="#home">TINT.css</a>
                <ul class="col-md-4 col-12 none md-flex md-f-row f-col a-center gap-15 list-none" id="js-menu">
                    <li>
                        <a href="./index.html" class="navbar__link">Home</a>
                    </li>
                    <li>
                        <a href="./docs.html" class="navbar__link">Docs</a>
                    </li>
                    <li>
                        <a href="./examples.html" class="navbar__link">Examples</a>
                    </li>
                    <li>
                        <a href="https://github.com/emsad87/css-framework"
                            class="btn btn-secondary flex center gap-15 m-auto r-5 shadow-sharp">
                            <svg style="fill: currentColor;" width="32px" height="32px" viewBox="0 0 32 32"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z" />
                            </svg>
                            Github
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </nav>

    <div class="full p-35-top-bottom container-fluid center shadow-sharp">
        <div class="hero__bg"><img src="https://source.unsplash.com/collection/53285157" alt=""></div>
        <section class="row w-80 j-between">
            <article class="col-md-7 col-12">
                <h1>TINT CSS Framework</h1>
                <p>A utility-first CSS framework packed with classes like flex, p-4, text-center and w-80 that can be
                    composed to
                    build any design, directly in your markup.</p>
            </article>
            <aside class="col-md-4 flex f-col gap-15 center bg-steel p-25 r-5 shadow-sharp col-12">
                EXAMPLE PAGE COMING SOON
                <a href="https://github.com/emsad87/css-framework"
                    class="flex center m-auto gap-15 btn btn-secondary r-5 shadow-sharp">
                    <svg style="fill: currentColor;" width="32px" height="32px" viewBox="0 0 32 32"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z" />
                    </svg>
                    Github
                </a>
            </aside>
        </section>
    </div>

    <footer class="container-fluid center no-deco bg-night p-15">
        <div class="row j-between w-80">
            <div>
                <p>Build by: <a href="https://emsad87.github.io/">Emsad Ahmetašević</a></p>
            </div>
            <div>
                <p>Copyright 2021 - <a href="https://mintbean.io/">A. Emsad</a></p>
            </div>
            <div>
                <p6>Build for: <a href="https://mintbean.io/">Mintbean</a></p6>
            </div>
        </div>
    </footer>

    <script src="./js/app.js"></script>

</body>

</html>