darkmatter-theme 1.0.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 (44) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +151 -0
  3. data/README.md +52 -0
  4. data/_includes/foot.html +0 -0
  5. data/_includes/footer.html +54 -0
  6. data/_includes/head.html +48 -0
  7. data/_includes/header.html +62 -0
  8. data/_layouts/cover.html +20 -0
  9. data/_layouts/default.html +34 -0
  10. data/_layouts/page.html +5 -0
  11. data/_layouts/post.html +5 -0
  12. data/_layouts/scroll.html +39 -0
  13. data/_layouts/slide.html +230 -0
  14. data/_pages/about/index.html +99 -0
  15. data/_pages/album/index.html +185 -0
  16. data/_pages/blog/index.html +151 -0
  17. data/_pages/cover/index.html +15 -0
  18. data/_pages/frontpage/index.html +216 -0
  19. data/_pages/fullwidth/index.html +38 -0
  20. data/_pages/landing/index.html +83 -0
  21. data/_pages/portfolio-1/index.html +119 -0
  22. data/_pages/portfolio-2/index.html +121 -0
  23. data/_pages/portfolio-3/index.html +121 -0
  24. data/_pages/portfolio-item/index.html +73 -0
  25. data/_pages/post/index.html +196 -0
  26. data/_pages/pricing/index.html +61 -0
  27. data/_pages/product/index.html +49 -0
  28. data/_pages/scroll/index.html +59 -0
  29. data/_pages/search/index.html +24 -0
  30. data/_pages/team/index.html +69 -0
  31. data/_pages/theme/index.html +1225 -0
  32. data/_pages/welcome/index.html +83 -0
  33. data/_posts/2018-01-01-what-is-bacon-ipsum-pt1.md +39 -0
  34. data/_posts/2018-02-01-what-is-bacon-ipsum-pt2.md +39 -0
  35. data/_posts/2018-03-01-what-is-bacon-ipsum-pt3.md +39 -0
  36. data/_slides/sample-presentation.md +115 -0
  37. data/assets/images/css/bg-pattern.png +0 -0
  38. data/assets/images/darkmatter.png +0 -0
  39. data/assets/scripts/jquery-easing.min.js +1 -0
  40. data/assets/scripts/scrolling-nav.js +29 -0
  41. data/assets/styles/darkmatter-cover.css +134 -0
  42. data/assets/styles/darkmatter-scroll.css +20 -0
  43. data/assets/styles/darkmatter.css +70 -0
  44. metadata +128 -0
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ {% include head.html %}
4
+ <link rel="stylesheet" href="{{ "/assets/styles/darkmatter-scroll.css" | prepend: site.baseurl }}">
5
+
6
+ <body id="page-top">
7
+
8
+ <!-- Navigation -->
9
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background-color: #333;">
10
+ <div class="container">
11
+ <a class="navbar-brand js-scroll-trigger" href="/">Darkmatter</a>
12
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
13
+ aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
14
+ <span class="navbar-toggler-icon"></span>
15
+ </button>
16
+ <div class="collapse navbar-collapse" id="navbarResponsive">
17
+ <ul class="navbar-nav ml-auto">
18
+ <li class="nav-item">
19
+ <a class="nav-link js-scroll-trigger" href="#page-top">Home</a>
20
+ </li>
21
+ <li class="nav-item">
22
+ <a class="nav-link js-scroll-trigger" href="#about">About</a>
23
+ </li>
24
+ <li class="nav-item">
25
+ <a class="nav-link js-scroll-trigger" href="#services">Services</a>
26
+ </li>
27
+ <li class="nav-item">
28
+ <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
29
+ </li>
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ </nav>
34
+
35
+ {{ content }}
36
+
37
+ </body>
38
+
39
+ </html>
@@ -0,0 +1,230 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+
7
+ <title>
8
+ {% if page.title %}
9
+ {{ page.title }} | {{ site.title }}
10
+ {% else %}
11
+ {{ site.title }}
12
+ {% endif %}
13
+ </title>
14
+
15
+ <!--<meta name="author" content="{{ site.author }}" />-->
16
+
17
+ <!-- Description -->
18
+ {% if page.description %}
19
+ <meta name="description" content="{{ page.description }}" />
20
+ {% else %}
21
+ <meta name="description" content="{{ site.description }}" />
22
+ {% endif %}
23
+
24
+ <meta name="apple-mobile-web-app-capable" content="yes" />
25
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
26
+
27
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
28
+
29
+ <!-- Font Awesome CSS -->
30
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
31
+
32
+ <!-- Reveal.js CSS -->
33
+ <link rel="stylesheet" href="{{ "/assets/modules/reveal.js/css/reveal.css" | prepend: site.baseurl }}" />
34
+
35
+ {%if page.theme %}
36
+ <link rel="stylesheet" href="{{ "/assets/modules/reveal.js/css/theme/" | prepend: site.baseurl | append: page.theme | append: '.css' }}" id="theme"/>
37
+ {% else %}
38
+ <link rel="stylesheet" href="{{ "/assets/modules/reveal.js/css/theme/white.css" | prepend: site.baseurl }}" id="theme"/>
39
+ {% endif %}
40
+
41
+ <!-- Code syntax highlighting -->
42
+ <link rel="stylesheet" href="{{ "/assets/modules/reveal.js/lib/css/zenburn.css" | prepend: site.baseurl }}" />
43
+
44
+ <!-- Printing and PDF exports -->
45
+ <script>
46
+ var link = document.createElement('link');
47
+ link.rel = 'stylesheet';
48
+ link.type = 'text/css';
49
+ link.href = window.location.search.match(/print-pdf/gi) ? '{{ "/assets/modules/reveal.js/css/print/pdf.css" | prepend: site.baseurl }}' : '{{ "/assets/modules/reveal.js/css/print/paper.css" | prepend: site.baseurl }}';
50
+ document.getElementsByTagName('head')[0].appendChild(link);
51
+ </script>
52
+
53
+ <link rel="apple-touch-icon" href="{{ "/apple-touch-icon.png" | prepend: site.baseurl }}" />
54
+
55
+ <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
56
+
57
+ <style>
58
+ .home {
59
+ color: #50514F;
60
+ font-family: verdana;
61
+ font-size: 100%;
62
+ padding-left: 20px;
63
+ }
64
+ </style>
65
+ </head>
66
+
67
+ <body>
68
+ <div>
69
+ <p>
70
+ <a class="home" href="/"><i class="fa fa-2x fa-bars"></i></a>
71
+ </p>
72
+ </div>
73
+ <div class="reveal">
74
+ <div class="slides">
75
+ {{ content }}
76
+ </div>
77
+ </div>
78
+
79
+ <script type="text/javascript" src="{{ "/assets/modules/reveal.js/js/reveal.js" | prepend: site.baseurl }}"></script>
80
+ <script type="text/javascript" src="{{ "/assets/modules/reveal.js/lib/js/head.min.js" | prepend: site.baseurl }}"></script>
81
+
82
+ <script type="text/javascript">
83
+ // Full list of configuration options available at:
84
+ // https://github.com/hakimel/reveal.js#full-setup
85
+ Reveal.initialize({
86
+
87
+ // Display Settings
88
+ //width: "100%",
89
+ //height: "100%",
90
+ //margin: 0,
91
+ //minScale: 1,
92
+ //maxScale: 1,
93
+
94
+ // Display presentation control arrows
95
+ controls: true,
96
+
97
+ // Help the user learn the controls by providing hints, for example by
98
+ // bouncing the down arrow when they first encounter a vertical slide
99
+ controlsTutorial: true,
100
+
101
+ // Determines where controls appear, "edges" or "bottom-right"
102
+ controlsLayout: 'edges',
103
+
104
+ // Visibility rule for backwards navigation arrows; "faded", "hidden"
105
+ // or "visible"
106
+ controlsBackArrows: 'faded',
107
+
108
+ // Display a presentation progress bar
109
+ progress: true,
110
+
111
+ // Display the page number of the current slide
112
+ slideNumber: false,
113
+
114
+ // Push each slide change to the browser history
115
+ history: false,
116
+
117
+ // Enable keyboard shortcuts for navigation
118
+ keyboard: true,
119
+
120
+ // Enable the slide overview mode
121
+ overview: true,
122
+
123
+ // Vertical centering of slides
124
+ center: true,
125
+
126
+ // Enables touch navigation on devices with touch input
127
+ touch: true,
128
+
129
+ // Loop the presentation
130
+ loop: false,
131
+
132
+ // Change the presentation direction to be RTL
133
+ rtl: false,
134
+
135
+ // Randomizes the order of slides each time the presentation loads
136
+ shuffle: false,
137
+
138
+ // Turns fragments on and off globally
139
+ fragments: true,
140
+
141
+ // Flags whether to include the current fragment in the URL,
142
+ // so that reloading brings you to the same fragment position
143
+ fragmentInURL: false,
144
+
145
+ // Flags if the presentation is running in an embedded mode,
146
+ // i.e. contained within a limited portion of the screen
147
+ embedded: false,
148
+
149
+ // Flags if we should show a help overlay when the questionmark
150
+ // key is pressed
151
+ help: true,
152
+
153
+ // Flags if speaker notes should be visible to all viewers
154
+ showNotes: false,
155
+
156
+ // Global override for autoplaying embedded media (video/audio/iframe)
157
+ // - null: Media will only autoplay if data-autoplay is present
158
+ // - true: All media will autoplay, regardless of individual setting
159
+ // - false: No media will autoplay, regardless of individual setting
160
+ autoPlayMedia: null,
161
+
162
+ // Number of milliseconds between automatically proceeding to the
163
+ // next slide, disabled when set to 0, this value can be overwritten
164
+ // by using a data-autoslide attribute on your slides
165
+ autoSlide: 0,
166
+
167
+ // Stop auto-sliding after user input
168
+ autoSlideStoppable: true,
169
+
170
+ // Use this method for navigation when auto-sliding
171
+ autoSlideMethod: Reveal.navigateNext,
172
+
173
+ // Specify the average time in seconds that you think you will spend
174
+ // presenting each slide. This is used to show a pacing timer in the
175
+ // speaker view
176
+ defaultTiming: 120,
177
+
178
+ // Enable slide navigation via mouse wheel
179
+ mouseWheel: false,
180
+
181
+ // Hides the address bar on mobile devices
182
+ hideAddressBar: true,
183
+
184
+ // Opens links in an iframe preview overlay
185
+ // Add `data-preview-link` and `data-preview-link="false"` to customise each link
186
+ // individually
187
+ previewLinks: false,
188
+
189
+ // Transition style
190
+ transition: 'slide', // none/fade/slide/convex/concave/zoom
191
+
192
+ // Transition speed
193
+ transitionSpeed: 'default', // default/fast/slow
194
+
195
+ // Transition style for full page slide backgrounds
196
+ backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
197
+
198
+ // Number of slides away from the current that are visible
199
+ viewDistance: 3,
200
+
201
+ // Parallax background image
202
+ parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
203
+
204
+ // Parallax background size
205
+ parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
206
+
207
+ // Number of pixels to move the parallax background per slide
208
+ // - Calculated automatically unless specified
209
+ // - Set to 0 to disable movement along an axis
210
+ parallaxBackgroundHorizontal: null,
211
+ parallaxBackgroundVertical: null,
212
+
213
+ // The display mode that will be used to show slides
214
+ display: 'block',
215
+
216
+ dependencies: [
217
+ { src: '{{ "/assets/modules/reveal.js/lib/js/classList.js" | prepend: site.baseurl }}', condition: function() { return !document.body.classList; } },
218
+ { src: '{{ "/assets/modules/reveal.js/plugin/markdown/marked.js" | prepend: site.baseurl }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
219
+ { src: '{{ "/assets/modules/reveal.js/plugin/markdown/markdown.js" | prepend: site.baseurl }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
220
+ { src: '{{ "/assets/modules/reveal.js/plugin/highlight/highlight.js" | prepend: site.baseurl }}', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
221
+ { src: '{{ "/assets/modules/reveal.js/plugin/zoom-js/zoom.js" | prepend: site.baseurl }}', async: true },
222
+ { src: '{{ "/assets/modules/reveal.js/plugin/notes/notes.js" | prepend: site.baseurl }}', async: true }
223
+ ]
224
+
225
+ });
226
+ </script>
227
+
228
+ </body>
229
+
230
+ </html>
@@ -0,0 +1,99 @@
1
+ ---
2
+ layout: page
3
+ title: About
4
+ permalink: /about/
5
+ date: 2018-01-01 00:00:00 -0600
6
+ tags: about template business
7
+ ---
8
+ <!-- Header with Background Image -->
9
+ <header class="business-header">
10
+ <div class="container">
11
+ <div class="row">
12
+ <div class="col-lg-12">
13
+ <h1 class="display-4 text-center text-black mt-4">Business Name or Tagline</h1>
14
+ </div>
15
+ </div>
16
+ </div>
17
+ </header>
18
+
19
+ <!-- Page Content -->
20
+ <div class="container">
21
+
22
+ <div class="row">
23
+ <div class="col-sm-8">
24
+ <h2 class="mt-4">What We Do</h2>
25
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque tempore recusandae animi
26
+ soluta quasi? Asperiores rem dolore eaque vel, porro, soluta unde debitis aliquam laboriosam. Repellat
27
+ explicabo, maiores!</p>
28
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio neque consectetur consequatur
29
+ magni in nisi, natus beatae quidem quam odit commodi ducimus totam eum, alias, adipisci nesciunt
30
+ voluptate. Voluptatum.</p>
31
+ <p>
32
+ <a class="btn btn-primary btn-lg" href="#">Call to Action &raquo;</a>
33
+ </p>
34
+ </div>
35
+ <div class="col-sm-4">
36
+ <h2 class="mt-4">Contact Us</h2>
37
+ <address>
38
+ <strong>Start Bootstrap</strong>
39
+ <br>3481 Melrose Place
40
+ <br>Beverly Hills, CA 90210
41
+ <br>
42
+ </address>
43
+ <address>
44
+ <abbr title="Phone">P:</abbr>
45
+ (123) 456-7890
46
+ <br>
47
+ <abbr title="Email">E:</abbr>
48
+ <a href="mailto:#">name@example.com</a>
49
+ </address>
50
+ </div>
51
+ </div>
52
+ <!-- /.row -->
53
+
54
+ <div class="row">
55
+ <div class="col-sm-4 my-4">
56
+ <div class="card">
57
+ <img class="card-img-top" src="http://placehold.it/300x200" alt="">
58
+ <div class="card-body">
59
+ <h4 class="card-title">Card title</h4>
60
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse
61
+ necessitatibus neque sequi doloribus.</p>
62
+ </div>
63
+ <div class="card-footer">
64
+ <a href="#" class="btn btn-primary">Find Out More!</a>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ <div class="col-sm-4 my-4">
69
+ <div class="card">
70
+ <img class="card-img-top" src="http://placehold.it/300x200" alt="">
71
+ <div class="card-body">
72
+ <h4 class="card-title">Card title</h4>
73
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse
74
+ necessitatibus neque sequi doloribus totam ut praesentium aut.</p>
75
+ </div>
76
+ <div class="card-footer">
77
+ <a href="#" class="btn btn-primary">Find Out More!</a>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ <div class="col-sm-4 my-4">
82
+ <div class="card">
83
+ <img class="card-img-top" src="http://placehold.it/300x200" alt="">
84
+ <div class="card-body">
85
+ <h4 class="card-title">Card title</h4>
86
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse
87
+ necessitatibus neque.</p>
88
+ </div>
89
+ <div class="card-footer">
90
+ <a href="#" class="btn btn-primary">Find Out More!</a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ </div>
96
+ <!-- /.row -->
97
+
98
+ </div>
99
+ <!-- /.container -->
@@ -0,0 +1,185 @@
1
+ ---
2
+ layout: page
3
+ title: Album
4
+ permalink: /album/
5
+ date: 2018-01-01 00:00:00 -0600
6
+ tags: album template business
7
+ ---
8
+ <main role="main">
9
+
10
+ <section class="jumbotron text-center">
11
+ <div class="container">
12
+ <h1 class="jumbotron-heading">Album example</h1>
13
+ <p class="lead text-muted">Something short and leading about the collection below—its contents, the
14
+ creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
15
+ <p>
16
+ <a href="#" class="btn btn-primary my-2">Main call to action</a>
17
+ <a href="#" class="btn btn-secondary my-2">Secondary action</a>
18
+ </p>
19
+ </div>
20
+ </section>
21
+
22
+ <div class="album py-5 bg-light">
23
+ <div class="container">
24
+
25
+ <div class="row">
26
+ <div class="col-md-4">
27
+ <div class="card mb-4 box-shadow">
28
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
29
+ alt="Card image cap">
30
+ <div class="card-body">
31
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
32
+ to additional content. This content is a little bit longer.</p>
33
+ <div class="d-flex justify-content-between align-items-center">
34
+ <div class="btn-group">
35
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
36
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
37
+ </div>
38
+ <small class="text-muted">9 mins</small>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <div class="col-md-4">
44
+ <div class="card mb-4 box-shadow">
45
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
46
+ alt="Card image cap">
47
+ <div class="card-body">
48
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
49
+ to additional content. This content is a little bit longer.</p>
50
+ <div class="d-flex justify-content-between align-items-center">
51
+ <div class="btn-group">
52
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
53
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
54
+ </div>
55
+ <small class="text-muted">9 mins</small>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ <div class="col-md-4">
61
+ <div class="card mb-4 box-shadow">
62
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
63
+ alt="Card image cap">
64
+ <div class="card-body">
65
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
66
+ to additional content. This content is a little bit longer.</p>
67
+ <div class="d-flex justify-content-between align-items-center">
68
+ <div class="btn-group">
69
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
70
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
71
+ </div>
72
+ <small class="text-muted">9 mins</small>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="col-md-4">
79
+ <div class="card mb-4 box-shadow">
80
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
81
+ alt="Card image cap">
82
+ <div class="card-body">
83
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
84
+ to additional content. This content is a little bit longer.</p>
85
+ <div class="d-flex justify-content-between align-items-center">
86
+ <div class="btn-group">
87
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
88
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
89
+ </div>
90
+ <small class="text-muted">9 mins</small>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="col-md-4">
96
+ <div class="card mb-4 box-shadow">
97
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
98
+ alt="Card image cap">
99
+ <div class="card-body">
100
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
101
+ to additional content. This content is a little bit longer.</p>
102
+ <div class="d-flex justify-content-between align-items-center">
103
+ <div class="btn-group">
104
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
105
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
106
+ </div>
107
+ <small class="text-muted">9 mins</small>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <div class="col-md-4">
113
+ <div class="card mb-4 box-shadow">
114
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
115
+ alt="Card image cap">
116
+ <div class="card-body">
117
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
118
+ to additional content. This content is a little bit longer.</p>
119
+ <div class="d-flex justify-content-between align-items-center">
120
+ <div class="btn-group">
121
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
122
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
123
+ </div>
124
+ <small class="text-muted">9 mins</small>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="col-md-4">
131
+ <div class="card mb-4 box-shadow">
132
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
133
+ alt="Card image cap">
134
+ <div class="card-body">
135
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
136
+ to additional content. This content is a little bit longer.</p>
137
+ <div class="d-flex justify-content-between align-items-center">
138
+ <div class="btn-group">
139
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
140
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
141
+ </div>
142
+ <small class="text-muted">9 mins</small>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ <div class="col-md-4">
148
+ <div class="card mb-4 box-shadow">
149
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
150
+ alt="Card image cap">
151
+ <div class="card-body">
152
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
153
+ to additional content. This content is a little bit longer.</p>
154
+ <div class="d-flex justify-content-between align-items-center">
155
+ <div class="btn-group">
156
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
157
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
158
+ </div>
159
+ <small class="text-muted">9 mins</small>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="col-md-4">
165
+ <div class="card mb-4 box-shadow">
166
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail"
167
+ alt="Card image cap">
168
+ <div class="card-body">
169
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in
170
+ to additional content. This content is a little bit longer.</p>
171
+ <div class="d-flex justify-content-between align-items-center">
172
+ <div class="btn-group">
173
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
174
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
175
+ </div>
176
+ <small class="text-muted">9 mins</small>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ </main>