├── .vscode └── settings.json ├── public ├── svgs │ ├── twitter.svg │ ├── twitter-dark.svg │ ├── github-dark.svg │ ├── github.svg │ ├── youtube.svg │ ├── youtube-dark.svg │ ├── sun-dark.svg │ ├── sun.svg │ └── home-laptop.svg ├── js │ └── index.js └── styles │ └── style.css ├── LICENSE ├── README.md ├── CONTRIBUTING.md ├── index.html └── docs.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "tailwindCSS.emmetCompletions": true, 3 | "tailwindCSS.includeLanguages": { 4 | "plaintext": "html" 5 | } 6 | } -------------------------------------------------------------------------------- /public/svgs/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/svgs/twitter-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svgs/github-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svgs/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svgs/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/svgs/youtube-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svgs/sun-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/svgs/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Aravind Kumar Vemula 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 | -------------------------------------------------------------------------------- /public/js/index.js: -------------------------------------------------------------------------------- 1 | function OnclickOpenMenu() { 2 | document.getElementById("header-nav").style.display = "block"; 3 | document.getElementById("close-menu").style.display = "block"; 4 | document.getElementById("open-menu").style.display = "none"; 5 | } 6 | 7 | function OnclickCloseMenu() { 8 | document.getElementById("header-nav").style.display = "none"; 9 | document.getElementById("close-menu").style.display = "none"; 10 | document.getElementById("open-menu").style.display = "block"; 11 | } 12 | 13 | // window.onscroll = function () { 14 | // scrollFunction(); 15 | // }; 16 | // function scrollFunction() { 17 | // window.scrollTo({ top: 0, behavior: "smooth" }); 18 | // } 19 | 20 | (function () { 21 | console.log(localStorage.getItem("dark-mode")); 22 | if (localStorage.getItem("dark-mode") === "On") { 23 | document.documentElement.classList.add("dark"); 24 | } 25 | })(); 26 | 27 | function darkmode() { 28 | localStorage.setItem("dark-mode", "On"); 29 | document.documentElement.classList.add("dark"); 30 | } 31 | 32 | function lightmode() { 33 | localStorage.setItem("dark-mode", "Off"); 34 | document.documentElement.classList.remove("dark"); 35 | } 36 | -------------------------------------------------------------------------------- /public/styles/style.css: -------------------------------------------------------------------------------- 1 | .tailwind-button { 2 | display: inline-flex; 3 | cursor: pointer; 4 | color: white; 5 | margin: 0 auto; 6 | position: relative; 7 | text-decoration: none; 8 | font-weight: 600; 9 | border-radius: 6px; 10 | overflow: hidden; 11 | padding: 3px; 12 | isolation: isolate; 13 | } 14 | 15 | .tailwind-button::before { 16 | content: ""; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | width: 400%; 21 | height: 100%; 22 | background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b); 23 | background-size: 25% 100%; 24 | animation: nice .75s linear infinite; 25 | animation-play-state: paused; 26 | translate: -5% 0%; 27 | transition: translate 0.25s ease-out; 28 | } 29 | 30 | .tailwind-button:hover::before { 31 | animation-play-state: running; 32 | transition-duration: 0.75s; 33 | translate: 0% 0%; 34 | } 35 | 36 | @keyframes nice{ 37 | to { 38 | transform: translateX(-25%); 39 | } 40 | } 41 | 42 | .tailwind-button span { 43 | position: relative; 44 | display: inline-flex; 45 | padding: 0.8rem 1rem; 46 | font-size: 0.9rem; 47 | background: #000; 48 | border-radius: 3px; 49 | height: 100%; 50 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cleandocs-template 2 | A documentation template built using HTML, Tailwindcss and Javascript 3 | 4 | 5 | **Clone the repository** 6 | ```bash 7 | git clone https://github.com/lmas3009/cleandocs-template.git 8 | ``` 9 | 10 | # Contributing 11 | 12 | All code contributions - if you want change the ui - must go through a pull request and be approved by a core developer before being merged. This is to ensure a proper review of all the code. 13 | 14 | After making changes add your information in contributors section in index.html 15 | 16 | We truly ❤️ pull requests! If you wish to help. 17 | 18 | ✅   Add your information on website, please follow [Contribution Guide](https://github.com/lmas3009/cleandocs-template/blob/master/CONTRIBUTING.md) 19 | 20 | # Visual Representation 21 | ```mermaid 22 | flowchart TD 23 | A[lmas3009/cleandocs-template] --> B{Get This Repo}; 24 | B -- By Fork --> C[yourusername/cleandocs-template]; 25 | B -- By Clone --> D[Your Local Repo]; 26 | C ----> E[Create New Branch]; 27 | D ----> E[Create New Branch]; 28 | E --> F[Made Some Changes]; 29 | F --> G[Commit Changes]; 30 | G -- On GitHub --> H[Create Pull Request]; 31 | H -- If Rejected --> F[Made Changes Again]; 32 | H -- If Approved --> I[Changes Done] 33 | ``` 34 | 35 | # Copyright and license 36 | The MIT License (MIT) http://www.opensource.org/licenses/mit-license.php 37 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide 2 | 3 | - Contributing to cleandocs is fairly easy. This document shows you how to get started 4 | 5 | ## General 6 | - The Code Base structure: 7 | + public / 8 | + asstes / 9 | + js / 10 | + svgs / 11 | + index.html / 12 | + docs.html / 13 | 14 | ## Submitting changes 15 | 16 | - Fork the repo 17 | - 18 | - Check out a new branch based and name it to what you intend to do: 19 | - Example: 20 | ```` 21 | $ git checkout -b BRANCH_NAME 22 | ```` 23 | If you get an error, you may need to fetch fooBar first by using 24 | ```` 25 | $ git remote update && git fetch 26 | ```` 27 | - Use one branch per fix / feature 28 | - Commit your changes 29 | - Please provide a git message that explains what you've done 30 | - Please make sure your commits follow the [conventions](https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53#file-commit-message-guidelines-md) 31 | - Commit to the forked repository 32 | - Example: 33 | ```` 34 | $ git commit -am 'Add some fooBar' 35 | ```` 36 | - Push to the branch 37 | - Example: 38 | ```` 39 | $ git push origin BRANCH_NAME 40 | ```` 41 | - Make a pull request 42 | - Make sure you send the PR to the master branch 43 | 44 | If you follow these instructions, your PR will land pretty safely in the main repo! 45 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | Cleandocs-template 32 | 33 | 34 | 35 | 36 | 38 | 39 |
40 | 92 | 93 |
94 | 95 | 98 | 99 |
100 | 105 |
106 | 107 | 108 | 109 | 110 |
111 |
112 |

