-
Notifications
You must be signed in to change notification settings - Fork 0
/
components.html
123 lines (108 loc) · 4.04 KB
/
components.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
<!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">
<link href="/styles.css" rel="stylesheet" />
<title>jay's components library</title>
</head>
<body>
<h1><strong>Components library</strong></h1>
<p>This is a components library created after attending lesson 3 of neoG camp</p>
<p>After creating this library she is going to use the components in her <strong>blog and all projects
created.</strong>, This will ensure that all her <strong>projects</strong> have consistent themeing and
styling
</p>
<hr>
<h2>@typography</h2>
<h1><strong> This is the biggest heading h1</strong></h1>
<h2><strong>This is the second bigger heading h2</strong></h2>
<p>This is what normal text would look like on your website</p>
<small class="sm-text">This text was sponsored by small</small>
<hr>
<h2>@containers</h2>
<h3>@fluid container</h3>
<div class="container">
<p>This is going to be a fluid container. It will extend the full width of the page. With some margin.</p>
</div>
<h3>@centre container</h3>
<div class="container container-centre">
<p> This is goin to be a centre container. It will go till a given width and centre content.</p>
</div>
<hr>
<h2>@links</h2>
<a class=" link primary-link" href="components.html">Primary link</a>
<a class="link secondary-link" href="components.html">Secondary link</a>
<hr>
<h2>@lists</h2>
<h3>unordered list</h3>
<p>remove bullets in CSS</p>
<ul class="unordered-list">
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
<h3>inline lists</h3>
<p>This will be an inline list (i.e, items in a row)</p>
<ul class="inline-list">
<li class="inline-list">item 1</li>
<li class="inline-list">item 2</li>
<li class="inline-list"> item 3</li>
</ul>
<h3>reverse ordered lists</h3>
<ol reversed>
<li>we</li>
<li>go</li>
<li>backwards</li>
</ol>
<hr>
<h2>@nav</h2>
<p>Navigation bar will be designed in this component</p>
<nav class="navigation">
<div class="container">
<div class="brand"></div>
<ul class="nav-options">
<li class="inline-list"><a class="link link-active" href="components.html">home</a></li>
<li class="inline-list"><a class="link" href="components.html">products</a></li>
<li class="inline-list"><a class="link" href="components.html">about</a></li>
</ul>
</div>
</nav>
<hr>
<h2>@header</h2>
<header class="container hero">
<img class="hero-img" src="/images/hero.svg" />
<h1>this is heading h1 inside the header</h1>
</header>
<hr>
<h2>@section</h2>
<p>Used to distinguish different parts of a website</p>
<section class="section">
<div class="container container-centre">
<h3>@normal section</h3>
<h2>heading inside section</h2>
<p>Text def section</p>
<a class="link primary-link" href="components.html">Primary button</a>
</div>
</section>
<section class="secondary-sec">
<div class="container container-centre ">
<h3>@off-white section</h3>
<h2>inside offwhite section</h2>
<p>Text def off-white section</p>
<a class="link primary-link" href="components.html">primary button</a>
</div>
</section>
<hr>
<h2>@footer</h2>
<footer class="footer">
<div class="footer-header">some small heading inside footer</div>
<ul class="social-links">
<li class="inline-list"><a class="link" href="/">socialone</a> </li>
<li class="inline-list"><a class="link" href="/">socialtwo</a> </li>
<li class="inline-list"><a class="link" href="/">socialthree</a> </li>
</ul>
</footer>
</body>
</html>