├── CNAME
├── LICENSE
├── README.md
├── contributors.md
├── css
    ├── accordion.css
    ├── assets
    │   └── magic.css
    ├── badges.css
    ├── buttons.css
    ├── cardcolor.css
    ├── dropdown.css
    ├── forms.css
    ├── navbar.css
    ├── pagination.css
    ├── pills.css
    ├── scrollspy.css
    ├── style.css
    ├── tabs.css
    ├── tags.css
    └── textfield.css
├── favicon
    └── android-chrome-192x192.png
├── index.html
├── js
    ├── accordion.js
    └── index.js
└── pages
    ├── accordion.html
    ├── badges.html
    ├── buttons.html
    ├── dropdown.html
    ├── forms.html
    ├── navbar.html
    ├── pagination.html
    ├── pills.html
    ├── scrollspy.html
    ├── tabs.html
    ├── tags.html
    └── textfield.html


/CNAME:
--------------------------------------------------------------------------------
1 | css-components.me


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Ruben Abraham Shibu
 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.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # css-components
 2 | 
 3 | <img align="right" width="300" src="https://github.com/rubenshibu/css-components/blob/contributors/images/Fork.jpg" alt="fork this repository" />
 4 | 
 5 | #### _If you don't have git on your machine,_ [install it](https://help.github.com/articles/set-up-git/)
 6 | 
 7 | ## Fork this repository
 8 | 
 9 | Fork this repository by clicking on the fork button on the top right corner of this page.
