├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── css
    ├── modal.css
    └── styles.css
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 C. T. Lin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Pure CSS modal
  2 | CSS modal. No javascript.
  3 | 
  4 | 
  5 | ## DEMO
  6 | See the demo: http://jorgechavz.github.io/pure-css-modal/
  7 | 
  8 | 
  9 | ## Installation
 10 | Via bower
 11 | ```
 12 | bower install pure-css-modal
 13 | ```
 14 | 
 15 | Add the CSS file to your project
 16 | ```html
 17 | <link rel="stylesheet" "bower_components/pure-css-modal/css/modal.css"/>
 18 | ```
 19 | 
 20 | Add this basic HTML to your site.
 21 | ```html
 22 | <div class="modal">
 23 |   <input id="modal-trigger" class="checkbox" type="checkbox">
 24 |   <div class="modal-overlay">
 25 |     <label for="modal-trigger" class="o-close"></label>
 26 |     <div class="modal-wrap">
 27 |       <label for="modal-trigger" class="close">&#10006;</label>
 28 |       <h2>This is the modal content</h2>
 29 |       <p>
 30 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
 31 |       </p>
 32 |     </div>
 33 |   </div>
 34 | </div>
 35 | ```
 36 | 
 37 | Use a label as a trigger
 38 | ```html
 39 | <label for="modal-trigger">Launch modal</label>
 40 | ```
 41 | 
 42 | 
 43 | ## Customize
 44 | Add entrance direction to the modal by adding any of this classes to the `modal-wrap` div
 45 | 
 46 | | Class         |
 47 | | ------------- |
 48 | | from-top      |
 49 | | from-bottom   |
 50 | | from-left     |
 51 | | from-right    |
 52 | 
 53 | You can center the modal in the middle of the screen by adding the class `a-center` to the `modal-wrap`
 54 | 
 55 | | Class    |
 56 | |----------|
 57 | | a-center |
 58 | 
 59 | 
 60 | For example:
 61 | 
 62 | ```html
 63 | <div class="modal">
 64 |   <input id="modal_trigger" class="checkbox" type="checkbox">  
 65 |   <div class="modal_overlay">
 66 |     <label for="modal-trigger" class="o-close"></label>
 67 |     <div class="modal_wrap from_top">
 68 |       <label for="modal_trigger" class="close">&#10006;</label>
 69 |       <!-- YOUR CONTENT HERE -->
 70 | 
 71 |     </div>
 72 |   </div>
 73 | </div>
 74 | 
 75 | ```
 76 | 
 77 | You also can config the size of the modal by adding one of this classes
 78 | 
 79 | | Class         |
 80 | | ------------- |
 81 | | small         |
 82 | | full          |
 83 | 
 84 | For example:
 85 | 
 86 | ```html
 87 | <div class="modal">
 88 |   <input id="modal_trigger" class="checkbox" type="checkbox">  
 89 |   <div class="modal_overlay">
 90 |     <label for="modal-trigger" class="o-close"></label>
 91 |     <div class="modal_wrap small from_top">
 92 |       <label for="modal_trigger" class="close">&#10006;</label>
 93 |       <!-- YOUR CONTENT HERE -->
 94 | 
 95 |     </div>
 96 |   </div>
 97 | </div>
 98 | 
 99 | ```
