-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (102 loc) · 5.2 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
<!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="styles.css" rel="stylesheet">
</head>
<body>
<h1>Re-learning HTML by creating a component library</h1>
<p>Welcome to my component library. I'm building this while watching the neog.camp levelZero by Tanay Pratap.
excited to see what I build here :)</p>
<hr />
<h2>@typography</h2>
<h1>This is the biggest heading</h1>
<h2>This is the second biggest heading</h1>
<p>This is a normal text. Will wrap it at the end. Right now it is free flowing</p>
<small>This is a smaller text</small>
<hr />
<h2>@containers</h2>
<h3>fluid container</h3>
<div class="container">This is a fluid container and it will go till the end of the page</div>
<h3>center container</h3>
<div class="container-center">This is a centered container and it will go till specified width</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 bullets</p>
<ul class="list-non-bullets">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<h3>unordered inline list</h3>
<ul class="list-non-bullets">
<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 reversed>
<li>milk</li>
<li>egg</li>
<li>bread</li>
</ol>
<hr />
<h2>@nav</h2>
<nav class="navigation">
<div class="nav-brand">IAmBrand</div>
<ul class="list-non-bullets 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="/">projects</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="images/header.svg" />
<h1 class="hero-heading">Tuhin Roy - <span class="heading-inverted">Full Stack Engineer</span></h1>
</header>
<hr />
<h2>@sections</h2>
<section class="section">
<div class="container container-center">
<h1>white section</h3>
<p>MDN is an open source resource where anyone can add and edit contents. You don't need to be a programmer or know a lot about technologies. There are plenty of things that need to be done, from the simple (proofreading and correcting typos) to the complex (writing API documentation).
Contributing is easy and safe. Even if you make a mistake, it's easily fixed. Even if you don't know exactly how things should look, or your grammar isn't all that good, don't worry about it! We have a team of people whose job it is to make sure that MDN's contents are as good as possible. Someone will be along to make sure your work is tidy and well-written. Share what you know and follow your strengths.</p>
</div>
</section>
<section class="section ow">
<div class="container container-center">
<h1>off-white section</h3>
<p>MDN is an open source resource where anyone can add and edit contents. You don't need to be a programmer or know a lot about technologies. There are plenty of things that need to be done, from the simple (proofreading and correcting typos) to the complex (writing API documentation).
Contributing is easy and safe. Even if you make a mistake, it's easily fixed. Even if you don't know exactly how things should look, or your grammar isn't all that good, don't worry about it! We have a team of people whose job it is to make sure that MDN's contents are as good as possible. Someone will be along to make sure your work is tidy and well-written. Share what you know and follow your strengths.</p>
</div>
</section>
<hr />
<h2>@footer</h2>
<footer class="footer">
<!-- Do not use headers in footer -->
<div class="footer-header">Some text in footer</div>
<ul class="social-links list-non-bullets">
<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 third</a></li>
</ul>
</footer>
<div style="height: 50vh;"></div>
</body>
</html>