rails_app_generator 0.0.6 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.builders/boot.rb +1 -0
- data/.builders/generators/project-plan.rb +47 -0
- data/CHANGELOG.md +24 -0
- data/after_templates/README.md +3 -0
- data/after_templates/___base_template.rb +1 -0
- data/after_templates/___r7_hotwire.rb +1 -0
- data/after_templates/rag_bootstrap/application-yield.html.erb +5 -0
- data/after_templates/rag_bootstrap/application.html.erb +4 -0
- data/after_templates/rag_bootstrap/component-cards-fancy.css +84 -0
- data/after_templates/rag_bootstrap/component-cards-fancy.html +80 -0
- data/after_templates/rag_bootstrap/component-cards-staff.css +90 -0
- data/after_templates/rag_bootstrap/component-cards-staff.html +140 -0
- data/after_templates/rag_bootstrap/component-cards-styled.html +31 -0
- data/after_templates/rag_bootstrap/component-footer.html +34 -0
- data/after_templates/rag_bootstrap/component-hero.html +15 -0
- data/after_templates/rag_bootstrap/component-nav.html +36 -0
- data/after_templates/rag_bootstrap/custom-bootstrap-import.scss +5 -0
- data/after_templates/rag_bootstrap/custom-using-css.css +3 -0
- data/after_templates/rag_bootstrap/custom-using-scss.scss +5 -0
- data/after_templates/rag_bootstrap/manifest.js +3 -0
- data/after_templates/rag_bootstrap.rb +1 -0
- data/after_templates/rag_simple.rb +25 -0
- data/after_templates/rag_tailwind/component-cta.html +17 -0
- data/after_templates/rag_tailwind/component-faq.html +151 -0
- data/after_templates/rag_tailwind/component-footer.html +73 -0
- data/after_templates/rag_tailwind/component-hero.html +25 -0
- data/after_templates/rag_tailwind/component-nav.html +101 -0
- data/after_templates/rag_tailwind/component-section-begin.html +0 -0
- data/after_templates/rag_tailwind/component-section-end.html +0 -0
- data/after_templates/rag_tailwind.rb +76 -0
- data/docs/project-plan/project.drawio +56 -0
- data/docs/project-plan/project_done.svg +3 -0
- data/docs/project-plan/project_in_progress.svg +3 -0
- data/docs/project-plan/project_todo.svg +3 -0
- data/docs/project-plan.md +24 -0
- data/exe/rag +41 -0
- data/lib/rails_app_generator/add_on.rb +0 -1
- data/lib/rails_app_generator/app_builder.rb +5 -3
- data/lib/rails_app_generator/app_generator.rb +72 -13
- data/lib/rails_app_generator/notes/a2.txt +14 -1
- data/lib/rails_app_generator/options/rails_options.rb +1 -1
- data/lib/rails_app_generator/version.rb +1 -1
- data/lib/rails_app_generator.rb +3 -3
- data/package-lock.json +2 -2
- data/package.json +1 -1
- data/profiles/rag-add-some-pages.json +11 -0
- data/profiles/rag-bootstrap.json +12 -0
- data/profiles/rag-simple.json +11 -0
- data/profiles/rag-tailwind.json +12 -0
- data/templates/README.md.erb +43 -0
- metadata +56 -4
- data/exe/rails_app_generator +0 -51
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: eb8e4527b8ed4718b6e87844e6bf5f531b3747fd98e4ea0d6b9a00a362a6e690
|
4
|
+
data.tar.gz: 5ce9f0b4ca298a820ab8bdfd4cff8947163230fb2548b40a2e6432506fe43fd4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 32689a628daeebed93c2e415d71fe9ed68adcce3737c55a55ad2966a378125dd22dc948f1c46325aa992c0f2bb7ba1fc37d0560f47dd385e094dbe5e2f63d9e2
|
7
|
+
data.tar.gz: c3094d0c0384107b80ffe00b766a51e6c72b43135bdf298b3c0b3b524aa9aff3729cfe9a1b9d38886d5542a8a090ca7ce0708be0d3f03d09d5a7968a53e407e1
|
data/.builders/boot.rb
CHANGED
@@ -23,6 +23,7 @@ KConfig.configure(CONFIG_KEY) do |config|
|
|
23
23
|
config.template_folders.add(:template , File.expand_path('.templates', Dir.pwd))
|
24
24
|
|
25
25
|
config.target_folders.add(:app , base_folder)
|
26
|
+
config.target_folders.add(:docs , :app, 'docs')
|
26
27
|
config.target_folders.add(:builder , builder_folder)
|
27
28
|
end
|
28
29
|
|
@@ -0,0 +1,47 @@
|
|
1
|
+
KManager.action :project_plan do
|
2
|
+
action do
|
3
|
+
|
4
|
+
DrawioDsl::Drawio
|
5
|
+
.init(k_builder, on_exist: :write, on_action: :execute)
|
6
|
+
.diagram(rounded: 1, glass: 1)
|
7
|
+
.page('In progress', theme: :style_03, margin_left: 0, margin_top: 0) do
|
8
|
+
h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
|
9
|
+
# p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan - In progress')
|
10
|
+
|
11
|
+
grid_layout(y: 90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
|
12
|
+
|
13
|
+
todo(title: '')
|
14
|
+
end
|
15
|
+
.page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
|
16
|
+
|
17
|
+
# h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
|
18
|
+
# p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan')
|
19
|
+
|
20
|
+
todo(title: 'add diff tool with support')
|
21
|
+
todo(title: 'add diff tool left hand side only option')
|
22
|
+
todo(title: 'add diff tool right hand side only option')
|
23
|
+
todo(title: 'add diff tool lhs/rhs differences')
|
24
|
+
todo(title: 'add diff tool open in vscode option')
|
25
|
+
todo(title: 'rag new should work like rails new')
|
26
|
+
todo(title: 'rag profile is the default option')
|
27
|
+
|
28
|
+
grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
|
29
|
+
|
30
|
+
end
|
31
|
+
.page('Done', theme: :style_06, margin_left: 0, margin_top: 0) do
|
32
|
+
|
33
|
+
# h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
|
34
|
+
# p(x: 350, y: 40, w: 400, h: 80, title: 'Done')
|
35
|
+
|
36
|
+
todo(title: 'add project plan to do list')
|
37
|
+
|
38
|
+
grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
|
39
|
+
|
40
|
+
end
|
41
|
+
.cd(:docs)
|
42
|
+
.save('project-plan/project.drawio')
|
43
|
+
.export_svg('project-plan/project_in_progress', page: 1)
|
44
|
+
.export_svg('project-plan/project_todo' , page: 2)
|
45
|
+
.export_svg('project-plan/project_done' , page: 3)
|
46
|
+
end
|
47
|
+
end
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,27 @@
|
|
1
|
+
## [0.0.8](https://github.com/klueless-io/rails_app_generator/compare/v0.0.7...v0.0.8) (2022-07-24)
|
2
|
+
|
3
|
+
|
4
|
+
### Bug Fixes
|
5
|
+
|
6
|
+
* add support for bootstrap profile ([f70d17d](https://github.com/klueless-io/rails_app_generator/commit/f70d17d28cae3f7758c62360bd3d97ca27bf06b5))
|
7
|
+
* add support for bootstrap profile ([a114339](https://github.com/klueless-io/rails_app_generator/commit/a1143391166c10fc802800e2e1236f69aeda9091))
|
8
|
+
|
9
|
+
## [0.0.7](https://github.com/klueless-io/rails_app_generator/compare/v0.0.6...v0.0.7) (2022-07-22)
|
10
|
+
|
11
|
+
|
12
|
+
### Bug Fixes
|
13
|
+
|
14
|
+
* add support for profiles and after templates ([1ecf4ab](https://github.com/klueless-io/rails_app_generator/commit/1ecf4abef1bc0f45928a33319ed9db8bebe1c27a))
|
15
|
+
|
16
|
+
## [0.0.6](https://github.com/klueless-io/rails_app_generator/compare/v0.0.5...v0.0.6) (2022-07-21)
|
17
|
+
|
18
|
+
|
19
|
+
### Bug Fixes
|
20
|
+
|
21
|
+
* add a bunch of addons ([b781af6](https://github.com/klueless-io/rails_app_generator/commit/b781af66d7fe7d7dcd2550577166213deefc06c6))
|
22
|
+
* add a bunch of addons ([d9a85b7](https://github.com/klueless-io/rails_app_generator/commit/d9a85b7b32c2c25577d98b4b3be9aab7947ff6e9))
|
23
|
+
* update template paths in app_generator ([9b28a5e](https://github.com/klueless-io/rails_app_generator/commit/9b28a5ee58535a761581e619eb01dc3059a79948))
|
24
|
+
|
1
25
|
## [0.0.5](https://github.com/klueless-io/rails_app_generator/compare/v0.0.4...v0.0.5) (2022-07-19)
|
2
26
|
|
3
27
|
|
@@ -0,0 +1 @@
|
|
1
|
+
# frozen_string_literal: true
|
@@ -0,0 +1 @@
|
|
1
|
+
# frozen_string_literal: true
|
@@ -0,0 +1,4 @@
|
|
1
|
+
<%= stylesheet_link_tag "custom-using-css" %>
|
2
|
+
<%= stylesheet_link_tag "custom-using-scss" %>
|
3
|
+
<%= stylesheet_link_tag "custom-component" %>
|
4
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
@@ -0,0 +1,84 @@
|
|
1
|
+
// Cards 1 : Source: https://codepen.io/donho_zamo/pen/YzXzPXZ
|
2
|
+
|
3
|
+
/*---- Main Style ----*/
|
4
|
+
#cards_landscape_wrap-2{
|
5
|
+
text-align: center;
|
6
|
+
background: #F7F7F7;
|
7
|
+
}
|
8
|
+
#cards_landscape_wrap-2 .container{
|
9
|
+
padding-top: 80px;
|
10
|
+
padding-bottom: 100px;
|
11
|
+
}
|
12
|
+
#cards_landscape_wrap-2 a{
|
13
|
+
text-decoration: none;
|
14
|
+
outline: none;
|
15
|
+
}
|
16
|
+
#cards_landscape_wrap-2 .card-flyer {
|
17
|
+
border-radius: 5px;
|
18
|
+
}
|
19
|
+
#cards_landscape_wrap-2 .card-flyer .image-box{
|
20
|
+
background: #ffffff;
|
21
|
+
overflow: hidden;
|
22
|
+
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
|
23
|
+
border-radius: 5px;
|
24
|
+
}
|
25
|
+
#cards_landscape_wrap-2 .card-flyer .image-box img{
|
26
|
+
-webkit-transition:all .9s ease;
|
27
|
+
-moz-transition:all .9s ease;
|
28
|
+
-o-transition:all .9s ease;
|
29
|
+
-ms-transition:all .9s ease;
|
30
|
+
width: 100%;
|
31
|
+
height: 200px;
|
32
|
+
}
|
33
|
+
#cards_landscape_wrap-2 .card-flyer:hover .image-box img{
|
34
|
+
opacity: 0.7;
|
35
|
+
-webkit-transform:scale(1.15);
|
36
|
+
-moz-transform:scale(1.15);
|
37
|
+
-ms-transform:scale(1.15);
|
38
|
+
-o-transform:scale(1.15);
|
39
|
+
transform:scale(1.15);
|
40
|
+
}
|
41
|
+
#cards_landscape_wrap-2 .card-flyer .text-box{
|
42
|
+
text-align: center;
|
43
|
+
}
|
44
|
+
#cards_landscape_wrap-2 .card-flyer .text-box .text-container{
|
45
|
+
padding: 30px 18px;
|
46
|
+
}
|
47
|
+
#cards_landscape_wrap-2 .card-flyer{
|
48
|
+
background: #FFFFFF;
|
49
|
+
margin-top: 50px;
|
50
|
+
-webkit-transition: all 0.2s ease-in;
|
51
|
+
-moz-transition: all 0.2s ease-in;
|
52
|
+
-ms-transition: all 0.2s ease-in;
|
53
|
+
-o-transition: all 0.2s ease-in;
|
54
|
+
transition: all 0.2s ease-in;
|
55
|
+
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
|
56
|
+
}
|
57
|
+
#cards_landscape_wrap-2 .card-flyer:hover{
|
58
|
+
background: #fff;
|
59
|
+
box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
|
60
|
+
-webkit-transition: all 0.2s ease-in;
|
61
|
+
-moz-transition: all 0.2s ease-in;
|
62
|
+
-ms-transition: all 0.2s ease-in;
|
63
|
+
-o-transition: all 0.2s ease-in;
|
64
|
+
transition: all 0.2s ease-in;
|
65
|
+
margin-top: 50px;
|
66
|
+
}
|
67
|
+
#cards_landscape_wrap-2 .card-flyer .text-box p{
|
68
|
+
margin-top: 10px;
|
69
|
+
margin-bottom: 0px;
|
70
|
+
padding-bottom: 0px;
|
71
|
+
font-size: 14px;
|
72
|
+
letter-spacing: 1px;
|
73
|
+
color: #000000;
|
74
|
+
}
|
75
|
+
#cards_landscape_wrap-2 .card-flyer .text-box h6{
|
76
|
+
margin-top: 0px;
|
77
|
+
margin-bottom: 4px;
|
78
|
+
font-size: 18px;
|
79
|
+
font-weight: bold;
|
80
|
+
text-transform: uppercase;
|
81
|
+
font-family: 'Roboto Black', sans-serif;
|
82
|
+
letter-spacing: 1px;
|
83
|
+
color: #00acc1;
|
84
|
+
}
|
@@ -0,0 +1,80 @@
|
|
1
|
+
<!-- Topic Cards -->
|
2
|
+
<div id="cards_landscape_wrap-2">
|
3
|
+
<div class="container">
|
4
|
+
<div class="row">
|
5
|
+
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
6
|
+
<a href="">
|
7
|
+
<div class="card-flyer">
|
8
|
+
<div class="text-box">
|
9
|
+
<div class="image-box">
|
10
|
+
<img src="https://cdn.pixabay.com/photo/2018/03/30/15/11/deer-3275594_960_720.jpg" alt="" />
|
11
|
+
</div>
|
12
|
+
<div class="text-container">
|
13
|
+
<h6>Title 01</h6>
|
14
|
+
<p>
|
15
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
16
|
+
industry's standard dummy text ever since the 1500s.
|
17
|
+
</p>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
</div>
|
21
|
+
</a>
|
22
|
+
</div>
|
23
|
+
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
24
|
+
<a href="">
|
25
|
+
<div class="card-flyer">
|
26
|
+
<div class="text-box">
|
27
|
+
<div class="image-box">
|
28
|
+
<img src="https://cdn.pixabay.com/photo/2018/04/09/19/55/low-poly-3305284_960_720.jpg" alt="" />
|
29
|
+
</div>
|
30
|
+
<div class="text-container">
|
31
|
+
<h6>Title 02</h6>
|
32
|
+
<p>
|
33
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
34
|
+
industry's standard dummy text ever since the 1500s.
|
35
|
+
</p>
|
36
|
+
</div>
|
37
|
+
</div>
|
38
|
+
</div>
|
39
|
+
</a>
|
40
|
+
</div>
|
41
|
+
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
42
|
+
<a href="">
|
43
|
+
<div class="card-flyer">
|
44
|
+
<div class="text-box">
|
45
|
+
<div class="image-box">
|
46
|
+
<img src="https://cdn.pixabay.com/photo/2018/04/06/13/46/poly-3295856_960_720.png" alt="" />
|
47
|
+
</div>
|
48
|
+
|
49
|
+
<div class="text-container">
|
50
|
+
<h6>Title 03</h6>
|
51
|
+
<p>
|
52
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
53
|
+
industry's standard dummy text ever since the 1500s.
|
54
|
+
</p>
|
55
|
+
</div>
|
56
|
+
</div>
|
57
|
+
</div>
|
58
|
+
</a>
|
59
|
+
</div>
|
60
|
+
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
61
|
+
<a href="">
|
62
|
+
<div class="card-flyer">
|
63
|
+
<div class="text-box">
|
64
|
+
<div class="image-box">
|
65
|
+
<img src="https://cdn.pixabay.com/photo/2018/03/30/15/12/dog-3275593_960_720.jpg" alt="" />
|
66
|
+
</div>
|
67
|
+
<div class="text-container">
|
68
|
+
<h6>Title 04</h6>
|
69
|
+
<p>
|
70
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
71
|
+
industry's standard dummy text ever since the 1500s.
|
72
|
+
</p>
|
73
|
+
</div>
|
74
|
+
</div>
|
75
|
+
</div>
|
76
|
+
</a>
|
77
|
+
</div>
|
78
|
+
</div>
|
79
|
+
</div>
|
80
|
+
</div>
|
@@ -0,0 +1,90 @@
|
|
1
|
+
// Cards 2 - Source: https://codepen.io/design007/pen/KKmbZzm
|
2
|
+
|
3
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
4
|
+
@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');
|
5
|
+
:root {
|
6
|
+
--font3: 'Roboto', sans-serif;
|
7
|
+
}
|
8
|
+
|
9
|
+
.h1,
|
10
|
+
h1 {
|
11
|
+
font-size: 1.5rem;
|
12
|
+
}
|
13
|
+
|
14
|
+
.container-fluid {
|
15
|
+
max-width: 1400px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.card {
|
19
|
+
background: #fff;
|
20
|
+
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
|
21
|
+
border: 1;
|
22
|
+
border-radius: 1rem;
|
23
|
+
}
|
24
|
+
|
25
|
+
.img-hover-zoom--colorize img {
|
26
|
+
border-radius: 50%;
|
27
|
+
width: 150px;
|
28
|
+
height: auto;
|
29
|
+
margin-top: 20px;
|
30
|
+
padding: 1px;
|
31
|
+
transition: transform 0.5s;
|
32
|
+
filter: grayscale(100%);
|
33
|
+
}
|
34
|
+
|
35
|
+
.img-hover-zoom--colorize:hover img {
|
36
|
+
filter: grayscale(0);
|
37
|
+
transform: scale(1.05);
|
38
|
+
}
|
39
|
+
|
40
|
+
.card h5 {
|
41
|
+
overflow: hidden;
|
42
|
+
height: 80px;
|
43
|
+
font-weight: 300;
|
44
|
+
font-size: 1rem;
|
45
|
+
}
|
46
|
+
|
47
|
+
.card h5 a {
|
48
|
+
color: black;
|
49
|
+
text-decoration: none;
|
50
|
+
}
|
51
|
+
|
52
|
+
.role {
|
53
|
+
color: #7a7a7a;
|
54
|
+
}
|
55
|
+
|
56
|
+
.box {
|
57
|
+
display: flex;
|
58
|
+
align-items: center;
|
59
|
+
justify-content: center;
|
60
|
+
}
|
61
|
+
|
62
|
+
.fab {
|
63
|
+
font-size: 1.5rem;
|
64
|
+
color: darkgray;
|
65
|
+
transition: transform 0.5s;
|
66
|
+
}
|
67
|
+
|
68
|
+
.fab:hover {
|
69
|
+
color: black;
|
70
|
+
transform: scale(1.1);
|
71
|
+
}
|
72
|
+
|
73
|
+
.card h2 {
|
74
|
+
font-size: 1rem;
|
75
|
+
}
|
76
|
+
|
77
|
+
/* MEDIA */
|
78
|
+
|
79
|
+
@media only screen and (min-width: 1200px) {
|
80
|
+
.img-hover-zoom--colorize img {
|
81
|
+
width: 200px;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
|
85
|
+
@media only screen and (min-width: 1200px) {
|
86
|
+
.h1,
|
87
|
+
h1 {
|
88
|
+
font-size: 2rem;
|
89
|
+
}
|
90
|
+
}
|
@@ -0,0 +1,140 @@
|
|
1
|
+
<div class="container p-5">
|
2
|
+
<div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3">
|
3
|
+
<div class="col">
|
4
|
+
<div class="card h-100 shadow-sm">
|
5
|
+
<div class="text-center">
|
6
|
+
<div class="img-hover-zoom img-hover-zoom--colorize">
|
7
|
+
<img
|
8
|
+
class="shadow"
|
9
|
+
src="https://source.unsplash.com/rDEOVtE7vOs/600x600"
|
10
|
+
alt="Another Image zoom-on-hover effect"
|
11
|
+
/>
|
12
|
+
</div>
|
13
|
+
</div>
|
14
|
+
|
15
|
+
<div class="card-body">
|
16
|
+
<div class="clearfix mb-3"></div>
|
17
|
+
|
18
|
+
<div class="my-2 text-center">
|
19
|
+
<h1>Mia Wallace</h1>
|
20
|
+
</div>
|
21
|
+
<div class="mb-3">
|
22
|
+
<h2 class="text-uppercase text-center role">Senior Frontend Developer</h2>
|
23
|
+
</div>
|
24
|
+
<div class="box">
|
25
|
+
<div>
|
26
|
+
<ul class="list-inline">
|
27
|
+
<li class="list-inline-item"><i class="fab fa-github"></i></li>
|
28
|
+
<li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
|
29
|
+
<li class="list-inline-item"><i class="fab fa-instagram"></i></li>
|
30
|
+
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
|
31
|
+
</ul>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
</div>
|
35
|
+
</div>
|
36
|
+
</div>
|
37
|
+
<div class="col">
|
38
|
+
<div class="card h-100 shadow-sm">
|
39
|
+
<div class="text-center">
|
40
|
+
<div class="img-hover-zoom img-hover-zoom--colorize">
|
41
|
+
<img
|
42
|
+
class="shadow"
|
43
|
+
src="https://source.unsplash.com/XHVpWcr5grQ/600x600"
|
44
|
+
alt="Another Image zoom-on-hover effect"
|
45
|
+
/>
|
46
|
+
</div>
|
47
|
+
</div>
|
48
|
+
|
49
|
+
<div class="card-body">
|
50
|
+
<div class="clearfix mb-3"></div>
|
51
|
+
|
52
|
+
<div class="my-2 text-center">
|
53
|
+
<h1>Vincent Vega</h1>
|
54
|
+
</div>
|
55
|
+
<div class="mb-3">
|
56
|
+
<h2 class="text-uppercase text-center role">SEO Specialist</h2>
|
57
|
+
</div>
|
58
|
+
<div class="box">
|
59
|
+
<div>
|
60
|
+
<ul class="list-inline">
|
61
|
+
<li class="list-inline-item"><i class="fab fa-github"></i></li>
|
62
|
+
<li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
|
63
|
+
<li class="list-inline-item"><i class="fab fa-instagram"></i></li>
|
64
|
+
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
|
65
|
+
</ul>
|
66
|
+
</div>
|
67
|
+
</div>
|
68
|
+
</div>
|
69
|
+
</div>
|
70
|
+
</div>
|
71
|
+
<div class="col">
|
72
|
+
<div class="card h-100 shadow-sm">
|
73
|
+
<div class="text-center">
|
74
|
+
<div class="img-hover-zoom img-hover-zoom--colorize">
|
75
|
+
<img
|
76
|
+
class="shadow"
|
77
|
+
src="https://source.unsplash.com/n4KewLKFOZw/600x600"
|
78
|
+
alt="Another Image zoom-on-hover effect"
|
79
|
+
/>
|
80
|
+
</div>
|
81
|
+
</div>
|
82
|
+
|
83
|
+
<div class="card-body">
|
84
|
+
<div class="clearfix mb-3"></div>
|
85
|
+
|
86
|
+
<div class="my-2 text-center">
|
87
|
+
<h1>Mr. Wolf</h1>
|
88
|
+
</div>
|
89
|
+
<div class="mb-3">
|
90
|
+
<h2 class="text-uppercase text-center role">DIGITAL MARKETING SPECIALIST</h2>
|
91
|
+
</div>
|
92
|
+
<div class="box">
|
93
|
+
<div>
|
94
|
+
<ul class="list-inline">
|
95
|
+
<li class="list-inline-item"><i class="fab fa-github"></i></li>
|
96
|
+
<li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
|
97
|
+
<li class="list-inline-item"><i class="fab fa-instagram"></i></li>
|
98
|
+
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
|
99
|
+
</ul>
|
100
|
+
</div>
|
101
|
+
</div>
|
102
|
+
</div>
|
103
|
+
</div>
|
104
|
+
</div>
|
105
|
+
<div class="col">
|
106
|
+
<div class="card h-100 shadow-sm">
|
107
|
+
<div class="text-center">
|
108
|
+
<div class="img-hover-zoom img-hover-zoom--colorize">
|
109
|
+
<img
|
110
|
+
class="shadow"
|
111
|
+
src="https://source.unsplash.com/B4TjXnI0Y2c/600x600"
|
112
|
+
alt="Another Image zoom-on-hover effect"
|
113
|
+
/>
|
114
|
+
</div>
|
115
|
+
</div>
|
116
|
+
|
117
|
+
<div class="card-body">
|
118
|
+
<div class="clearfix mb-3"></div>
|
119
|
+
|
120
|
+
<div class="my-2 text-center">
|
121
|
+
<h1>O-Ren Ishii</h1>
|
122
|
+
</div>
|
123
|
+
<div class="mb-3">
|
124
|
+
<h2 class="text-uppercase text-center role">Web Developer</h2>
|
125
|
+
</div>
|
126
|
+
<div class="box">
|
127
|
+
<div>
|
128
|
+
<ul class="list-inline">
|
129
|
+
<li class="list-inline-item"><i class="fab fa-github"></i></li>
|
130
|
+
<li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
|
131
|
+
<li class="list-inline-item"><i class="fab fa-instagram"></i></li>
|
132
|
+
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
|
133
|
+
</ul>
|
134
|
+
</div>
|
135
|
+
</div>
|
136
|
+
</div>
|
137
|
+
</div>
|
138
|
+
</div>
|
139
|
+
</div>
|
140
|
+
</div>
|
@@ -0,0 +1,31 @@
|
|
1
|
+
<div class="m-4">
|
2
|
+
<div class="row row-cols-1 row-cols-md-3 g-3">
|
3
|
+
<div class="col">
|
4
|
+
<!-- Card with default left text alignment -->
|
5
|
+
<div class="card">
|
6
|
+
<div class="card-body card1">
|
7
|
+
<h3 class="card-title">Bootstrap @import</h3>
|
8
|
+
<p class="card-text">Use standard SAAS transpiling</p>
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
</div>
|
12
|
+
<div class="col">
|
13
|
+
<!-- Card with center text alignment -->
|
14
|
+
<div class="card text-center">
|
15
|
+
<div class="card-body card2">
|
16
|
+
<h3 class="card-title">CSS</h3>
|
17
|
+
<p class="card-text">Using plain CSS files</p>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
</div>
|
21
|
+
<div class="col">
|
22
|
+
<!-- Card with right text alignment -->
|
23
|
+
<div class="card text-end">
|
24
|
+
<div class="card-body card3">
|
25
|
+
<h3 class="card-title">SCSS</h3>
|
26
|
+
<p class="card-text">Using SASS/SCSS files</p>
|
27
|
+
</div>
|
28
|
+
</div>
|
29
|
+
</div>
|
30
|
+
</div>
|
31
|
+
</div>
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<footer class="bg-dark text-center text-white">
|
2
|
+
<!-- Grid container -->
|
3
|
+
<div class="container p-4 pb-0">
|
4
|
+
<!-- Section: Social media -->
|
5
|
+
<section class="mb-4">
|
6
|
+
<!-- Facebook -->
|
7
|
+
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>
|
8
|
+
|
9
|
+
<!-- Twitter -->
|
10
|
+
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>
|
11
|
+
|
12
|
+
<!-- Google -->
|
13
|
+
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>
|
14
|
+
|
15
|
+
<!-- Instagram -->
|
16
|
+
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>
|
17
|
+
|
18
|
+
<!-- Linkedin -->
|
19
|
+
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>
|
20
|
+
|
21
|
+
<!-- Github -->
|
22
|
+
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a>
|
23
|
+
</section>
|
24
|
+
<!-- Section: Social media -->
|
25
|
+
</div>
|
26
|
+
<!-- Grid container -->
|
27
|
+
|
28
|
+
<!-- Copyright -->
|
29
|
+
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
|
30
|
+
© 2020 Copyright:
|
31
|
+
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
|
32
|
+
</div>
|
33
|
+
<!-- Copyright -->
|
34
|
+
</footer>
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<div class="px-4 pt-5 my-5 text-center border-bottom">
|
2
|
+
<h1 class="display-4 fw-bold">Centered screenshot</h1>
|
3
|
+
<div class="col-lg-6 mx-auto">
|
4
|
+
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
5
|
+
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
|
6
|
+
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3" data-bs-toggle="modal" data-bs-target="#exampleModal">Click Me</button>
|
7
|
+
<%= link_to 'People', people_path, class: "btn btn-outline-secondary btn-lg px-4" %>
|
8
|
+
</div>
|
9
|
+
</div>
|
10
|
+
<div class="overflow-hidden" style="max-height: 30vh;">
|
11
|
+
<div class="container px-5">
|
12
|
+
<img src="https://getbootstrap.com/docs/5.0/examples/heroes/bootstrap-themes.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
|
13
|
+
</div>
|
14
|
+
</div>
|
15
|
+
</div>
|
@@ -0,0 +1,36 @@
|
|
1
|
+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
2
|
+
<div class="container-fluid">
|
3
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
4
|
+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
5
|
+
<span class="navbar-toggler-icon"></span>
|
6
|
+
</button>
|
7
|
+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
8
|
+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
9
|
+
<li class="nav-item">
|
10
|
+
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
11
|
+
</li>
|
12
|
+
<li class="nav-item">
|
13
|
+
<a class="nav-link" href="#">Link</a>
|
14
|
+
</li>
|
15
|
+
<li class="nav-item dropdown">
|
16
|
+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
17
|
+
Dropdown
|
18
|
+
</a>
|
19
|
+
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
20
|
+
<li><a class="dropdown-item" href="#">Action</a></li>
|
21
|
+
<li><a class="dropdown-item" href="#">Another action</a></li>
|
22
|
+
<li><hr class="dropdown-divider"></li>
|
23
|
+
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
24
|
+
</ul>
|
25
|
+
</li>
|
26
|
+
<li class="nav-item">
|
27
|
+
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
28
|
+
</li>
|
29
|
+
</ul>
|
30
|
+
<form class="d-flex">
|
31
|
+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
32
|
+
<button class="btn btn-outline-success" type="submit">Search</button>
|
33
|
+
</form>
|
34
|
+
</div>
|
35
|
+
</div>
|
36
|
+
</nav>
|
@@ -0,0 +1 @@
|
|
1
|
+
# frozen_string_literal: true
|