Documentation

113 | 114 |

115 | Your description goes here. This is the demo documentation for the 116 | show. 117 |

118 |
119 |
120 |

Getting started is easy!

121 | 123 | Get Started 124 | 125 |
126 |
127 | 129 |
130 |
131 | 132 | 133 | 134 | 135 |
136 |
137 | 138 |
140 |
141 |
142 |

143 | 144 | 146 | 147 | Introduction 148 |

149 |

150 | Section overview goes here. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt recusandae 151 | asperiores ullam? Doloribus dicta nesciunt dolorum necessitatibus! Esse, maxime animi? 152 |

153 |
154 |
155 |
156 | 157 | 158 | 159 |
161 |
162 |
163 |

164 | 165 | 168 | 169 | Installation 170 |

171 |

172 | Section overview goes here. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt recusandae 173 | asperiores ullam? Doloribus dicta nesciunt dolorum necessitatibus! Esse, maxime animi? 174 |

175 |
176 |
177 |
178 | 179 | 180 |
182 |
183 |
184 |

185 | 186 | 189 | 190 | Integration 191 |

192 |

193 | Section overview goes here. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt recusandae 194 | asperiores ullam? Doloribus dicta nesciunt dolorum necessitatibus! Esse, maxime animi? 195 |

196 |
197 |
198 |
199 |
200 |
201 | 202 | 203 | 204 | 205 | 206 |
207 | 208 |
209 |
210 |
211 |

212 | Meet our contributors 213 |

214 |
215 |
216 | 217 |
218 | 219 |
220 | github.img 221 | 222 | display avatar 224 | 225 |

@lmas3009

226 |
227 | 228 |
229 | 230 | 231 |
232 | 233 |
234 | github.img 235 | 236 | display avatar 238 | 239 |

@shriekdj

240 |
241 | 242 |
243 | 244 | 245 |
246 | 247 |
248 | 249 |
250 | github.img 251 | 252 | display avatar 254 | 255 |

@notTamion

256 |
257 | 258 |
259 |
260 | 261 | 262 |
263 | 264 |
265 | 266 |
267 | github.img 268 | 269 | display avatar 271 | 272 |

@NereidaRondon

273 |
274 | 275 |
276 |
277 | 278 | 279 |
280 |
281 |
282 | 283 | 284 | 285 | 314 | 315 | 316 | 317 | -------------------------------------------------------------------------------- /docs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 31 | 32 | 33 | Cleandocs-template 34 | 35 | 36 | 38 | 39 |
40 | 92 | 93 |
94 | 95 | 98 | 99 |
100 | 105 |
106 | 107 | 108 |
109 | 110 | 150 | 151 | 152 |
153 | 154 |
155 |
156 |