100 | 
101 | 
102 | 
103 | ### Modal in a 'CLOSE' state
104 | <img src="http://i653.photobucket.com/albums/uu259/chikinflue/Captura%20de%20pantalla%202015-06-18%20a%20las%2018.18.03_zpsq85cq4bo.png">
105 | 
106 | ### Modal in a 'OPEN' state
107 | <img src="http://i653.photobucket.com/albums/uu259/chikinflue/Captura%20de%20pantalla%202015-12-28%20a%20las%2012.55.43%20p.m._zpspi75mkct.png">
108 | 
109 | 
110 | ### Author
111 | Jorge Chavez https://github.com/jorgechavz
112 | 
113 | ## Licence
114 | The MIT License (MIT)
115 | 
116 | See [LICENCE](https://github.com/jorgechavz/pure-css-modal/blob/master/LICENSE) for details.
117 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pure-css-modal",
 3 |   "version": "0.0.1",
 4 |   "homepage": "http://jorgechavz.github.io/pure-css-modal/",
 5 |   "authors": [
 6 |     "Jorge Chavez <jorge_clan8@hotmail.com>"
 7 |   ],
 8 |   "description": "Modal box that works without JavaScript",
 9 |   "main": "css/modal.css",
10 |   "moduleType": [
11 |     "node"
12 |   ],
13 |   "keywords": [
14 |     "css",
15 |     "modal",
16 |     "box",
17 |     "no",
18 |     "javascript"
19 |   ],
20 |   "license": "MIT",
21 |   "ignore": [
22 |     "**/.*",
23 |     "node_modules",
24 |     "bower_components",
25 |     "test",
26 |     "tests"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/css/modal.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Pure CSS modal box
  3 | Author: Jorge Chavez
  4 | Github: http://github.com/jorgechavz
  5 | */
  6 | 
  7 | 
  8 | .pure-modal .checkbox{
  9 |   display: none;
 10 | }
 11 | 
 12 | /* Gray background */
 13 | .pure-modal .pure-modal-overlay{
 14 |   opacity: 0;
 15 |   transition: all 0.3s ease;
 16 |   width: 50%;
 17 |   position: absolute;
 18 |   width: 100%;
 19 |   height: 100%;
 20 |   position: fixed;
 21 |   top: 0;
 22 |   left: 0;
 23 |   z-index: -100;
 24 |   transform: scale(1);
 25 |   display: none;
 26 |   background-color: rgba(0,0,0,0.5);
 27 | }
 28 | 
 29 | /* Box */
 30 | .pure-modal .pure-modal-wrap{
 31 |   background: #fdfbfb;
 32 |   border-radius: 0.2em;
 33 |   box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
 34 |   letter-spacing: 0.05em;
 35 |   line-height: 1.6;
 36 |   padding: 40px 65px;
 37 |   width: 60%;
 38 |   margin: 20px auto;
 39 |   align-self: flex-start;
 40 |   transition: all 0.5s ease;
 41 | }
 42 | .pure-modal .pure-modal-wrap.small{
 43 |   width: 30%;
 44 | }
 45 | .pure-modal .pure-modal-wrap.full{
 46 |   width: 100%;
 47 |   height: 100%;
 48 | }
 49 | 
 50 | .pure-modal .pure-modal-wrap.a-center {
 51 |   align-self: center;
 52 | }
 53 | .pure-modal .pure-modal-wrap.from-left {
 54 |   transform: translateX(-100%);
 55 | }
 56 | .pure-modal .pure-modal-wrap.from-right {
 57 |   transform: translateX(100%);
 58 | }
 59 | .pure-modal .pure-modal-wrap.from-top {
 60 |   transform: translateY(-100%);
 61 | }
 62 | .pure-modal .pure-modal-wrap.from-bottom {
 63 |   transform: translateY(100%);
 64 | }
 65 | 
 66 | 
 67 | /* Close button */
 68 | .pure-modal .pure-modal-overlay .close{
 69 |   display: flex;
 70 |   flex-direction: column;
 71 |   align-content: center;
 72 |   background: #282c34;
 73 |   border-radius: 50%;
 74 |   justify-content: center;
 75 |   position: absolute;
 76 |   right: -10px;
 77 |   top: -10px;
 78 |   font-size: 15px;
 79 |   width: 30px;
 80 |   height: 30px;
 81 |   color: #d1d1d1;
 82 | }
 83 | 
 84 | .pure-modal .pure-modal-overlay .close:hover{
 85 |   cursor: pointer;
 86 |   background-color: #d1d1d1;
 87 |   color: #4b5361;
 88 |   transition: all 0.3s ease;
 89 | }
 90 | 
 91 | 
 92 |  .pure-modal .o-close {
 93 |    width: 100%;
 94 |    height: 100%;
 95 |    position: fixed;
 96 |    left: 0;
 97 |    top: 0;
 98 |    z-index: -100;
 99 |  }
100 | 
101 | .pure-modal input:checked ~ .o-close {
102 |   z-index: 9998;
103 | }
104 | .pure-modal input:checked ~ .pure-modal-overlay{
105 |   transform: scale(1);
106 |   opacity:1;
107 |   z-index: 9997;
108 |   overflow: auto;
109 |   display: flex;
110 |   animation-duration: 0.5s;
111 |   animation-name: fade-in;
112 |   -moz-animation-duration: 0.5s;
113 |   -moz-animation-name: fade-in;
114 |   -webkit-animation-duration: 0.5s;
115 |   -webkit-animation-name: fade-in;
116 | }
117 | .pure-modal input:checked ~ .pure-modal-overlay .pure-modal-wrap {
118 |   transform: translateY(0);
119 |   z-index: 9999;
120 | }
121 | 
122 | /* Responsive Design */
123 | /* Tablet size */
124 | @media (max-width: 800px){
125 |   .pure-modal .pure-modal-wrap {
126 |     width: 80%;
127 |     padding: 20px;
128 |   }
129 | }
130 | 
131 | /* Phone size */
132 | @media (max-width: 500px){
133 |   .pure-modal .pure-modal-wrap {
134 |     width: 90%;
135 |   }
136 | }
137 | 
138 | /* Fadein from display:none */
139 | @keyframes fade-in {
140 |   0% {
141 |     display: none;
142 |     opacity: 0;
143 |   }
144 |   1% {
145 |     display: flex;
146 |     opacity: 0;
147 |   }
148 |   100% {
149 |     display: flex;
150 |     opacity: 1;
151 |   }
152 | }
153 | 
154 | @-moz-keyframes fade-in {
155 |   0% {
156 |     display: none;
157 |     opacity: 0;
158 |   }
159 |   1% {
160 |     display: flex;
161 |     opacity: 0;
162 |   }
163 |   100% {
164 |     display: flex;
165 |     opacity: 1;
166 |   }
167 | }
168 | 
169 | @-webkit-keyframes fade-in {
170 |   0% {
171 |     display: none;
172 |     opacity: 0;
173 |   }
174 |   1% {
175 |     display: flex;
176 |     opacity: 0;
177 |   }
178 |   100% {
179 |     display: flex;
180 |     opacity: 1;
181 |   }
182 | }
183 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Author: Jorge Chavez
 3 | Licence: MIT
 4 | */
 5 | body{
 6 |   font-family: 'Helvetica';
 7 |   background-color: #f9f9f9;
 8 | }
 9 | *{
10 |   box-sizing: border-box;
11 | }
12 | .wrap{
13 |   width: 80%;
14 |   margin: 0px auto;
15 |   text-align: center;
16 | }
17 | .wrap h1{
18 |   font-size: 70px;
19 | }
20 | .wrap h1 span{
21 |   color: #F42A54;
22 | }
23 | .contribute {
24 |   position: fixed;
25 |   right: -20px;
26 |   top: 20px;
27 |   width: 16em;
28 |   height: 10em;
29 |   overflow: hidden;
30 |   transform: rotate(45deg);
31 | }
32 | .contribute p {
33 |   padding: 3px;
34 |   background-color: #444444;
35 | }
36 | .contribute p a {
37 |   border-top: 1px dashed white;
38 |   border-bottom: 1px dashed white;
39 |   display: block;
40 |   color: white;
41 |   text-decoration: none;
42 |   padding: 2px 0px;
43 | }
44 | 
45 | .open-modal {
46 |   background-color: #3C3C3C;
47 |   border-radius: 2px;
48 |   box-shadow: 2px 2px 0 #F42A54;
49 |   color: white;
50 |   font-size: 20px;
51 |   padding: 10px;
52 |   transition: all 0.2s ease;
53 |   display: inline-block;
54 |   margin: 10px;
55 |   border-top: 1px solid transparent;
56 |   min-width: 150px;
57 | }
58 | 
59 | .open-modal:hover {
60 |   cursor: pointer;
61 |   background-color: #E7E7E7;
62 |   color: #3C3C3C;
63 |   border-top: 1px solid #eEeeee;
64 |   box-shadow: 0.2px 0.2px 2px #F42A54;
65 | }
66 | 
67 | @media (max-width: 500px){
68 |   .wrap {
69 |     width: 100%;
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Pure CSS modal</title>
  6 |     <meta name="viewport" content="width=device-width,initial-scale=1">
  7 |     <link rel="stylesheet" href="css/styles.css">
  8 |     <link rel="stylesheet" href="css/modal.css">
  9 |     <script>
 10 |       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 11 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 12 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 13 |       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 14 | 
 15 |       ga('create', 'UA-71771176-1', 'auto');
 16 |       ga('send', 'pageview');
 17 | 
 18 |     </script>
 19 |   </head>
 20 |   <body>
 21 |     <div class="wrap">
 22 |       <h1>Pure <span>CSS</span> Modal</h1>
 23 | 
 24 |       <!-- Normal modal -->
 25 |       <div class="pure-modal">
 26 |         <input id="modal-trigger" class="checkbox" type="checkbox">
 27 |         <div class="pure-modal-overlay">
 28 |           <label for="modal-trigger" class="o-close"></label>
 29 |           <div class="pure-modal-wrap">
 30 |             <label for="modal-trigger" class="close">&#10006;</label>
 31 |             <h2>This is the modal content</h2>
 32 |             <p>
 33 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
 34 |             </p>
 35 |           </div>
 36 |         </div>
 37 |       </div>
 38 |       <!-- End Modal -->
 39 | 
 40 |       <!-- Top modal -->
 41 |       <div class="pure-modal">
 42 |         <input id="modal-trigger-top" class="checkbox" type="checkbox">
 43 |         <div class="pure-modal-overlay">
 44 |           <label for="modal-trigger-top" class="o-close"></label>
 45 |           <div class="pure-modal-wrap from-top">
 46 |             <label for="modal-trigger-top" class="close">&#10006;</label>
 47 |             <h2>This is the modal content</h2>
 48 |             <p>
 49 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
 50 |             </p>
 51 |           </div>
 52 |         </div>
 53 |       </div>
 54 |       <!-- End Modal -->
 55 | 
 56 |       <!-- Bottom modal -->
 57 |       <div class="pure-modal">
 58 |         <input id="modal-trigger-bottom" class="checkbox" type="checkbox">
 59 |         <div class="pure-modal-overlay">
 60 |           <label for="modal-trigger-bottom" class="o-close"></label>
 61 |           <div class="pure-modal-wrap from-bottom">
 62 |             <label for="modal-trigger-bottom" class="close">&#10006;</label>
 63 |             <h2>This is the modal content</h2>
 64 |             <p>
 65 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
 66 |             </p>
 67 |           </div>
 68 |         </div>
 69 |       </div>
 70 |       <!-- End Modal -->
 71 | 
 72 |       <!-- Left modal -->
 73 |       <div class="pure-modal">
 74 |         <input id="modal-trigger-left" class="checkbox" type="checkbox">
 75 |         <div class="pure-modal-overlay">
 76 |           <label for="modal-trigger-left" class="o-close"></label>
 77 |           <div class="pure-modal-wrap from-left">
 78 |             <label for="modal-trigger-left" class="close">&#10006;</label>
 79 |             <h2>This is the modal content</h2>
 80 |             <p>
 81 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
 82 |             </p>
 83 |           </div>
 84 |         </div>
 85 |       </div>
 86 |       <!-- End Modal -->
 87 | 
 88 |       <!-- Right modal -->
 89 |       <div class="pure-modal">
 90 |         <input id="modal-trigger-right" class="checkbox" type="checkbox">
 91 |         <div class="pure-modal-overlay">
 92 |           <label for="modal-trigger-right" class="o-close"></label>
 93 |           <div class="pure-modal-wrap from-right">
 94 |             <label for="modal-trigger-right" class="close">&#10006;</label>
 95 |             <h2>This is the modal content</h2>
 96 |             <p>
 97 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
 98 |             </p>
 99 |           </div>
100 |         </div>
101 |       </div>
102 |       <!-- End Modal -->
103 | 
104 |       <!-- Center modal -->
105 |       <div class="pure-modal">
106 |         <input id="modal-trigger-center" class="checkbox" type="checkbox">
107 |         <div class="pure-modal-overlay">
108 |           <label for="modal-trigger-center" class="o-close"></label>
109 |           <div class="pure-modal-wrap a-center">
110 |             <label for="modal-trigger-center" class="close">&#10006;</label>
111 |             <h2>This is the modal content</h2>
112 |             <p>
113 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
114 |             </p>
115 |           </div>
116 |         </div>
117 |       </div>
118 |       <!-- End Modal -->
119 | 
120 |       <!-- Center modal -->
121 |       <div class="pure-modal">
122 |         <input id="modal-trigger-mix" class="checkbox" type="checkbox">
123 |         <div class="pure-modal-overlay">
124 |           <label for="modal-trigger-mix" class="o-close"></label>
125 |           <div class="pure-modal-wrap a-center from-bottom">
126 |             <label for="modal-trigger-mix" class="close">&#10006;</label>
127 |             <h2>This is the modal content</h2>
128 |             <p>
129 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
130 |             </p>
131 |           </div>
132 |         </div>
133 |       </div>
134 |       <!-- End Modal -->
135 | 
136 |       <!-- Full modal -->
137 |       <div class="pure-modal">
138 |         <input id="modal-trigger-full" class="checkbox" type="checkbox">
139 |         <div class="pure-modal-overlay">
140 |           <label for="modal-trigger-full" class="o-close"></label>
141 |           <div class="pure-modal-wrap a-center full from-bottom">
142 |             <label for="modal-trigger-full" class="close">&#10006;</label>
143 |             <h2>This is the modal content</h2>
144 |             <p>
145 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
146 |             </p>
147 |           </div>
148 |         </div>
149 |       </div>
150 |       <!-- End Modal -->
151 | 
152 |       <!-- Small modal -->
153 |       <div class="pure-modal">
154 |         <input id="modal-trigger-small" class="checkbox" type="checkbox">
155 |         <div class="pure-modal-overlay">
156 |           <label for="modal-trigger-small" class="o-close"></label>
157 |           <div class="pure-modal-wrap a-center small from-bottom">
158 |             <label for="modal-trigger-small" class="close">&#10006;</label>
159 |             <h2>This is the modal content</h2>
160 |             <p>
161 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
162 |             </p>
163 |           </div>
164 |         </div>
165 |       </div>
166 |       <!-- End Modal -->
167 | 
168 | 
169 |       <!-- This label launch the modal -->
170 |       <label for="modal-trigger" class="open-modal">Normal</label>
171 |       <label for="modal-trigger-top" class="open-modal">Top</label>
172 |       <label for="modal-trigger-bottom" class="open-modal">Bottom</label>
173 |       <label for="modal-trigger-left" class="open-modal">Left</label>
174 |       <label for="modal-trigger-right" class="open-modal">Right</label>
175 |       <label for="modal-trigger-center" class="open-modal">Center</label>
176 |       <label for="modal-trigger-mix" class="open-modal">Mix</label>
177 |       <label for="modal-trigger-full" class="open-modal">Full</label>
178 |       <label for="modal-trigger-small" class="open-modal">Small</label>
179 | 
180 |       <p>
181 |         Click the button to open the modal
182 |       </p>
183 | 
184 |       <div class="contribute">
185 |         <p>
186 |           <a href="https://github.com/jorgechavz/pure-css-modal">Contribute</a>
187 |         </p>
188 |       </div>
189 |       <!-- Place this tag where you want the button to render. -->
190 |       <a class="github-button" href="https://github.com/jorgechavz/pure-css-modal" data-icon="octicon-star" data-style="mega" data-count-href="/jorgechavz/pure-css-modal/stargazers" data-count-api="/repos/jorgechavz/pure-css-modal#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star jorgechavz/pure-css-modal on GitHub">Star</a>
191 |     </div>
192 |     <!-- Place this tag right after the last button or just before your close body tag. -->
193 |     <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
194 |   </body>
195 | </html>
196 | 


--------------------------------------------------------------------------------