Glin-Framework/index.html at master · Kidpaddleetcie/Glin-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
<!DOCTYPE html>

<head>
    <title>FrameWork Glin</title>
    <link rel="stylesheet" href="Glin/css/Glin.css">

</head>

<body>
    <h1>Glin-Framework</h1>


    <h2 class="titre centrer">Les effets sur le texte</h2>
    <section class="gridline-9">
        <a class="texte-feu">Texte en feu</a>
        <span class="rien">Rien n'est affiché(idéal pour le JS)</span>
        <span class="separe">Separation avec le reste du texte</span>
        <span class="spoiler">UN SPOILER !!!</span>
        <span class="text-profond">Un texte profond !</span>
        <span class="etire_texte">Un texte à étirer !</span>
        <div class="titre">Un titre</div>
        <div class="tremblote"><span>Un texte qui tremble</span></div>
        <span class="entourer">Quand un texte coloré est illisible sur un fond trop claire MAIS que la couleur est très importante, il vaut mieux l'entourer !</span>
    </section>
    <section class="gridline-1 boite">
        <ol class="rainbow">
            <script>
                let generate = " ";
                for (let ii = 0; ii < 12; ii++) {
                    generate += '<li class="turn-' + ii + '"><span class="sh-' + ii + '">Shake-' + ii + '</span></li>';
                }
                document.write(generate);
            </script>
        </ol>
    </section>

    <h2 class="titre centrer">Les cadres</h2>

    <section class="gridline-4">
        <div class="encadrer">Un encadrer</div>
        <div class="present">Une note</div>
        <div class="cadre_rond"><span>mot</span></div>
        <div class="button">Un bouton</div>
    </section>
    <section class="gridline-2">
        <div class="bannar"><span>Bannière (BETA)</span></div>
        <div class="fenetre_texte"><span>Fenêtre (BETA)</span></div>
    </section>

    <h2 class="titre centrer">Les scrollboxs</h2>

    <section class="gridline-10">
        <script>
            let generate_ = " ";
            for (let ii = 1; ii < 11; ii++) {
                generate_ += '<div class="scrollbox-' + ii + '"><div> Une scrollbox de ' + ii * 5 + ' vh d\'hauteur</div></div>';
            }
            document.write(generate_);
        </script>
    </section>
    <h2 class="titre centrer">Les entités animées</h2>

    <section class="gridline-3">
        <div class="spinner"></div>
        <div class="loading"></div>
        <div class="next"></div>
    </section>
</body>