-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (128 loc) · 5.5 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="bg-light">
<nav class="nav-top fixed-top bg-dark text-light">
<div class="nav-brand">
<div class="nav-item">
FOX_CSS
</div>
</div>
<div class="nav-menu">
<div class="nav-left">
<a href="index.html" class="nav-item">Home</a>
<div class="dropdown-hover">
<div class="nav-item dropdown-toggle">Elements</div>
<div
class="dropdown-menu bg-dark"
aria-labelledby="dropdownMenuButton"
>
<a class="nav-item" href="button.html">Buttons</a>
<a class="nav-item" href="alert.html">Alerts</a>
</div>
</div>
<div class="dropdown-hover">
<div class="nav-item dropdown-toggle">Components</div>
<div
class="dropdown-menu bg-dark"
aria-labelledby="dropdownMenuButton"
>
<a class="nav-item" href="form.html">Forms</a>
<a class="nav-item" href="card.html">Cards</a>
<a class="nav-item" href="nav.html">Nav</a>
</div>
</div>
</div>
<div class="nav-right">
<div class="nav-item">
<button class="btn">Button</button>
</div>
</div>
</div>
</nav>
<div class="flexwrap-col mfixed-top padded">
<article class="intro">
<div class="intro-title">FOX_CSS</div>
<div class="intro-subtitle">By Cameron Varley</div>
</article>
<article>
<h2>About</h2>
<p>
Welcome to FOX_CSS. This is a
<strong>work in progress</strong> CSS framework that takes
inspiration from Bootstrap, Bulma, and UI-Kit. I will be
updating this very frequently so make sure to always check
back for changes. You can view the different elements in the
framework that are currently being worked on by using the
<strong>navigation menu</strong> at the top of the page.
</p>
<h2>Info and Progress</h2>
<p>
All pages will eventually have code examples similar to how
the <strong>Buttons</strong> pages has.
</p>
</article>
<div class="flexwrap-col">
<div class="alert-info alert-fancy">
<div class="alert-type">
<di class="circle">?</di>
</div>
These are estimates of what is complete and needs to be done
</div>
</div>
<div class="flexwrap-nowrap">
<div class="card glow-red" style="width: 31vw;">
<div class="card-header bg-red">
<div class="card-header-title text-light">
To-Do
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Tables</li>
<li class="list-group-item">Modals</li>
<li class="list-group-item">Responsiveness</li>
</ul>
</div>
<div class="card glow-yellow" style="width: 31vw;">
<div class="card-header bg-yellow">
<div class="card-header-title">
WIP
</div>
</div>
<ul class="list-group">
<li class="list-group-item">
Forms
<div class="badge-pill">50%</div>
</li>
<li class="list-group-item">
Navigation
<div class="badge-pill">10%</div>
</li>
<li class="list-group-item">Style Modifiers</li>
<li class="list-group-item">
Javascript
<div class="badge-pill">~5%</div>
</li>
<li class="list-group-item">Cards</li>
</ul>
</div>
<div class="card glow-green" style="width: 31vw;">
<div class="card-header bg-green">
<div class="card-header-title">
Done
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Buttons</li>
<li class="list-group-item">Dropdowns</li>
<li class="list-group-item">Alerts</li>
</ul>
</div>
</div>
</div>
<script src="js/dropdown.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
</body>
</html>