10 | This will create a copy of this repository in your account.
11 | 
12 | ## Clone The Repository
13 | 
14 | <img align="right" width="300" src="https://firstcontributions.github.io/assets/Readme/clone.png" alt="clone this repository" />
15 | 
16 | Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button and then click the _copy to clipboard_ icon.
17 | 
18 | Open a terminal and run the following git command:
19 | 
20 | ```
21 | git clone "url you just copied"
22 | ```
23 | 
24 | where "url you just copied" (without the quotation marks) is the url to this repository (your fork of this project). See the previous steps to obtain the url.
25 | 
26 | <img align="right" width="300" src="https://firstcontributions.github.io/assets/Readme/copy-to-clipboard.png" alt="copy URL to clipboard" />
27 | 
28 | For example:
29 | 
30 | ```
31 | https://github.com/this-is-you/css-components.git
32 | ```
33 | 
34 | where `this-is-you` is your GitHub username. Here you're copying the contents of the [css-components](https://github.com/rubenshibu/css-components) repository on GitHub to your computer.
35 | 
36 | Before cloning the repository you just make sure that you have changed the directory to _Desktop_ or to some other locations, To change the directory to Desktop run the following command:
37 | 
38 | ```
39 | cd Desktop
40 | ```
41 | 
42 | ## Create a branch
43 | 
44 | Change to the repository directory on your computer (if you are not already there):
45 | 
46 | ```
47 | cd css-components
48 | ```
49 | 
50 | Now create a branch using the `git checkout` command:
51 | 
52 | ```
53 | git checkout -b <your-new-branch-name>
54 | ```
55 | 
56 | For example:
57 | 
58 | ```
59 | git checkout -b add-alan-mathew
60 | ```
61 | 
62 | (The name of the branch does not need to have the word _add_ in it, but it's a reasonable thing to include because the purpose of this branch is to add your name to a list.)
63 | 
64 | 
65 | ## Yeah, you did it :partying_face::partying_face::partying_face:
66 | 
67 | Now its time to make your _**contributions**_ :star_struck::star_struck:. 
68 | 
69 | For contributing view **[contributors.md](https://github.com/rubenshibu/css-components/blob/master/contributors.md)**
70 | 


--------------------------------------------------------------------------------
/contributors.md:
--------------------------------------------------------------------------------
  1 | :construction:
  2 | 
  3 | # css-components contribution guidelines😬
  4 | 
  5 | After cloning this repo open the project folder in a _text-editor_(vs code is preferable). If you don't have vs-code in your machine, [install it](https://code.visualstudio.com/download)
  6 | 
  7 | ## Folder Structure
  8 | 
  9 | ```
 10 | ├───css
 11 | │   └───assets
 12 | ├───favicon
 13 | ├───images
 14 | ├───js
 15 | └───pages
 16 | 
 17 | ```
 18 | 
 19 | The **css** folder contains all the files for adding your `css` and the **pages** folder contains the `html` files for adding html code.
 20 | 
 21 | ## Make necessary changes and commit those changes
 22 | 
 23 | Make changes based on what component you are adding. for example If you have a button component copy the below html code into button.html and add your component inside this html and write your css inside button.css file:
 24 | 
 25 | ```html
 26 | <!--          (you can specify your name here)   -->
 27 | <div class="row">
 28 |   <div class="col-lg-6">
 29 |     <div class="component">
 30 |       <div class="card magictime">
 31 |         
 32 |         <!-- Here Philip is the css selector for changing card color, write your name in the place of philip-->
 33 |         
 34 |         <div class="card-title philip">
 35 |           <strong>Button</strong>
 36 |         </div>
 37 |         <div class="card-content">
 38 |          
 39 |           <!-- Add your html code for your component inside this. -->
 40 |         
 41 |         </div>
 42 |       </div>
 43 |     </div>
 44 |   </div>
 45 |   <div class="col-lg-6">
 46 |     <div class="component">
 47 |       <div class="card magictime">
 48 |         
 49 |         <!-- Here Philip is the css selector for changing card color-->
 50 |         
 51 |         <div class="card-title philip">
 52 |           <strong>Creator</strong>
 53 |         </div>
 54 |         <div class="card-content">
 55 |           <div class="creater-name">
 56 |             <h2>
 57 |               <b>Name:</b
 58 |               ><span>
 59 |                 
 60 |               <!-- Add your name and github profile link.  -->
 61 |               
 62 |               <a href="profile link">your name </a>
 63 |               </span>
 64 |             </h2>
 65 |           </div>
 66 |         </div>
 67 |       </div>
 68 |     </div>
 69 |   </div>
 70 | </div>
 71 | ```
 72 | 
 73 | # Changing card color
 74 | 
 75 | You can change your card color by adding your name as a `selector`(in the above example `philip` is the selector). After adding your name as selector you can change its color by editing the file cardcolor.css like this:
 76 | 
 77 | ```css
 78 | /* You can add your name  */
 79 | .your-name {
 80 |   background-color: #5f067b;
 81 | }
 82 | ```
 83 | 
 84 | ## commit these changes
 85 | 
 86 | If you go to the project directory and execute the command git status, you'll see there are changes.
 87 | Add those changes to the branch you just created using the `git add` command:
 88 | 
 89 | ```
 90 | git add .
 91 | ```
 92 | 
 93 | Now commit those changes using the `git commit` command:
 94 | 
 95 | ```
 96 | git commit -m "Added new <Your component name>"
 97 | ```
 98 | 
 99 | ## Push changes to github
100 | 
101 | Push your changes using the command `git push`:
102 | 
103 | ```
104 | git push origin <add-your-branch-name>
105 | ```
106 | 
107 | replacing `<add-your-branch-name>` with the name of the branch you created earlier.
108 | 
109 | ## Submit your changes for review
110 | 
111 | If you go to your repository on GitHub, you'll see a `Compare & pull request` button. Click on that button.
112 | Now submit the pull request.
113 | Soon I'll be merging all your changes into the master branch of this project. You will get a notification email once the changes have been merged.
114 | 
115 | <img style="float: right;" src="https://github.com/rubenshibu/css-components/blob/contributors/images/Create_pull_request.jpg" alt="create a pull request" />
116 | 
117 | Now submit the pull request.
118 | 
119 | <img style="float: right;" src="https://github.com/rubenshibu/css-components/blob/contributors/images/Submit_PR.jpeg" alt="submit pull request" />
120 | 
121 | 
122 | ## Where to go from here?
123 | 
124 | Congrats!!🥳  
125 | You just completed the standard fork -> clone -> edit -> pull request workflow that you'll encounter often as a contributor!
126 | 


--------------------------------------------------------------------------------
/css/accordion.css:
--------------------------------------------------------------------------------
 1 | /* James K Jose */
 2 | .accordion-jkj {
 3 |     background-color: #eee;
 4 |     color: #444;
 5 |     cursor: pointer;
 6 |     padding: 18px;
 7 |     width: 100%;
 8 |     text-align: left;
 9 |     border: none;
10 |     outline: none;
11 |     transition: 0.4s;
12 |   }
13 | .active, .accordion-jkj:hover {
14 |     background-color: #ccc;
15 |   }
16 | .panel {
17 |     padding: 0 18px;
18 |     background-color: white;
19 |     max-height: 0;
20 |     overflow: hidden;
21 |     transition: max-height 0.2s ease-out;
22 |   }
23 | 
24 |   .jkj{
25 |     background-color: #f79533;
26 |   }


--------------------------------------------------------------------------------
/css/assets/magic.css:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  * Magic - https://www.minimamente.com
   3 |  * Licensed under the MIT license - https://opensource.org/licenses/MIT
   4 |  * Copyright (c) 2020 Christian Pucci
   5 |  */
   6 | .puffIn {
   7 |   -webkit-animation-name: puffIn;
   8 |           animation-name: puffIn; }
   9 | 
  10 | @-webkit-keyframes puffIn {
  11 |   0% {
  12 |     opacity: 0;
  13 |     transform-origin: 50% 50%;
  14 |     transform: scale(2, 2);
  15 |     -webkit-filter: blur(2px);
  16 |             filter: blur(2px); }
  17 |   100% {
  18 |     opacity: 1;
  19 |     transform-origin: 50% 50%;
  20 |     transform: scale(1, 1);
  21 |     -webkit-filter: blur(0px);
  22 |             filter: blur(0px); } }
  23 | 
  24 | @keyframes puffIn {
  25 |   0% {
  26 |     opacity: 0;
  27 |     transform-origin: 50% 50%;
  28 |     transform: scale(2, 2);
  29 |     -webkit-filter: blur(2px);
  30 |             filter: blur(2px); }
  31 |   100% {
  32 |     opacity: 1;
  33 |     transform-origin: 50% 50%;
  34 |     transform: scale(1, 1);
  35 |     -webkit-filter: blur(0px);
  36 |             filter: blur(0px); } }
  37 | 
  38 | .puffOut {
  39 |   -webkit-animation-name: puffOut;
  40 |           animation-name: puffOut; }
  41 | 
  42 | @-webkit-keyframes puffOut {
  43 |   0% {
  44 |     opacity: 1;
  45 |     transform-origin: 50% 50%;
  46 |     transform: scale(1, 1);
  47 |     -webkit-filter: blur(0px);
  48 |             filter: blur(0px); }
  49 |   100% {
  50 |     opacity: 0;
  51 |     transform-origin: 50% 50%;
  52 |     transform: scale(2, 2);
  53 |     -webkit-filter: blur(2px);
  54 |             filter: blur(2px); } }
  55 | 
  56 | @keyframes puffOut {
  57 |   0% {
  58 |     opacity: 1;
  59 |     transform-origin: 50% 50%;
  60 |     transform: scale(1, 1);
  61 |     -webkit-filter: blur(0px);
  62 |             filter: blur(0px); }
  63 |   100% {
  64 |     opacity: 0;
  65 |     transform-origin: 50% 50%;
  66 |     transform: scale(2, 2);
  67 |     -webkit-filter: blur(2px);
  68 |             filter: blur(2px); } }
  69 | 
  70 | .vanishIn {
  71 |   -webkit-animation-name: vanishIn;
  72 |           animation-name: vanishIn; }
  73 | 
  74 | @-webkit-keyframes vanishIn {
  75 |   0% {
  76 |     opacity: 0;
  77 |     transform-origin: 50% 50%;
  78 |     transform: scale(2, 2);
  79 |     -webkit-filter: blur(90px);
  80 |             filter: blur(90px); }
  81 |   100% {
  82 |     opacity: 1;
  83 |     transform-origin: 50% 50%;
  84 |     transform: scale(1, 1);
  85 |     -webkit-filter: blur(0px);
  86 |             filter: blur(0px); } }
  87 | 
  88 | @keyframes vanishIn {
  89 |   0% {
  90 |     opacity: 0;
  91 |     transform-origin: 50% 50%;
  92 |     transform: scale(2, 2);
  93 |     -webkit-filter: blur(90px);
  94 |             filter: blur(90px); }
  95 |   100% {
  96 |     opacity: 1;
  97 |     transform-origin: 50% 50%;
  98 |     transform: scale(1, 1);
  99 |     -webkit-filter: blur(0px);
 100 |             filter: blur(0px); } }
 101 | 
 102 | .vanishOut {
 103 |   -webkit-animation-name: vanishOut;
 104 |           animation-name: vanishOut; }
 105 | 
 106 | @-webkit-keyframes vanishOut {
 107 |   0% {
 108 |     opacity: 1;
 109 |     transform-origin: 50% 50%;
 110 |     transform: scale(1, 1);
 111 |     -webkit-filter: blur(0px);
 112 |             filter: blur(0px); }
 113 |   100% {
 114 |     opacity: 0;
 115 |     transform-origin: 50% 50%;
 116 |     transform: scale(2, 2);
 117 |     -webkit-filter: blur(20px);
 118 |             filter: blur(20px); } }
 119 | 
 120 | @keyframes vanishOut {
 121 |   0% {
 122 |     opacity: 1;
 123 |     transform-origin: 50% 50%;
 124 |     transform: scale(1, 1);
 125 |     -webkit-filter: blur(0px);
 126 |             filter: blur(0px); }
 127 |   100% {
 128 |     opacity: 0;
 129 |     transform-origin: 50% 50%;
 130 |     transform: scale(2, 2);
 131 |     -webkit-filter: blur(20px);
 132 |             filter: blur(20px); } }
 133 | 
 134 | .boingInUp {
 135 |   -webkit-animation-name: boingInUp;
 136 |   animation-name: boingInUp; }
 137 | 
 138 | @-webkit-keyframes boingInUp {
 139 |   0% {
 140 |     opacity: 0;
 141 |     transform-origin: 50% 0%;
 142 |     transform: perspective(800px) rotateX(-90deg); }
 143 |   50% {
 144 |     opacity: 1;
 145 |     transform-origin: 50% 0%;
 146 |     transform: perspective(800px) rotateX(50deg); }
 147 |   100% {
 148 |     opacity: 1;
 149 |     transform-origin: 50% 0%;
 150 |     transform: perspective(800px) rotateX(0deg); } }
 151 | 
 152 | @keyframes boingInUp {
 153 |   0% {
 154 |     opacity: 0;
 155 |     transform-origin: 50% 0%;
 156 |     transform: perspective(800px) rotateX(-90deg); }
 157 |   50% {
 158 |     opacity: 1;
 159 |     transform-origin: 50% 0%;
 160 |     transform: perspective(800px) rotateX(50deg); }
 161 |   100% {
 162 |     opacity: 1;
 163 |     transform-origin: 50% 0%;
 164 |     transform: perspective(800px) rotateX(0deg); } }
 165 | 
 166 | .boingOutDown {
 167 |   -webkit-animation-name: boingOutDown;
 168 |   animation-name: boingOutDown; }
 169 | 
 170 | @-webkit-keyframes boingOutDown {
 171 |   0% {
 172 |     opacity: 1;
 173 |     transform-origin: 100% 100%;
 174 |     transform: perspective(800px) rotateX(0deg) rotateY(0deg); }
 175 |   20% {
 176 |     opacity: 1;
 177 |     transform-origin: 100% 100%;
 178 |     transform: perspective(800px) rotateX(0deg) rotateY(10deg); }
 179 |   30% {
 180 |     opacity: 1;
 181 |     transform-origin: 0% 100%;
 182 |     transform: perspective(800px) rotateX(0deg) rotateY(0deg); }
 183 |   40% {
 184 |     opacity: 1;
 185 |     transform-origin: 0% 100%;
 186 |     transform: perspective(800px) rotateX(10deg) rotateY(10deg); }
 187 |   100% {
 188 |     opacity: 0;
 189 |     transform-origin: 100% 100%;
 190 |     transform: perspective(800px) rotateX(90deg) rotateY(0deg); } }
 191 | 
 192 | @keyframes boingOutDown {
 193 |   0% {
 194 |     opacity: 1;
 195 |     transform-origin: 100% 100%;
 196 |     transform: perspective(800px) rotateX(0deg) rotateY(0deg); }
 197 |   20% {
 198 |     opacity: 1;
 199 |     transform-origin: 100% 100%;
 200 |     transform: perspective(800px) rotateX(0deg) rotateY(10deg); }
 201 |   30% {
 202 |     opacity: 1;
 203 |     transform-origin: 0% 100%;
 204 |     transform: perspective(800px) rotateX(0deg) rotateY(0deg); }
 205 |   40% {
 206 |     opacity: 1;
 207 |     transform-origin: 0% 100%;
 208 |     transform: perspective(800px) rotateX(10deg) rotateY(10deg); }
 209 |   100% {
 210 |     opacity: 0;
 211 |     transform-origin: 100% 100%;
 212 |     transform: perspective(800px) rotateX(90deg) rotateY(0deg); } }
 213 | 
 214 | .bombLeftOut {
 215 |   -webkit-animation-name: bombLeftOut;
 216 |   animation-name: bombLeftOut; }
 217 | 
 218 | @-webkit-keyframes bombLeftOut {
 219 |   0% {
 220 |     opacity: 1;
 221 |     transform-origin: 50% 50%;
 222 |     transform: rotate(0deg);
 223 |     -webkit-filter: blur(0px);
 224 |     filter: blur(0px); }
 225 |   50% {
 226 |     opacity: 1;
 227 |     transform-origin: -100% 50%;
 228 |     transform: rotate(-160deg);
 229 |     -webkit-filter: blur(0px);
 230 |     filter: blur(0px); }
 231 |   100% {
 232 |     opacity: 0;
 233 |     transform-origin: -100% 50%;
 234 |     transform: rotate(-160deg);
 235 |     -webkit-filter: blur(20px);
 236 |     filter: blur(20px); } }
 237 | 
 238 | @keyframes bombLeftOut {
 239 |   0% {
 240 |     opacity: 1;
 241 |     transform-origin: 50% 50%;
 242 |     transform: rotate(0deg);
 243 |     -webkit-filter: blur(0px);
 244 |     filter: blur(0px); }
 245 |   50% {
 246 |     opacity: 1;
 247 |     transform-origin: -100% 50%;
 248 |     transform: rotate(-160deg);
 249 |     -webkit-filter: blur(0px);
 250 |     filter: blur(0px); }
 251 |   100% {
 252 |     opacity: 0;
 253 |     transform-origin: -100% 50%;
 254 |     transform: rotate(-160deg);
 255 |     -webkit-filter: blur(20px);
 256 |     filter: blur(20px); } }
 257 | 
 258 | .bombRightOut {
 259 |   -webkit-animation-name: bombRightOut;
 260 |   animation-name: bombRightOut; }
 261 | 
 262 | @-webkit-keyframes bombRightOut {
 263 |   0% {
 264 |     opacity: 1;
 265 |     transform-origin: 50% 50%;
 266 |     transform: rotate(0deg);
 267 |     -webkit-filter: blur(0px);
 268 |     filter: blur(0px); }
 269 |   50% {
 270 |     opacity: 1;
 271 |     transform-origin: 200% 50%;
 272 |     transform: rotate(160deg);
 273 |     -webkit-filter: blur(0px);
 274 |     filter: blur(0px); }
 275 |   100% {
 276 |     opacity: 0;
 277 |     transform-origin: 200% 50%;
 278 |     transform: rotate(160deg);
 279 |     -webkit-filter: blur(20px);
 280 |     filter: blur(20px); } }
 281 | 
 282 | @keyframes bombRightOut {
 283 |   0% {
 284 |     opacity: 1;
 285 |     transform-origin: 50% 50%;
 286 |     transform: rotate(0deg);
 287 |     -webkit-filter: blur(0px);
 288 |     filter: blur(0px); }
 289 |   50% {
 290 |     opacity: 1;
 291 |     transform-origin: 200% 50%;
 292 |     transform: rotate(160deg);
 293 |     -webkit-filter: blur(0px);
 294 |     filter: blur(0px); }
 295 |   100% {
 296 |     opacity: 0;
 297 |     transform-origin: 200% 50%;
 298 |     transform: rotate(160deg);
 299 |     -webkit-filter: blur(20px);
 300 |     filter: blur(20px); } }
 301 | 
 302 | .magic {
 303 |   -webkit-animation-name: magic;
 304 |   animation-name: magic; }
 305 | 
 306 | @-webkit-keyframes magic {
 307 |   0% {
 308 |     opacity: 1;
 309 |     transform-origin: 100% 200%;
 310 |     transform: scale(1, 1) rotate(0deg); }
 311 |   100% {
 312 |     opacity: 0;
 313 |     transform-origin: 200% 500%;
 314 |     transform: scale(0, 0) rotate(270deg); } }
 315 | 
 316 | @keyframes magic {
 317 |   0% {
 318 |     opacity: 1;
 319 |     transform-origin: 100% 200%;
 320 |     transform: scale(1, 1) rotate(0deg); }
 321 |   100% {
 322 |     opacity: 0;
 323 |     transform-origin: 200% 500%;
 324 |     transform: scale(0, 0) rotate(270deg); } }
 325 | 
 326 | .swap {
 327 |   -webkit-animation-name: swap;
 328 |   animation-name: swap; }
 329 | 
 330 | @-webkit-keyframes swap {
 331 |   0% {
 332 |     opacity: 0;
 333 |     transform-origin: 0 100%;
 334 |     transform: scale(0, 0) translate(-700px, 0px); }
 335 |   100% {
 336 |     opacity: 1;
 337 |     transform-origin: 100% 100%;
 338 |     transform: scale(1, 1) translate(0px, 0px); } }
 339 | 
 340 | @keyframes swap {
 341 |   0% {
 342 |     opacity: 0;
 343 |     transform-origin: 0 100%;
 344 |     transform: scale(0, 0) translate(-700px, 0px); }
 345 |   100% {
 346 |     opacity: 1;
 347 |     transform-origin: 100% 100%;
 348 |     transform: scale(1, 1) translate(0px, 0px); } }
 349 | 
 350 | .twisterInDown {
 351 |   -webkit-animation-name: twisterInDown;
 352 |   animation-name: twisterInDown; }
 353 | 
 354 | @-webkit-keyframes twisterInDown {
 355 |   0% {
 356 |     opacity: 0;
 357 |     transform-origin: 0 100%;
 358 |     transform: scale(0, 0) rotate(360deg) translateY(-100%); }
 359 |   30% {
 360 |     transform-origin: 0 100%;
 361 |     transform: scale(0, 0) rotate(360deg) translateY(-100%); }
 362 |   100% {
 363 |     opacity: 1;
 364 |     transform-origin: 100% 100%;
 365 |     transform: scale(1, 1) rotate(0deg) translateY(0%); } }
 366 | 
 367 | @keyframes twisterInDown {
 368 |   0% {
 369 |     opacity: 0;
 370 |     transform-origin: 0 100%;
 371 |     transform: scale(0, 0) rotate(360deg) translateY(-100%); }
 372 |   30% {
 373 |     transform-origin: 0 100%;
 374 |     transform: scale(0, 0) rotate(360deg) translateY(-100%); }
 375 |   100% {
 376 |     opacity: 1;
 377 |     transform-origin: 100% 100%;
 378 |     transform: scale(1, 1) rotate(0deg) translateY(0%); } }
 379 | 
 380 | .twisterInUp {
 381 |   -webkit-animation-name: twisterInUp;
 382 |   animation-name: twisterInUp; }
 383 | 
 384 | @-webkit-keyframes twisterInUp {
 385 |   0% {
 386 |     opacity: 0;
 387 |     transform-origin: 100% 0;
 388 |     transform: scale(0, 0) rotate(360deg) translateY(100%); }
 389 |   30% {
 390 |     transform-origin: 100% 0;
 391 |     transform: scale(0, 0) rotate(360deg) translateY(100%); }
 392 |   100% {
 393 |     opacity: 1;
 394 |     transform-origin: 0 0;
 395 |     transform: scale(1, 1) rotate(0deg) translateY(0); } }
 396 | 
 397 | @keyframes twisterInUp {
 398 |   0% {
 399 |     opacity: 0;
 400 |     transform-origin: 100% 0;
 401 |     transform: scale(0, 0) rotate(360deg) translateY(100%); }
 402 |   30% {
 403 |     transform-origin: 100% 0;
 404 |     transform: scale(0, 0) rotate(360deg) translateY(100%); }
 405 |   100% {
 406 |     opacity: 1;
 407 |     transform-origin: 0 0;
 408 |     transform: scale(1, 1) rotate(0deg) translateY(0); } }
 409 | 
 410 | .foolishIn {
 411 |   -webkit-animation-name: foolishIn;
 412 |   animation-name: foolishIn; }
 413 | 
 414 | @-webkit-keyframes foolishIn {
 415 |   0% {
 416 |     opacity: 0;
 417 |     transform-origin: 50% 50%;
 418 |     transform: scale(0, 0) rotate(360deg); }
 419 |   20% {
 420 |     opacity: 1;
 421 |     transform-origin: 0% 100%;
 422 |     transform: scale(0.5, 0.5) rotate(0deg); }
 423 |   40% {
 424 |     opacity: 1;
 425 |     transform-origin: 100% 100%;
 426 |     transform: scale(0.5, 0.5) rotate(0deg); }
 427 |   60% {
 428 |     opacity: 1;
 429 |     transform-origin: 0%;
 430 |     transform: scale(0.5, 0.5) rotate(0deg); }
 431 |   80% {
 432 |     opacity: 1;
 433 |     transform-origin: 0% 0%;
 434 |     transform: scale(0.5, 0.5) rotate(0deg); }
 435 |   100% {
 436 |     opacity: 1;
 437 |     transform-origin: 50% 50%;
 438 |     transform: scale(1, 1) rotate(0deg); } }
 439 | 
 440 | @keyframes foolishIn {
 441 |   0% {
 442 |     opacity: 0;
 443 |     transform-origin: 50% 50%;
 444 |     transform: scale(0, 0) rotate(360deg); }
 445 |   20% {
 446 |     opacity: 1;
 447 |     transform-origin: 0% 100%;
 448 |     transform: scale(0.5, 0.5) rotate(0deg); }
 449 |   40% {
 450 |     opacity: 1;
 451 |     transform-origin: 100% 100%;
 452 |     transform: scale(0.5, 0.5) rotate(0deg); }
 453 |   60% {
 454 |     opacity: 1;
 455 |     transform-origin: 0%;
 456 |     transform: scale(0.5, 0.5) rotate(0deg); }
 457 |   80% {
 458 |     opacity: 1;
 459 |     transform-origin: 0% 0%;
 460 |     transform: scale(0.5, 0.5) rotate(0deg); }
 461 |   100% {
 462 |     opacity: 1;
 463 |     transform-origin: 50% 50%;
 464 |     transform: scale(1, 1) rotate(0deg); } }
 465 | 
 466 | .foolishOut {
 467 |   -webkit-animation-name: foolishOut;
 468 |   animation-name: foolishOut; }
 469 | 
 470 | @-webkit-keyframes foolishOut {
 471 |   0% {
 472 |     opacity: 1;
 473 |     transform-origin: 50% 50%;
 474 |     transform: scale(1, 1) rotate(360deg); }
 475 |   20% {
 476 |     opacity: 1;
 477 |     transform-origin: 0% 0%;
 478 |     transform: scale(0.5, 0.5) rotate(0deg); }
 479 |   40% {
 480 |     opacity: 1;
 481 |     transform-origin: 100% 0%;
 482 |     transform: scale(0.5, 0.5) rotate(0deg); }
 483 |   60% {
 484 |     opacity: 1;
 485 |     transform-origin: 0%;
 486 |     transform: scale(0.5, 0.5) rotate(0deg); }
 487 |   80% {
 488 |     opacity: 1;
 489 |     transform-origin: 0% 100%;
 490 |     transform: scale(0.5, 0.5) rotate(0deg); }
 491 |   100% {
 492 |     opacity: 0;
 493 |     transform-origin: 50% 50%;
 494 |     transform: scale(0, 0) rotate(0deg); } }
 495 | 
 496 | @keyframes foolishOut {
 497 |   0% {
 498 |     opacity: 1;
 499 |     transform-origin: 50% 50%;
 500 |     transform: scale(1, 1) rotate(360deg); }
 501 |   20% {
 502 |     opacity: 1;
 503 |     transform-origin: 0% 0%;
 504 |     transform: scale(0.5, 0.5) rotate(0deg); }
 505 |   40% {
 506 |     opacity: 1;
 507 |     transform-origin: 100% 0%;
 508 |     transform: scale(0.5, 0.5) rotate(0deg); }
 509 |   60% {
 510 |     opacity: 1;
 511 |     transform-origin: 0%;
 512 |     transform: scale(0.5, 0.5) rotate(0deg); }
 513 |   80% {
 514 |     opacity: 1;
 515 |     transform-origin: 0% 100%;
 516 |     transform: scale(0.5, 0.5) rotate(0deg); }
 517 |   100% {
 518 |     opacity: 0;
 519 |     transform-origin: 50% 50%;
 520 |     transform: scale(0, 0) rotate(0deg); } }
 521 | 
 522 | .holeOut {
 523 |   -webkit-animation-name: holeOut;
 524 |   animation-name: holeOut; }
 525 | 
 526 | @-webkit-keyframes holeOut {
 527 |   0% {
 528 |     opacity: 1;
 529 |     transform-origin: 50% 50%;
 530 |     transform: scale(1, 1) rotateY(0deg); }
 531 |   100% {
 532 |     opacity: 0;
 533 |     transform-origin: 50% 50%;
 534 |     transform: scale(0, 0) rotateY(180deg); } }
 535 | 
 536 | @keyframes holeOut {
 537 |   0% {
 538 |     opacity: 1;
 539 |     transform-origin: 50% 50%;
 540 |     transform: scale(1, 1) rotateY(0deg); }
 541 |   100% {
 542 |     opacity: 0;
 543 |     transform-origin: 50% 50%;
 544 |     transform: scale(0, 0) rotateY(180deg); } }
 545 | 
 546 | .swashIn {
 547 |   -webkit-animation-name: swashIn;
 548 |   animation-name: swashIn; }
 549 | 
 550 | @-webkit-keyframes swashIn {
 551 |   0% {
 552 |     opacity: 0;
 553 |     transform-origin: 50% 50%;
 554 |     transform: scale(0, 0); }
 555 |   90% {
 556 |     opacity: 1;
 557 |     transform-origin: 50% 50%;
 558 |     transform: scale(0.9, 0.9); }
 559 |   100% {
 560 |     opacity: 1;
 561 |     transform-origin: 50% 50%;
 562 |     transform: scale(1, 1); } }
 563 | 
 564 | @keyframes swashIn {
 565 |   0% {
 566 |     opacity: 0;
 567 |     transform-origin: 50% 50%;
 568 |     transform: scale(0, 0); }
 569 |   90% {
 570 |     opacity: 1;
 571 |     transform-origin: 50% 50%;
 572 |     transform: scale(0.9, 0.9); }
 573 |   100% {
 574 |     opacity: 1;
 575 |     transform-origin: 50% 50%;
 576 |     transform: scale(1, 1); } }
 577 | 
 578 | .swashOut {
 579 |   -webkit-animation-name: swashOut;
 580 |   animation-name: swashOut; }
 581 | 
 582 | @-webkit-keyframes swashOut {
 583 |   0% {
 584 |     opacity: 1;
 585 |     transform-origin: 50% 50%;
 586 |     transform: scale(1, 1); }
 587 |   80% {
 588 |     opacity: 1;
 589 |     transform-origin: 50% 50%;
 590 |     transform: scale(0.9, 0.9); }
 591 |   100% {
 592 |     opacity: 0;
 593 |     transform-origin: 50% 50%;
 594 |     transform: scale(0, 0); } }
 595 | 
 596 | @keyframes swashOut {
 597 |   0% {
 598 |     opacity: 1;
 599 |     transform-origin: 50% 50%;
 600 |     transform: scale(1, 1); }
 601 |   80% {
 602 |     opacity: 1;
 603 |     transform-origin: 50% 50%;
 604 |     transform: scale(0.9, 0.9); }
 605 |   100% {
 606 |     opacity: 0;
 607 |     transform-origin: 50% 50%;
 608 |     transform: scale(0, 0); } }
 609 | 
 610 | .spaceInDown {
 611 |   -webkit-animation-name: spaceInDown;
 612 |   animation-name: spaceInDown; }
 613 | 
 614 | @-webkit-keyframes spaceInDown {
 615 |   0% {
 616 |     opacity: 0;
 617 |     transform-origin: 50% 100%;
 618 |     transform: scale(0.2) translate(0%, 200%); }
 619 |   100% {
 620 |     opacity: 1;
 621 |     transform-origin: 50% 100%;
 622 |     transform: scale(1) translate(0%, 0%); } }
 623 | 
 624 | @keyframes spaceInDown {
 625 |   0% {
 626 |     opacity: 0;
 627 |     transform-origin: 50% 100%;
 628 |     transform: scale(0.2) translate(0%, 200%); }
 629 |   100% {
 630 |     opacity: 1;
 631 |     transform-origin: 50% 100%;
 632 |     transform: scale(1) translate(0%, 0%); } }
 633 | 
 634 | .spaceInLeft {
 635 |   -webkit-animation-name: spaceInLeft;
 636 |   animation-name: spaceInLeft; }
 637 | 
 638 | @-webkit-keyframes spaceInLeft {
 639 |   0% {
 640 |     opacity: 0;
 641 |     transform-origin: 0% 50%;
 642 |     transform: scale(0.2) translate(-200%, 0%); }
 643 |   100% {
 644 |     opacity: 1;
 645 |     transform-origin: 0% 50%;
 646 |     transform: scale(1) translate(0%, 0%); } }
 647 | 
 648 | @keyframes spaceInLeft {
 649 |   0% {
 650 |     opacity: 0;
 651 |     transform-origin: 0% 50%;
 652 |     transform: scale(0.2) translate(-200%, 0%); }
 653 |   100% {
 654 |     opacity: 1;
 655 |     transform-origin: 0% 50%;
 656 |     transform: scale(1) translate(0%, 0%); } }
 657 | 
 658 | .spaceInRight {
 659 |   -webkit-animation-name: spaceInRight;
 660 |   animation-name: spaceInRight; }
 661 | 
 662 | @-webkit-keyframes spaceInRight {
 663 |   0% {
 664 |     opacity: 0;
 665 |     transform-origin: 100% 50%;
 666 |     transform: scale(0.2) translate(200%, 0%); }
 667 |   100% {
 668 |     opacity: 1;
 669 |     transform-origin: 100% 50%;
 670 |     transform: scale(1) translate(0%, 0%); } }
 671 | 
 672 | @keyframes spaceInRight {
 673 |   0% {
 674 |     opacity: 0;
 675 |     transform-origin: 100% 50%;
 676 |     transform: scale(0.2) translate(200%, 0%); }
 677 |   100% {
 678 |     opacity: 1;
 679 |     transform-origin: 100% 50%;
 680 |     transform: scale(1) translate(0%, 0%); } }
 681 | 
 682 | .spaceInUp {
 683 |   -webkit-animation-name: spaceInUp;
 684 |   animation-name: spaceInUp; }
 685 | 
 686 | @-webkit-keyframes spaceInUp {
 687 |   0% {
 688 |     opacity: 0;
 689 |     transform-origin: 50% 0%;
 690 |     transform: scale(0.2) translate(0%, -200%); }
 691 |   100% {
 692 |     opacity: 1;
 693 |     transform-origin: 50% 0%;
 694 |     transform: scale(1) translate(0%, 0%); } }
 695 | 
 696 | @keyframes spaceInUp {
 697 |   0% {
 698 |     opacity: 0;
 699 |     transform-origin: 50% 0%;
 700 |     transform: scale(0.2) translate(0%, -200%); }
 701 |   100% {
 702 |     opacity: 1;
 703 |     transform-origin: 50% 0%;
 704 |     transform: scale(1) translate(0%, 0%); } }
 705 | 
 706 | .spaceOutDown {
 707 |   -webkit-animation-name: spaceOutDown;
 708 |   animation-name: spaceOutDown; }
 709 | 
 710 | @-webkit-keyframes spaceOutDown {
 711 |   0% {
 712 |     opacity: 1;
 713 |     transform-origin: 50% 100%;
 714 |     transform: scale(1) translate(0%, 0%); }
 715 |   100% {
 716 |     opacity: 0;
 717 |     transform-origin: 50% 100%;
 718 |     transform: scale(0.2) translate(0%, 200%); } }
 719 | 
 720 | @keyframes spaceOutDown {
 721 |   0% {
 722 |     opacity: 1;
 723 |     transform-origin: 50% 100%;
 724 |     transform: scale(1) translate(0%, 0%); }
 725 |   100% {
 726 |     opacity: 0;
 727 |     transform-origin: 50% 100%;
 728 |     transform: scale(0.2) translate(0%, 200%); } }
 729 | 
 730 | .spaceOutLeft {
 731 |   -webkit-animation-name: spaceOutLeft;
 732 |   animation-name: spaceOutLeft; }
 733 | 
 734 | @-webkit-keyframes spaceOutLeft {
 735 |   0% {
 736 |     opacity: 1;
 737 |     transform-origin: 0% 50%;
 738 |     transform: scale(1) translate(0%, 0%); }
 739 |   100% {
 740 |     opacity: 0;
 741 |     transform-origin: 0% 50%;
 742 |     transform: scale(0.2) translate(-200%, 0%); } }
 743 | 
 744 | @keyframes spaceOutLeft {
 745 |   0% {
 746 |     opacity: 1;
 747 |     transform-origin: 0% 50%;
 748 |     transform: scale(1) translate(0%, 0%); }
 749 |   100% {
 750 |     opacity: 0;
 751 |     transform-origin: 0% 50%;
 752 |     transform: scale(0.2) translate(-200%, 0%); } }
 753 | 
 754 | .spaceOutRight {
 755 |   -webkit-animation-name: spaceOutRight;
 756 |   animation-name: spaceOutRight; }
 757 | 
 758 | @-webkit-keyframes spaceOutRight {
 759 |   0% {
 760 |     opacity: 1;
 761 |     transform-origin: 100% 50%;
 762 |     transform: scale(1) translate(0%, 0%); }
 763 |   100% {
 764 |     opacity: 0;
 765 |     transform-origin: 100% 50%;
 766 |     transform: scale(0.2) translate(200%, 0%); } }
 767 | 
 768 | @keyframes spaceOutRight {
 769 |   0% {
 770 |     opacity: 1;
 771 |     transform-origin: 100% 50%;
 772 |     transform: scale(1) translate(0%, 0%); }
 773 |   100% {
 774 |     opacity: 0;
 775 |     transform-origin: 100% 50%;
 776 |     transform: scale(0.2) translate(200%, 0%); } }
 777 | 
 778 | .spaceOutUp {
 779 |   -webkit-animation-name: spaceOutUp;
 780 |   animation-name: spaceOutUp; }
 781 | 
 782 | @-webkit-keyframes spaceOutUp {
 783 |   0% {
 784 |     opacity: 1;
 785 |     transform-origin: 50% 0%;
 786 |     transform: scale(1) translate(0%, 0%); }
 787 |   100% {
 788 |     opacity: 0;
 789 |     transform-origin: 50% 0%;
 790 |     transform: scale(0.2) translate(0%, -200%); } }
 791 | 
 792 | @keyframes spaceOutUp {
 793 |   0% {
 794 |     opacity: 1;
 795 |     transform-origin: 50% 0%;
 796 |     transform: scale(1) translate(0%, 0%); }
 797 |   100% {
 798 |     opacity: 0;
 799 |     transform-origin: 50% 0%;
 800 |     transform: scale(0.2) translate(0%, -200%); } }
 801 | 
 802 | .perspectiveDown {
 803 |   -webkit-animation-name: perspectiveDown;
 804 |   animation-name: perspectiveDown; }
 805 | 
 806 | @-webkit-keyframes perspectiveDown {
 807 |   0% {
 808 |     transform-origin: 0 100%;
 809 |     transform: perspective(800px) rotateX(0deg); }
 810 |   100% {
 811 |     transform-origin: 0 100%;
 812 |     transform: perspective(800px) rotateX(-180deg); } }
 813 | 
 814 | @keyframes perspectiveDown {
 815 |   0% {
 816 |     transform-origin: 0 100%;
 817 |     transform: perspective(800px) rotateX(0deg); }
 818 |   100% {
 819 |     transform-origin: 0 100%;
 820 |     transform: perspective(800px) rotateX(-180deg); } }
 821 | 
 822 | .perspectiveDownReturn {
 823 |   -webkit-animation-name: perspectiveDownReturn;
 824 |   animation-name: perspectiveDownReturn; }
 825 | 
 826 | @-webkit-keyframes perspectiveDownReturn {
 827 |   0% {
 828 |     transform-origin: 0 100%;
 829 |     transform: perspective(800px) rotateX(-180deg); }
 830 |   100% {
 831 |     transform-origin: 0 100%;
 832 |     transform: perspective(800px) rotateX(0deg); } }
 833 | 
 834 | @keyframes perspectiveDownReturn {
 835 |   0% {
 836 |     transform-origin: 0 100%;
 837 |     transform: perspective(800px) rotateX(-180deg); }
 838 |   100% {
 839 |     transform-origin: 0 100%;
 840 |     transform: perspective(800px) rotateX(0deg); } }
 841 | 
 842 | .perspectiveLeft {
 843 |   -webkit-animation-name: perspectiveLeft;
 844 |   animation-name: perspectiveLeft; }
 845 | 
 846 | @-webkit-keyframes perspectiveLeft {
 847 |   0% {
 848 |     transform-origin: 0 0;
 849 |     transform: perspective(800px) rotateY(0deg); }
 850 |   100% {
 851 |     transform-origin: 0 0;
 852 |     transform: perspective(800px) rotateY(-180deg); } }
 853 | 
 854 | @keyframes perspectiveLeft {
 855 |   0% {
 856 |     transform-origin: 0 0;
 857 |     transform: perspective(800px) rotateY(0deg); }
 858 |   100% {
 859 |     transform-origin: 0 0;
 860 |     transform: perspective(800px) rotateY(-180deg); } }
 861 | 
 862 | .perspectiveLeftReturn {
 863 |   -webkit-animation-name: perspectiveLeftReturn;
 864 |   animation-name: perspectiveLeftReturn; }
 865 | 
 866 | @-webkit-keyframes perspectiveLeftReturn {
 867 |   0% {
 868 |     transform-origin: 0 0;
 869 |     transform: perspective(800px) rotateY(-180deg); }
 870 |   100% {
 871 |     transform-origin: 0 0;
 872 |     transform: perspective(800px) rotateY(0deg); } }
 873 | 
 874 | @keyframes perspectiveLeftReturn {
 875 |   0% {
 876 |     transform-origin: 0 0;
 877 |     transform: perspective(800px) rotateY(-180deg); }
 878 |   100% {
 879 |     transform-origin: 0 0;
 880 |     transform: perspective(800px) rotateY(0deg); } }
 881 | 
 882 | .perspectiveRight {
 883 |   -webkit-animation-name: perspectiveRight;
 884 |   animation-name: perspectiveRight; }
 885 | 
 886 | @-webkit-keyframes perspectiveRight {
 887 |   0% {
 888 |     transform-origin: 100% 0;
 889 |     transform: perspective(800px) rotateY(0deg); }
 890 |   100% {
 891 |     transform-origin: 100% 0;
 892 |     transform: perspective(800px) rotateY(180deg); } }
 893 | 
 894 | @keyframes perspectiveRight {
 895 |   0% {
 896 |     transform-origin: 100% 0;
 897 |     transform: perspective(800px) rotateY(0deg); }
 898 |   100% {
 899 |     transform-origin: 100% 0;
 900 |     transform: perspective(800px) rotateY(180deg); } }
 901 | 
 902 | .perspectiveRightReturn {
 903 |   -webkit-animation-name: perspectiveRightReturn;
 904 |   animation-name: perspectiveRightReturn; }
 905 | 
 906 | @-webkit-keyframes perspectiveRightReturn {
 907 |   0% {
 908 |     transform-origin: 100% 0;
 909 |     transform: perspective(800px) rotateY(180deg); }
 910 |   100% {
 911 |     transform-origin: 100% 0;
 912 |     transform: perspective(800px) rotateY(0deg); } }
 913 | 
 914 | @keyframes perspectiveRightReturn {
 915 |   0% {
 916 |     transform-origin: 100% 0;
 917 |     transform: perspective(800px) rotateY(180deg); }
 918 |   100% {
 919 |     transform-origin: 100% 0;
 920 |     transform: perspective(800px) rotateY(0deg); } }
 921 | 
 922 | .perspectiveUp {
 923 |   -webkit-animation-name: perspectiveUp;
 924 |   animation-name: perspectiveUp; }
 925 | 
 926 | @-webkit-keyframes perspectiveUp {
 927 |   0% {
 928 |     transform-origin: 0 0;
 929 |     transform: perspective(800px) rotateX(0deg); }
 930 |   100% {
 931 |     transform-origin: 0 0;
 932 |     transform: perspective(800px) rotateX(180deg); } }
 933 | 
 934 | @keyframes perspectiveUp {
 935 |   0% {
 936 |     transform-origin: 0 0;
 937 |     transform: perspective(800px) rotateX(0deg); }
 938 |   100% {
 939 |     transform-origin: 0 0;
 940 |     transform: perspective(800px) rotateX(180deg); } }
 941 | 
 942 | .perspectiveUpReturn {
 943 |   -webkit-animation-name: perspectiveUpReturn;
 944 |   animation-name: perspectiveUpReturn; }
 945 | 
 946 | @-webkit-keyframes perspectiveUpReturn {
 947 |   0% {
 948 |     transform-origin: 0 0;
 949 |     transform: perspective(800px) rotateX(180deg); }
 950 |   100% {
 951 |     transform-origin: 0 0;
 952 |     transform: perspective(800px) rotateX(0deg); } }
 953 | 
 954 | @keyframes perspectiveUpReturn {
 955 |   0% {
 956 |     transform-origin: 0 0;
 957 |     transform: perspective(800px) rotateX(180deg); }
 958 |   100% {
 959 |     transform-origin: 0 0;
 960 |     transform: perspective(800px) rotateX(0deg); } }
 961 | 
 962 | .rotateDown {
 963 |   -webkit-animation-name: rotateDown;
 964 |   animation-name: rotateDown; }
 965 | 
 966 | @-webkit-keyframes rotateDown {
 967 |   0% {
 968 |     opacity: 1;
 969 |     transform-origin: 0 0;
 970 |     transform: perspective(800px) rotateX(0deg) translateZ(0px); }
 971 |   100% {
 972 |     opacity: 0;
 973 |     transform-origin: 50% 100%;
 974 |     transform: perspective(800px) rotateX(-180deg) translateZ(300px); } }
 975 | 
 976 | @keyframes rotateDown {
 977 |   0% {
 978 |     opacity: 1;
 979 |     transform-origin: 0 0;
 980 |     transform: perspective(800px) rotateX(0deg) translateZ(0px); }
 981 |   100% {
 982 |     opacity: 0;
 983 |     transform-origin: 50% 100%;
 984 |     transform: perspective(800px) rotateX(-180deg) translateZ(300px); } }
 985 | 
 986 | .rotateLeft {
 987 |   -webkit-animation-name: rotateLeft;
 988 |   animation-name: rotateLeft; }
 989 | 
 990 | @-webkit-keyframes rotateLeft {
 991 |   0% {
 992 |     opacity: 1;
 993 |     transform-origin: 0 0;
 994 |     transform: perspective(800px) rotateY(0deg) translateZ(0px); }
 995 |   100% {
 996 |     opacity: 0;
 997 |     transform-origin: 50% 0;
 998 |     transform: perspective(800px) rotateY(-180deg) translateZ(300px); } }
 999 | 
1000 | @keyframes rotateLeft {
1001 |   0% {
1002 |     opacity: 1;
1003 |     transform-origin: 0 0;
1004 |     transform: perspective(800px) rotateY(0deg) translateZ(0px); }
1005 |   100% {
1006 |     opacity: 0;
1007 |     transform-origin: 50% 0;
1008 |     transform: perspective(800px) rotateY(-180deg) translateZ(300px); } }
1009 | 
1010 | .rotateRight {
1011 |   -webkit-animation-name: rotateRight;
1012 |   animation-name: rotateRight; }
1013 | 
1014 | @-webkit-keyframes rotateRight {
1015 |   0% {
1016 |     opacity: 1;
1017 |     transform-origin: 0 0;
1018 |     transform: perspective(800px) rotateY(0deg) translate3d(0px); }
1019 |   100% {
1020 |     opacity: 0;
1021 |     transform-origin: 50% 0;
1022 |     transform: perspective(800px) rotateY(180deg) translateZ(150px); } }
1023 | 
1024 | @keyframes rotateRight {
1025 |   0% {
1026 |     opacity: 1;
1027 |     transform-origin: 0 0;
1028 |     transform: perspective(800px) rotateY(0deg) translate3d(0px); }
1029 |   100% {
1030 |     opacity: 0;
1031 |     transform-origin: 50% 0;
1032 |     transform: perspective(800px) rotateY(180deg) translateZ(150px); } }
1033 | 
1034 | .rotateUp {
1035 |   -webkit-animation-name: rotateUp;
1036 |   animation-name: rotateUp; }
1037 | 
1038 | @-webkit-keyframes rotateUp {
1039 |   0% {
1040 |     opacity: 1;
1041 |     transform-origin: 0 0;
1042 |     transform: perspective(800px) rotateX(0deg) translateZ(0px); }
1043 |   100% {
1044 |     opacity: 0;
1045 |     transform-origin: 50% 0;
1046 |     transform: perspective(800px) rotateX(180deg) translateZ(100px); } }
1047 | 
1048 | @keyframes rotateUp {
1049 |   0% {
1050 |     opacity: 1;
1051 |     transform-origin: 0 0;
1052 |     transform: perspective(800px) rotateX(0deg) translateZ(0px); }
1053 |   100% {
1054 |     opacity: 0;
1055 |     transform-origin: 50% 0;
1056 |     transform: perspective(800px) rotateX(180deg) translateZ(100px); } }
1057 | 
1058 | .slideDown {
1059 |   -webkit-animation-name: slideDown;
1060 |   animation-name: slideDown; }
1061 | 
1062 | @-webkit-keyframes slideDown {
1063 |   0% {
1064 |     transform-origin: 0 0;
1065 |     transform: translateY(0%); }
1066 |   100% {
1067 |     transform-origin: 0 0;
1068 |     transform: translateY(100%); } }
1069 | 
1070 | @keyframes slideDown {
1071 |   0% {
1072 |     transform-origin: 0 0;
1073 |     transform: translateY(0%); }
1074 |   100% {
1075 |     transform-origin: 0 0;
1076 |     transform: translateY(100%); } }
1077 | 
1078 | .slideDownReturn {
1079 |   -webkit-animation-name: slideDownReturn;
1080 |   animation-name: slideDownReturn; }
1081 | 
1082 | @-webkit-keyframes slideDownReturn {
1083 |   0% {
1084 |     transform-origin: 0 0;
1085 |     transform: translateY(100%); }
1086 |   100% {
1087 |     transform-origin: 0 0;
1088 |     transform: translateY(0%); } }
1089 | 
1090 | @keyframes slideDownReturn {
1091 |   0% {
1092 |     transform-origin: 0 0;
1093 |     transform: translateY(100%); }
1094 |   100% {
1095 |     transform-origin: 0 0;
1096 |     transform: translateY(0%); } }
1097 | 
1098 | .slideLeft {
1099 |   -webkit-animation-name: slideLeft;
1100 |   animation-name: slideLeft; }
1101 | 
1102 | @-webkit-keyframes slideLeft {
1103 |   0% {
1104 |     transform-origin: 0 0;
1105 |     transform: translateX(0%); }
1106 |   100% {
1107 |     transform-origin: 0 0;
1108 |     transform: translateX(-100%); } }
1109 | 
1110 | @keyframes slideLeft {
1111 |   0% {
1112 |     transform-origin: 0 0;
1113 |     transform: translateX(0%); }
1114 |   100% {
1115 |     transform-origin: 0 0;
1116 |     transform: translateX(-100%); } }
1117 | 
1118 | .slideLeftReturn {
1119 |   -webkit-animation-name: slideLeftReturn;
1120 |   animation-name: slideLeftReturn; }
1121 | 
1122 | @-webkit-keyframes slideLeftReturn {
1123 |   0% {
1124 |     transform-origin: 0 0;
1125 |     transform: translateX(-100%); }
1126 |   100% {
1127 |     transform-origin: 0 0;
1128 |     transform: translateX(0%); } }
1129 | 
1130 | @keyframes slideLeftReturn {
1131 |   0% {
1132 |     transform-origin: 0 0;
1133 |     transform: translateX(-100%); }
1134 |   100% {
1135 |     transform-origin: 0 0;
1136 |     transform: translateX(0%); } }
1137 | 
1138 | .slideRight {
1139 |   -webkit-animation-name: slideRight;
1140 |   animation-name: slideRight; }
1141 | 
1142 | @-webkit-keyframes slideRight {
1143 |   0% {
1144 |     transform-origin: 0 0;
1145 |     transform: translateX(0%); }
1146 |   100% {
1147 |     transform-origin: 0 0;
1148 |     transform: translateX(100%); } }
1149 | 
1150 | @keyframes slideRight {
1151 |   0% {
1152 |     transform-origin: 0 0;
1153 |     transform: translateX(0%); }
1154 |   100% {
1155 |     transform-origin: 0 0;
1156 |     transform: translateX(100%); } }
1157 | 
1158 | .slideRightReturn {
1159 |   -webkit-animation-name: slideRightReturn;
1160 |   animation-name: slideRightReturn; }
1161 | 
1162 | @-webkit-keyframes slideRightReturn {
1163 |   0% {
1164 |     transform-origin: 0 0;
1165 |     transform: translateX(100%); }
1166 |   100% {
1167 |     transform-origin: 0 0;
1168 |     transform: translateX(0%); } }
1169 | 
1170 | @keyframes slideRightReturn {
1171 |   0% {
1172 |     transform-origin: 0 0;
1173 |     transform: translateX(100%); }
1174 |   100% {
1175 |     transform-origin: 0 0;
1176 |     transform: translateX(0%); } }
1177 | 
1178 | .slideUp {
1179 |   -webkit-animation-name: slideUp;
1180 |   animation-name: slideUp; }
1181 | 
1182 | @-webkit-keyframes slideUp {
1183 |   0% {
1184 |     transform-origin: 0 0;
1185 |     transform: translateY(0%); }
1186 |   100% {
1187 |     transform-origin: 0 0;
1188 |     transform: translateY(-100%); } }
1189 | 
1190 | @keyframes slideUp {
1191 |   0% {
1192 |     transform-origin: 0 0;
1193 |     transform: translateY(0%); }
1194 |   100% {
1195 |     transform-origin: 0 0;
1196 |     transform: translateY(-100%); } }
1197 | 
1198 | .slideUpReturn {
1199 |   -webkit-animation-name: slideUpReturn;
1200 |   animation-name: slideUpReturn; }
1201 | 
1202 | @-webkit-keyframes slideUpReturn {
1203 |   0% {
1204 |     transform-origin: 0 0;
1205 |     transform: translateY(-100%); }
1206 |   100% {
1207 |     transform-origin: 0 0;
1208 |     transform: translateY(0%); } }
1209 | 
1210 | @keyframes slideUpReturn {
1211 |   0% {
1212 |     transform-origin: 0 0;
1213 |     transform: translateY(-100%); }
1214 |   100% {
1215 |     transform-origin: 0 0;
1216 |     transform: translateY(0%); } }
1217 | 
1218 | .openDownLeft {
1219 |   -webkit-animation-name: openDownLeft;
1220 |   animation-name: openDownLeft; }
1221 | 
1222 | @-webkit-keyframes openDownLeft {
1223 |   0% {
1224 |     transform-origin: bottom left;
1225 |     transform: rotate(0deg);
1226 |     -webkit-animation-timing-function: ease-out;
1227 |     animation-timing-function: ease-out; }
1228 |   100% {
1229 |     transform-origin: bottom left;
1230 |     transform: rotate(-110deg);
1231 |     -webkit-animation-timing-function: ease-in-out;
1232 |     animation-timing-function: ease-in-out; } }
1233 | 
1234 | @keyframes openDownLeft {
1235 |   0% {
1236 |     transform-origin: bottom left;
1237 |     transform: rotate(0deg);
1238 |     -webkit-animation-timing-function: ease-out;
1239 |     animation-timing-function: ease-out; }
1240 |   100% {
1241 |     transform-origin: bottom left;
1242 |     transform: rotate(-110deg);
1243 |     -webkit-animation-timing-function: ease-in-out;
1244 |     animation-timing-function: ease-in-out; } }
1245 | 
1246 | .openDownLeftReturn {
1247 |   -webkit-animation-name: openDownLeftReturn;
1248 |   animation-name: openDownLeftReturn; }
1249 | 
1250 | @-webkit-keyframes openDownLeftReturn {
1251 |   0% {
1252 |     transform-origin: bottom left;
1253 |     transform: rotate(-110deg);
1254 |     -webkit-animation-timing-function: ease-in-out;
1255 |     animation-timing-function: ease-in-out; }
1256 |   100% {
1257 |     transform-origin: bottom left;
1258 |     transform: rotate(0deg);
1259 |     -webkit-animation-timing-function: ease-out;
1260 |     animation-timing-function: ease-out; } }
1261 | 
1262 | @keyframes openDownLeftReturn {
1263 |   0% {
1264 |     transform-origin: bottom left;
1265 |     transform: rotate(-110deg);
1266 |     -webkit-animation-timing-function: ease-in-out;
1267 |     animation-timing-function: ease-in-out; }
1268 |   100% {
1269 |     transform-origin: bottom left;
1270 |     transform: rotate(0deg);
1271 |     -webkit-animation-timing-function: ease-out;
1272 |     animation-timing-function: ease-out; } }
1273 | 
1274 | .openDownRight {
1275 |   -webkit-animation-name: openDownRight;
1276 |   animation-name: openDownRight; }
1277 | 
1278 | @-webkit-keyframes openDownRight {
1279 |   0% {
1280 |     transform-origin: bottom right;
1281 |     transform: rotate(0deg);
1282 |     -webkit-animation-timing-function: ease-out;
1283 |     animation-timing-function: ease-out; }
1284 |   100% {
1285 |     transform-origin: bottom right;
1286 |     transform: rotate(110deg);
1287 |     -webkit-animation-timing-function: ease-in-out;
1288 |     animation-timing-function: ease-in-out; } }
1289 | 
1290 | @keyframes openDownRight {
1291 |   0% {
1292 |     transform-origin: bottom right;
1293 |     transform: rotate(0deg);
1294 |     -webkit-animation-timing-function: ease-out;
1295 |     animation-timing-function: ease-out; }
1296 |   100% {
1297 |     transform-origin: bottom right;
1298 |     transform: rotate(110deg);
1299 |     -webkit-animation-timing-function: ease-in-out;
1300 |     animation-timing-function: ease-in-out; } }
1301 | 
1302 | .openDownRightReturn {
1303 |   -webkit-animation-name: openDownRightReturn;
1304 |   animation-name: openDownRightReturn; }
1305 | 
1306 | @-webkit-keyframes openDownRightReturn {
1307 |   0% {
1308 |     transform-origin: bottom right;
1309 |     transform: rotate(110deg);
1310 |     -webkit-animation-timing-function: ease-in-out;
1311 |     animation-timing-function: ease-in-out; }
1312 |   100% {
1313 |     transform-origin: bottom right;
1314 |     transform: rotate(0deg);
1315 |     -webkit-animation-timing-function: ease-out;
1316 |     animation-timing-function: ease-out; } }
1317 | 
1318 | @keyframes openDownRightReturn {
1319 |   0% {
1320 |     transform-origin: bottom right;
1321 |     transform: rotate(110deg);
1322 |     -webkit-animation-timing-function: ease-in-out;
1323 |     animation-timing-function: ease-in-out; }
1324 |   100% {
1325 |     transform-origin: bottom right;
1326 |     transform: rotate(0deg);
1327 |     -webkit-animation-timing-function: ease-out;
1328 |     animation-timing-function: ease-out; } }
1329 | 
1330 | .openUpLeft {
1331 |   -webkit-animation-name: openUpLeft;
1332 |   animation-name: openUpLeft; }
1333 | 
1334 | @-webkit-keyframes openUpLeft {
1335 |   0% {
1336 |     transform-origin: top left;
1337 |     transform: rotate(0deg);
1338 |     -webkit-animation-timing-function: ease-out;
1339 |     animation-timing-function: ease-out; }
1340 |   100% {
1341 |     transform-origin: top left;
1342 |     transform: rotate(110deg);
1343 |     -webkit-animation-timing-function: ease-in-out;
1344 |     animation-timing-function: ease-in-out; } }
1345 | 
1346 | @keyframes openUpLeft {
1347 |   0% {
1348 |     transform-origin: top left;
1349 |     transform: rotate(0deg);
1350 |     -webkit-animation-timing-function: ease-out;
1351 |     animation-timing-function: ease-out; }
1352 |   100% {
1353 |     transform-origin: top left;
1354 |     transform: rotate(110deg);
1355 |     -webkit-animation-timing-function: ease-in-out;
1356 |     animation-timing-function: ease-in-out; } }
1357 | 
1358 | .openUpLeftReturn {
1359 |   -webkit-animation-name: openUpLeftReturn;
1360 |   animation-name: openUpLeftReturn; }
1361 | 
1362 | @-webkit-keyframes openUpLeftReturn {
1363 |   0% {
1364 |     transform-origin: top left;
1365 |     transform: rotate(110deg);
1366 |     -webkit-animation-timing-function: ease-in-out;
1367 |     animation-timing-function: ease-in-out; }
1368 |   100% {
1369 |     transform-origin: top left;
1370 |     transform: rotate(0deg);
1371 |     -webkit-animation-timing-function: ease-out;
1372 |     animation-timing-function: ease-out; } }
1373 | 
1374 | @keyframes openUpLeftReturn {
1375 |   0% {
1376 |     transform-origin: top left;
1377 |     transform: rotate(110deg);
1378 |     -webkit-animation-timing-function: ease-in-out;
1379 |     animation-timing-function: ease-in-out; }
1380 |   100% {
1381 |     transform-origin: top left;
1382 |     transform: rotate(0deg);
1383 |     -webkit-animation-timing-function: ease-out;
1384 |     animation-timing-function: ease-out; } }
1385 | 
1386 | .openUpRight {
1387 |   -webkit-animation-name: openUpRight;
1388 |   animation-name: openUpRight; }
1389 | 
1390 | @-webkit-keyframes openUpRight {
1391 |   0% {
1392 |     transform-origin: top right;
1393 |     transform: rotate(0deg);
1394 |     -webkit-animation-timing-function: ease-out;
1395 |     animation-timing-function: ease-out; }
1396 |   100% {
1397 |     transform-origin: top right;
1398 |     transform: rotate(-110deg);
1399 |     -webkit-animation-timing-function: ease-in-out;
1400 |     animation-timing-function: ease-in-out; } }
1401 | 
1402 | @keyframes openUpRight {
1403 |   0% {
1404 |     transform-origin: top right;
1405 |     transform: rotate(0deg);
1406 |     -webkit-animation-timing-function: ease-out;
1407 |     animation-timing-function: ease-out; }
1408 |   100% {
1409 |     transform-origin: top right;
1410 |     transform: rotate(-110deg);
1411 |     -webkit-animation-timing-function: ease-in-out;
1412 |     animation-timing-function: ease-in-out; } }
1413 | 
1414 | .openUpRightReturn {
1415 |   -webkit-animation-name: openUpRightReturn;
1416 |   animation-name: openUpRightReturn; }
1417 | 
1418 | @-webkit-keyframes openUpRightReturn {
1419 |   0% {
1420 |     transform-origin: top right;
1421 |     transform: rotate(-110deg);
1422 |     -webkit-animation-timing-function: ease-in-out;
1423 |     animation-timing-function: ease-in-out; }
1424 |   100% {
1425 |     transform-origin: top right;
1426 |     transform: rotate(0deg);
1427 |     -webkit-animation-timing-function: ease-out;
1428 |     animation-timing-function: ease-out; } }
1429 | 
1430 | @keyframes openUpRightReturn {
1431 |   0% {
1432 |     transform-origin: top right;
1433 |     transform: rotate(-110deg);
1434 |     -webkit-animation-timing-function: ease-in-out;
1435 |     animation-timing-function: ease-in-out; }
1436 |   100% {
1437 |     transform-origin: top right;
1438 |     transform: rotate(0deg);
1439 |     -webkit-animation-timing-function: ease-out;
1440 |     animation-timing-function: ease-out; } }
1441 | 
1442 | .openDownLeftOut {
1443 |   -webkit-animation-name: openDownLeftOut;
1444 |   animation-name: openDownLeftOut; }
1445 | 
1446 | @-webkit-keyframes openDownLeftOut {
1447 |   0% {
1448 |     opacity: 1;
1449 |     transform-origin: bottom left;
1450 |     transform: rotate(0deg);
1451 |     -webkit-animation-timing-function: ease-out;
1452 |     animation-timing-function: ease-out; }
1453 |   100% {
1454 |     opacity: 0;
1455 |     transform-origin: bottom left;
1456 |     transform: rotate(-110deg);
1457 |     -webkit-animation-timing-function: ease-in-out;
1458 |     animation-timing-function: ease-in-out; } }
1459 | 
1460 | @keyframes openDownLeftOut {
1461 |   0% {
1462 |     opacity: 1;
1463 |     transform-origin: bottom left;
1464 |     transform: rotate(0deg);
1465 |     -webkit-animation-timing-function: ease-out;
1466 |     animation-timing-function: ease-out; }
1467 |   100% {
1468 |     opacity: 0;
1469 |     transform-origin: bottom left;
1470 |     transform: rotate(-110deg);
1471 |     -webkit-animation-timing-function: ease-in-out;
1472 |     animation-timing-function: ease-in-out; } }
1473 | 
1474 | .openDownRightOut {
1475 |   -webkit-animation-name: openDownRightOut;
1476 |   animation-name: openDownRightOut; }
1477 | 
1478 | @-webkit-keyframes openDownRightOut {
1479 |   0% {
1480 |     opacity: 1;
1481 |     transform-origin: bottom right;
1482 |     transform: rotate(0deg);
1483 |     -webkit-animation-timing-function: ease-out;
1484 |     animation-timing-function: ease-out; }
1485 |   100% {
1486 |     opacity: 0;
1487 |     transform-origin: bottom right;
1488 |     transform: rotate(110deg);
1489 |     -webkit-animation-timing-function: ease-in-out;
1490 |     animation-timing-function: ease-in-out; } }
1491 | 
1492 | @keyframes openDownRightOut {
1493 |   0% {
1494 |     opacity: 1;
1495 |     transform-origin: bottom right;
1496 |     transform: rotate(0deg);
1497 |     -webkit-animation-timing-function: ease-out;
1498 |     animation-timing-function: ease-out; }
1499 |   100% {
1500 |     opacity: 0;
1501 |     transform-origin: bottom right;
1502 |     transform: rotate(110deg);
1503 |     -webkit-animation-timing-function: ease-in-out;
1504 |     animation-timing-function: ease-in-out; } }
1505 | 
1506 | .openUpLeftOut {
1507 |   -webkit-animation-name: openUpLeftOut;
1508 |   animation-name: openUpLeftOut; }
1509 | 
1510 | @-webkit-keyframes openUpLeftOut {
1511 |   0% {
1512 |     opacity: 1;
1513 |     transform-origin: top left;
1514 |     transform: rotate(0deg);
1515 |     -webkit-animation-timing-function: ease-out;
1516 |     animation-timing-function: ease-out; }
1517 |   100% {
1518 |     opacity: 0;
1519 |     transform-origin: top left;
1520 |     transform: rotate(110deg);
1521 |     -webkit-animation-timing-function: ease-in-out;
1522 |     animation-timing-function: ease-in-out; } }
1523 | 
1524 | @keyframes openUpLeftOut {
1525 |   0% {
1526 |     opacity: 1;
1527 |     transform-origin: top left;
1528 |     transform: rotate(0deg);
1529 |     -webkit-animation-timing-function: ease-out;
1530 |     animation-timing-function: ease-out; }
1531 |   100% {
1532 |     opacity: 0;
1533 |     transform-origin: top left;
1534 |     transform: rotate(110deg);
1535 |     -webkit-animation-timing-function: ease-in-out;
1536 |     animation-timing-function: ease-in-out; } }
1537 | 
1538 | .openUpRightOut {
1539 |   -webkit-animation-name: openUpRightOut;
1540 |   animation-name: openUpRightOut; }
1541 | 
1542 | @-webkit-keyframes openUpRightOut {
1543 |   0% {
1544 |     opacity: 1;
1545 |     transform-origin: top right;
1546 |     transform: rotate(0deg);
1547 |     -webkit-animation-timing-function: ease-out;
1548 |     animation-timing-function: ease-out; }
1549 |   100% {
1550 |     opacity: 0;
1551 |     transform-origin: top right;
1552 |     transform: rotate(-110deg);
1553 |     -webkit-animation-timing-function: ease-in-out;
1554 |     animation-timing-function: ease-in-out; } }
1555 | 
1556 | @keyframes openUpRightOut {
1557 |   0% {
1558 |     opacity: 1;
1559 |     transform-origin: top right;
1560 |     transform: rotate(0deg);
1561 |     -webkit-animation-timing-function: ease-out;
1562 |     animation-timing-function: ease-out; }
1563 |   100% {
1564 |     opacity: 0;
1565 |     transform-origin: top right;
1566 |     transform: rotate(-110deg);
1567 |     -webkit-animation-timing-function: ease-in-out;
1568 |     animation-timing-function: ease-in-out; } }
1569 | 
1570 | .tinDownIn {
1571 |   -webkit-animation-name: tinDownIn;
1572 |   animation-name: tinDownIn; }
1573 | 
1574 | @-webkit-keyframes tinDownIn {
1575 |   0% {
1576 |     opacity: 0;
1577 |     transform: scale(1, 1) translateY(900%); }
1578 |   50%,
1579 |   70%,
1580 |   90% {
1581 |     opacity: 1;
1582 |     transform: scale(1.1, 1.1) translateY(0); }
1583 |   60%,
1584 |   80%,
1585 |   100% {
1586 |     opacity: 1;
1587 |     transform: scale(1, 1) translateY(0); } }
1588 | 
1589 | @keyframes tinDownIn {
1590 |   0% {
1591 |     opacity: 0;
1592 |     transform: scale(1, 1) translateY(900%); }
1593 |   50%,
1594 |   70%,
1595 |   90% {
1596 |     opacity: 1;
1597 |     transform: scale(1.1, 1.1) translateY(0); }
1598 |   60%,
1599 |   80%,
1600 |   100% {
1601 |     opacity: 1;
1602 |     transform: scale(1, 1) translateY(0); } }
1603 | 
1604 | .tinDownOut {
1605 |   -webkit-animation-name: tinDownOut;
1606 |   animation-name: tinDownOut; }
1607 | 
1608 | @-webkit-keyframes tinDownOut {
1609 |   0%,
1610 |   20%,
1611 |   40%,
1612 |   50% {
1613 |     opacity: 1;
1614 |     transform: scale(1, 1) translateY(0); }
1615 |   10%,
1616 |   30% {
1617 |     opacity: 1;
1618 |     transform: scale(1.1, 1.1) translateY(0); }
1619 |   100% {
1620 |     opacity: 0;
1621 |     transform: scale(1, 1) translateY(900%); } }
1622 | 
1623 | @keyframes tinDownOut {
1624 |   0%,
1625 |   20%,
1626 |   40%,
1627 |   50% {
1628 |     opacity: 1;
1629 |     transform: scale(1, 1) translateY(0); }
1630 |   10%,
1631 |   30% {
1632 |     opacity: 1;
1633 |     transform: scale(1.1, 1.1) translateY(0); }
1634 |   100% {
1635 |     opacity: 0;
1636 |     transform: scale(1, 1) translateY(900%); } }
1637 | 
1638 | .tinLeftIn {
1639 |   -webkit-animation-name: tinLeftIn;
1640 |   animation-name: tinLeftIn; }
1641 | 
1642 | @-webkit-keyframes tinLeftIn {
1643 |   0% {
1644 |     opacity: 0;
1645 |     transform: scale(1, 1) translateX(-900%); }
1646 |   50%,
1647 |   70%,
1648 |   90% {
1649 |     opacity: 1;
1650 |     transform: scale(1.1, 1.1) translateX(0); }
1651 |   60%,
1652 |   80%,
1653 |   100% {
1654 |     opacity: 1;
1655 |     transform: scale(1, 1) translateX(0); } }
1656 | 
1657 | @keyframes tinLeftIn {
1658 |   0% {
1659 |     opacity: 0;
1660 |     transform: scale(1, 1) translateX(-900%); }
1661 |   50%,
1662 |   70%,
1663 |   90% {
1664 |     opacity: 1;
1665 |     transform: scale(1.1, 1.1) translateX(0); }
1666 |   60%,
1667 |   80%,
1668 |   100% {
1669 |     opacity: 1;
1670 |     transform: scale(1, 1) translateX(0); } }
1671 | 
1672 | .tinLeftOut {
1673 |   -webkit-animation-name: tinLeftOut;
1674 |   animation-name: tinLeftOut; }
1675 | 
1676 | @-webkit-keyframes tinLeftOut {
1677 |   0%,
1678 |   20%,
1679 |   40%,
1680 |   50% {
1681 |     opacity: 1;
1682 |     transform: scale(1, 1) translateX(0); }
1683 |   10%,
1684 |   30% {
1685 |     opacity: 1;
1686 |     transform: scale(1.1, 1.1) translateX(0); }
1687 |   100% {
1688 |     opacity: 0;
1689 |     transform: scale(1, 1) translateX(-900%); } }
1690 | 
1691 | @keyframes tinLeftOut {
1692 |   0%,
1693 |   20%,
1694 |   40%,
1695 |   50% {
1696 |     opacity: 1;
1697 |     transform: scale(1, 1) translateX(0); }
1698 |   10%,
1699 |   30% {
1700 |     opacity: 1;
1701 |     transform: scale(1.1, 1.1) translateX(0); }
1702 |   100% {
1703 |     opacity: 0;
1704 |     transform: scale(1, 1) translateX(-900%); } }
1705 | 
1706 | .tinRightIn {
1707 |   -webkit-animation-name: tinRightIn;
1708 |   animation-name: tinRightIn; }
1709 | 
1710 | @-webkit-keyframes tinRightIn {
1711 |   0% {
1712 |     opacity: 0;
1713 |     transform: scale(1, 1) translateX(900%); }
1714 |   50%,
1715 |   70%,
1716 |   90% {
1717 |     opacity: 1;
1718 |     transform: scale(1.1, 1.1) translateX(0); }
1719 |   60%,
1720 |   80%,
1721 |   100% {
1722 |     opacity: 1;
1723 |     transform: scale(1, 1) translateX(0); } }
1724 | 
1725 | @keyframes tinRightIn {
1726 |   0% {
1727 |     opacity: 0;
1728 |     transform: scale(1, 1) translateX(900%); }
1729 |   50%,
1730 |   70%,
1731 |   90% {
1732 |     opacity: 1;
1733 |     transform: scale(1.1, 1.1) translateX(0); }
1734 |   60%,
1735 |   80%,
1736 |   100% {
1737 |     opacity: 1;
1738 |     transform: scale(1, 1) translateX(0); } }
1739 | 
1740 | .tinRightOut {
1741 |   -webkit-animation-name: tinRightOut;
1742 |   animation-name: tinRightOut; }
1743 | 
1744 | @-webkit-keyframes tinRightOut {
1745 |   0%,
1746 |   20%,
1747 |   40%,
1748 |   50% {
1749 |     opacity: 1;
1750 |     transform: scale(1, 1) translateX(0); }
1751 |   10%,
1752 |   30% {
1753 |     opacity: 1;
1754 |     transform: scale(1.1, 1.1) translateX(0); }
1755 |   100% {
1756 |     opacity: 0;
1757 |     transform: scale(1, 1) translateX(900%); } }
1758 | 
1759 | @keyframes tinRightOut {
1760 |   0%,
1761 |   20%,
1762 |   40%,
1763 |   50% {
1764 |     opacity: 1;
1765 |     transform: scale(1, 1) translateX(0); }
1766 |   10%,
1767 |   30% {
1768 |     opacity: 1;
1769 |     transform: scale(1.1, 1.1) translateX(0); }
1770 |   100% {
1771 |     opacity: 0;
1772 |     transform: scale(1, 1) translateX(900%); } }
1773 | 
1774 | .tinUpIn {
1775 |   -webkit-animation-name: tinUpIn;
1776 |   animation-name: tinUpIn; }
1777 | 
1778 | @-webkit-keyframes tinUpIn {
1779 |   0% {
1780 |     opacity: 0;
1781 |     transform: scale(1, 1) translateY(-900%); }
1782 |   50%,
1783 |   70%,
1784 |   90% {
1785 |     opacity: 1;
1786 |     transform: scale(1.1, 1.1) translateY(0); }
1787 |   60%,
1788 |   80%,
1789 |   100% {
1790 |     opacity: 1;
1791 |     transform: scale(1, 1) translateY(0); } }
1792 | 
1793 | @keyframes tinUpIn {
1794 |   0% {
1795 |     opacity: 0;
1796 |     transform: scale(1, 1) translateY(-900%); }
1797 |   50%,
1798 |   70%,
1799 |   90% {
1800 |     opacity: 1;
1801 |     transform: scale(1.1, 1.1) translateY(0); }
1802 |   60%,
1803 |   80%,
1804 |   100% {
1805 |     opacity: 1;
1806 |     transform: scale(1, 1) translateY(0); } }
1807 | 
1808 | .tinUpOut {
1809 |   -webkit-animation-name: tinUpOut;
1810 |   animation-name: tinUpOut; }
1811 | 
1812 | @-webkit-keyframes tinUpOut {
1813 |   0%,
1814 |   20%,
1815 |   40%,
1816 |   50% {
1817 |     opacity: 1;
1818 |     transform: scale(1, 1) translateY(0); }
1819 |   10%,
1820 |   30% {
1821 |     opacity: 1;
1822 |     transform: scale(1.1, 1.1) translateY(0); }
1823 |   100% {
1824 |     opacity: 0;
1825 |     transform: scale(1, 1) translateY(-900%); } }
1826 | 
1827 | @keyframes tinUpOut {
1828 |   0%,
1829 |   20%,
1830 |   40%,
1831 |   50% {
1832 |     opacity: 1;
1833 |     transform: scale(1, 1) translateY(0); }
1834 |   10%,
1835 |   30% {
1836 |     opacity: 1;
1837 |     transform: scale(1.1, 1.1) translateY(0); }
1838 |   100% {
1839 |     opacity: 0;
1840 |     transform: scale(1, 1) translateY(-900%); } }
1841 | 
1842 | .magictime {
1843 |   -webkit-animation-duration: 1s;
1844 |           animation-duration: 1s;
1845 |   -webkit-animation-fill-mode: both;
1846 |           animation-fill-mode: both; }
1847 | 
1848 | @media (print), (prefers-reduced-motion) {
1849 |   .magictime {
1850 |     -webkit-animation: unset !important;
1851 |             animation: unset !important;
1852 |     transition: none !important; } }
1853 | /*# sourceMappingURL=magic.css.map */
1854 | 


--------------------------------------------------------------------------------
/css/badges.css:
--------------------------------------------------------------------------------
1 | /* Add your css for badges */


--------------------------------------------------------------------------------
/css/buttons.css:
--------------------------------------------------------------------------------
  1 | /* Add your Button component css to this file */
  2 | 
  3 | /*  button 1 */
  4 | 
  5 | .button {
  6 |   border-radius: 4px;
  7 | 
  8 |   border: none;
  9 |   color: #ffffff;
 10 |   text-align: center;
 11 |   font-size: 28px;
 12 |   padding: 20px;
 13 |   width: 200px;
 14 |   transition: all 0.5s;
 15 |   cursor: pointer;
 16 |   margin: 5px;
 17 | }
 18 | 
 19 | .button span {
 20 |   cursor: pointer;
 21 |   display: inline-block;
 22 |   position: relative;
 23 |   transition: 0.5s;
 24 | }
 25 | 
 26 | .button span:after {
 27 |   content: "\00bb";
 28 |   position: absolute;
 29 |   opacity: 0;
 30 |   top: 0;
 31 |   right: -20px;
 32 |   transition: 0.5s;
 33 | }
 34 | 
 35 | .button:hover span {
 36 |   padding-right: 25px;
 37 | }
 38 | 
 39 | .button:hover span:after {
 40 |   opacity: 1;
 41 |   right: 0;
 42 | }
 43 | 
 44 | /* Roncy r thomas */
 45 | 
 46 | #roncy-btn {
 47 |   width: 150px;
 48 |   height: 50px;
 49 |   border-radius: 180px;
 50 |   position: relative;
 51 |   background: linear-gradient(
 52 |     60deg,
 53 |     #f79533,
 54 |     #f37055,
 55 |     #ef4e7b,
 56 |     #a166ab,
 57 |     #5073b8,
 58 |     #1098ad,
 59 |     #07b39b,
 60 |     #6fba82
 61 |   );
 62 |   cursor: pointer;
 63 |   line-height: 12px;
 64 | }
 65 | 
 66 | #roncy-btn:before {
 67 |   content: "";
 68 |   z-index: 1;
 69 |   position: absolute;
 70 |   display: block;
 71 |   width: 80%;
 72 |   height: 70%;
 73 |   top: 15%;
 74 |   left: 10%;
 75 |   transition: 0.3s opacity ease-in-out;
 76 |   filter: blur(15px);
 77 |   opacity: 0;
 78 |   background: linear-gradient(
 79 |     60deg,
 80 |     #f79533,
 81 |     #f37055,
 82 |     #ef4e7b,
 83 |     #a166ab,
 84 |     #5073b8,
 85 |     #1098ad,
 86 |     #07b39b,
 87 |     #6fba82
 88 |   );
 89 | }
 90 | 
 91 | #roncy-btn:hover:before {
 92 |   opacity: 1;
 93 |   transition: 0.3s opacity ease-in-out;
 94 |   filter: blur(25px);
 95 |   background: linear-gradient(
 96 |     60deg,
 97 |     #f79533,
 98 |     #f37055,
 99 |     #ef4e7b,
100 |     #a166ab,
101 |     #5073b8,
102 |     #1098ad,
103 |     #07b39b,
104 |     #6fba82
105 |   );
106 | }
107 | 
108 | #roncy-btn:after {
109 |   content: "CLICK ME!";
110 |   text-align: center;
111 |   line-height: 40px;
112 |   font-size: 18px;
113 |   color: rgba(235, 235, 235, 1);
114 |   font-weight: bold;
115 |   z-index: 5;
116 |   position: absolute;
117 |   display: block;
118 |   border-radius: 180px;
119 |   width: 92%;
120 |   height: 80%;
121 |   top: 10%;
122 |   left: 4%;
123 |   background-color: rgb(19, 20, 22);
124 | }
125 | 
126 | /* James K Jose */
127 | .jkj {
128 |   background-color: #f79533;
129 | }
130 | /* Saksham Mahajan */
131 | .Saksham {
132 |   background-color: #f69696;
133 | }
134 | 
135 | /* irwanphan */
136 | #irwanphan-btn {
137 |   width: 150px;
138 |   height: 54px;
139 |   cursor: pointer;
140 |   line-height: 12px;
141 |   position: relative;
142 |   border-radius: 16px;
143 |   transition: .3s ease all;
144 |   background-color: #000f0b;
145 |   border: 2px solid #000f0b;
146 | }
147 | #irwanphan-btn::before {
148 |   top: 0;
149 |   left: 0;
150 |   right: 0;
151 |   bottom: 0;
152 |   margin: auto;
153 |   display: block;
154 |   font-weight: 600;
155 |   line-height: 54px;
156 |   color: aliceblue;
157 |   text-align: center;
158 |   position: absolute;
159 |   transition: .3s ease all;
160 |   content: "it's a button :)";
161 | }
162 | #irwanphan-btn:hover {
163 |   border: 2px solid #13d522;
164 | }
165 | #irwanphan-btn:hover::before {
166 |   color: #13d522;
167 | }


