-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
127 lines (118 loc) · 3.48 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BCMC | CSS</title>
<link rel="shortcut icon" href="https://res.bcmc.ga/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="dist/bcmc.min.css">
</head>
<body>
<header class="bg-green text-white">
<div class="container">
<div class="site-head">
<h1 class="site-title"><img class="toggler" src="https://res.bcmc.ga/bcmc-white-logo.png"
alt="Box Critters Modding Community" data-toggle-target="#bcmc-menu" data-toggle-class="hide">
<a href="/">CSS</a>
</h1>
<a href="#" class="btn hide-desktop toggler" data-toggle-self="open" data-toggle-target="#site-menu"
data-toggle-class="hide-mobile">
<div class="burger"></div>
</a>
</div>
<nav id="bcmc-menu" class="hide nav-dropdown"></nav>
<nav id="site-menu" class="hide-mobile nav-header">
<ul>
<li class="active"><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Flex</h2>
<span class="f-row">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</span>
<span class="fi-column">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</span>
<span class="fi-column">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</span>
<h2>Grid</h2>
<div class="row">
<div class="col-1-3 bg-purple">
<p>I am one column wide</p>
</div>
<div class="col-2-3 bg-red">
<p>I take up two columns</p>
</div>
</div>
<div class="row">
<div class="col-2-3 bg-orange">
Hello World
</div>
<div class="col-1-3 bg-blue">
<p>Hmm Cheeses</p>
</div>
</div>
<h2>Buttons</h2>
<a href="#" class="btn bg-green">Hello</a>
<a href="#" class="btn bg-warning">World</a>
<p>Here is some text with a <a class="btn bg-primary">Button</a> planted in the middle. This is a test to
see
how paragraphs and buttons react to them meeting in the same place. The text should make space around
the
button and the button should not overlay the text in any way. Here is anouther sentence to show that the
text moving out of the way is just
something that happens when the button is around.</p>
<h2>Nav Test</h2>
<nav class="nav bg-blue">
<ul>
<li class="active"><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
</nav>
<nav class="nav-vertical bg-blue">
<ul>
<li class="active"><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
</nav>
<h2>Toggle Test</h2>
<a href="#" class="btn bg-primary toggler" data-toggle-target="#toggleParagraph1" data-toggle-class="hide"
data-toggle-self="TEST">Toggle Button</a>
<p id="toggleParagraph1" class="hide">I am some text</p>
</div>
</main>
<footer class="footer-lg bg-green">
<div class="container">
<script src="https://res.bcmc.ga/footer.js"></script>
</div>
</footer>
<script src="dist/bcmc.min.js"></script>
</body>
</html>