├── README.md
├── js
    └── index.js
├── css
    └── style.css
├── scss
    └── style.scss
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # about-demo
2 | demo for the next achievibit about page
3 | 


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | // link to scroll position
2 | setInterval(() => $('.kb-logo#logo').toggleClass('full-logo'), 4000);
3 | 
4 | // new ScrollMagic.Controller();


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 |   font-size: 14px;
  4 | }
  5 | 
  6 | body {
  7 |   font-family: 'Comfortaa', cursive;
  8 | }
  9 | 
 10 | .column h1 {
 11 |   font-family: BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
 12 |   margin-top: 0.3em;
 13 | }
 14 | 
 15 | *, *:before, *:after {
 16 |   box-sizing: inherit;
 17 | }
 18 | 
 19 | .tech-stack .column {
 20 |   display: flex;
 21 |   flex-direction: column;
 22 |   align-items: center;
 23 |   margin: 0.1em;
 24 |   text-align: center;
 25 | }
 26 | .tech-stack .column i {
 27 |   font-size: 4rem;
 28 |   margin-bottom: 0.1em;
 29 | }
 30 | .tech-stack .column svg {
 31 |   height: 3.7em;
 32 | }
 33 | .tech-stack .column p {
 34 |   padding: 0 0.5em;
 35 | }
 36 | 
 37 | .kb-spacer {
 38 |   margin-bottom: 2rem;
 39 | }
 40 | 
 41 | .kb-stack-section {
 42 |   font-size: 2rem;
 43 |   padding: 0 0.5em 0.5em;
 44 |   font-weight: 700;
 45 | }
 46 | 
 47 | .greenkeeper {
 48 |   fill: #00c775;
 49 | }
 50 | 
 51 | .ach,
 52 | .lodash,
 53 | .devicon-github-plain-wordmark.colored {
 54 |   fill: currentColor;
 55 |   color: currentColor;
 56 | }
 57 | 
 58 | .is-128x173 {
 59 |   width: 128px;
 60 |   height: 173px;
 61 | }
 62 | 
 63 | .kb-card-social {
 64 |   font-size: 2em;
 65 |   width: 1.3em;
 66 |   height: 1.3em;
 67 |   display: flex;
 68 |   align-items: center;
 69 |   justify-content: center;
 70 | }
 71 | .kb-card-social svg {
 72 |   width: 95%;
 73 |   height: 95%;
 74 |   fill: currentColor;
 75 | }
 76 | .kb-card-social svg.dribble {
 77 |   width: 75%;
 78 |   height: 75%;
 79 | }
 80 | 
 81 | .kb-kibibit {
 82 |   font-family: 'Righteous', cursive;
 83 |   letter-spacing: 0.1em;
 84 | }
 85 | 
 86 | .kb-contributor {
 87 |   display: inline-flex;
 88 |   flex-direction: column;
 89 |   align-items: center;
 90 |   padding: 0.5rem;
 91 | }
 92 | .kb-contributor img {
 93 |   margin-bottom: 0.5rem;
 94 |   width: 3rem;
 95 |   height: 3rem;
 96 | }
 97 | 
 98 | .kb-achievment-banner {
 99 |   align-items: center;
100 |   text-align: center;
101 |   width: 50%;
102 |   margin: 9em auto 0;
103 | }
104 | 
105 | .kb-achievement {
106 |   display: flex;
107 |   flex-direction: column;
108 |   align-items: center;
109 |   margin-top: -8em;
110 | }
111 | .kb-achievement svg {
112 |   transform: translate3d(-0.4em, 0.6em, 0);
113 |   width: 6em;
114 |   margin-bottom: 0.5em;
115 |   fill: white;
116 | }
117 | .kb-achievement .kb-achievement-name {
118 |   font-size: 0.8em;
119 |   position: relative;
120 |   z-index: 3;
121 |   color: white;
122 |   margin: 0 2em 1.2em;
123 | }
124 | .kb-achievement .kb-achievement-name .text {
125 |   padding: 0.5em;
126 |   position: relative;
127 |   z-index: 3;
128 | }
129 | .kb-achievement .kb-achievement-name .extra {
130 |   position: absolute;
131 |   width: 1em;
132 |   bottom: -0.6em;
133 |   z-index: 1;
134 |   border: 1em solid #3273dc;
135 | }
136 | .kb-achievement .kb-achievement-name .extra.left {
137 |   border-left-color: transparent;
138 |   transform: translateX(-100%);
139 |   left: 0.6em;
140 | }
141 | .kb-achievement .kb-achievement-name .extra.right {
142 |   border-right-color: transparent;
143 |   transform: translateX(100%);
144 |   right: 0.6em;
145 | }
146 | .kb-achievement .kb-achievement-name .shadow {
147 |   position: absolute;
148 |   bottom: 0;
149 |   z-index: 2;
150 |   border: 0.6em solid transparent;
151 | }
152 | .kb-achievement .kb-achievement-name .shadow.left {
153 |   border-right-color: #043140;
154 |   transform: translate3d(-50%, 50%, 0);
155 |   left: 0;
156 | }
157 | .kb-achievement .kb-achievement-name .shadow.right {
158 |   border-left-color: #043140;
159 |   transform: translate3d(50%, 50%, 0);
160 |   right: 0;
161 | }
162 | 
163 | .kb-white {
164 |   fill: white;
165 |   color: white;
166 | }
167 | 
168 | .axe {
169 |   fill: #ffdd57;
170 | }
171 | 
172 | .kb-logo-move {
173 |   transform: translate3d(-10%, 0, 0);
174 | }
175 | 
176 | .kb-achievibit-name {
177 |   font-family: 'Press Start 2P', cursive !important;
178 |   font-size: 1em !important;
179 | }
180 | 