--------------------------------------------------------------------------------
/css/cardcolor.css:
--------------------------------------------------------------------------------
 1 | /* change your card color */
 2 | 
 3 | /* if you want change card color please specify your name as selector */
 4 | 
 5 | .philip {
 6 |   background-color: #5f067b;
 7 | }
 8 | 
 9 | .joyal {
10 |   background-color: #4e739c;
11 | }
12 | 
13 | .Kilari {
14 |   background-color: rgb(229, 9, 20);
15 | }
16 | 
17 | .tonal {
18 |   background-color: #43aa8b;
19 | }
20 | 
21 | .demo {
22 |   background-color: #35cce0;
23 | }
24 | 
25 | .roncy {
26 |   background-color: #a287f4;
27 | }
28 | 
29 | .irwanphan {
30 |   background: linear-gradient(270deg, #13d522, #000f0b);
31 | 	background-size: 400% 400%;
32 | 	-webkit-animation: sway 30s ease infinite;
33 | 	-moz-animation: sway 30s ease infinite;
34 | 	animation: sway 30s ease infinite;
35 | }
36 | @-webkit-keyframes sway {
37 |   0% {background-position: 0% 50%;}
38 | 	50% {background-position: 100% 50%;}
39 | 	100% {background-position: 0% 50%;}
40 | }
41 | @-moz-keyframes sway {
42 | 	0% {background-position: 0% 50%;}
43 | 	50% {background-position: 100% 50%;}
44 | 	100% {background-position: 0% 50%;}
45 | }
46 | @keyframes sway {
47 | 	0% {background-position: 0% 50%;}
48 | 	50% {background-position: 100% 50%;}
49 | 	100% {background-position: 0% 50%;}
50 | }
51 | 
52 | 
53 | 


--------------------------------------------------------------------------------
/css/dropdown.css:
--------------------------------------------------------------------------------
 1 | /* Add your css for dropdowns */
 2 | 
 3 | 
 4 | *{
 5 |     padding: 0;
 6 |     margin: 0;
 7 |     font-family: 'Lato', sans-serif;
 8 |     box-sizing: border-box;
 9 |   }
10 |   .float-right{
11 |     float: right;
12 |   }
13 |   .fa{
14 |    font-size: .8em;
15 |     line-height: 22px !important;
16 |   }
17 |   dropdown{
18 |      display: inline-block;
19 |      margin: 20px 50px; 
20 |   }
21 |   dropdown label, dropdown ul li{
22 |     display: block;
23 |     width: 200px;
24 |     background: #ECF0F1;
25 |     padding: 15px 20px;
26 |   }
27 |   dropdown label:hover, dropdown ul li:hover{
28 |     background: #1ABC9C;
29 |     color: white;
30 |     cursor: pointer;
31 |   }
32 |   dropdown label{
33 |     color: #1ABC9C;
34 |     border-left: 4px solid #1ABC9C;
35 |     border-radius: 0 5px 0 0; 
36 |     position: relative;
37 |     z-index: 2;
38 |   }
39 |   dropdown input{
40 |     display: none;
41 |   }
42 |   dropdown input ~ ul{
43 |     position: relative;
44 |     visibility: hidden;
45 |     opacity: 0;
46 |     top: -20px;
47 |     z-index: 1;
48 |   }
49 |   dropdown input:checked + label{
50 |     background: #1ABC9C;
51 |     color: white;
52 |   }
53 |   
54 |   dropdown input:checked ~ ul{
55 |     visibility: visible;
56 |     opacity: 1;
57 |     top: 0;
58 |   }
59 |   $colors: #E74C3C, #0072B5, #2C3E50;
60 |   
61 |   @for $i from 1 through length($colors) {
62 |     dropdown ul li:nth-child(#{$i}) {
63 |       border-left: 4px solid nth($colors, $i);
64 |       .fa{
65 |         color: nth($colors, $i);
66 |       }
67 |       &:hover {
68 |           background: nth($colors, $i);
69 |           color: white;
70 |         .fa{
71 |           color: white; 
72 |         }
73 |       }
74 |     }
75 |   }
76 |   
77 |   .animate{
78 |     -webkit-transition: all .3s;
79 |     -moz-transition: all .3s;
80 |     -ms-transition: all .3s;
81 |     -ms-transition: all .3s;
82 |     transition: all .3s;  
83 |     backface-visibility:hidden;
84 |     -webkit-backface-visibility:hidden; /* Chrome and Safari */
85 |     -moz-backface-visibility:hidden; /* Firefox */
86 |     -ms-backface-visibility:hidden; /* Internet Explorer */
87 |   }


--------------------------------------------------------------------------------
/css/forms.css:
--------------------------------------------------------------------------------
  1 | .login-box{
  2 |     background: linear-gradient(#141e30, #243b55);
  3 |     border-radius: 10px;
  4 |     padding: 40px;
  5 |     box-sizing: border-box;
  6 |     width: 400px;
  7 |     box-shadow: 0 15px 25px rgba(0,0,0,.6);
  8 |     margin-top: 0px;
  9 | }
 10 | 
 11 | .login-box h2 {
 12 |   margin: 0 0 30px;
 13 |   padding: 0;
 14 |   color: #fff;
 15 |   text-align: center;
 16 | }
 17 | 
 18 | .login-box .user-box {
 19 |   position: relative;
 20 | }
 21 | 
 22 | .login-box .user-box input {
 23 |   width: 100%;
 24 |   padding: 10px 0;
 25 |   font-size: 16px;
 26 |   color: #fff;
 27 |   margin-bottom: 30px;
 28 |   border: none;
 29 |   border-bottom: 1px solid #fff;
 30 |   outline: none;
 31 |   background: transparent;
 32 | }
 33 | .login-box .user-box label {
 34 |   position: absolute;
 35 |   top:0;
 36 |   left: 0;
 37 |   padding: 10px 0;
 38 |   font-size: 16px;
 39 |   color: #fff;
 40 |   pointer-events: none;
 41 |   transition: .5s;
 42 | }
 43 | 
 44 | .login-box .user-box input:focus ~ label,
 45 | .login-box .user-box input:valid ~ label {
 46 |   top: -20px;
 47 |   left: 0;
 48 |   color: #03e9f4;
 49 |   font-size: 12px;
 50 | }
 51 | 
 52 | .login-box form a {
 53 |   position: relative;
 54 |   display: inline-block;
 55 |   padding: 10px 20px;
 56 |   color: #03e9f4;
 57 |   font-size: 16px;
 58 |   text-decoration: none;
 59 |   text-transform: uppercase;
 60 |   overflow: hidden;
 61 |   transition: .5s;
 62 |   margin-top: 40px;
 63 |   letter-spacing: 4px
 64 | }
 65 | 
 66 | .login-box a:hover {
 67 |   background: #03e9f4;
 68 |   color: #fff;
 69 |   border-radius: 5px;
 70 |   box-shadow: 0 0 5px #03e9f4,
 71 |               0 0 25px #03e9f4,
 72 |               0 0 50px #03e9f4,
 73 |               0 0 100px #03e9f4;
 74 | }
 75 | 
 76 | .login-box a span {
 77 |   position: absolute;
 78 |   display: block;
 79 | }
 80 | 
 81 | .login-box a span:nth-child(1) {
 82 |   top: 0;
 83 |   left: -100%;
 84 |   width: 100%;
 85 |   height: 2px;
 86 |   background: linear-gradient(90deg, transparent, #03e9f4);
 87 |   animation: btn-anim1 1s linear infinite;
 88 | }
 89 | 
 90 | @keyframes btn-anim1 {
 91 |   0% {
 92 |     left: -100%;
 93 |   }
 94 |   50%,100% {
 95 |     left: 100%;
 96 |   }
 97 | }
 98 | 
 99 | .login-box a span:nth-child(2) {
100 |   top: -100%;
101 |   right: 0;
102 |   width: 2px;
103 |   height: 100%;
104 |   background: linear-gradient(180deg, transparent, #03e9f4);
105 |   animation: btn-anim2 1s linear infinite;
106 |   animation-delay: .25s
107 | }
108 | 
109 | @keyframes btn-anim2 {
110 |   0% {
111 |     top: -100%;
112 |   }
113 |   50%,100% {
114 |     top: 100%;
115 |   }
116 | }
117 | 
118 | .login-box a span:nth-child(3) {
119 |   bottom: 0;
120 |   right: -100%;
121 |   width: 100%;
122 |   height: 2px;
123 |   background: linear-gradient(270deg, transparent, #03e9f4);
124 |   animation: btn-anim3 1s linear infinite;
125 |   animation-delay: .5s
126 | }
127 | 
128 | @keyframes btn-anim3 {
129 |   0% {
130 |     right: -100%;
131 |   }
132 |   50%,100% {
133 |     right: 100%;
134 |   }
135 | }
136 | 
137 | .login-box a span:nth-child(4) {
138 |   bottom: -100%;
139 |   left: 0;
140 |   width: 2px;
141 |   height: 100%;
142 |   background: linear-gradient(360deg, transparent, #03e9f4);
143 |   animation: btn-anim4 1s linear infinite;
144 |   animation-delay: .75s
145 | }
146 | 
147 | @keyframes btn-anim4 {
148 |   0% {
149 |     bottom: -100%;
150 |   }
151 |   50%,100% {
152 |     bottom: 100%;
153 |   }
154 | }
155 | 
156 | /*James K Jose */
157 | .form-jkj form {
158 | 	margin:10% auto 0 auto;
159 | 	padding:30px;
160 | 	width:400px;
161 | 	height:auto;
162 | 	overflow:hidden;
163 | 	background:white;
164 | 	border-radius:10px;
165 | }
166 | 
167 | .form-jkj label {
168 | 	font-size:14px;
169 | 	color:darkgray;
170 | 	cursor:pointer;
171 | }
172 | 
173 | .form-jkj label,
174 | .form-jkj form input {
175 | 	float:left;
176 | 	clear:both;
177 | }
178 | 
179 | .form-jkj input {
180 | 	margin:15px 0;
181 | 	padding:15px 10px;
182 | 	width:100%;
183 | 	outline:none;
184 | 	border:1px solid #bbb;
185 | 	border-radius:20px;
186 | 	display:inline-block;
187 | 	-webkit-box-sizing:border-box;
188 | 	   -moz-box-sizing:border-box;
189 | 	        box-sizing:border-box;
190 |     -webkit-transition:0.2s ease all;
191 | 	   -moz-transition:0.2s ease all;
192 | 	    -ms-transition:0.2s ease all;
193 | 	     -o-transition:0.2s ease all;
194 | 	        transition:0.2s ease all;
195 | }
196 | 
197 | .form-jkj input[type=text]:focus,
198 | .form-jkj input[type="password"]:focus {
199 | 	border-color:cornflowerblue;
200 | }
201 | 
202 | .form-jkj input[type=submit] {
203 | 	padding:15px 50px;
204 | 	width:auto;
205 | 	background:#1abc9c;
206 | 	border:none;
207 | 	color:white;
208 | 	cursor:pointer;
209 | 	display:inline-block;
210 | 	float:right;
211 | 	clear:right;
212 | 	-webkit-transition:0.2s ease all;
213 | 	   -moz-transition:0.2s ease all;
214 | 	    -ms-transition:0.2s ease all;
215 | 	     -o-transition:0.2s ease all;
216 | 	        transition:0.2s ease all;
217 | }
218 | 
219 | .form-jkj input[type=submit]:hover {
220 | 	opacity:0.8;
221 | }
222 | 
223 | .form-jkj input[type="submit"]:active {
224 | 	opacity:0.4;
225 | }
226 | 
227 | .forgot,
228 | .register {
229 | 	margin:10px;
230 | 	float:left;
231 | 	clear:left;
232 | 	display:inline-block;
233 | 	color:cornflowerblue;
234 | 	text-decoration:none;
235 | }
236 | 
237 | .forgot:hover,
238 | .register:hover {
239 | 	color:darkgray;
240 | }
241 | 
242 | .jkj {
243 |   background-color: #f79533;
244 | }


--------------------------------------------------------------------------------
/css/navbar.css:
--------------------------------------------------------------------------------
1 | /* Add your css for navbar */


--------------------------------------------------------------------------------
/css/pagination.css:
--------------------------------------------------------------------------------
 1 | /* James K Jose */
 2 | .pagination-jkj {
 3 |     display: inline-block;
 4 |   }
 5 |   
 6 |   .pagination-jkj a {
 7 |     color: black;
 8 |     float: left;
 9 |     padding: 8px 16px;
10 |     text-decoration: none;
11 |   }
12 |   
13 |   .pagination-jkj a.active {
14 |     background-color: #4CAF50;
15 |     color: white;
16 |     border-radius: 5px;
17 |   }
18 |   
19 |   .pagination-jkj a:hover:not(.active) {
20 |     background-color: #ddd;
21 |     border-radius: 5px;
22 |   }
23 | 
24 |   .jkj {
25 |     background-color: #f79533;
26 |   }


--------------------------------------------------------------------------------
/css/pills.css:
--------------------------------------------------------------------------------
1 | /* Add your css for pills */


--------------------------------------------------------------------------------
/css/scrollspy.css:
--------------------------------------------------------------------------------
1 | /* Add your css for textfields */
2 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* Please don't edit this file*/
  2 | :root {
  3 |   --primary-color: #ffdd67;
  4 |   --padding-main: 20px;
  5 |   --primary-font: "Montserrat", sans-serif;
  6 |   --secondary-font: "Anton", sans-serif;
  7 |   --button-color: #ef584a;
  8 | }
  9 | 
 10 | body {
 11 |   font-family: var(--primary-font);
 12 | }
 13 | 
 14 | a {
 15 |   text-decoration: none !important;
 16 | }
 17 | 
 18 | footer {
 19 |   display: flex;
 20 |   align-items: center;
 21 |   justify-content: center;
 22 |   background-color: white;
 23 |   color: rgb(160, 160, 160);
 24 |   text-align: center;
 25 | }
 26 | 
 27 | /* global color values */
 28 | 
 29 | .title,
 30 | .card-title {
 31 |   color: white;
 32 | }
 33 | 
 34 | /* main section css */
 35 | 
 36 | .header,
 37 | .items {
 38 |   padding: var(--padding-main);
 39 | }
 40 | 
 41 | .row {
 42 |   margin: var(--padding-main);
 43 | }
 44 | 
 45 | .section-for-header,
 46 | .header {
 47 |   background-color: var(--primary-color);
 48 |   color: rgb(0, 0, 0);
 49 | }
 50 | 
 51 | .content {
 52 |   display: flex;
 53 |   justify-content: center;
 54 |   align-items: center;
 55 |   padding: 30px;
 56 |   flex-direction: column;
 57 | }
 58 | 
 59 | .content-header h1 {
 60 |   font-size: 4rem;
 61 |   font-weight: 900;
 62 |   font-family: var(--primary-font);
 63 |   letter-spacing: 3px;
 64 | }
 65 | 
 66 | .content-body h3 {
 67 |   font-weight: bold;
 68 | }
 69 | 
 70 | .btn {
 71 |   margin: 30px;
 72 |   display: inline-block;
 73 |   cursor: pointer;
 74 |   border-radius: 4px;
 75 |   font-weight: 600;
 76 |   padding: 0.75em 1em;
 77 |   transition: none;
 78 |   position: relative;
 79 |   background-color: #ff5a79;
 80 |   color: #fff;
 81 |   /* box-shadow: 0 4px #f3002e; */
 82 |   text-decoration: none;
 83 | }
 84 | 
 85 | /* card content */
 86 | 
 87 | .component {
 88 |   display: flex;
 89 |   justify-content: center;
 90 |   padding: var(--padding-main);
 91 | }
 92 | 
 93 | /* main-page css */
 94 | 
 95 | .main-page {
 96 |   transition: 0.3s;
 97 |   border-radius: 10px;
 98 |   padding: 0px;
 99 |   display: flex;
100 |   flex-direction: column;
101 |   justify-content: center;
102 |   align-items: center;
103 |   width: 300px;
104 |   height: 200px;
105 |   border: 2px solid #f0f0f0;
106 |   margin: 10px;
107 |   transition: 0.4s;
108 | }
109 | 
110 | .title strong {
111 |   font-size: 30px;
112 |   padding-top: 30px;
113 |   text-transform: uppercase;
114 |   letter-spacing: 3px;
115 | }
116 | 
117 | .content h1 {
118 |   font-size: 60px;
119 | }
120 | 
121 | /* common css for cards in other pages */
122 | 
123 | .card {
124 |   border-radius: 10px;
125 |   padding: 0px;
126 |   display: flex;
127 |   flex-direction: column;
128 |   justify-content: center;
129 |   align-items: center;
130 |   width: 500px;
131 |   max-height: 800px;
132 |   border: 2px solid #dddddd;
133 |   margin: 10px;
134 |   transition: 0.4s;
135 | }
136 | 
137 | .card:hover {
138 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
139 | }
140 | 
141 | .main-page:hover {
142 |   box-shadow: 3px 3px 20px 2px rgba(96, 96, 96, 0.25),
143 |     -3px -3px 20px 2px rgba(99, 99, 99, 0.22);
144 |   transform: scale(0.9, 0.9);
145 | }
146 | 
147 | .card-title {
148 |   border-radius: 10px 10px 0px 0px;
149 |   width: inherit;
150 |   padding: 20px;
151 |   margin: 0px;
152 |   text-align: center;
153 | }
154 | 
155 | .card-content {
156 |   padding: 50px;
157 | }
158 | 
159 | .creater-name h2 {
160 |   font-size: 20px;
161 | }
162 | 


--------------------------------------------------------------------------------
/css/tabs.css:
--------------------------------------------------------------------------------
1 | /* Add your css for textfields */
2 | 


--------------------------------------------------------------------------------
/css/tags.css:
--------------------------------------------------------------------------------
1 | /* Add your css for textfields */
2 | 


--------------------------------------------------------------------------------
/css/textfield.css:
--------------------------------------------------------------------------------
 1 | /* Add your css for textfields */
 2 | 
 3 | 
 4 | 
 5 | /* Tonal Mathew : start */
 6 | 
 7 | .form-tonal {
 8 |     margin: 100px;
 9 | }
10 | 
11 | .input-field-tonal {
12 |     position: relative;
13 |     width: 250px;
14 |     height: 44px;
15 |     line-height: 44px;
16 | }
17 | 
18 | .label-tonal {
19 |     position: absolute;
20 |     top: 0;
21 |     left: 0;
22 |     width: 100%;
23 |     color: #43aa8b;
24 |     transition: 0.2s all;
25 |     cursor: text;
26 | }
27 | 
28 | .input-tonal {
29 |     width: 100%;
30 |     border: 0;
31 |     outline: 0;
32 |     padding: 0.5rem 0;
33 |     border-bottom: 2px solid #43aa8b;
34 |     box-shadow: none;
35 |     color: #111;
36 | }
37 | 
38 | .input-tonal:invalid {
39 |     outline: 0;
40 | }
41 | 
42 | .input-tonal:required {
43 |     color: #00dd22;
44 | }
45 | 
46 | .input-tonal:focus,
47 | .input-tonal:valid {
48 |     border-color: #00dd22;
49 | }
50 | 
51 | .input-tonal:focus~label,
52 | .input-tonal:valid~label {
53 |     font-size: 14px;
54 |     top: -24px;
55 |     color: #00dd22;
56 | }  /* Tonal Mathew : end */


--------------------------------------------------------------------------------
/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rubenshibu/css-components/e36e35bf86a55583446fa5818e52a33113fb5a8a/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link rel="icon" href="favicon/android-chrome-192x192.png" type="image" />
  8 |     <link
  9 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 10 |       rel="stylesheet"
 11 |     />
 12 |     <link
 13 |       rel="stylesheet"
 14 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 15 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 16 |       crossorigin="anonymous"
 17 |     />
 18 |     <link rel="stylesheet" href="css/style.css" />
 19 |     <link rel="stylesheet" href="css/addyourcss.css" />
 20 |     <link rel="stylesheet" href="css/cardcolor.css" />
 21 |     <link rel="stylesheet" href="css/assets/magic.css" />
 22 |   </head>
 23 | 
 24 |   <body>
 25 |     <section class="header">
 26 |       <div class="container-fluid section-for-header">
 27 |         <div class="content">
 28 |           <div class="content-header">
 29 |             <h1>CSS COMPONENTS</h1>
 30 |           </div>
 31 |           <div class="content-body">
 32 |             <h3>Add your css Components</h3>
 33 |           </div>
 34 |           <div class="content-footer">
 35 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 36 |               >⚡ Github
 37 |             </a>
 38 |           </div>
 39 |         </div>
 40 |       </div>
 41 |     </section>
 42 |     <section class="items">
 43 |       <div class="container-fluid">
 44 |         <div class="row">
 45 |           <div class="col-lg-4">
 46 |             <div class="component">
 47 |               <a href="pages/buttons.html">
 48 |                 <div class="main-page">
 49 |                   <div class="title">
 50 |                     <strong>Button</strong>
 51 |                   </div>
 52 |                   <div class="content">
 53 |                     <h1 class="emoji">😀</h1>
 54 |                   </div>
 55 |                 </div>
 56 |               </a>
 57 |             </div>
 58 |           </div>
 59 |           <div class="col-lg-4">
 60 |             <div class="component">
 61 |               <a href="pages/forms.html">
 62 |                 <div class="main-page">
 63 |                   <div class="title">
 64 |                     <strong>Form</strong>
 65 |                   </div>
 66 |                   <div class="content">
 67 |                     <h1 class="emoji">😀</h1>
 68 |                   </div>
 69 |                 </div>
 70 |               </a>
 71 |             </div>
 72 |           </div>
 73 |           <div class="col-lg-4">
 74 |             <div class="component">
 75 |               <a href="pages/badges.html">
 76 |                 <div class="main-page">
 77 |                   <div class="title">
 78 |                     <strong>Badges</strong>
 79 |                   </div>
 80 |                   <div class="content">
 81 |                     <h1 class="emoji">😀</h1>
 82 |                   </div>
 83 |                 </div>
 84 |               </a>
 85 |             </div>
 86 |           </div>
 87 |         </div>
 88 |         <!-- Second Row -->
 89 |         <div class="row">
 90 |           <div class="col-lg-4">
 91 |             <div class="component">
 92 |               <a href="pages/textfield.html">
 93 |                 <div class="main-page">
 94 |                   <div class="title">
 95 |                     <strong>Text field</strong>
 96 |                   </div>
 97 |                   <div class="content">
 98 |                     <h1 class="emoji">😀</h1>
 99 |                   </div>
100 |                 </div>
101 |               </a>
102 |             </div>
103 |           </div>
104 |           <div class="col-lg-4">
105 |             <div class="component">
106 |               <a href="pages/navbar.html">
107 |                 <div class="main-page">
108 |                   <div class="title">
109 |                     <strong>navbar</strong>
110 |                   </div>
111 |                   <div class="content">
112 |                     <h1 class="emoji">😀</h1>
113 |                   </div>
114 |                 </div>
115 |               </a>
116 |             </div>
117 |           </div>
118 |           <div class="col-lg-4">
119 |             <div class="component">
120 |               <a href="pages/dropdown.html">
121 |                 <div class="main-page">
122 |                   <div class="title">
123 |                     <strong>dropdown</strong>
124 |                   </div>
125 |                   <div class="content">
126 |                     <h1 class="emoji">😀</h1>
127 |                   </div>
128 |                 </div>
129 |               </a>
130 |             </div>
131 |           </div>
132 |           <!-- Third Row -->
133 |           <div class="col-lg-4">
134 |             <div class="component">
135 |               <a href="pages/pills.html">
136 |                 <div class="main-page">
137 |                   <div class="title">
138 |                     <strong>Pills</strong>
139 |                   </div>
140 |                   <div class="content">
141 |                     <h1 class="emoji">😀</h1>
142 |                   </div>
143 |                 </div>
144 |               </a>
145 |             </div>
146 |           </div>
147 | 
148 |           <div class="col-lg-4">
149 |             <div class="component">
150 |               <a href="pages/pagination.html">
151 |                 <div class="main-page">
152 |                   <div class="title">
153 |                     <strong>Pagination</strong>
154 |                   </div>
155 |                   <div class="content">
156 |                     <h1 class="emoji">😀</h1>
157 |                   </div>
158 |                 </div>
159 |               </a>
160 |             </div>
161 |           </div>
162 | 
163 |           <div class="col-lg-4">
164 |             <div class="component">
165 |               <a href="pages/accordion.html">
166 |                 <div class="main-page">
167 |                   <div class="title">
168 |                     <strong>accordion</strong>
169 |                   </div>
170 |                   <div class="content">
171 |                     <h1 class="emoji">😀</h1>
172 |                   </div>
173 |                 </div>
174 |               </a>
175 |             </div>
176 |           </div>
177 | 
178 |           <!-- Forth Row -->
179 | 
180 |           <div class="col-lg-4">
181 |             <div class="component">
182 |               <a href="pages/tabs.html">
183 |                 <div class="main-page">
184 |                   <div class="title">
185 |                     <strong>Tabs</strong>
186 |                   </div>
187 |                   <div class="content">
188 |                     <h1 class="emoji">😀</h1>
189 |                   </div>
190 |                 </div>
191 |               </a>
192 |             </div>
193 |           </div>
194 | 
195 |           <div class="col-lg-4">
196 |             <div class="component">
197 |               <a href="pages/tags.html">
198 |                 <div class="main-page">
199 |                   <div class="title">
200 |                     <strong>Tags</strong>
201 |                   </div>
202 |                   <div class="content">
203 |                     <h1 class="emoji">😀</h1>
204 |                   </div>
205 |                 </div>
206 |               </a>
207 |             </div>
208 |           </div>
209 | 
210 |           <div class="col-lg-4">
211 |             <div class="component">
212 |               <a href="pages/scrollspy.html">
213 |                 <div class="main-page">
214 |                   <div class="title">
215 |                     <strong>Scrollspy</strong>
216 |                   </div>
217 |                   <div class="content">
218 |                     <h1 class="emoji">😀</h1>
219 |                   </div>
220 |                 </div>
221 |               </a>
222 |             </div>
223 |           </div>
224 | 
225 | 
226 |         </div>
227 |       </div>
228 |     </section>
229 |     <footer>
230 |       <p>made with   💛   by, <br /><strong>CS CHAPTER AJCESB</strong></p>
231 |     </footer>
232 |     <script src="js/index.js"></script>
233 |   </body>
234 | </html>
235 | 


--------------------------------------------------------------------------------
/js/accordion.js:
--------------------------------------------------------------------------------
 1 | var acc = document.getElementsByClassName("accordion-jkj");
 2 | var i;
 3 | 
 4 | for (i = 0; i < acc.length; i++) {
 5 |   acc[i].addEventListener("click", function() {
 6 |     this.classList.toggle("active");
 7 |     var panel = this.nextElementSibling;
 8 |     if (panel.style.maxHeight) {
 9 |       panel.style.maxHeight = null;
10 |     } else {
11 |       panel.style.maxHeight = panel.scrollHeight + "px";
12 |     }
13 |   });
14 | }


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
 1 | // animation part
 2 | const card = document.querySelectorAll(".card");
 3 | card.forEach((card) => {
 4 |   card.classList.add("magictime", "swashIn");
 5 | });
 6 | 
 7 | const mainPageCards = document.querySelectorAll(".main-page");
 8 | const emojis = document.querySelectorAll(".emoji");
 9 | 
10 | const changeColor = () => {
11 |   // color part
12 |   // Random color creation
13 |   var color = [
14 |     "56D1D8",
15 |     "0078D7",
16 |     "EF584A",
17 |     "FF5864",
18 |     "ab0e86",
19 |     "e01171",
20 |     "2aaf74",
21 |     "4ed99c",
22 |     "f7aa00",
23 |     "303841",
24 |     "ffa5a5",
25 |     "7579e7",
26 |     "f08a5d",
27 |     "132743",
28 |     "1a1c20",
29 |     "43658b",
30 |     "16213e",
31 |   ];
32 | 
33 |   // color is changing for every two seconds
34 |   mainPageCards.forEach((mainPageCard) => {
35 |     let selectedColor = "#" + color[Math.floor(Math.random() * color.length)];
36 |     mainPageCard.style.backgroundColor = selectedColor;
37 |   });
38 | };
39 | 
40 | const changeEmoji = () => {
41 |   // Random emoji creation
42 |   var emojisList = [
43 |     "😃",
44 |     "😁",
45 |     "🤣",
46 |     "🙃",
47 |     "🥳",
48 |     "😝",
49 |     "🤔",
50 |     "😐",
51 |     "😜",
52 |     "🤨",
53 |     "🙄",
54 |     "😷",
55 |     "😈",
56 |     "🥱",
57 |     "😏",
58 |   ];
59 | 
60 |   emojis.forEach((emoji) => {
61 |     let selectedEmoji = emojisList[Math.floor(Math.random() * emojis.length)];
62 |     emoji.textContent = selectedEmoji;
63 |   });
64 | };
65 | 
66 | changeEmoji();
67 | changeColor();
68 | 
69 | setInterval(() => {
70 |   changeColor();
71 | }, 2000);
72 | 


--------------------------------------------------------------------------------
/pages/accordion.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link
  8 |       rel="icon"
  9 |       href="../favicon/android-chrome-192x192.png"
 10 |       type="image"
 11 |     />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="../css/style.css" />
 23 |     <link rel="stylesheet" href="../css/accordion.css" />
 24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
 25 |     <link rel="stylesheet" href="../css/assets/magic.css" /> 
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <section class="header">
 30 |       <div class="container-fluid section-for-header">
 31 |         <div class="content">
 32 |           <div class="content-header">
 33 |             <h1>ACCORDION</h1>
 34 |           </div>
 35 |           <div class="content-body">
 36 |             <h3>Add your different Accordion</h3>
 37 |           </div>
 38 |           <div class="content-footer">
 39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 40 |               >⚡ Github
 41 |             </a>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </section>
 46 |     <section class="items">
 47 |       <div class="container-fluid">
 48 |         <!--          your name     -->
 49 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
 50 | 
 51 |         <!-- James K Jose -->
 52 | <div class="row">
 53 |   <div class="col-lg-6">
 54 |     <div class="component">
 55 |       <div class="card magictime">
 56 |         <div class="card-title jkj">
 57 |           <strong>Accordion</strong>
 58 |         </div>
 59 |         <div class="card-content">
 60 |          
 61 |           <button class="accordion-jkj">Section 1</button>
 62 |           <div class="panel">
 63 |             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores voluptates doloribus asperiores repellat quaerat illum ad enim minima eaque est!</p>
 64 |           </div>
 65 |           
 66 |           <button class="accordion-jkj">Section 2</button>
 67 |           <div class="panel">
 68 |             <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate fugit voluptatibus accusamus non inventore laborum aliquam sint! Maxime, saepe repellendus!</p>
 69 |           </div>
 70 |           
 71 |           <button class="accordion-jkj">Section 3</button>
 72 |           <div class="panel">
 73 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nulla laborum suscipit iusto obcaecati ipsam soluta, in sit iste temporibus?</p>
 74 |           </div> 
 75 |         
 76 |         </div>
 77 |       </div>
 78 |     </div>
 79 |   </div>
 80 |   <div class="col-lg-6">
 81 |     <div class="component">
 82 |       <div class="card magictime">        
 83 |         <div class="card-title jkj">
 84 |           <strong>Creator</strong>
 85 |         </div>
 86 |         <div class="card-content">
 87 |           <div class="creater-name">
 88 |             <h2>
 89 |               <b>Name:</b>
 90 |               <span>
 91 |               <a href="http://github.com/jamesjose03">James Kaviyil Jose </a>
 92 |               </span>
 93 |             </h2>
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 |     </div>
 98 |   </div>
 99 | </div>
100 |       </div>
101 |     </section>
102 |     <footer>
103 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
104 |     </footer>
105 |     <script src="../js/index.js"></script>
106 |     <script src="../js/accordion.js"></script>
107 |   </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/pages/badges.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Css Components</title>
 7 |     <link
 8 |       rel="icon"
 9 |       href="../favicon/android-chrome-192x192.png"
10 |       type="image"
11 |     />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |     <link
17 |       rel="stylesheet"
18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
20 |       crossorigin="anonymous"
21 |     />
22 |     <link rel="stylesheet" href="../css/style.css" />
23 |     <link rel="stylesheet" href="../css/badges.css" />
24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
26 |   </head>
27 | 
28 |   <body>
29 |     <section class="header">
30 |       <div class="container-fluid section-for-header">
31 |         <div class="content">
32 |           <div class="content-header">
33 |             <h1>BADGES</h1>
34 |           </div>
35 |           <div class="content-body">
36 |             <h3>Add your different badges</h3>
37 |           </div>
38 |           <div class="content-footer">
39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
40 |               >⚡ Github
41 |             </a>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </section>
46 |     <section class="items">
47 |       <div class="container-fluid">
48 |         <!--          your name     -->
49 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
50 |       </div>
51 |     </section>
52 |     <footer>
53 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
54 |     </footer>
55 |     <script src="../js/index.js"></script>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/pages/buttons.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>Css Components</title>
  8 |   <link rel="icon" href="../favicon/android-chrome-192x192.png" type="image" />
  9 |   <link
 10 |     href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 11 |     rel="stylesheet" />
 12 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 13 |     integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
 14 |   <link rel="stylesheet" href="../css/style.css" />
 15 |   <link rel="stylesheet" href="../css/buttons.css" />
 16 |   <link rel="stylesheet" href="../css/cardcolor.css" />
 17 |   <link rel="stylesheet" href="../css/assets/magic.css" />
 18 | </head>
 19 | 
 20 | <body>
 21 |   <section class="header">
 22 |     <div class="container-fluid section-for-header">
 23 |       <div class="content">
 24 |         <div class="content-header">
 25 |           <h1>BUTTONS</h1>
 26 |         </div>
 27 |         <div class="content-body">
 28 |           <h3>Add your different Buttons</h3>
 29 |         </div>
 30 |         <div class="content-footer">
 31 |           <a href="https://github.com/rubenshibu/css-components" class="btn">⚡ Github
 32 |           </a>
 33 |         </div>
 34 |       </div>
 35 |     </div>
 36 |   </section>
 37 |   <section class="items">
 38 |     <div class="container-fluid">
 39 |       <!--          Philipp Proksch    -->
 40 |       <div class="row">
 41 |         <div class="col-lg-6">
 42 |           <div class="component">
 43 |             <div class="card magictime">
 44 |               <div class="card-title philip">
 45 |                 <strong>Button</strong>
 46 |               </div>
 47 |               <div class="card-content">
 48 |                 <button class="button philip"><span>Hover</span></button>
 49 |               </div>
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |         <div class="col-lg-6">
 54 |           <div class="component">
 55 |             <div class="card magictime">
 56 |               <div class="card-title philip">
 57 |                 <strong>Creator</strong>
 58 |               </div>
 59 |               <div class="card-content">
 60 |                 <div class="creater-name">
 61 |                   <h2>
 62 |                     <b>Name:</b><span>
 63 |                       <a href="https://github.com/prpwien">Philipp Proksch</a>
 64 |                     </span>
 65 |                   </h2>
 66 |                 </div>
 67 |               </div>
 68 |             </div>
 69 |           </div>
 70 |         </div>
 71 |       </div>
 72 | 
 73 |       <!-- Roncy R Thomas-->
 74 |       <div class="row">
 75 |         <div class="col-lg-6">
 76 |           <div class="component">
 77 |             <div class="card magictime">
 78 |               <div class="card-title roncy">
 79 |                 <strong>Button</strong>
 80 |               </div>
 81 |               <div class="card-content">
 82 |                 <div id="roncy-btn"></div>
 83 |               </div>
 84 |             </div>
 85 |           </div>
 86 |         </div>
 87 |         <div class="col-lg-6">
 88 |           <div class="component">
 89 |             <div class="card magictime">
 90 | 
 91 |               <div class="card-title roncy">
 92 |                 <strong>Creator</strong>
 93 |               </div>
 94 |               <div class="card-content">
 95 |                 <div class="creater-name">
 96 |                   <h2>
 97 |                     <b>Name:</b><span>
 98 |                       <a href="https://www.github.com/roncyrthomas">Roncy R Thomas</a>
 99 |                     </span>
100 |                   </h2>
101 |                 </div>
102 |               </div>
103 |             </div>
104 |           </div>
105 |         </div>
106 |       </div>
107 | 
108 |       <!-- Joyal Joseph -->
109 |       <div class="row">
110 |         <div class="col-lg-6">
111 |           <div class="component">
112 |             <div class="card magictime">
113 |               <div class="card-title joyal">
114 |                 <strong>Button</strong>
115 |               </div>
116 |               <div class="card-content">
117 |                 <button class="button joyal"><span>Hover</span></button>
118 |               </div>
119 |             </div>
120 |           </div>
121 |         </div>
122 |         <div class="col-lg-6">
123 |           <div class="component">
124 |             <div class="card magictime">
125 |               <div class="card-title joyal">
126 |                 <strong>Creator</strong>
127 |               </div>
128 |               <div class="card-content">
129 |                 <div class="creater-name">
130 |                   <h2>
131 |                     <b>Name:</b><span>
132 |                       <a href="https://github.com/joyaljoseph819">Joyal Joseph</a>
133 |                     </span>
134 |                   </h2>
135 |                 </div>
136 |               </div>
137 |             </div>
138 |           </div>
139 |         </div>
140 |       </div>
141 |       <!-- Thejasree Kilari -->
142 |       <div class="row">
143 |         <div class="col-lg-6">
144 |           <div class="component">
145 |             <div class="card magictime">
146 |               <div class="card-title Kilari">
147 |                 <strong>Button</strong>
148 |               </div>
149 |               <div class="card-content">
150 |                 <button class="button Kilari"><span>Hover</span></button>
151 |               </div>
152 |             </div>
153 |           </div>
154 |         </div>
155 |         <div class="col-lg-6">
156 |           <div class="component">
157 |             <div class="card magictime">
158 |               <div class="card-title Kilari">
159 |                 <strong>Creator</strong>
160 |               </div>
161 |               <div class="card-content">
162 |                 <div class="creater-name">
163 |                   <h2>
164 |                     <b>Name:</b><span>
165 |                       <a href="https://github.com/ThejasreeKilari">Thejasree Kilari</a>
166 |                     </span>
167 |                   </h2>
168 |                 </div>
169 |               </div>
170 |             </div>
171 |           </div>
172 |         </div>
173 |       </div>
174 |       <!-- James K Jose -->
175 |       <div class="row">
176 |         <div class="col-lg-6">
177 |           <div class="component">
178 |             <div class="card magictime">
179 |               <div class="card-title jkj">
180 |                 <strong>Button</strong>
181 |               </div>
182 |               <div class="card-content">
183 |                 <button class="button jkj"><span>Hover</span></button>
184 |               </div>
185 |             </div>
186 |           </div>
187 |         </div>
188 |         <div class="col-lg-6">
189 |           <div class="component">
190 |             <div class="card magictime">
191 |               <div class="card-title jkj">
192 |                 <strong>Creator</strong>
193 |               </div>
194 |               <div class="card-content">
195 |                 <div class="creater-name">
196 |                   <h2>
197 |                     <b>Name:</b><span>
198 |                       <a href="https://github.com/jamesjose03">James Kaviyil Jose</a>
199 |                     </span>
200 |                   </h2>
201 |                 </div>
202 |               </div>
203 |             </div>
204 |           </div>
205 |         </div>
206 | 
207 |       </div>
208 |       <!--Saksham Mahajan-->
209 |       <div class="row">
210 |         <div class="col-lg-6">
211 |           <div class="component">
212 |             <div class="card magictime">
213 |               <div class="card-title Saksham">
214 |                 <strong>Button</strong>
215 |               </div>
216 |               <div class="card-content">
217 |                 <button class="button Saksham"><span>Hover</span></button>
218 |               </div>
219 |             </div>
220 |           </div>
221 |         </div>
222 |         <div class="col-lg-6">
223 |           <div class="component">
224 |             <div class="card magictime">
225 |               <div class="card-title Saksham">
226 |                 <strong>Creator</strong>
227 |               </div>
228 |               <div class="card-content">
229 |                 <div class="creater-name">
230 |                   <h2>
231 |                     <b>Name:</b><span>
232 |                       <a href="https://github.com/mahajansaksham">Saksham Mahajan</a>
233 |                     </span>
234 |                   </h2>
235 |                 </div>
236 |               </div>
237 |             </div>
238 |           </div>
239 |         </div>
240 |       </div>
241 | 
242 |       <!--Irwan Phan-->
243 |       <div class="row">
244 |         <div class="col-lg-6">
245 |           <div class="component">
246 |             <div class="card magictime">
247 |               <div class="card-title irwanphan">
248 |                 <strong>Button</strong>
249 |               </div>
250 |               <div class="card-content">
251 |                 <div id="irwanphan-btn"></div>
252 |               </div>
253 |             </div>
254 |           </div>
255 |         </div>
256 |         <div class="col-lg-6">
257 |           <div class="component">
258 |             <div class="card magictime">
259 | 
260 |               <div class="card-title irwanphan">
261 |                 <strong>Creator</strong>
262 |               </div>
263 |               <div class="card-content">
264 |                 <div class="creater-name">
265 |                   <h2>
266 |                     <b>Name:</b><span>
267 |                       <a href="https://www.github.com/irwanphan">Irwan Phan</a>
268 |                     </span>
269 |                   </h2>
270 |                 </div>
271 |               </div>
272 |             </div>
273 |           </div>
274 |         </div>
275 |       </div>
276 |     </div>
277 |   </section>
278 |   <footer>
279 |     <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
280 |   </footer>
281 |   <script src="../js/index.js"></script>
282 | </body>
283 | 
284 | </html>


--------------------------------------------------------------------------------
/pages/dropdown.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link
  8 |       rel="icon"
  9 |       href="../favicon/android-chrome-192x192.png"
 10 |       type="image"
 11 |     />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="../css/style.css" />
 23 |     <link rel="stylesheet" href="../css/dropdown.css" />
 24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
 25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <section class="header">
 30 |       <div class="container-fluid section-for-header">
 31 |         <div class="content">
 32 |           <div class="content-header">
 33 |             <h1>DROPDOWNS</h1>
 34 |           </div>
 35 |           <div class="content-body">
 36 |             <h3>Add your different dropdowns</h3>
 37 |           </div>
 38 |           <div class="content-footer">
 39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 40 |               >⚡ Github
 41 |             </a>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </section>
 46 |     <section class="items">
 47 |       <div class="container-fluid">
 48 |         <!--          your name     -->
 49 |         <!-- Ruben Abraham Shibu -->
 50 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
 51 |         <div class="row">
 52 |           <div class="col-lg-6">
 53 |             <div class="component">
 54 |               <div class="card magictime">
 55 |                 <div class="card-title tonal">
 56 |                   <strong>Dropdown</strong>
 57 |                 </div>
 58 |                 <div class="card-content">
 59 |                   
 60 |                   <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
 61 | <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
 62 | <dropdown>
 63 |   <input id="toggle1" type="checkbox" checked>
 64 |   <label for="toggle1" class="animate">Editor<i class="fa fa-list float-right"></i></label>
 65 |   <ul class="animate">
 66 |     <li class="animate">Source<i class="fa fa-code float-right"></i></li>
 67 |     <li class="animate">Fullpage<i class="fa fa-arrows-alt float-right"></i></li>
 68 |     <li class="animate">Debug<i class="fa fa-cog float-right"></i></li>
 69 |   </ul>
 70 | </dropdown>
 71 | 
 72 |                 </div>
 73 |               </div>
 74 |             </div>
 75 |           </div>
 76 |           <div class="col-lg-6">
 77 |             <div class="component">
 78 |               <div class="card magictime">
 79 |                 <div class="card-title tonal">
 80 |                   <strong>Creator</strong>
 81 |                 </div>
 82 |                 <div class="card-content">
 83 |                   <div class="creater-name">
 84 |                     <h2>
 85 |                       <b>Name:</b>
 86 |                       <span>
 87 |                         <a href="https://github.com/rubenshibu">Ruben Shibu</a>
 88 |                       </span>
 89 |                     </h2>
 90 |                   </div>
 91 |                 </div>
 92 |               </div>
 93 |             </div>
 94 |           </div>
 95 |         </div>
 96 | 
 97 | 
 98 |       </div>
 99 |     </section>
100 |     <footer>
101 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
102 |     </footer>
103 |     <script src="../js/index.js"></script>
104 |   </body>
105 | </html>
106 | 


--------------------------------------------------------------------------------
/pages/forms.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>Css Components</title>
  8 |   <link rel="icon" href="../favicon/android-chrome-192x192.png" type="image" />
  9 |   <link
 10 |     href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 11 |     rel="stylesheet" />
 12 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 13 |     integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
 14 |   
 15 |   
 16 |   <link rel="stylesheet" href="../css/forms.css">
 17 |   <link rel="stylesheet" href="../css/style.css" />
 18 |   <link rel="stylesheet" href="../css/cardcolor.css" />
 19 |   <link rel="stylesheet" href="../css/assets/magic.css" />
 20 | </head>
 21 | 
 22 | <body>
 23 |   <section class="header">
 24 |     <div class="container-fluid section-for-header">
 25 |       <div class="content">
 26 |         <div class="content-header">
 27 |           <h1>CSS FORMS</h1>
 28 |         </div>
 29 |         <div class="content-body">
 30 |           <h3>Add your css Forms</h3>
 31 |         </div>
 32 |         <div class="content-footer">
 33 |           <a href="https://github.com/rubenshibu/css-components" class="btn">⚡ Github
 34 |           </a>
 35 |         </div>
 36 |       </div>
 37 |     </div>
 38 |   </section>
 39 |   <section class="items">
 40 |     <div class="container-fluid">
 41 |       <!--       RUBEN ABRAHAM SHIBU          -->
 42 |       <div class="row">
 43 |         <div class="col-lg-6">
 44 |           <div class="component">
 45 |             <div class="card magictime">
 46 |               <div class="card-title demo">
 47 |                 <strong>Form</strong>
 48 |               </div>
 49 |               <div class="card-content">
 50 |                 <div class="login-box">
 51 |                   <h2>Login</h2>
 52 |                   <form>
 53 |                     <div class="user-box">
 54 |                       <input type="text" name="" required="">
 55 |                       <label>Username</label>
 56 |                     </div>
 57 |                     <div class="user-box">
 58 |                       <input type="password" name="" required="">
 59 |                       <label>Password</label>
 60 |                     </div>
 61 |                     <a href="#">
 62 |                       <span></span>
 63 |                       <span></span>
 64 |                       <span></span>
 65 |                       <span></span>
 66 |                       Submit
 67 |                     </a>
 68 |                   </form>
 69 |                 </div>
 70 |               </div>
 71 |             </div>
 72 |           </div>
 73 |         </div>
 74 |         <div class="col-lg-6">
 75 |           <div class="component">
 76 |             <div class="card magictime">
 77 |               <div class="card-title demo">
 78 |                 <strong>Creator</strong>
 79 |               </div>
 80 |               <div class="card-content">
 81 |                 <div class="creater-name">
 82 |                   <h2>
 83 |                     <b>Name:</b><span>
 84 |                       <a href="https://github.com/rubenshibu">Ruben Shibu</a>
 85 |                     </span>
 86 |                   </h2>
 87 |                 </div>
 88 |               </div>
 89 |             </div>
 90 |           </div>
 91 |         </div>
 92 |       </div>
 93 | 
 94 |       <!--James K Jose-->
 95 | 
 96 |       <div class="row">
 97 |         <div class="col-lg-6">
 98 |           <div class="component">
 99 |             <div class="card magictime">
100 |               <div class="card-title jkj">
101 |                 <strong>Form</strong>
102 |               </div>
103 |               <div class="card-content">
104 |                 
105 |                 <div class="form-jkj">
106 |                   <form>
107 |                     <label for="username">Username</label>
108 |                     <input type="text" id="username" name="username" placeholder="Type in your username.." autocomplete="off" required />
109 |                   
110 |                     <label for="password">Password</label>
111 |                     <input type="password" id="password" name="password" placeholder="Enter your password.." autocomplete="off" required />
112 |                   
113 |                     <a class="forgot" href="#">Forgot Password?</a>
114 |                     <a class="register" href="#">Register</a>
115 |                   
116 |                     <input type="submit" name="submit" value="Log In" />
117 |                   
118 |                   </form>
119 |                 </div>
120 | 
121 |               </div>
122 |             </div>
123 |           </div>
124 |         </div>
125 |         <div class="col-lg-6">
126 |           <div class="component">
127 |             <div class="card magictime">
128 |               <div class="card-title jkj">
129 |                 <strong>Creator</strong>
130 |               </div>
131 |               <div class="card-content">
132 |                 <div class="creater-name">
133 |                   <h2>
134 |                     <b>Name:</b>
135 |                     <span>
136 |                       <a href="https://github.com/jamesjose03">James Kaviyil Jose</a>
137 |                     </span>
138 |                   </h2>
139 |                 </div>
140 |               </div>
141 |             </div>
142 |           </div>
143 |         </div>
144 |       </div>
145 | 
146 | 
147 |     </div>
148 |   </section>
149 |   <footer>
150 |     <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
151 |   </footer>
152 |   <script src="../js/index.js"></script>
153 | </body>
154 | 
155 | </html>


--------------------------------------------------------------------------------
/pages/navbar.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link
  8 |       rel="icon"
  9 |       href="../favicon/android-chrome-192x192.png"
 10 |       type="image"
 11 |     />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="../css/style.css" />
 23 |     <link rel="stylesheet" href="../css/navbar.css" />
 24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
 25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <section class="header">
 30 |       <div class="container-fluid section-for-header">
 31 |         <div class="content">
 32 |           <div class="content-header">
 33 |             <h1>NAVBAR</h1>
 34 |           </div>
 35 |           <div class="content-body">
 36 |             <h3>Add your different navbar</h3>
 37 |           </div>
 38 |           <div class="content-footer">
 39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 40 |               >⚡ Github
 41 |             </a>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </section>
 46 |     <section class="items">
 47 |       <div class="container-fluid">
 48 |         <!--          your name     -->
 49 |         <!-- Ruben Abraham Shibu -->
 50 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
 51 | 
 52 |         <div class="row">
 53 |           <div class="col-lg-6">
 54 |             <div class="component">
 55 |               <div class="card magictime">
 56 |                 <div class="card-title tonal">
 57 |                   <strong>Navbar</strong>
 58 |                 </div>
 59 |                 <div class="card-content">
 60 |                   <nav class="navbar navbar-light bg-light">
 61 |                     <form class="form-inline">
 62 |                       <button class="btn-ruben btn-outline-success" type="button">Main button</button>
 63 |                       <button class="btn-ruben btn-sm btn-outline-secondary" type="button">Smaller button</button>
 64 |                     </form>
 65 |                   </nav>
 66 | 
 67 |                 </div>
 68 |               </div>
 69 |             </div>
 70 |           </div>
 71 |           <div class="col-lg-6">
 72 |             <div class="component">
 73 |               <div class="card magictime">
 74 |                 <div class="card-title tonal">
 75 |                   <strong>Creator</strong>
 76 |                 </div>
 77 |                 <div class="card-content">
 78 |                   <div class="creater-name">
 79 |                     <h2>
 80 |                       <b>Name:</b>
 81 |                       <span>
 82 |                         <a href="https://github.com/rubenshibu">Ruben Shibu</a>
 83 |                       </span>
 84 |                     </h2>
 85 |                   </div>
 86 |                 </div>
 87 |               </div>
 88 |             </div>
 89 |           </div>
 90 |         </div>
 91 | 
 92 |       </div>
 93 |     </section>
 94 |     <footer>
 95 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
 96 |     </footer>
 97 |     <script src="../js/index.js"></script>
 98 |   </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/pages/pagination.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link
  8 |       rel="icon"
  9 |       href="../favicon/android-chrome-192x192.png"
 10 |       type="image"
 11 |     />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="../css/style.css" />
 23 |     <link rel="stylesheet" href="../css/pagination.css" />
 24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
 25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <section class="header">
 30 |       <div class="container-fluid section-for-header">
 31 |         <div class="content">
 32 |           <div class="content-header">
 33 |             <h1>PAGINATION</h1>
 34 |           </div>
 35 |           <div class="content-body">
 36 |             <h3>Add your different paginations</h3>
 37 |           </div>
 38 |           <div class="content-footer">
 39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 40 |               >⚡ Github
 41 |             </a>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </section>
 46 |     <section class="items">
 47 |       <div class="container-fluid">
 48 |         <!--          your name     -->
 49 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
 50 | 
 51 |         <div class="row">
 52 |           <div class="col-lg-6">
 53 |             <div class="component">
 54 |               <div class="card magictime">
 55 |                 <div class="card-title tonal">
 56 |                   <strong>Pagination</strong>
 57 |                 </div>
 58 |                 <div class="card-content">
 59 |                   
 60 |                   <nav aria-label="Page navigation example">
 61 |                     <ul class="pagination">
 62 |                       <li class="page-item"><a class="page-link" href="#">Previous</a></li>
 63 |                       <li class="page-item"><a class="page-link" href="#">1</a></li>
 64 |                       <li class="page-item"><a class="page-link" href="#">2</a></li>
 65 |                       <li class="page-item"><a class="page-link" href="#">3</a></li>
 66 |                       <li class="page-item"><a class="page-link" href="#">Next</a></li>
 67 |                     </ul>
 68 |                   </nav>
 69 | 
 70 |                 </div>
 71 |               </div>
 72 |             </div>
 73 |           </div>
 74 |           <div class="col-lg-6">
 75 |             <div class="component">
 76 |               <div class="card magictime">
 77 |                 <div class="card-title tonal">
 78 |                   <strong>Creator</strong>
 79 |                 </div>
 80 |                 <div class="card-content">
 81 |                   <div class="creater-name">
 82 |                     <h2>
 83 |                       <b>Name:</b>
 84 |                       <span>
 85 |                         <a href="https://github.com/rubenshibu">Ruben Shibu</a>
 86 |                       </span>
 87 |                     </h2>
 88 |                   </div>
 89 |                 </div>
 90 |               </div>
 91 |             </div>
 92 |           </div>
 93 |         </div>
 94 | 
 95 | 
 96 |         <div class="row">
 97 |           <div class="col-lg-6">
 98 |             <div class="component">
 99 |               <div class="card magictime">
100 |                 <div class="card-title tonal">
101 |                   <strong>Pagination</strong>
102 |                 </div>
103 |                 <div class="card-content">
104 |                   
105 |                   <nav aria-label="Page navigation example">
106 |                     <ul class="pagination">
107 |                       <li class="page-item">
108 |                         <a class="page-link" href="#" aria-label="Previous">
109 |                           <span aria-hidden="true">&laquo;</span>
110 |                           <span class="sr-only">Previous</span>
111 |                         </a>
112 |                       </li>
113 |                       <li class="page-item"><a class="page-link" href="#">1</a></li>
114 |                       <li class="page-item"><a class="page-link" href="#">2</a></li>
115 |                       <li class="page-item"><a class="page-link" href="#">3</a></li>
116 |                       <li class="page-item">
117 |                         <a class="page-link" href="#" aria-label="Next">
118 |                           <span aria-hidden="true">&raquo;</span>
119 |                           <span class="sr-only">Next</span>
120 |                         </a>
121 |                       </li>
122 |                     </ul>
123 |                   </nav>
124 | 
125 |                 </div>
126 |               </div>
127 |             </div>
128 |           </div>
129 |           <div class="col-lg-6">
130 |             <div class="component">
131 |               <div class="card magictime">
132 |                 <div class="card-title tonal">
133 |                   <strong>Creator</strong>
134 |                 </div>
135 |                 <div class="card-content">
136 |                   <div class="creater-name">
137 |                     <h2>
138 |                       <b>Name:</b>
139 |                       <span>
140 |                         <a href="https://github.com/rubenshibu">Ruben Shibu</a>
141 |                       </span>
142 |                     </h2>
143 |                   </div>
144 |                 </div>
145 |               </div>
146 |             </div>
147 |           </div>
148 |         </div>
149 | 
150 |         <div class="row">
151 |           <div class="col-lg-6">
152 |             <div class="component">
153 |               <div class="card magictime">
154 |                 <div class="card-title jkj">
155 |                   <strong>Pagination</strong>
156 |                 </div>
157 |                 <div class="card-content">
158 |                   
159 |                   <div class="pagination-jkj">
160 |                     <a href="#">&laquo;</a>
161 |                     <a href="#">1</a>
162 |                     <a href="#" class="active">2</a>
163 |                     <a href="#">3</a>
164 |                     <a href="#">4</a>
165 |                     <a href="#">5</a>
166 |                     <a href="#">6</a>
167 |                     <a href="#">&raquo;</a>
168 |                   </div>
169 | 
170 |                 </div>
171 |               </div>
172 |             </div>
173 |           </div>
174 |           <div class="col-lg-6">
175 |             <div class="component">
176 |               <div class="card magictime">
177 |                 <div class="card-title jkj">
178 |                   <strong>Creator</strong>
179 |                 </div>
180 |                 <div class="card-content">
181 |                   <div class="creater-name">
182 |                     <h2>
183 |                       <b>Name:</b>
184 |                       <span>
185 |                         <a href="https://github.com/jamesjose03">James Kaviyil Jose</a>
186 |                       </span>
187 |                     </h2>
188 |                   </div>
189 |                 </div>
190 |               </div>
191 |             </div>
192 |           </div>
193 |         </div>
194 | 
195 | 
196 | 
197 | 
198 |       </div>
199 |     </section>
200 |     <footer>
201 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
202 |     </footer>
203 |     <script src="../js/index.js"></script>
204 |   </body>
205 | </html>
206 | 


--------------------------------------------------------------------------------
/pages/pills.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link
  8 |       rel="icon"
  9 |       href="../favicon/android-chrome-192x192.png"
 10 |       type="image"
 11 |     />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="../css/style.css" />
 23 |     <link rel="stylesheet" href="../css/pills.css" />
 24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
 25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <section class="header">
 30 |       <div class="container-fluid section-for-header">
 31 |         <div class="content">
 32 |           <div class="content-header">
 33 |             <h1>PILLS</h1>
 34 |           </div>
 35 |           <div class="content-body">
 36 |             <h3>Add your different Pills</h3>
 37 |           </div>
 38 |           <div class="content-footer">
 39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 40 |               >⚡ Github
 41 |             </a>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </section>
 46 |     <section class="items">
 47 |       <div class="container-fluid">
 48 |         <!--          your name     -->
 49 |         <!-- Ruben Abraham Shibu -->
 50 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
 51 | 
 52 | 
 53 | 
 54 |         <div class="row">
 55 |           <div class="col-lg-6">
 56 |             <div class="component">
 57 |               <div class="card magictime">
 58 |                 <div class="card-title tonal">
 59 |                   <strong>Pills</strong>
 60 |                 </div>
 61 |                 <div class="card-content">
 62 | 
 63 | 
 64 | 
 65 |                   <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
 66 |                     <li class="nav-item">
 67 |                       <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
 68 |                         aria-controls="pills-home" aria-selected="true">Home</a>
 69 |                     </li>
 70 |                     <li class="nav-item">
 71 |                       <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
 72 |                         aria-controls="pills-profile" aria-selected="false">Profile</a>
 73 |                     </li>
 74 |                     <li class="nav-item">
 75 |                       <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab"
 76 |                         aria-controls="pills-contact" aria-selected="false">Contact</a>
 77 |                     </li>
 78 |                   </ul>
 79 |                   <div class="tab-content pt-2 pl-1" id="pills-tabContent">
 80 |                     <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Consequat in veniam ad. Eiusmod consequat eu adipisicing
 81 |                       minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt
 82 |                       nostrud.</div>
 83 |                     <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">At adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</div>
 84 |                     <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Est
 85 |                       quis nulla laborum officia ad nisi ex nostrud culpa Lorem uis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur
 86 |                       mollit voluptate voluptate consequat non.</div>
 87 |                   </div>
 88 | 
 89 | 
 90 | 
 91 | 
 92 |                 </div>
 93 |               </div>
 94 |             </div>
 95 |           </div>
 96 |           <div class="col-lg-6">
 97 |             <div class="component">
 98 |               <div class="card magictime">
 99 |                 <div class="card-title tonal">
100 |                   <strong>Creator</strong>
101 |                 </div>
102 |                 <div class="card-content">
103 |                   <div class="creater-name">
104 |                     <h2>
105 |                       <b>Name:</b>
106 |                       <span>
107 |                         <a href="https://github.com/rubenshibu">Ruben Shibu</a>
108 |                       </span>
109 |                     </h2>
110 |                   </div>
111 |                 </div>
112 |               </div>
113 |             </div>
114 |           </div>
115 |         </div>
116 | 
117 | 
118 | 
119 |       </div>
120 |     </section>
121 |     <footer>
122 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
123 |     </footer>
124 |     <script src="../js/index.js"></script>
125 |   </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/pages/scrollspy.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Css Components</title>
 7 |     <link
 8 |       rel="icon"
 9 |       href="../favicon/android-chrome-192x192.png"
10 |       type="image"
11 |     />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |     <link
17 |       rel="stylesheet"
18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
20 |       crossorigin="anonymous"
21 |     />
22 |     <link rel="stylesheet" href="../css/style.css" />
23 |     <link rel="stylesheet" href="../css/scrollspy.css" />
24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
26 |   </head>
27 | 
28 |   <body>
29 |     <section class="header">
30 |       <div class="container-fluid section-for-header">
31 |         <div class="content">
32 |           <div class="content-header">
33 |             <h1>SCROLLSPY</h1>
34 |           </div>
35 |           <div class="content-body">
36 |             <h3>Add your different scrollspy</h3>
37 |           </div>
38 |           <div class="content-footer">
39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
40 |               >⚡ Github
41 |             </a>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </section>
46 |     <section class="items">
47 |       <div class="container-fluid">
48 |         <!--          your name     -->
49 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
50 |       </div>
51 |     </section>
52 |     <footer>
53 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
54 |     </footer>
55 |     <script src="../js/index.js"></script>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/pages/tabs.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link
  8 |       rel="icon"
  9 |       href="../favicon/android-chrome-192x192.png"
 10 |       type="image"
 11 |     />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="../css/style.css" />
 23 |     <link rel="stylesheet" href="../css/tabs.css" />
 24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
 25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <section class="header">
 30 |       <div class="container-fluid section-for-header">
 31 |         <div class="content">
 32 |           <div class="content-header">
 33 |             <h1>TABS</h1>
 34 |           </div>
 35 |           <div class="content-body">
 36 |             <h3>Add your different tabs</h3>
 37 |           </div>
 38 |           <div class="content-footer">
 39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 40 |               >⚡ Github
 41 |             </a>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </section>
 46 |     <section class="items">
 47 |       <div class="container-fluid">
 48 |         <!--          your name     -->
 49 |         <!-- ruben abraham shibu -->
 50 |         
 51 | 
 52 |         <div class="row">
 53 |           <div class="col-lg-6">
 54 |             <div class="component">
 55 |               <div class="card magictime">
 56 |                 <div class="card-title tonal">
 57 |                   <strong>Textfield</strong>
 58 |                 </div>
 59 |                 <div class="card-content">
 60 | 
 61 | <ul class="nav nav-tabs md-tabs">
 62 |   <li class="nav-item">
 63 |     <a class="nav-link active" href="#">Active</a>
 64 |   </li>
 65 |   <li class="nav-item dropdown">
 66 |     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
 67 |       aria-expanded="false">Tabs</a>
 68 |     <div class="dropdown-menu dropdown-default">
 69 |       <a class="dropdown-item" href="#">Action</a>
 70 |       <a class="dropdown-item" href="#">Another action</a>
 71 |       <a class="dropdown-item" href="#">Something else here</a>
 72 |       <div class="dropdown-divider"></div>
 73 |       <a class="dropdown-item" href="#">Separated link</a>
 74 |     </div>
 75 |   </li>
 76 |   <li class="nav-item">
 77 |     <a class="nav-link" href="#">Link</a>
 78 |   </li>
 79 |   <li class="nav-item">
 80 |     <a class="nav-link disabled" href="#">Disabled</a>
 81 |   </li>
 82 | </ul>
 83 | 
 84 |                 </div>
 85 |               </div>
 86 |             </div>
 87 |           </div>
 88 |           <div class="col-lg-6">
 89 |             <div class="component">
 90 |               <div class="card magictime">
 91 |                 <div class="card-title tonal">
 92 |                   <strong>Creator</strong>
 93 |                 </div>
 94 |                 <div class="card-content">
 95 |                   <div class="creater-name">
 96 |                     <h2>
 97 |                       <b>Name:</b>
 98 |                       <span>
 99 |                         <a href="https://github.com/rubenshibu">Ruben Shibu</a>
100 |                       </span>
101 |                     </h2>
102 |                   </div>
103 |                 </div>
104 |               </div>
105 |             </div>
106 |           </div>
107 |         </div>
108 | 
109 | 
110 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
111 |       </div>
112 |     </section>
113 |     <footer>
114 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
115 |     </footer>
116 |     <script src="../js/index.js"></script>
117 |   </body>
118 | </html>
119 | 


--------------------------------------------------------------------------------
/pages/tags.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Css Components</title>
 7 |     <link
 8 |       rel="icon"
 9 |       href="../favicon/android-chrome-192x192.png"
10 |       type="image"
11 |     />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |     <link
17 |       rel="stylesheet"
18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
20 |       crossorigin="anonymous"
21 |     />
22 |     <link rel="stylesheet" href="../css/tags.css" />
23 |     <link rel="stylesheet" href="../css/style.css" />
24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
26 |   </head>
27 | 
28 |   <body>
29 |     <section class="header">
30 |       <div class="container-fluid section-for-header">
31 |         <div class="content">
32 |           <div class="content-header">
33 |             <h1>TAGS</h1>
34 |           </div>
35 |           <div class="content-body">
36 |             <h3>Add your different Tags</h3>
37 |           </div>
38 |           <div class="content-footer">
39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
40 |               >⚡ Github
41 |             </a>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </section>
46 |     <section class="items">
47 |       <div class="container-fluid">
48 |         <!--          your name     -->
49 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
50 |       </div>
51 |     </section>
52 |     <footer>
53 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
54 |     </footer>
55 |     <script src="../js/index.js"></script>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/pages/textfield.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Css Components</title>
  7 |     <link
  8 |       rel="icon"
  9 |       href="../favicon/android-chrome-192x192.png"
 10 |       type="image"
 11 |     />
 12 |     <link
 13 |       href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
 14 |       rel="stylesheet"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 19 |       integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
 20 |       crossorigin="anonymous"
 21 |     />
 22 |     <link rel="stylesheet" href="../css/style.css" />
 23 |     <link rel="stylesheet" href="../css/textfield.css" />
 24 |     <link rel="stylesheet" href="../css/cardcolor.css" />
 25 |     <link rel="stylesheet" href="../css/assets/magic.css" />
 26 |   </head>
 27 | 
 28 |   <body>
 29 |     <section class="header">
 30 |       <div class="container-fluid section-for-header">
 31 |         <div class="content">
 32 |           <div class="content-header">
 33 |             <h1>TEXTFIELDS</h1>
 34 |           </div>
 35 |           <div class="content-body">
 36 |             <h3>Add your different textfields</h3>
 37 |           </div>
 38 |           <div class="content-footer">
 39 |             <a href="https://github.com/rubenshibu/css-components" class="btn"
 40 |               >⚡ Github
 41 |             </a>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </section>
 46 |     <section class="items">
 47 |       <div class="container-fluid">
 48 |         <!--          your name     -->
 49 |         <!-- Add your html content that you have copied from contributors.md along with you component -->
 50 | 
 51 | 
 52 | 
 53 |         <!--          Tonal Mathew  -->
 54 |         <div class="row">
 55 |           <div class="col-lg-6">
 56 |             <div class="component">
 57 |               <div class="card magictime">
 58 |                 <div class="card-title tonal">
 59 |                   <strong>Textfield</strong>
 60 |                 </div>
 61 |                 <div class="card-content">
 62 |                   <form class="form-tonal" action="">
 63 |                     <div class="input-field-tonal">
 64 |                       <input class="input-tonal" type="text" id="name" required />
 65 |                       <label class="label-tonal" for="name">Your name:</label>
 66 |                     </div>
 67 |                   </form>
 68 |                 </div>
 69 |               </div>
 70 |             </div>
 71 |           </div>
 72 |           <div class="col-lg-6">
 73 |             <div class="component">
 74 |               <div class="card magictime">
 75 |                 <div class="card-title tonal">
 76 |                   <strong>Creator</strong>
 77 |                 </div>
 78 |                 <div class="card-content">
 79 |                   <div class="creater-name">
 80 |                     <h2>
 81 |                       <b>Name:</b>
 82 |                       <span>
 83 |                         <a href="https://github.com/tonalmathew">Tonal Mathew</a>
 84 |                       </span>
 85 |                     </h2>
 86 |                   </div>
 87 |                 </div>
 88 |               </div>
 89 |             </div>
 90 |           </div>
 91 |         </div>
 92 | 
 93 | 
 94 | 
 95 |       </div>
 96 |     </section>
 97 |     <footer>
 98 |       <p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
 99 |     </footer>
100 |     <script src="../js/index.js"></script>
101 |   </body>
102 | </html>
103 | 


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