Getting Started

157 |

158 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt 159 | quae similique nostrum, laborum, velit beatae esse nobis dolorem 160 | saepe quas iste provident iusto assumenda facilis quisquam enim 161 | quo. Beatae, fuga! 162 |

163 |

Small Description

164 |
165 |
166 | 167 | 168 | 169 |
170 |
171 |

Installation

172 |

Small Description

173 |
174 |
175 |
176 |

Windows

177 |

Fork and clone the github repository.

178 | 179 |
180 |
181 |
182 |
183 |

Mac OS

184 |

Fork and clone the github repository.

185 | 186 |
187 |
188 |
189 |
190 |

Linux

191 |

Fork and clone the github repository.

192 | 193 |
194 |
195 |
196 | 197 | 198 | 199 |
200 |
201 |

Configuration

202 |

203 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt 204 | quae similique nostrum, laborum, velit beatae esse nobis dolorem 205 | saepe quas iste provident iusto assumenda facilis quisquam enim 206 | quo. Beatae, fuga! 207 |

208 |

Small Description

209 |
210 |
211 | 212 | 213 | 214 |
215 |
216 |

Components

217 |

Components used are:

218 |
219 | 220 | 221 |
222 |
223 |

Font Family

224 |

225 | Poppins: 226 | https://fonts.google.com/specimen/Poppins 228 |

229 |
230 |
231 | 232 | 233 | 234 |
235 |
236 |

Buttons

237 |
238 | 259 | 260 | 262 | 264 | 265 | 266 | 267 | 268 | Get Started 269 | 270 |

271 | 272 | 273 | 275 | 276 | 278 | Get Started 279 | 280 | 283 | 284 |

285 | 286 | 287 | 289 | 290 | Get Started 291 | 292 |

293 | 294 | 299 | 300 | Get Started 301 | 302 | 303 |
304 |
305 |
306 | 307 | 308 | 309 |
310 |
311 |

Tailwind CSS

312 |

313 | Install Tailwind CSS 314 | https://tailwindcss.com 315 |

316 |
317 |
318 | 319 | 320 | 321 |
322 |
323 |

Cards

324 |
325 |
327 |
328 |
329 |

331 | 333 | 335 | 336 | Introduction 337 |

338 |

340 | Section overview goes here. Lorem ipsum dolor, sit amet 341 | consectetur adipisicing elit. Sunt recusandae asperiores 342 | ullam? Doloribus dicta nesciunt dolorum necessitatibus! 343 | Esse, maxime animi? 344 |

345 |
346 |
347 |
348 |
349 |
350 |
352 |
353 |
354 |

356 | 358 | 361 | 362 | Installation 363 |

364 |

366 | Section overview goes here. Lorem ipsum dolor, sit amet 367 | consectetur adipisicing elit. Sunt recusandae asperiores 368 | ullam? Doloribus dicta nesciunt dolorum necessitatibus! 369 | Esse, maxime animi? 370 |

371 |
372 |
373 |
374 |
375 |
377 |
378 |
379 |

381 | 383 | 386 | 387 | Integration 388 |

389 |

390 | Section overview goes here. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt 391 | recusandae asperiores ullam? Doloribus dicta nesciunt dolorum necessitatibus! Esse, maxime animi? 392 |

393 |
394 |
395 |
396 |
397 |
398 | 399 |
400 | 401 | 402 | 403 |
404 |
405 |

Code block

406 |
407 |
408 | Code: 409 | 413 |
414 |
415 | 
416 |               
417 |       <div class="flex justify-center items-center bg-blue-500 text-white p-4">
418 |         <h1 class="text-2xl">Hello, Tailwind CSS!</h1>
419 |       </div>
420 |       
421 |
422 |
423 |
424 |
425 | 426 | 427 | 430 |
431 | 432 | 433 | 434 | 435 | 436 | 437 |
438 |
439 |

Colors

440 |

Colors used in this project

441 |
442 | 443 | 444 |
445 |
446 |

Reference

447 |

448 | Gradient Color: 449 | https://uigradients.com 450 |

451 |
452 |
453 | 454 |
455 | 456 | 457 | 458 |
459 |
460 |

Issues

461 |

462 | If you have any issue please raise a PR in github 463 | cleandocs-template 465 |

466 |
467 |
468 | 469 |
470 |
471 | 472 | 496 | 497 | 498 | 499 | -------------------------------------------------------------------------------- /public/svgs/home-laptop.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------