--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 |   font-size: 14px;
  4 | }
  5 | 
  6 | body {
  7 |   font-family: 'Comfortaa', cursive;
  8 | }
  9 | 
 10 | .column h1 {
 11 |   font-family: BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
 12 |   margin-top: 0.3em;
 13 | }
 14 | 
 15 | *, *:before, *:after {
 16 |   box-sizing: inherit;
 17 | }
 18 | 
 19 | .tech-stack .column {
 20 |   display: flex;
 21 |   flex-direction: column;
 22 |   align-items: center;
 23 |   // justify-content: center;
 24 |   // background: rgba(0, 0, 0, 0.2);
 25 |   margin: 0.1em;
 26 |   text-align: center;
 27 | 
 28 |   i {
 29 |     font-size: 4rem;
 30 |     margin-bottom: 0.1em;
 31 |   }
 32 | 
 33 |   svg {
 34 |     height: 3.7em;
 35 |   }
 36 | 
 37 |   p {
 38 |     padding: 0 0.5em;
 39 |   }
 40 | }
 41 | 
 42 | .kb-spacer {
 43 |   margin-bottom: 2rem;
 44 | }
 45 | 
 46 | .kb-stack-section {
 47 |   font-size: 2rem;
 48 |   padding: 0 0.5em 0.5em;
 49 |   font-weight: 700;
 50 | }
 51 | 
 52 | .greenkeeper {
 53 |   fill: #00c775;
 54 | }
 55 | 
 56 | .ach,
 57 | .lodash,
 58 | .devicon-github-plain-wordmark.colored {
 59 |   fill: currentColor;
 60 |   color: currentColor;
 61 | }
 62 | 
 63 | .is-128x173 {
 64 |   width: 128px;
 65 |   height: 173px;
 66 | }
 67 | 
 68 | .kb-card-social {
 69 |   font-size: 2em;
 70 |   width: 1.3em;
 71 |   height: 1.3em;
 72 |   display: flex;
 73 |   align-items: center;
 74 |   justify-content: center;
 75 | 
 76 |   svg {
 77 |     width: 95%;
 78 |     height: 95%;
 79 |     fill: currentColor;
 80 | 
 81 |     &.dribble {
 82 |       width: 75%;
 83 |       height: 75%;
 84 |     }
 85 |   }
 86 | }
 87 | 
 88 | .kb-kibibit {
 89 |   font-family: 'Righteous', cursive;
 90 |   letter-spacing: 0.1em;
 91 | }
 92 | 
 93 | .kb-contributor {
 94 |   display: inline-flex;
 95 |   flex-direction: column;
 96 |   align-items: center;
 97 |   padding: 0.5rem;
 98 | 
 99 |   img {
100 |     margin-bottom: 0.5rem;
101 |     width: 3rem;
102 |     height: 3rem;
103 |   }
104 | }
105 | 
106 | .kb-achievment-banner {
107 |   align-items: center;
108 |   text-align: center;
109 |   // background: transparent !important;
110 |   // color: white !important;
111 |   width: 50%;
112 |   margin: 9em auto 0;
113 | }
114 | 
115 | .kb-achievement {
116 |   display: flex;
117 |   flex-direction: column;
118 |   align-items: center;
119 |   margin-top: -8em;
120 | 
121 |   svg {
122 |     transform: translate3d(-0.4em, 0.6em, 0);
123 |     width: 6em;
124 |     margin-bottom: 0.5em;
125 |     fill: white;
126 |   }
127 | 
128 |   .kb-achievement-name {
129 |     font-size: 0.8em;
130 |     position: relative;
131 |     z-index: 3;
132 |     color: white;
133 |     margin: 0 2em 1.2em;
134 | 
135 |     .text {
136 |       padding: 0.5em;
137 |       position: relative;
138 |       z-index: 3;
139 |     }
140 | 
141 |     .extra {
142 |       position: absolute;
143 |       width: 1em;
144 |       bottom: -0.6em;
145 |       z-index: 1;
146 |       border: 1em solid hsl(217, 71%, 53%);
147 | 
148 |       &.left {
149 |         border-left-color: transparent;
150 |         transform: translateX(-100%);
151 |         left: 0.6em;
152 |       }
153 | 
154 |       &.right {
155 |         border-right-color: transparent;
156 |         transform: translateX(100%);
157 |         right: 0.6em;
158 |       }
159 |     }
160 | 
161 |     .shadow {
162 |       position: absolute;
163 |       bottom: 0;
164 |       z-index: 2;
165 |       border: 0.6em solid transparent;
166 | 
167 |       &.left {
168 |         border-right-color: #043140;
169 |         transform: translate3d(-50%, 50%, 0);
170 |         left: 0;
171 |       }
172 | 
173 |       &.right {
174 |         border-left-color: #043140;
175 |         transform: translate3d(50%, 50%, 0);
176 |         right: 0;
177 |       }
178 |     }
179 |   }
180 | }
181 | 
182 | .kb-white {
183 |   fill: white;
184 |   color: white;
185 | }
186 | 
187 | .axe {
188 |   fill: hsl(48, 100%, 67%);
189 | }
190 | 
191 | .kb-logo-move {
192 |   transform: translate3d(-10%, 0, 0);
193 | }
194 | 
195 | .kb-achievibit-name {
196 |   font-family: 'Press Start 2P', cursive !important;
197 |   font-size: 1em !important;
198 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" >
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>achievibit technology stack page</title>
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |   
  9 |   <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Fredoka+One|Righteous|Comfortaa|Press+Start+2P'>
 10 | <link rel='stylesheet' href='https://unpkg.com/bulmaswatch/cyborg/bulmaswatch.min.css'>
 11 | <link rel='stylesheet' href='https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css'>
 12 | <link rel='stylesheet' href='https://cdn.rawgit.com/Kibibit/kibibit-logo/26c6fa0d/kb-logo.css'>
 13 | 
 14 |       <link rel="stylesheet" href="css/style.css">
 15 | 
 16 |   
 17 | </head>
 18 | 
 19 | <body>
 20 | 
 21 |   <section class="hero is-warning kb-spacer">
 22 |   <div class="hero-body">
 23 |     <div class="container">
 24 |       <h1 class="title">
 25 |         Meet the team
 26 |       </h1>
 27 |       <h2 class="subtitle">
 28 |         Well... let's hope this first impression won't be awkward
 29 |       </h2>
 30 |     </div>
 31 |   </div>
 32 | </section>
 33 | <div class="container kb-spacer">
 34 |   <!--     <div class="kb-stack-section">Server-Side</div> -->
 35 |   <div class="box">
 36 |     <article class="media">
 37 |       <div class="media-left">
 38 |         <figure class="image is-128x173">
 39 |           <img src="https://i.pinimg.com/564x/e4/22/62/e4226242c0b6251eaaf2d97ddf85c9ef.jpg" alt="Image">
 40 |         </figure>
 41 |         <nav class="level is-mobile">
 42 |           <div class="level-left">
 43 |           </div>
 44 |           <div class="level-right">
 45 |             <a class="level-item" aria-label="reply">
 46 |               <span class="kb-card-social has-text-warning">
 47 |                 <i class="devicon-github-plain"></i>
 48 |               </span>
 49 |             </a>
 50 |             <a class="level-item" aria-label="retweet">
 51 |               <span class="kb-card-social has-text-warning">
 52 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/><path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/></svg>
 53 |               </span>
 54 |             </a>
 55 |           </div>
 56 |         </nav>
 57 |       </div>
 58 |       <div class="media-content">
 59 |         <div class="content">
 60 |           <p>
 61 |             <strong>Neil Kalman</strong> <small>@thatkookooguy</small>
 62 |             <br>
 63 |             <small class="has-text-warning">Manager & Lead Software Engineer </small>
 64 |             <br>
 65 |           </p>
 66 |           <ul>
 67 |             <li>In charge of company development culture (contribution guidelines and flow), integrating tools in our build system and GitHub development to make code maintainable, testable, and improve development speed</li>
 68 |             <li>Product Manager</li>
 69 |             <li>Full-stack Developer</li>
 70 |             <li>Development Leader & Architect</li>
 71 |           </ul>
 72 |         </div>
 73 |       </div>
 74 |     </article>
 75 |   </div>
 76 |   <div class="box">
 77 |     <article class="media">
 78 |       <div class="media-left">
 79 |         <figure class="image is-128x173">
 80 |           <img src="https://i.pinimg.com/564x/1f/aa/51/1faa51b3e78d314d3af680a5908b5826.jpg" alt="Image">
 81 |         </figure>
 82 |         <nav class="level is-mobile">
 83 |           <div class="level-left">
 84 |           </div>
 85 |           <div class="level-right">
 86 |             <a class="level-item" aria-label="reply">
 87 |               <span class="kb-card-social has-text-warning">
 88 |                 <i class="devicon-github-plain"></i>
 89 |               </span>
 90 |             </a>
 91 |             <a class="level-item" aria-label="retweet">
 92 |               <span class="kb-card-social has-text-warning">
 93 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/><path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/></svg>
 94 |               </span>
 95 |             </a>
 96 |           </div>
 97 |         </nav>
 98 |       </div>
 99 |       <div class="media-content">
100 |         <div class="content">
101 |           <p>
102 |             <strong>Or Tichon</strong> <small>@ortichon</small>
103 |             <br>
104 |             <small class="has-text-warning">Senior Software Engineer</small>
105 |           </p>
106 |           <ul>
107 |             <li>
108 |               Designing complex file viewers for common web development files (fonts, jsons, images, and more)
109 |             </li>
110 |             <li>
111 |               Creating theme-able scss styles with css animations and transitions
112 |             </li>
113 |             <li>
114 |               Writing public code on GitHub, using best practices, creating readable, reliable code
115 |             </li>
116 |             <li>
117 |               Writing reusable code and libraries for future use
118 |             </li>
119 |             <li>
120 |               Collaborating with co-workers to establish backend conventions, principles, and patterns
121 |             </li>
122 |           </ul>
123 |         </div>
124 |       </div>
125 |     </article>
126 |   </div>
127 |   <div class="box">
128 |     <article class="media">
129 |       <div class="media-left">
130 |         <figure class="image is-128x173">
131 |           <img src="https://i.pinimg.com/564x/7b/d4/55/7bd455cbbd3d29033f8d1fd77dd0c59a.jpg" alt="Image">
132 |         </figure>
133 |         <nav class="level is-mobile">
134 |           <div class="level-left">
135 |           </div>
136 |           <div class="level-right">
137 |             <a class="level-item" aria-label="reply">
138 |               <span class="kb-card-social has-text-warning">
139 |                 <i class="devicon-github-plain"></i>
140 |               </span>
141 |             </a>
142 |             <a class="level-item" aria-label="retweet">
143 |               <span class="kb-card-social has-text-warning">
144 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/><path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/></svg>
145 |               </span>
146 |             </a>
147 |           </div>
148 |         </nav>
149 |       </div>
150 |       <div class="media-content">
151 |         <div class="content">
152 |           <p>
153 |             <strong>Michael Dunaevsky</strong> <small>@dunaevsky</small>
154 |             <br>
155 |             <small class="has-text-warning">Back-End Developer</small>
156 |           </p>
157 |           <ul>
158 |             <li>
159 |               Designing the life cycle of achievibit app MongoDB, including sizing, automation, monitoring and tuning.
160 |             </li>
161 |             <li>
162 |               Writing public code on GitHub, using best practices, creating readable, reliable code
163 |             </li>
164 |             <li>
165 |               Writing reusable code and libraries for future use
166 |             </li>
167 |             <li>
168 |               Collaborating with co-workers to establish backend conventions, principles, and patterns
169 |             </li>
170 |           </ul>
171 |         </div>
172 |       </div>
173 |     </article>
174 |   </div>
175 |   <div class="box">
176 |     <article class="media">
177 |       <div class="media-left">
178 |         <figure class="image is-128x173">
179 |           <img src="http://www.blog.vixels.net/portraits/mar_web.jpg" alt="Image">
180 |         </figure>
181 |         <nav class="level is-mobile">
182 |           <div class="level-left">
183 |           </div>
184 |           <div class="level-right">
185 |             <a class="level-item" aria-label="reply">
186 |               <span class="kb-card-social has-text-warning">
187 |                 <i class="devicon-github-plain"></i>
188 |               </span>
189 |             </a>
190 |             <a class="level-item" aria-label="retweet">
191 |               <span class="kb-card-social has-text-warning">
192 |                 <svg class="dribble" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M50 0C22.397 0 0 22.397 0 50C0 77.603 22.397 100 50 100C77.5488 100 100 77.603 100 50C100 22.397 77.5488 0 50 0ZM83.026 23.0477C88.9913 30.3145 92.5705 39.5879 92.679 49.6204C91.269 49.3492 77.1692 46.4751 62.961 48.2646C62.6356 47.5597 62.3644 46.8004 62.0391 46.0412C61.1714 43.9805 60.1952 41.8655 59.2191 39.859C74.9458 33.4599 82.1041 24.2408 83.026 23.0477ZM50 7.37527C60.846 7.37527 70.7701 11.4425 78.308 18.1128C77.5488 19.1974 71.0954 27.82 55.9111 33.5141C48.9154 20.6616 41.1605 10.141 39.9675 8.5141C43.167 7.75488 46.5293 7.37527 50 7.37527ZM31.833 11.3883C32.9718 12.9067 40.564 23.4816 47.6681 36.0629C27.7115 41.3774 10.0868 41.269 8.18872 41.269C10.9544 28.0369 19.9024 17.0282 31.833 11.3883ZM7.26681 50.0542C7.26681 49.6204 7.26681 49.1866 7.26681 48.7527C9.11063 48.8069 29.8265 49.0781 51.1388 42.679C52.3861 45.0651 53.5249 47.5054 54.6095 49.9458C54.0672 50.1085 53.4707 50.2712 52.9284 50.4338C30.9111 57.538 19.1974 76.9523 18.2213 78.5792C11.4425 71.0412 7.26681 61.0087 7.26681 50.0542ZM50 92.7332C40.1302 92.7332 31.0195 89.3709 23.8069 83.731C24.5662 82.1584 33.243 65.4555 57.321 57.0499C57.4295 56.9957 57.4837 56.9957 57.5922 56.9414C63.6117 72.5054 66.0521 85.5748 66.7028 89.3167C61.551 91.5401 55.9111 92.7332 50 92.7332ZM73.807 85.4122C73.3731 82.8091 71.0955 70.3362 65.5098 54.9892C78.9046 52.8742 90.6182 56.3449 92.0824 56.833C90.2386 68.7093 83.4056 78.9588 73.807 85.4122Z"/></svg>
193 |               </span>
194 |             </a>
195 |           </div>
196 |         </nav>
197 |       </div>
198 |       <div class="media-content">
199 |         <div class="content">
200 |           <p>
201 |             <strong>MISSING DESIGNER</strong> <small>@???</small>
202 |             <br>
203 |             <small class="has-text-warning">Designer and Pixel Artist</small>
204 |           </p>
205 |           <p>WE ARE LOOKING FOR A PIXEL ARTIST!!!!</p>
206 |         </div>
207 |       </div>
208 |     </article>
209 |   </div>
210 | </div>
211 | <section class="hero is-warning kb-spacer">
212 |   <div class="hero-body">
213 |     <div class="container">
214 |       <h1 class="title">
215 |         Contributors
216 |       </h1>
217 |       <h2 class="subtitle">
218 |         These people contributed to achievibit in their own free time. Thank you!
219 |       </h2>
220 |     </div>
221 |   </div>
222 | </section>
223 | <div class="container kb-spacer">
224 |   <div class="kb-contributor">
225 |     <img src="https://github.com/DanielRuf.png">
226 |     <div class="username">DanielRuf</div>
227 |   </div>
228 |   <div class="kb-contributor">
229 |     <img src="https://github.com/greenkeeper.png">
230 |     <div class="username">greenkeeper[bot]</div>
231 |   </div>
232 |   <div class="kb-contributor">
233 |     <img src="https://github.com/DanielRuf.png">
234 |     <div class="username">DanielRuf</div>
235 |   </div>
236 |   <div class="notification is-warning kb-achievment-banner">
237 |     <div class="kb-achievement">
238 |       <svg class="kb-white" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 231 223">
239 |         <path class="axe" d="M51 62l-6-4c2-2 3-5 6-6l17-5c4-1 6-2 8-6l11-18C65 5 39-1 13 0l5 32c2 13-6 24-11 35l-2 4-1 7h1l-5 8c10 7 21 11 31 16l1-1c4-9 4-9 13-5l4 1c18 1 33 8 47 18l14-20-22-16c-11-7-25-11-37-17zM230 169l-2-9c-1-3-3-4-6-4-19 3-35-5-50-16l-6-4-3 2v1l-11 8h-3l-7-7h-1l-11-6c-3-1-1-3-1-3l2-2 2-2v-1h-4c-4 1-8 2-12 0v1l8 3-8-3 6 4 1 1a7261 7261 0 0 0 20 17l13 9c8 6 18 11 27 15l32 15c6 2 7 2 11-3s5-10 3-16zm-21 3v-5h5l2 6-7-1z"/>
240 |         <g class="fist">
241 |           <path d="M133 130c-1 1-1 2 1 3a380 380 0 0 0 8 4l2-1 14-16 1-2v-2l-6-7h-3l-5 6-12 15zM169 127l-5-6-2-1-1 1-15 17v2l4 4h2l17-14v-3zM115 102l8 3 3 1 1-1 1-2 5-7v-3l-7-6-2-1-2 1-8 11v1c-1 1-1 2 1 3zM130 108l5 3 2 3v6l1-1 9-12v-2l-8-8h-4l-6 10 1 1z"/>
242 |           <path d="M152 169l5-8-3-2a262 262 0 0 1-37-29l-5-2-2-1 3-1c2-1 2-1 2-3l-2-4 1-1v1l3 3c2 2 4 2 7 2l7-1c2 0 3-1 3-2l1-5c0-2-1-3-3-3l-21-10c-2-1-2 0-4 1l-16 23v3l1 2 21 32c1 1 2 2 1 4l-3 27-4 24a76 76 0 0 0 47 0l-2-21v-27-2z"/>
243 |         </g>
244 |       </svg>
245 |       <div class="kb-achievement-name has-background-primary">
246 |         <div class="text has-background-primary">achievement unlocked</div>
247 |         <div class="extra left"></div>
248 |         <div class="extra right"></div>
249 |         <div class="left shadow"></div>
250 |         <div class="right shadow"></div>
251 |       </div>
252 |     </div>
253 |     Each contributor got <strong>at least one unique achievement</strong> for contributing to achievibit 
254 |   </div>
255 | </div>
256 | <section class="hero is-warning kb-spacer">
257 |   <div class="hero-body">
258 |     <div class="container">
259 |       <h1 class="title">
260 |         achievibit tech stack
261 |       </h1>
262 |       <h2 class="subtitle">
263 |         These are the technologies we love to use
264 |       </h2>
265 |     </div>
266 |   </div>
267 | </section>
268 | <div class="container kb-spacer">
269 |   <!--   <div class="kb-stack-section">Server-Side</div> -->
270 |   <div class="columns tech-stack">
271 |     <div class="column">
272 |       <svg class="greenkeeper" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path class="symbol" d="M300.93 548.27a51.93 51.93 0 0 1-47.39-73.15L190 432.74a51.82 51.82 0 1 1 9.9-14.74l63.58 42.39a52.08 52.08 0 0 1 6.29-5.57L167.84 251a52 52 0 1 1 15.83-8.08L285.6 446.74a51.59 51.59 0 0 1 5.52-1.38v-97.17a51.92 51.92 0 0 1 0-102v-91.56a51.94 51.94 0 1 1 17.77.32v91a51.91 51.91 0 0 1 0 102.6V445a51.83 51.83 0 0 1 5.75 1.22l101.69-203.34a51.83 51.83 0 1 1 15.83 8.12L330.73 453.83a52.07 52.07 0 0 1 6.59 5.49l61.56-41.82a52 52 0 1 1 10.36 14.44l-61.56 41.82a51.92 51.92 0 0 1-46.75 74.51z"></path><path class="ring" d="M300 582.47a282.47 282.47 0 0 1-199.74-482.21 282.47 282.47 0 1 1 399.48 399.48A280.62 280.62 0 0 1 300 582.47zm0-547.17a264.7 264.7 0 0 0-187.17 451.87 264.7 264.7 0 1 0 374.34-374.34A263 263 0 0 0 300 35.3z"></path></svg>
273 |       <div class="content">
274 |         <h1>Greenkeeper</h1>
275 |         <p>Get safety and consistency with real-time monitoring and automatic updates for npm dependencies</p>
276 |       </div>
277 |     </div>
278 |     <div class="column">
279 |       <svg class="lodash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" width="316.227766017" height="316.227766017"><path d="M70 188.5h220v1460h870v180H70v-1640zm1776 396c-225-3-450 140-520 357-100 250-54 564 142 755 190 158 476 170 690 58 147-78 240-233 260-396 26-170 13-356-70-510-98-164-290-270-480-263l-22-3zm20 174c165 0 313 126 340 288 50 183 20 407-130 536-140 114-365 98-480-43-140-150-140-380-68-560 50-130 183-223 323-220h18z"/><path d="M70 2061.5h2360v250H70v-250z" fill="#3492ff"/></svg>
280 |       <div class="content">
281 |         <h1>Lodash</h1>
282 |         <p>
283 |           Lodash is a toolkit of Javascript functions that provides clean, performant methods for manipulating objects and collections
284 |         </p>
285 |       </div>
286 |     </div>
287 |     <div class="column">
288 |       <svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 546 607">
289 |         <style>
290 |           .st3{fill:#99425b}.st4{fill:#99435c}
291 |         </style>
292 |         <g id="Layer_1">
293 |           <path fill="#fefdfd" d="M174 0h372l-1 5-57 171-16 47 2 1c41 14 63 62 43 104l1 5a119 119 0 0 1-14 134c-22 25-51 36-82 42l-53 9c-25 4-49 14-73 26l-75 36c-20 10-33 15-51 20-16 5-32 7-48 7-18 0-30-3-39-7l-6-3c-35-15-60-40-71-77-9-34-7-67 2-100 7-24 17-46 28-68 2-4 2-6 0-9a72 72 0 0 1-16-45c-1-45 40-82 85-75a75 75 0 0 1 21 141c-2 1-5 4-5 6-9 21-3 43 14 58 3 2 5 2 7 1 28-13 51-31 71-54l16-20a76 76 0 0 1 19-131l-1-4c-21-75-46-149-73-220zM72 369l-18 41c-11 27-16 56-12 86 8 52 56 76 100 69 17-3 35-9 51-16l87-42c36-18 73-30 113-34 15-2 30-5 45-10 38-12 58-46 53-85l-4-18a74 74 0 0 1-108-49h-31c-3 0-4 2-4 4-9 32-38 54-71 54-4 0-6 2-9 5-31 47-72 81-126 99h-5a97 97 0 0 1-49-48c-8-18-10-36-6-55l-6-1zm219-146l69-143 70 143 62-187H228l63 187zm69-51l-33 68c-1 1 0 3 1 5 4 8 10 15 14 24 1 2 2 3 5 3h30c3 0 4-1 5-4l11-20c2-2 2-4 1-7l-25-50-9-19zm-53 123c0-19-15-35-34-35-18 0-34 16-34 35 1 19 16 35 34 35 19 0 34-16 34-35zm-247 2c0 19 15 35 33 35 19 0 34-16 34-35s-15-35-33-35c-19 0-34 16-34 35zm391-36c-19 0-34 15-34 34s15 34 34 34 33-15 33-34-14-34-33-34z"/>
294 |           <path d="M72 369l6 1c-4 19-2 37 6 55 10 22 27 38 49 49l6-1c53-18 94-52 126-98 2-4 4-5 9-5 33-1 61-22 70-54 1-3 1-4 4-4h31a74 74 0 0 0 108 49c2 6 4 11 4 17 6 40-14 73-53 85-14 5-29 8-45 10-40 5-77 16-113 34l-86 42c-17 7-34 13-52 16-43 7-92-17-100-69-4-30 1-58 12-86l18-41zM291 223L228 36h264l-62 187-70-143-69 143z" class="st3"/>
295 |           <path d="M307 295c0 19-15 35-34 35-18 0-33-16-33-35-1-19 15-35 33-35 19 1 34 16 34 35zM60 297c0-19 15-35 34-35 18 0 33 16 33 35s-15 35-34 35c-18 0-33-16-33-35z" class="st4"/>
296 |           <path fill="#99435b" d="M451 261c19 0 33 15 33 34s-14 34-33 34-34-15-34-34 15-34 34-34z"/>
297 |         </g>
298 |       </svg>
299 |       <div class="content">
300 |         <h1>Jest</h1>
301 |         <p>We love jest so much, we even converted our angular tests to use jest. It's faster and works great with our eco-system.</p>
302 |       </div>
303 |     </div>
304 |     <div class="column">
305 |       <svg class="kb-logo-move kb-white" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 231 223">
306 |         <path class="axe" d="M51 62l-6-4c2-2 3-5 6-6l17-5c4-1 6-2 8-6l11-18C65 5 39-1 13 0l5 32c2 13-6 24-11 35l-2 4-1 7h1l-5 8c10 7 21 11 31 16l1-1c4-9 4-9 13-5l4 1c18 1 33 8 47 18l14-20-22-16c-11-7-25-11-37-17zM230 169l-2-9c-1-3-3-4-6-4-19 3-35-5-50-16l-6-4-3 2v1l-11 8h-3l-7-7h-1l-11-6c-3-1-1-3-1-3l2-2 2-2v-1h-4c-4 1-8 2-12 0v1l8 3-8-3 6 4 1 1a7261 7261 0 0 0 20 17l13 9c8 6 18 11 27 15l32 15c6 2 7 2 11-3s5-10 3-16zm-21 3v-5h5l2 6-7-1z"/>
307 |         <g class="fist">
308 |           <path d="M133 130c-1 1-1 2 1 3a380 380 0 0 0 8 4l2-1 14-16 1-2v-2l-6-7h-3l-5 6-12 15zM169 127l-5-6-2-1-1 1-15 17v2l4 4h2l17-14v-3zM115 102l8 3 3 1 1-1 1-2 5-7v-3l-7-6-2-1-2 1-8 11v1c-1 1-1 2 1 3zM130 108l5 3 2 3v6l1-1 9-12v-2l-8-8h-4l-6 10 1 1z"/>
309 |           <path d="M152 169l5-8-3-2a262 262 0 0 1-37-29l-5-2-2-1 3-1c2-1 2-1 2-3l-2-4 1-1v1l3 3c2 2 4 2 7 2l7-1c2 0 3-1 3-2l1-5c0-2-1-3-3-3l-21-10c-2-1-2 0-4 1l-16 23v3l1 2 21 32c1 1 2 2 1 4l-3 27-4 24a76 76 0 0 0 47 0l-2-21v-27-2z"/>
310 |         </g>
311 |       </svg>
312 |       <div class="content">
313 |         <h1>achievibit</h1>
314 |         <p>We also get achievements while developing achievibit</p>
315 |       </div>
316 |     </div>
317 |   </div>
318 |   <div class="columns tech-stack">
319 |     <div class="column">
320 |       <i class="devicon-webpack-plain colored"></i>
321 |       <div class="content">
322 |         <h1>Webpack</h1>
323 |         <p>Webpack is used to minify and concatinate both our server-side app and client-side app</p>
324 |       </div>
325 |     </div>
326 |     <div class="column">
327 |       <i class="devicon-typescript-plain colored"></i>
328 |       <div class="content">
329 |         <h1>TypeScript</h1>
330 |         <p>Besides a few exceptions, we use typescript to make our development easier</p>
331 |       </div>
332 |     </div>
333 |     <div class="column">
334 |       <i class="devicon-sass-original colored"></i>
335 |       <div class="content">
336 |         <h1>SCSS</h1>
337 |         <p>Nesting css classes inside their context makes our styling lives a lot easier!</p>
338 |       </div>
339 |     </div>
340 |     <div class="column">
341 |       <i class="devicon-nodejs-plain colored"></i>
342 |       <div class="content">
343 |         <h1>Node.js</h1>
344 |         <p>Going with JavaScript\TypeScript on both the server and the client have it's benefits!</p>
345 |       </div>
346 |     </div>
347 |   </div>
348 |   <div class="columns tech-stack">
349 |     <div class="column">
350 |       <i class="devicon-mongodb-plain-wordmark colored"></i>
351 |       <div class="content">
352 |         <h1>mongoDB</h1>
353 |         <p>Our DataBase is hosted on mongoDB's Atlas</p>
354 |       </div>
355 |     </div>
356 |     <div class="column">
357 |       <i class="devicon-html5-plain-wordmark colored"></i>
358 |       <div class="content">
359 |         <h1>HTML5</h1>
360 |         <p>Web Technologies allow our clients to be available anywhere and support both Desktop and Mobile Users</p>
361 |       </div>
362 |     </div>
363 |     <div class="column">
364 |       <i class="devicon-heroku-plain-wordmark colored"></i>
365 |       <div class="content">
366 |         <h1>Heroku</h1>
367 |         <p>Our Server is hosted on Heroku, which also allows us to set up demo environments for every pull request</p>
368 |       </div>
369 |     </div>
370 |     <div class="column">
371 |       <i class="devicon-express-original colored"></i>
372 |       <div class="content">
373 |         <h1>Express.js</h1>
374 |         <p>Express.js is the underlying server technology we use in our Nest.js app. It gives us that warm feeling of seeing someone you already know well</p>
375 |       </div>
376 |     </div>
377 |   </div>
378 |   <div class="columns tech-stack">
379 |     <div class="column">
380 |       <i class="devicon-angularjs-plain colored"></i>
381 |       <div class="content">
382 |         <h1>Angular</h1>
383 |         <p>Angular Universal allows us to be a SPA while supporting Open-Graph and supporting SEO standards</p>
384 |       </div>
385 |     </div>
386 |     <div class="column">
387 |       <i class="devicon-docker-plain-wordmark colored"></i>
388 |       <div class="content">
389 |         <h1>docker</h1>
390 |         <p>docker is a life saver when it comes to deploying achievibit on defferent environments. It gives us better support for outside contribution</p>
391 |       </div>
392 |     </div>
393 |     <div class="column">
394 |       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.79 160"><defs><style>.cls-1{fill:#00d1b2;}</style></defs><title>bulma-logo</title><g id="Layer_2" data-name="Layer 2"><polygon class="cls-1" points="48.05 0 98.92 50.06 69.19 79.56 109.79 119.19 49.05 160 0 111.51 9.08 39.4 48.05 0"/></g></svg>
395 |       <div class="content">
396 |         <h1>Bulma</h1>
397 |         <p>Bulma is the foundation of our own CSS styling and allows us to focus on bigger things while handling basic stuff like buttons and layout</p>
398 |       </div>
399 |     </div>
400 |     <div class="column">
401 |       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="97.89" y1="61.95" x2="359.83" y2="355.92" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ee244c"/><stop offset="1" stop-color="#f32748"/></linearGradient><linearGradient id="linear-gradient-2" x1="238.45" y1="22.09" x2="266.34" y2="53.4" xlink:href="#linear-gradient"/></defs><title>28507035</title><path class="cls-1" d="M415,210v48a16.26,16.26,0,0,0-1,2.8,165.88,165.88,0,0,1-16.31,50c-4.08,7.88-8.79,15.43-13.24,23.17-1.18-15.86-2.32-31.11-3.46-46.36l-2.11-.13c-3.47,21.59-11.25,41.49-22.5,60.11-12.25,20.28-35.2,42.72-45.34,46.63a157.86,157.86,0,0,0,24.43-61.25,7.85,7.85,0,0,0-2.44,2.39c-4.77,6.78-9.11,13.93-14.38,20.3q-35.28,42.66-89.25,55.63c-5.78,1.38-11.62,2.5-17.44,3.74h-6a17,17,0,0,1,2.66-2.09,161.2,161.2,0,0,0,48-36.75c3.47-3.86,6.61-8,10.13-12.31l-47.89,13.22-.78-1.73a101.66,101.66,0,0,0,36.31-45.12c9.48-23.05,8.76-49.55,4.26-58.18-6.44,33.57-24.24,58.65-54.53,73.32-30.69,14.87-61.4,12.18-92.44-4.06l13.76-4.08c-1-1.15-1.63-1.89-2.3-2.54-11.07-10.77-16.76-23.62-16-39.31.73-15.16,13.71-26.31,28.69-24.13,8.43,1.22,10.94,6.05,7.2,13.83-3.56,7.41-2.91,14,3.3,18.9a53.07,53.07,0,0,0,14.8,7.8c4.67,1.7,9,.61,11.46-4.8,2.7-5.91,6-11.56,9.36-18,.33,6,.62,11.36,1,17.47,1.61-1.27,2.85-1.87,3.57-2.86,4-5.5,8.43-10.77,11.51-16.74,2.37-4.6,5.35-4.88,8.73-2.94,5,2.89,9.59,6.57,13.72,9.47-.45-13.22-8-33-15.31-45-14.39-23.74-34.33-41.15-60.45-51.11C123,189,100.89,186.89,78.05,191.52c-4.09.83-6.31,2.81-8.39,6.06-2.22,3.46-5,6.54-7.62,9.78l-1.83-.78V190c-3.42,4.18-6,7.35-8.64,10.52l-1.47-.67c0-2.62-.21-5.25,0-7.84.31-3-.93-4.49-3.67-5.56-7.75-3-12.7-8.71-15.21-16.68a11.29,11.29,0,0,0-2.9-4.36C24,161.17,19.47,157.12,15,153V142c1.17-2.34,2.28-4.72,3.53-7A25.64,25.64,0,0,1,38.12,121.2C56.33,118.46,72,110.86,84.26,96.86a94.59,94.59,0,0,1,43.33-28.21c15.52-4.91,31.57-6.42,47.79-6.59a178.47,178.47,0,0,1,65.5,11.17l16.39,6.18c-4-14.93-.69-26.26,10.18-32.69,9.6-5.68,16.37-12.84,17.11-24.36,20.39,1.48,45.65,32.13,48.08,58.15,1.82,19.41-3.13,37-15.67,52.07-12.4,14.93-28.7,23-48.18,25.72,12,5.92,31.91,5.16,49.72-3.05,24.73-11.4,37.93-31.67,41.73-58.94a21.23,21.23,0,0,1,3.06,2.75c8.6,12.19,17.93,24,25.5,36.74A191.8,191.8,0,0,1,411.94,197C412.79,201.38,414,205.68,415,210Z" transform="translate(-15 -15)"/><path class="cls-2" d="M255,15c4.59,2.85,9.7,5.13,13.65,8.69,6.23,5.62,5.63,10.39-.94,15.52-6.16,4.81-12.83,9.22-15.15,17.29-1.09,3.79-1.63,7.73-2.36,11.28-3.41-3.42-3.86-12.33-.65-19.29,1.38-3,3.15-6,3.79-9.15,1.85-9.23-2.44-16.35-8.86-22.63L248,15Z" transform="translate(-15 -15)"/></svg>
402 |       <div class="content">
403 |         <h1>nest.js</h1>
404 |         <p>Nest is our chosen server-side framework. It got that known Angular feel and made everything about supporting multiple version control sites A LOT easier</p>
405 |       </div>
406 |     </div>
407 |   </div>
408 |   <div class="columns tech-stack">
409 |     <div class="column">
410 |       <i class="devicon-github-plain-wordmark colored"></i>
411 |       <div class="content">
412 |         <h1>GitHub</h1>
413 |         <p>We have a special place in our hearts for GitHub. All of our projects are hosted on GitHub, and that's the first version control we supported</p>
414 |       </div>
415 |     </div>
416 |     <div class="column">
417 |       <i class="devicon-gitlab-plain-wordmark colored"></i>
418 |       <div class="content">
419 |         <h1>GitLab</h1>
420 |         <p>GitLab is great! And on the inside too! Integrating with GitLab was pretty easy thanks to their GitHub like API data and webhooks</p>
421 |       </div>
422 |     </div>
423 |     <div class="column">
424 |       <i class="devicon-bitbucket-plain-wordmark colored"></i>
425 |       <div class="content">
426 |         <h1>BitBucket</h1>
427 |         <p>Not all of us used BitBucket, but Atlassian is known for their developer tools, and they usually have some special power capabilities</p>
428 |       </div>
429 |     </div>
430 |   </div>
431 |   <div class="notification is-warning">
432 |     <button class="delete"></button>
433 |     Primar lorem ipsum dolor sit amet, consectetur
434 |     adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
435 |     consectetur adipiscing elit
436 |   </div>
437 | </div>
438 | <section class="hero kb-spacer">
439 |   <div class="hero-body">
440 |     <div class="container">
441 |       <h1 class="title">
442 |         About
443 |         <div id="logo" class="kb-logo full-logo"><span class="letter">k</span>
444 | 
445 |           <div class="shape-animation shape-one to-red">
446 |             <div class="shape shape1"></div>
447 |             <div class="shape shape2"></div>
448 |           </div>
449 | 
450 |           <div class="shape-animation shape-zero">
451 |             <div class="shape shape1"></div>
452 |             <div class="shape shape2"></div>
453 |           </div>
454 | 
455 |           <div class="shape-animation shape-one to-blue middle">
456 |             <div class="shape shape1"></div>
457 |             <div class="shape shape2"></div>
458 |           </div>
459 | 
460 |           <div class="shape-animation shape-zero">
461 |             <div class="shape shape1"></div>
462 |             <div class="shape shape2"></div>
463 |           </div>
464 | 
465 |           <div class="shape-animation shape-one to-yellow">
466 |             <div class="shape shape1"></div>
467 |             <div class="shape shape2"></div>
468 |           </div>
469 |           <span class="letter">t</span>
470 | 
471 |           <div class="k1b1b0t-mouth-container">
472 |             <div class="k1b1b0t-mouth">[<span class="mo-an">||||</span>]</div>
473 |           </div>
474 |         </div>
475 |       </h1>
476 |     </div>
477 |   </div>
478 | </section>
479 | <div class="container kb-spacer content">
480 |   <p>kibibit is an open-source group of developers blah blah blah.</p>
481 |   <p>We'll be real happy if you're willing to star or contribute the project. Check out our <span class="tag is-warning">Easy-Picker</span> issue label for a quick start.</p>
482 | </div>
483 | <footer class="footer">
484 |   <div class="content has-text-centered">
485 |     <p>
486 |       <strong>achievibit</strong> by <a href="https://jgthms.com">kibibit</a>.
487 |     </p><p>
488 |     The source code is licensed
489 |     <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
490 |     </p><p>
491 |     The website content
492 |     is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
493 |     </p>
494 |   </div>
495 | </footer>
496 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
497 | <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
498 | <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js'></script>
499 | <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js'></script>
500 | <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
501 | 
502 |   
503 | 
504 |     <script  src="js/index.js"></script>
505 | 
506 | 
507 | 
508 | 
509 | </body>
510 | 
511 | </html>
512 | 


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