-
Notifications
You must be signed in to change notification settings - Fork 0
/
component_library.html
149 lines (113 loc) · 3.62 KB
/
component_library.html
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
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virendra Component Library</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Component Library</h1>
<p><strong>Virendra Wadher</strong> is attending norg.camp and is currently completing levelZero.</p>
<p>This is component library for better design elements.</p>
<p>After creating this it is used for <strong>portfolio, blogs, projects</strong> created this will ensure that all themeing and styling are consitent.</p>
<hr>
<h2>@typography</h2>
<h1>The biggest heading</h1>
<h2>The second biggest heading</h2>
<p>This is normal text used throughout the website.</p>
<small>this is relatively smaller text.</small>
<hr>
<h2>@container</h2>
<h3>@fluid container</h3>
<div class="container-fluid">
This going to be a fluid container. It will go full width of the page. With some margin.
</div>
<h3>@center container</h3>
<div class="container">
This is going to be center container. It will go till the width and center container.
</div>
<hr>
<h2>@ links</h2>
<a href="/" class="primary-link">Primary link</a>
<a href="/" class="secondary-link">Secondary link</a>
<hr>
<h2>@ lists</h2>
<h3>unodered lists</h3>
<p>We don't want to show bullets in unordered list</p>
<ul class="unordered">
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
<h3>inline list</h3>
<p>Instead of new rows, it will at new columns </p>
<ul class="list-inline">
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
<h3>reversed order list</h3>
<p>Counting will go reverse</p>
<ol reversed>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>
<hr>
<h2>@nav</h2>
<p>Navigation is used on 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="">Projects</a>
</li>
<li>
<a href="">Blogs</a>
</li>
<li>
<a href="">Contact me</a>
</li>
</ul>
</div>
</nav>
<hr>
<h2>@header</h2>
<header class="hero">
<img src="images/viren.png" alt="Web Developer">
<h1>I'm Developer</h1>
</header>
<hr>
<h2>@section</h2>
<p>A section is used to spearate parts of pages.</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>@off white section</h3>
<section class="section ow">
<h2>Heading inside section</h2>
<p>Text defining this section and many more things</p>
<a href="/" class="secondary-link">Primary button</a>
</section>
<hr>
<h2>@footer</h2>
<footer class="footer">
<div>
<div class="heading">header inside footer.</div>
<ul>
<li>socialone</li>
<li>socialtwo</li>
<li>socialthree</li>
</ul>
</div>
</footer>
</body>
</html>