-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (139 loc) · 5.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>CSS Toolkit</title>
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- endbuild -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">CSS Toolkit</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="components.html">Components</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples.html">Examples</a>
</li>
</ul>
<form id="search-form" class="form-inline my-2 my-lg-0 dropdown">
<input class="form-control mr-sm-2 dropdown-toggle" id="search" type="text" aria-label="Search" placeholder="Search" autocomplete="off" onkeyup="filter()" />
<div class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenuButton" id="search-dropdown">
<a class="dropdown-item" href="components/borderradius.html" onclick="travel(this)">Border Radius <span class="badge badge-secondary">Component</span></a>
<a class="dropdown-item" href="examples/borderradius.html" onclick="travel(this)">Border Radius <span class="badge badge-secondary">Example</span></a>
<a class="dropdown-item" href="components/boxshadow.html" onclick="travel(this)">Box Shadow <span class="badge badge-secondary">Component</span></a>
<a class="dropdown-item" href="examples/boxshadow.html" onclick="travel(this)">Box Shadow <span class="badge badge-secondary">Example</span></a>
<p id="no-results" class="dropdown-item mb-0">No Results</p>
</div>
</form>
</div>
</div>
</nav>
<main>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-8">
<div class="row">
<div class="col-12 margin-bottom">
<h1 class="display-3">Welcome</h1>
<p class="lead">
This website was designed to help make styling CSS components a breeze. To get started check out the components or examples. If there's a component you'd like
added, you can submit a request below.
</p>
</div>
<div class="col-12">
<a href="components.html" class="btn btn-primary align-bottom mr-2">Components</a>
<a href="examples.html" class="btn btn-primary">Examples</a>
<hr />
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<div class="card-header">
New Feature
</div>
<div class="card-body">
<h5 class="card-title">Border Radius</h5>
<p class="card-text">Create rounded corner of varying shapes and sizes</p>
<a href="components/borderradius.html" class="btn btn-primary" id="feature-button">Check It Out</a>
</div>
<div class="card-footer text-muted relative-date" id="feature-date">
04/17/2020
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<h4 class="display-4">Request Component</h4>
<form>
<div class="form-group">
<label for="inputName">Component Name</label>
<input class="form-control" type="text" id="inputName" autocomplete="off" required="true" />
</div>
<div class="form-group">
<label for="inputDescription">Component Description</label>
<textarea class="form-control" id="inputDescription" rows="5" autocomplete="off" required="true"></textarea>
</div>
<div class="form-group">
<label for="inputEmail">Email (optional)</label>
<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" />
<small id="emailHelp" class="form-text text-muted">We may contact you for further feedback. We'll never share your email.</small>
</div>
<button type="submit" class="btn btn-outline-primary">Submit</button>
</form>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-sm-8">
<nav aria-label="breadcrumb justify-content-center">
<ol class="breadcrumb margin-fix">
<li class="breadcrumb-item active">Home</li>
</ol>
</nav>
</div>
<div class="col-12 col-sm-4">
<p class="margin-fix text-center text-sm-right">© Jacob Seiler 2020</p>
</div>
</div>
</div>
</footer>
</body>
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</html>