-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (111 loc) · 4.4 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
<!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 >Welcome to shashi's component library</h1>
<p >I am attending neog.camp and I want to make a library which would make all my projects look good and consistent.</p>
<hr>
<h2>@tygography</h2>
<h1>This is the biggest heading</h1>
<h2>This is the second biggest</h2>
<p>Let me show you the normal text. This is free flowing and will wrap at the end like a paragraph.</p>
<p>This paragraph will have a <strong>bold</strong> text</p>
<small >This is relatively smaller text</small>
<hr>
<h2>@containers</h2>
<h3>fluid container</h3>
<div class="container container-fluid">This is a fluid container and it will go till the end of the page</div>
<h3>center container</h3>
<div class="container container-center">This is a center container and it will go till the end of the page</div>
<hr>
<h2>@links</h2>
<a class="link link-primary" href="/">Primary Link</a>
<a class="link link-secondary" href="/">Secondary Link</a>
<hr>
<h2>@lists</h2>
<h3>unordered list</h3>
<p>This list will not have the bullet</p>
<ul class="list-non-bullet">
<li>Item One</li>
<li>Item 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>
<liclass="list-item-inline">Inline Item Three</li>
</ul>
<h3>ordered list</h3>
<ol reversed>
<li >milk</li>
<li >eggs</li>
<li >break</li>
</ol>
<hr>
<h2>@nav</h2>
<nav class="navigation container">
<div class="nav-brand">iAmBrand</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="/">products</a>
</li>
<li class="list-item-inline">
<a class="link" href="/">about</a>
</li>
</ul>
</nav>
<hr>
<h2>header</h2>
<header class="hero">
<img class="hero-img" src="image/hero.svg" />
<h1 class="hero-heading">adarsh balika the <spam class="heading-inverted">web developer</spam></h1>
</header>
<hr>
<h2>@section</h2>
<section class="section">
<div class="container container-center">
<h1>white section</h1>
<p>A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another. This article explains how to set up a sensible file structure for your website and what issues you should be aware of.</p>
</div>
</section>
<section class="section ow">
<div class="container container-center">
<h1>@off white section</h1>
<p>A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another. This article explains how to set up a sensible file structure for your website and what issues you should be aware of.</p>
</div>
</section>
<hr>
<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="/">
Socialone
</a>
</li>
<li class="list-item-inline">
<a class="link" href="/">
Socialtwo
</a>
</li>
<li class="list-item-inline">
<a class="link" href="/">
Socialthree
</a>
</li>
</ul>
</footer>
<!--<div style="height: 30vh;">
</div> -->
</body>
</html>