neogcamp-component-library/index.html at main · neogcamp/neogcamp-component-library · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>adarsh balika component library</title>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <h1> component library </h1>
    <p><strong>Adarsh Balika</strong> is attending neog.camp and is currently completing levelZero one weekend and assignment at a time.</p>
    <p>This is a component library created by her to better design each element.</p>
    <p>After creating this library she is going to use the components in her <strong>portfolio, blog and all projects</strong> created. This will ensure that all her projects have <strong>consistent themeing and styling</strong></p>

    <hr>

    <h2>@typography</h2>

    <h1>The biggest heading h1</h1>
    <h2>The second biggest heading h2</h2>
    <p>This is normal text. Long running text would look like this on your website. This will auto fold based on the width</p>
    <p class="text-sm">This is relatively smaller text</p>

    <hr>
    <h2>@containers </h2>

    <h3>@fluid container</h3>
    <div class="container-fluid">
        This is going to be a fluid container. It will go full width of page. With some margin.
    </div>

    <h3>@center container</h3>
    <div class="container">
        This is going to be a center container. It will go till a given width and center content.
    </div>

    <hr>
    <h2>@links</h2>

    <a  class="primary-link" href="/"> Primary Link</a>
    <a class="secondary-link" href="/"> Secondary Link</a>

    <hr>

    <h2>@lists</h2>

    <h3>unordered lists</h3>

    <p>We don't want to show bullets in the unordered list. We'll remove that with CSS.</p>

    <ul class="unordered">
        <li>item one</li>
        <li>item two</li>
        <li>item three</li>
    </ul>

    <h3>inline lists</h3>

    <p>Instead of going in a new row, we will create a list which will take columns.</p>

    <ul class="unordered list-inline">
        <li>item one</li>
        <li>item two</li>
        <li>item three</li>
    </ul>

    <h3>reverse ordered lists</h3>
    <p>Counting of will go reverse for this list </p>
    <ol reversed>
        <li>something</li>
        <li>something else</li>
        <li>something elser</li>
    </ol>


    <hr>


    <h2>@nav</h2>
    <p>Navigation is used on the top of the page and used to get to different pages</p>
    <nav class="navigation">
        <div class="container-fluid">
        <div class="brand">theBrandName</div>
        <ul>
            <li>
                <a href="/" class="active">home</a>

            </li>
            <li>
                <a href="/">products</a>

            </li>
            <li>
                <a href="/">about</a>
            </li>
        </ul>
        </div>

    </nav>
    <hr>


    <h2> @header </h2>

    <header class="container hero">
        <img src="header-image.svg"/>
        <h1> this is heading h1 inside header</h1>
    </header>

    <hr />

    <h2> @section</h2>

    <p> A section is used to separate parts of pages. In marketing websites you would have seen a header followed by sections of features, team, pricing, contact info etc.</p>
    <h3>@normal section</h3>
    <section class="section">
        <h2> heading inside section</h2>
        <p>Text defining this section and many more things</p>
        <a href="" class="primary-link"> Primary Button</a>
    </section>

    <h3>@an off white section</h3>
    <section class="section ow">
        <h2> inside off white section</h2>
        <p>Text defining this section and many more things</p>
        <a href="/" class="primary-link"> Primary Button</a>
    </section>

    <hr>


    <h2>@footer</h2>
    <footer class="footer container-fluid">
        <div class="container">
            <div class="heading">header inside footer</div>
            <ul class="unordered list-inline">
                <li>socialone</li>
                <li>socialtwo</li>
                <li>socialthree</li>
            </ul>
        </div>
    </footer>
</body>
</html>