-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (124 loc) · 5.06 KB
/
index.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
150
151
<!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">
<title> component library.</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Rishav's component library.</h1>
<p>I am attending neo-g-camp and I want to make a library which would
make all my projects look good and consistent.
</p>
<hr>
<h2>@typography</h2>
<h1>This is the biggest heading.</h1>
<h2>This is the second biggest heading.</h2>
<p>Let we show you the normal text. This is free flowing and will wrap at the end
line of a paragraph.
</p>
<p>This paragraph wil have a <strong> bold </strong>text.</p>
<small>This is relatively smallest text.</small>
<hr>
<h2>@containers </h2>
<h3>fluid container</h3>
<div class="container 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 container-center">This is going to be a centered container. It will go till the specified
width.</div>
<hr>
<h2>@links</h2>
<a class="primary-link link" href="/">Primary Link</a>
<a class="secondary-link link" href="?">Secondary Link</a>
<hr>
<h2>@lists</h2>
<h3>unordered lists</h3>
<p>This list will not have the bullet.</p>
<ul class="list-non-bullet">
<li>Item One</li>
<li>Itme Two</li>
<li>Item Three</li>
</ul>
<h3>unordered inline list</h3>
<ul class="list-non-bullet">
<li class="list-item-inline">Inline item one</li>
<li class="list-item-inline">Inline item two</li>
<li class="list-item-inline">Inline item three</li>
</ul>
<h3>reverse ordered list</h3>
<ol>
<li>milk</li>
<li>egg</li>
<li>bread</li>
</ol>
<hr>
<h2>@nav</h2>
<nav class="navigation container">
<div class="nav-brand">iAmBrand</div>
<div>
<ul class="list-non-bullet nav-pills">
<li class="list-item-inline">
<a class="link link-active" href="/">home</a>
</li>
<li class="list-item-inline">
<a class="link" href="?">product</a>
</li>
<li class="list-item-inline">
<a class="link" href="/">about</a>
</li>
</ul>
</div>
</nav>
<hr>
<h2>@header</h2>
<header class=" hero">
<img class="hero-img" src="image/hero.svg">
<h2 class="hero-heading">Adarsh Balak <span class="heading-inverted"><strong>The web developer</strong></span>
</h2>
</header>
<hr>
<h2>@section</h2>
<section class="section ">
<div class=" container-center">
<h1>@white section</h3>
<p><h4>This will have white background.</h4>
A lecture (from the French lecture, meaning reading) is an oral presentation intended to present
information or teach people about a particular subject, for example by a university or college
teacher. Lectures are used to convey critical information, history, background, theories, and
equations. A politician's speech, a minister's sermon, or even a business person’s sales
presentation may be similar in form to a lecture. Usually the lecturer will stand at the front of
the room and recite information relevant to the lecture's.
</p>
</div>
</section>
<section class="section ow">
<div class=" container-center">
<h1>@off white section</h3>
<p><h4>This will have gray background.</h4>
A lecture (from the French lecture, meaning reading) is an oral presentation intended to present
information or teach people about a particular subject, for example by a university or college
teacher. Lectures are used to convey critical information, history, background, theories, and
equations. A politician's speech, a minister's sermon, or even a business person’s sales
presentation may be similar in form to a lecture. Usually the lecturer will stand at the front of
the room and recite information relevant to the lecture's.
</p>
</div>
</section>
<hr>
<h2>@footer</h2>
<footer class="footer">
<div class="footer-header">some small heading inside footer.</div>
<ul class="social-links list-non-bullet ">
<li class="list-item-inline">
<a class="link" href="/">social one </a></li>
<li class="list-item-inline">
<a class="link" href="?">social two</a></li>
<li class="list-item-inline">
<a class="link" href="/">social three</a></li>
</ul>
</footer>
</body>
</html>