bootsteam-theme 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/.gitattributes +66 -0
  2. package/README.md +5 -0
  3. package/dist/bootsteam-theme.css +12319 -0
  4. package/dist/bootsteam-theme.min.css +5 -0
  5. package/docs/alerts.html +118 -0
  6. package/docs/badges.html +140 -0
  7. package/docs/buttons.html +194 -0
  8. package/docs/carousel.html +109 -0
  9. package/docs/collapse.html +105 -0
  10. package/docs/containers.html +307 -0
  11. package/docs/css/bootsteam-theme.min.css +5 -0
  12. package/docs/dialogs.html +154 -0
  13. package/docs/forms.html +335 -0
  14. package/docs/index.html +108 -0
  15. package/docs/navs.html +250 -0
  16. package/docs/offcanvas.html +92 -0
  17. package/docs/plugins.html +99 -0
  18. package/docs/scripts/scripts.js +70 -0
  19. package/docs/scripts/themeHandler.js +57 -0
  20. package/docs/spinners.html +145 -0
  21. package/docs/tables.html +613 -0
  22. package/docs/themes.html +166 -0
  23. package/docs/toasts.html +119 -0
  24. package/docs/typography.html +176 -0
  25. package/docs-templates/alerts.html +76 -0
  26. package/docs-templates/badges.html +98 -0
  27. package/docs-templates/buttons.html +152 -0
  28. package/docs-templates/carousel.html +67 -0
  29. package/docs-templates/collapse.html +63 -0
  30. package/docs-templates/containers.html +265 -0
  31. package/docs-templates/dialogs.html +112 -0
  32. package/docs-templates/forms.html +293 -0
  33. package/docs-templates/index.html +66 -0
  34. package/docs-templates/navs.html +208 -0
  35. package/docs-templates/offcanvas.html +50 -0
  36. package/docs-templates/partials/_footer.html +4 -0
  37. package/docs-templates/partials/_head.html +7 -0
  38. package/docs-templates/partials/_nav.html +29 -0
  39. package/docs-templates/partials/_scripts.html +5 -0
  40. package/docs-templates/plugins.html +57 -0
  41. package/docs-templates/spinners.html +103 -0
  42. package/docs-templates/tables.html +571 -0
  43. package/docs-templates/themes.html +68 -0
  44. package/docs-templates/toasts.html +77 -0
  45. package/docs-templates/typography.html +134 -0
  46. package/gulpfile.js +51 -0
  47. package/package.json +17 -0
  48. package/src/_alerts.scss +65 -0
  49. package/src/_darkThemeOverrides.scss +74 -0
  50. package/src/_fieldset.scss +27 -0
  51. package/src/_forms.scss +134 -0
  52. package/src/_tables.scss +77 -0
  53. package/src/_twr-variables-dark.scss +23 -0
  54. package/src/_twr-variables.scss +71 -0
  55. package/src/bootsteam.scss +25 -0
  56. package/src/plugins/_allPlugins.scss +2 -0
  57. package/src/plugins/_slimSelect.scss +106 -0
  58. package/src/plugins/_summernote.scss +45 -0
package/docs/collapse.html ADDED
@@ -0,0 +1,105 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <title>Collapse | Tower Bootstrap Theme</title>
6
+ <meta charset="utf-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="description" content="Demo of custom Bootstrap theme">
9
+ <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
10
+ <link href="css/bootsteam-theme.min.css" rel="stylesheet" />
11
+ <script src="scripts/themeHandler.js" type="text/javascript"></script>
12
+ </head>
13
+
14
+ <body>
15
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
16
+ <div class="container">
17
+ <a href="index.html" class="navbar-brand">Bootsteam Theme</a>
18
+
19
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
20
+ <span class="navbar-toggler-icon"></span>
21
+ </button>
22
+
23
+ <div class="collapse navbar-collapse" id="navbar-collapse-area">
24
+ <ul class="navbar-nav ms-auto">
25
+ <li class="nav-item dropdown">
26
+ <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
27
+ <span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
28
+ </button>
29
+ <div class="dropdown-menu dropdown-menu-end">
30
+ <button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
31
+ <button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
32
+ <button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
33
+ </div>
34
+ </li>
35
+ <li class="nav-item">
36
+ <a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
37
+ GitHub
38
+ </a>
39
+ </li>
40
+ </ul>
41
+ </div>
42
+ </div>
43
+ </nav>
44
+
45
+ <main class="container mt-5 pt-2">
46
+ <ol class="breadcrumb">
47
+ <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
48
+ <li class="breadcrumb-item active">Collapse</li>
49
+ </ol>
50
+
51
+
52
+ <h2 class="display-5">Collapse</h2>
53
+ <hr />
54
+ <div class="accordion" id="accordionExample">
55
+ <div class="accordion-item">
56
+ <h2 class="accordion-header" id="headingOne">
57
+ <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
58
+ Accordion Item #1
59
+ </button>
60
+ </h2>
61
+ <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
62
+ <div class="accordion-body">
63
+ <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <div class="accordion-item">
68
+ <h2 class="accordion-header" id="headingTwo">
69
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
70
+ Accordion Item #2
71
+ </button>
72
+ </h2>
73
+ <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
74
+ <div class="accordion-body">
75
+ <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <div class="accordion-item">
80
+ <h2 class="accordion-header" id="headingThree">
81
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
82
+ Accordion Item #3
83
+ </button>
84
+ </h2>
85
+ <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
86
+ <div class="accordion-body">
87
+ <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </main>
93
+
94
+ <footer class="container">
95
+ <hr />
96
+ <p>TowerSoft</p>
97
+ </footer>
98
+
99
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
100
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
101
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
102
+ <script src="scripts/scripts.js"></script>
103
+ </body>
104
+
105
+ </html>
package/docs/containers.html ADDED
@@ -0,0 +1,307 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <title>Containers | Tower Bootstrap Theme</title>
6
+ <meta charset="utf-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="description" content="Demo of custom Bootstrap theme">
9
+ <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
10
+ <link href="css/bootsteam-theme.min.css" rel="stylesheet" />
11
+ <script src="scripts/themeHandler.js" type="text/javascript"></script>
12
+ </head>
13
+
14
+ <body>
15
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
16
+ <div class="container">
17
+ <a href="index.html" class="navbar-brand">Bootsteam Theme</a>
18
+
19
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
20
+ <span class="navbar-toggler-icon"></span>
21
+ </button>
22
+
23
+ <div class="collapse navbar-collapse" id="navbar-collapse-area">
24
+ <ul class="navbar-nav ms-auto">
25
+ <li class="nav-item dropdown">
26
+ <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
27
+ <span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
28
+ </button>
29
+ <div class="dropdown-menu dropdown-menu-end">
30
+ <button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
31
+ <button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
32
+ <button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
33
+ </div>
34
+ </li>
35
+ <li class="nav-item">
36
+ <a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
37
+ GitHub
38
+ </a>
39
+ </li>
40
+ </ul>
41
+ </div>
42
+ </div>
43
+ </nav>
44
+
45
+ <main class="container mt-5 pt-2">
46
+ <ol class="breadcrumb">
47
+ <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
48
+ <li class="breadcrumb-item active">Containers</li>
49
+ </ol>
50
+
51
+ <h2 class="display-4">Containers</h2>
52
+ <hr />
53
+
54
+ <h4>List Groups</h4>
55
+ <div class="row">
56
+ <div class="col-12 col-sm-4">
57
+ <ul class="list-group">
58
+ <li class="list-group-item d-flex justify-content-between align-items-center">
59
+ Cras justo odio
60
+ <span class="badge rounded-pill text-bg-primary">14</span>
61
+ </li>
62
+ <li class="list-group-item d-flex justify-content-between align-items-center">
63
+ Dapibus ac facilisis in
64
+ <span class="badge rounded-pill text-bg-primary">2</span>
65
+ </li>
66
+ <li class="list-group-item d-flex justify-content-between align-items-center">
67
+ Morbi leo risus
68
+ <span class="badge text-bg-primary">1</span>
69
+ </li>
70
+ </ul>
71
+ </div>
72
+ <div class="col-12 col-sm-4">
73
+ <div class="list-group">
74
+ <a href="#" class="list-group-item list-group-item-action active">
75
+ Cras justo odio
76
+ </a>
77
+ <a href="#" class="list-group-item list-group-item-action">
78
+ Dapibus ac facilisis in
79
+ </a>
80
+ <a href="#" class="list-group-item list-group-item-action">
81
+ Dapibus ac facilisis in 2
82
+ </a>
83
+ <a href="#" class="list-group-item list-group-item-action disabled">
84
+ Morbi leo risus
85
+ </a>
86
+ </div>
87
+ </div>
88
+ <div class="col-12 col-sm-4">
89
+ <div class="list-group">
90
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
91
+ <div class="d-flex w-100 justify-content-between">
92
+ <h5 class="mb-1">List group item heading</h5>
93
+ <small>3 days ago</small>
94
+ </div>
95
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
96
+ <small>Donec id elit non mi porta.</small>
97
+ </a>
98
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
99
+ <div class="d-flex w-100 justify-content-between">
100
+ <h5 class="mb-1">List group item heading</h5>
101
+ <small class="text-muted">3 days ago</small>
102
+ </div>
103
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
104
+ <small class="text-muted">Donec id elit non mi porta.</small>
105
+ </a>
106
+ </div>
107
+ </div>
108
+ <div class="col-12 col-sm-4">
109
+ <h4>Figures</h4>
110
+ <figure class="figure">
111
+ <img class="figure-img img-fluid rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
112
+ <figcaption class="figure-caption">A caption for the above image.</figcaption>
113
+ </figure>
114
+ </div>
115
+ </div>
116
+
117
+ <h4>Cards</h4>
118
+ <div class="row">
119
+ <div class="col-12 col-sm-4">
120
+ <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
121
+ <div class="card-header">Header</div>
122
+ <div class="card-body">
123
+ <h4 class="card-title">Primary card title</h4>
124
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
125
+ </div>
126
+ </div>
127
+ <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
128
+ <div class="card-header">Header</div>
129
+ <div class="card-body">
130
+ <h4 class="card-title">Secondary card title</h4>
131
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
132
+ </div>
133
+ </div>
134
+ <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
135
+ <div class="card-header">Header</div>
136
+ <div class="card-body">
137
+ <h4 class="card-title">Success card title</h4>
138
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
139
+ </div>
140
+ </div>
141
+ <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
142
+ <div class="card-header">Header</div>
143
+ <div class="card-body">
144
+ <h4 class="card-title">Danger card title</h4>
145
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
146
+ </div>
147
+ </div>
148
+ <div class="card text-dark bg-warning mb-3" style="max-width: 20rem;">
149
+ <div class="card-header">Header</div>
150
+ <div class="card-body">
151
+ <h4 class="card-title">Warning card title</h4>
152
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
153
+ </div>
154
+ </div>
155
+ <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
156
+ <div class="card-header">Header</div>
157
+ <div class="card-body">
158
+ <h4 class="card-title">Info card title</h4>
159
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
160
+ </div>
161
+ </div>
162
+ <div class="card bg-light text-dark mb-3" style="max-width: 20rem;">
163
+ <div class="card-header">Header</div>
164
+ <div class="card-body">
165
+ <h4 class="card-title">Light card title</h4>
166
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
167
+ </div>
168
+ </div>
169
+ <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
170
+ <div class="card-header">Header</div>
171
+ <div class="card-body">
172
+ <h4 class="card-title">Dark card title</h4>
173
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div class="col-12 col-sm-4">
178
+ <div class="card border-primary mb-3" style="max-width: 20rem;">
179
+ <div class="card-header">Header</div>
180
+ <div class="card-body text-primary">
181
+ <h4 class="card-title">Primary card title</h4>
182
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
183
+ </div>
184
+ </div>
185
+ <div class="card border-secondary mb-3" style="max-width: 20rem;">
186
+ <div class="card-header">Header</div>
187
+ <div class="card-body text-secondary">
188
+ <h4 class="card-title">Secondary card title</h4>
189
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
190
+ </div>
191
+ </div>
192
+ <div class="card border-success mb-3" style="max-width: 20rem;">
193
+ <div class="card-header">Header</div>
194
+ <div class="card-body text-success">
195
+ <h4 class="card-title">Success card title</h4>
196
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
197
+ </div>
198
+ </div>
199
+ <div class="card border-danger mb-3" style="max-width: 20rem;">
200
+ <div class="card-header">Header</div>
201
+ <div class="card-body text-danger">
202
+ <h4 class="card-title">Danger card title</h4>
203
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
204
+ </div>
205
+ </div>
206
+ <div class="card border-warning mb-3" style="max-width: 20rem;">
207
+ <div class="card-header">Header</div>
208
+ <div class="card-body text-warning">
209
+ <h4 class="card-title">Warning card title</h4>
210
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
211
+ </div>
212
+ </div>
213
+ <div class="card border-info mb-3" style="max-width: 20rem;">
214
+ <div class="card-header">Header</div>
215
+ <div class="card-body text-info">
216
+ <h4 class="card-title">Info card title</h4>
217
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
218
+ </div>
219
+ </div>
220
+ <div class="card border-light mb-3" style="max-width: 20rem;">
221
+ <div class="card-header">Header</div>
222
+ <div class="card-body">
223
+ <h4 class="card-title">Light card title</h4>
224
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
225
+ </div>
226
+ </div>
227
+ <div class="card border-dark mb-3" style="max-width: 20rem;">
228
+ <div class="card-header">Header</div>
229
+ <div class="card-body">
230
+ <h4 class="card-title">Dark card title</h4>
231
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ <div class="col-12 col-sm-4">
236
+ <div class="card mb-3">
237
+ <h3 class="card-header">Card header</h3>
238
+ <div class="card-body">
239
+ <h5 class="card-title">Special title treatment</h5>
240
+ <h6 class="card-subtitle text-muted">Support card subtitle</h6>
241
+ </div>
242
+ <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
243
+ <div class="card-body">
244
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
245
+ </div>
246
+ <ul class="list-group list-group-flush">
247
+ <li class="list-group-item">Cras justo odio</li>
248
+ <li class="list-group-item">Dapibus ac facilisis in</li>
249
+ <li class="list-group-item">Vestibulum at eros</li>
250
+ </ul>
251
+ <div class="card-body">
252
+ <a href="#" class="card-link">Card link</a>
253
+ <a href="#" class="card-link">Another link</a>
254
+ </div>
255
+ <div class="card-footer text-muted">
256
+ 2 days ago
257
+ </div>
258
+ </div>
259
+ <div class="card">
260
+ <div class="card-body">
261
+ <h4 class="card-title">Card title</h4>
262
+ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
263
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
264
+ <a href="#" class="card-link">Card link</a>
265
+ <a href="#" class="card-link">Another link</a>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ <div class="card text-center">
271
+ <div class="card-header">
272
+ <ul class="nav nav-tabs card-header-tabs">
273
+ <li class="nav-item">
274
+ <a class="nav-link active" aria-current="true" href="#">Active</a>
275
+ </li>
276
+ <li class="nav-item">
277
+ <a class="nav-link" href="#">Link</a>
278
+ </li>
279
+ <li class="nav-item">
280
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
281
+ </li>
282
+ </ul>
283
+ </div>
284
+ <div class="card-body">
285
+ <h5 class="card-title">Special title treatment</h5>
286
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
287
+ <a href="#" class="btn btn-primary">Go somewhere</a>
288
+ </div>
289
+ </div>
290
+
291
+ <br />
292
+ <br />
293
+ <br />
294
+ </main>
295
+
296
+ <footer class="container">
297
+ <hr />
298
+ <p>TowerSoft</p>
299
+ </footer>
300
+
301
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
302
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
303
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
304
+ <script src="scripts/scripts.js"></script>
305
+ </body>
306
+
307
+ </html>