git.roojs.org Git - bootswatch/blob - material-kit/index.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8" />
   5         <link rel="apple-touch-icon" sizes="76x76" href="img/apple-icon.png">
   6         <link rel="icon" type="image/png" href="img/favicon.png">
   7         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   8
   9         <title>Material Kit by Creative Tim</title>
  10
  11         <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  12
  13         <!--     Fonts and icons     -->
  14         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  15     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
  16         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
  17
  18         <!-- CSS Files -->
  19     <link href="/roojs1/css-bootstrap/bootstrap.min.css" rel="stylesheet" />
  20     <link href="css/material-kit.css" rel="stylesheet"/>
  21
  22         <!-- CSS Just for demo purpose, don't include it in your project -->
  23         <link href="css/demo.css" rel="stylesheet" />
  24
  25 </head>
  26
  27 <body class="index-page">
  28 <!-- Navbar -->
  29 <nav class="navbar navbar-transparent navbar-fixed-top navbar-color-on-scroll">
  30         <div class="container">
  31         <div class="navbar-header">
  32                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-index">
  33                         <span class="sr-only">Toggle navigation</span>
  34                         <span class="icon-bar"></span>
  35                         <span class="icon-bar"></span>
  36                         <span class="icon-bar"></span>
  37                 </button>
  38                 <a href="http://www.creative-tim.com">
  39                         <div class="logo-container">
  40                         <div class="logo">
  41                             <img src="img/logo.png" alt="Creative Tim Logo" rel="tooltip" title="<b>Material Kit</b> was Designed & Coded with care by the staff from <b>Creative Tim</b>" data-placement="bottom" data-html="true">
  42                         </div>
  43                         <div class="brand">
  44                             Creative Tim
  45                         </div>
  46
  47
  48                                 </div>
  49                 </a>
  50             </div>
  51
  52             <div class="collapse navbar-collapse" id="navigation-index">
  53                 <ul class="nav navbar-nav navbar-right">
  54                                 <li>
  55                                         <a href="components-documentation.html" target="_blank">
  56                                                 <i class="material-icons">dashboard</i> Components
  57                                         </a>
  58                                 </li>
  59                                 <li>
  60                                         <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" target="_blank">
  61                                                 <i class="material-icons">unarchive</i> Upgrade to PRO
  62                                         </a>
  63                                 </li>
  64                                 <li>
  65                                         <a rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank" class="btn btn-white btn-simple btn-just-icon">
  66                                                 <i class="fa fa-twitter"></i>
  67                                         </a>
  68                                 </li>
  69                                 <li>
  70                                         <a rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank" class="btn btn-white btn-simple btn-just-icon">
  71                                                 <i class="fa fa-facebook-square"></i>
  72                                         </a>
  73                                 </li>
  74                                 <li>
  75                                         <a rel="tooltip" title="Follow us on Instagram" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank" class="btn btn-white btn-simple btn-just-icon">
  76                                                 <i class="fa fa-instagram"></i>
  77                                         </a>
  78                                 </li>
  79
  80                 </ul>
  81             </div>
  82         </div>
  83 </nav>
  84 <!-- End Navbar -->
  85
  86 <div class="wrapper">
  87         <div class="header header-filter" style="background-image: url('img/bg2.jpeg');">
  88                 <div class="container">
  89                         <div class="row">
  90                                 <div class="col-md-8 col-md-offset-2">
  91                                         <div class="brand">
  92                                                 <h1>Material Kit.</h1>
  93                                                 <h3>A Badass Bootstrap UI Kit based on Material Design.</h3>
  94                                         </div>
  95                                 </div>
  96                         </div>
  97
  98                 </div>
  99         </div>
 100
 101         <div class="main main-raised">
 102                 <div class="section section-basic">
 103                 <div class="container">
 104                     <div class="title">
 105                         <h2>Basic Elements</h2>
 106                     </div>
 107
 108                         <div id="buttons">
 109                                         <div class="title">
 110                                                 <h3>Buttons <br />
 111                                                         <small>Pick your style</small>
 112                                                 </h3>
 113                                         </div>
 114                                         <div class="row">
 115                                                 <div class="col-md-8 col-md-offset-2">
 116                                                         <button class="btn btn-primary">Default</button>
 117                                                         <button class="btn btn-primary btn-round">Round</button>
 118                                                         <button class="btn btn-primary btn-round">
 119                                                                 <i class="material-icons">favorite</i> With Icon
 120                                                         </button>
 121                                                         <button class="btn btn-primary btn-fab btn-fab-mini btn-round">
 122                                                                 <i class="material-icons">favorite</i>
 123                                                         </button>
 124                                                         <button class="btn btn-primary btn-simple">Simple</button>
 125                                                 </div>
 126                                         </div>
 127                                         <div class="title">
 128                             <h3><small>Pick your size</small></h3>
 129                         </div>
 130                         <div class="row">
 131                             <div class="col-md-8 col-md-offset-2">
 132                                 <button class="btn btn-primary btn-xs">x-Small</button>
 133                                 <button class="btn btn-primary btn-sm">Small</button>
 134                                 <button class="btn btn-primary">Regular</button>
 135                                 <button class="btn btn-primary btn-lg">Large</button>
 136                             </div>
 137                         </div>
 138
 139                                         <div class="title">
 140                             <h3><small> Pick your color </small></h3>
 141                         </div>
 142                         <div class="row">
 143                             <div class="col-md-8 col-md-offset-2">
 144                                 <button class="btn">Default</button>
 145                                 <button class="btn btn-primary">Primary</button>
 146                                 <button class="btn btn-info">Info</button>
 147                                 <button class="btn btn-success">Success</button>
 148                                 <button class="btn btn-warning">Warning</button>
 149                                 <button class="btn btn-danger">Danger</button>
 150                             </div>
 151                         </div>
 152                         <div class="title">
 153                             <h3>Links</h3>
 154                         </div>
 155                         <div class="row">
 156                             <div class="col-md-8 col-md-offset-2">
 157                                 <button class="btn btn-simple">Default</button>
 158                                 <button class="btn btn-simple btn-primary ">Primary</button>
 159                                 <button class="btn btn-simple btn-info">Info</button>
 160                                 <button class="btn btn-simple btn-success">Success</button>
 161                                 <button class="btn btn-simple btn-warning">Warning</button>
 162                                 <button class="btn btn-simple btn-danger">Danger</button>
 163                             </div>
 164                         </div>
 165                         </div>
 166
 167                         <div id="inputs">
 168                             <div class="title">
 169                                 <h3>Inputs</h3>
 170                             </div>
 171
 172                             <div class="row">
 173                                                 <div class="col-sm-3">
 174                                         <div class="form-group">
 175                                                 <input type="text" value="" placeholder="Regular" class="form-control" />
 176                                         </div>
 177                                 </div>
 178
 179                                                 <div class="col-sm-3">
 180                                                         <div class="form-group label-floating">
 181                                                                 <label class="control-label">With Floating Label</label>
 182                                                                 <input type="email" class="form-control">
 183                                                         </div>
 184                                                 </div>
 185
 186                                 <div class="col-sm-3">
 187                                         <div class="form-group label-floating has-success">
 188                                                                 <label class="control-label">Success input</label>
 189                                         <input type="text" value="Success" class="form-control" />
 190                                                                 <span class="form-control-feedback">
 191                                                                         <i class="material-icons">done</i>
 192                                                                 </span>
 193                                         </div>
 194                                 </div>
 195
 196                                 <div class="col-sm-3">
 197                                         <div class="form-group label-floating has-error">
 198                                                                 <label class="control-label">Error input</label>
 199                                         <input type="email" value="Error Input" class="form-control" />
 200                                         <span class="material-icons form-control-feedback">clear</span>
 201                                         </div>
 202                                 </div>
 203
 204                                                 <div class="col-sm-3">
 205                                                         <div class="input-group">
 206                                                                 <span class="input-group-addon">
 207                                                                         <i class="material-icons">group</i>
 208                                                                 </span>
 209                                                                 <input type="text" class="form-control" placeholder="With Material Icons">
 210                                                         </div>
 211                                                 </div>
 212
 213                                                 <div class="col-sm-3">
 214                                                         <div class="input-group">
 215                                                                 <span class="input-group-addon">
 216                                                                         <i class="fa fa-group"></i>
 217                                                                 </span>
 218                                                                 <input type="text" class="form-control" placeholder="With Font Awesome Icons">
 219                                                         </div>
 220                                                 </div>
 221                                         </div>
 222                                 </div>
 223
 224                                 <div class="space-70"></div>
 225
 226                                 <div id="checkRadios">
 227                                     <div class="row">
 228                                 <div class="col-sm-3">
 229                                     <div class="title">
 230                                         <h3>Checkboxes</h3>
 231                                     </div>
 232
 233                                                         <div class="checkbox">
 234                                                                 <label>
 235                                                                         <input type="checkbox" name="optionsCheckboxes">
 236                                                                         Unchecked
 237                                                                 </label>
 238                                                         </div>
 239
 240                                                         <div class="checkbox">
 241                                                                 <label>
 242                                                                         <input type="checkbox" name="optionsCheckboxes" checked>
 243                                                                         Checked
 244                                                                 </label>
 245                                                         </div>
 246
 247                                                         <div class="checkbox">
 248                                                                 <label>
 249                                                                         <input type="checkbox" name="optionsCheckboxes" disabled>
 250                                                                         Disabled Unchecked
 251                                                                 </label>
 252                                                         </div>
 253
 254                                                         <div class="checkbox">
 255                                                                 <label>
 256                                                                         <input type="checkbox" name="optionsCheckboxes" disabled checked>
 257                                                                         Disabled Checked
 258                                                                 </label>
 259                                                         </div>
 260
 261                                 </div>
 262
 263                                 <div class="col-sm-3">
 264                                     <div class="title">
 265                                         <h3>Radio Buttons</h3>
 266                                     </div>
 267
 268                                                         <div class="radio">
 269                                                                 <label>
 270                                                                         <input type="radio" name="optionsRadios">
 271                                                                         Radio is off
 272                                                                 </label>
 273                                                         </div>
 274                                                         <div class="radio">
 275                                                                 <label>
 276                                                                         <input type="radio" name="optionsRadios" checked="true">
 277                                                                         Radio is on
 278                                                                 </label>
 279                                                         </div>
 280                                                         <div class="radio">
 281                                                                 <label>
 282                                                                         <input type="radio" name="optionsRadiosDisabled" disabled>
 283                                                                         Disabled Radio is off
 284                                                                 </label>
 285                                                         </div>
 286                                                         <div class="radio">
 287                                                                 <label>
 288                                                                         <input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
 289                                                                         Disabled Radio is on
 290                                                                 </label>
 291                                                         </div>
 292                                 </div>
 293
 294                                                 <div class="col-sm-3">
 295                                     <div class="title">
 296                                         <h3>Toggle Buttons</h3>
 297                                                         </div>
 298
 299                                                         <div class="togglebutton">
 300                                                 <label>
 301                                                         <input type="checkbox" checked="">
 302                                                                         Toggle is on
 303                                                 </label>
 304                                             </div>
 305
 306                                                         <div class="togglebutton">
 307                                                 <label>
 308                                                         <input type="checkbox">
 309                                                                         Toggle is off
 310                                                 </label>
 311                                             </div>
 312                                 </div>
 313
 314                                                 <div class="col-sm-3">
 315                                                         <div class="title">
 316                                         <h3>Sliders</h3>
 317                                     </div>
 318
 319                                                         <div id="sliderRegular" class="slider"></div>
 320                                                         <div id="sliderDouble" class="slider slider-info"></div>
 321                                                 </div>
 322
 323                             </div>
 324                         </div>
 325                 </div>
 326             </div>
 327
 328             <div class="section section-navbars">
 329                 <div class="container" id="menu-dropdown">
 330
 331                                 <div class="row">
 332                         <div class="col-md-6">
 333                             <div class="title">
 334                                 <h3>Menu</h3>
 335                             </div>
 336
 337                         <nav class="navbar navbar-default">
 338                                 <div class="container-fluid">
 339                                     <div class="navbar-header">
 340                                         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar">
 341                                                 <span class="sr-only">Toggle navigation</span>
 342                                                 <span class="icon-bar"></span>
 343                                                 <span class="icon-bar"></span>
 344                                                 <span class="icon-bar"></span>
 345                                             </button>
 346                                         <a class="navbar-brand" href="#">Menu</a>
 347                                     </div>
 348
 349                                     <div class="collapse navbar-collapse" id="example-navbar">
 350                                         <ul class="nav navbar-nav">
 351                                                         <li class="active"><a href="#">Link</a></li>
 352                                                 <li><a href="#">Link</a></li>
 353                                                 <li class="dropdown">
 354                                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
 355                                                                                                 <b class="caret"></b>
 356                                                                                         </a>
 357                                                 <ul class="dropdown-menu dropdown-menu-right">
 358                                                         <li class="dropdown-header">Dropdown header</li>
 359                                                         <li><a href="#">Action</a></li>
 360                                                         <li><a href="#">Another action</a></li>
 361                                                         <li><a href="#">Something else here</a></li>
 362                                                         <li class="divider"></li>
 363                                                         <li><a href="#">Separated link</a></li>
 364                                                         <li class="divider"></li>
 365                                                         <li><a href="#">One more separated link</a></li>
 366                                                     </ul>
 367                                                 </li>
 368                                         </ul>
 369                                     </div>
 370                                                         </div>
 371                         </nav>
 372                         </div>
 373                         <div class="col-md-6">
 374                                                 <div class="title">
 375                                 <h3>Menu with Icons</h3>
 376                             </div>
 377
 378                             <nav class="navbar navbar-info">
 379                                 <div class="container-fluid">
 380                                                                 <div class="navbar-header">
 381                                         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-icons">
 382                                                 <span class="sr-only">Toggle navigation</span>
 383                                                 <span class="icon-bar"></span>
 384                                                 <span class="icon-bar"></span>
 385                                                 <span class="icon-bar"></span>
 386                                         </button>
 387                                         <a class="navbar-brand" href="#">Icons</a>
 388                                     </div>
 389
 390                                     <div class="collapse navbar-collapse" id="example-navbar-icons">
 391                                         <ul class="nav navbar-nav navbar-right">
 392                                                         <li>
 393                                                                                         <a href="#pablo"><i class="material-icons">email</i></a>
 394                                                                                 </li>
 395                                                 <li>
 396                                                                                         <a href="#pablo"><i class="material-icons">face</i></a>
 397                                                                                 </li>
 398                                                 <li class="dropdown">
 399                                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 400                                                                                                 <i class="material-icons">settings</i>
 401                                                                                                 <b class="caret"></b>
 402                                                                                         </a>
 403                                                 <ul class="dropdown-menu dropdown-menu-right">
 404                                                         <li class="dropdown-header">Dropdown header</li>
 405                                                         <li><a href="#">Action</a></li>
 406                                                         <li><a href="#">Another action</a></li>
 407                                                         <li><a href="#">Something else here</a></li>
 408                                                         <li class="divider"></li>
 409                                                         <li><a href="#">Separated link</a></li>
 410                                                         <li class="divider"></li>
 411                                                         <li><a href="#">One more separated link</a></li>
 412                                                     </ul>
 413                                                 </li>
 414                                         </ul>
 415                                     </div>
 416                                                         </div>
 417                             </nav>
 418
 419                         </div>
 420                     </div>
 421                     <div class="title">
 422                         <h3>Navigation</h3>
 423                     </div>
 424                 </div>
 425
 426                 <div id="navbar">
 427                     <div class="navigation-example">
 428
 429                                         <!-- Navbar Primary  -->
 430                                         <nav class="navbar navbar-primary">
 431                                                 <div class="container">
 432                                                         <div class="navbar-header">
 433                                                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-primary">
 434                                                                         <span class="sr-only">Toggle navigation</span>
 435                                                                         <span class="icon-bar"></span>
 436                                                                         <span class="icon-bar"></span>
 437                                                                         <span class="icon-bar"></span>
 438                                                                 </button>
 439                                                                 <a class="navbar-brand" href="#pablo">Primary Color</a>
 440                                                         </div>
 441
 442                                                         <div class="collapse navbar-collapse" id="example-navbar-primary">
 443                                                                 <ul class="nav navbar-nav navbar-right">
 444                                                                         <li class="active">
 445                                                 <a href="#pablo">
 446                                                                                         <i class="material-icons">explore</i>
 447                                                                                         Discover
 448                                                 </a>
 449                                             </li>
 450                                             <li>
 451                                                 <a href="#pablo">
 452                                                                                         <i class="material-icons">account_circle</i>
 453                                                     Profile
 454                                                 </a>
 455                                             </li>
 456                                             <li>
 457                                                 <a href="#pablo">
 458                                                                                         <i class="material-icons">settings</i>
 459                                                                                         Settings
 460                                                 </a>
 461                                             </li>
 462                                                                 </ul>
 463                                                         </div>
 464                                                 </div>
 465                                         </nav>
 466                                         <!-- End Navbar Primary -->
 467
 468                                         <!-- Navbar Info -->
 469                                         <nav class="navbar navbar-info">
 470                                                 <div class="container">
 471                                                         <div class="navbar-header">
 472                                                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-info">
 473                                                                         <span class="sr-only">Toggle navigation</span>
 474                                                                         <span class="icon-bar"></span>
 475                                                                         <span class="icon-bar"></span>
 476                                                                         <span class="icon-bar"></span>
 477                                                                 </button>
 478                                                                 <a class="navbar-brand" href="#pablo">Info Color</a>
 479                                                         </div>
 480
 481                                                         <div class="collapse navbar-collapse" id="example-navbar-info">
 482                                                                 <ul class="nav navbar-nav navbar-right">
 483                                                                         <li class="active">
 484                                                 <a href="#pablo" >
 485                                                     Discover
 486                                                 </a>
 487                                             </li>
 488                                             <li>
 489                                                 <a href="#pablo">
 490                                                     Profile
 491                                                 </a>
 492                                             </li>
 493                                             <li>
 494                                                 <a href="#pablo">
 495                                                     Settings
 496                                                 </a>
 497                                             </li>
 498                                                                 </ul>
 499                                                         </div>
 500                                                 </div>
 501                                         </nav>
 502                                         <!-- End Navbar Info -->
 503
 504                                         <!-- Navbar Success -->
 505                                         <nav class="navbar navbar-success">
 506                                                 <div class="container">
 507                                                         <div class="navbar-header">
 508                                                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-success">
 509                                                                         <span class="sr-only">Toggle navigation</span>
 510                                                                         <span class="icon-bar"></span>
 511                                                                         <span class="icon-bar"></span>
 512                                                                         <span class="icon-bar"></span>
 513                                                                 </button>
 514                                                                 <a class="navbar-brand" href="#">Success Color</a>
 515                                                         </div>
 516
 517                                                         <div class="collapse navbar-collapse" id="example-navbar-success">
 518                                                                 <ul class="nav navbar-nav navbar-right">
 519                                                                         <li class="active">
 520                                                 <a href="#pablo">
 521                                                                                         <i class="material-icons">explore</i>
 522                                                 </a>
 523                                             </li>
 524                                             <li>
 525                                                 <a href="#pablo">
 526                                                                                         <i class="material-icons">account_circle</i>
 527                                                 </a>
 528                                             </li>
 529                                             <li>
 530                                                 <a href="#pablo">
 531                                                                                         <i class="material-icons">settings</i>
 532                                                 </a>
 533                                             </li>
 534                                                                 </ul>
 535                                                         </div>
 536                                                 </div>
 537                                         </nav>
 538                                         <!-- End Navbar Success -->
 539
 540                                         <!-- Navbar Warning -->
 541                                         <nav class="navbar navbar-warning">
 542                                                 <div class="container">
 543                                                         <div class="navbar-header">
 544                                                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-warning">
 545                                                                         <span class="sr-only">Toggle navigation</span>
 546                                                                         <span class="icon-bar"></span>
 547                                                                         <span class="icon-bar"></span>
 548                                                                         <span class="icon-bar"></span>
 549                                                                 </button>
 550                                                                 <a class="navbar-brand" href="#pablo">Warning Color</a>
 551                                                         </div>
 552
 553                                                         <div class="collapse navbar-collapse" id="example-navbar-warning">
 554                                                                 <ul class="nav navbar-nav navbar-right">
 555                                                                         <li>
 556                                                 <a href="#pablo">
 557                                                                                         <i class="fa fa-facebook-square"></i>
 558                                                 </a>
 559                                             </li>
 560                                             <li>
 561                                                 <a href="#pablo">
 562                                                                                         <i class="fa fa-twitter"></i>
 563                                                 </a>
 564                                             </li>
 565                                                                         <li>
 566                                                 <a href="#pablo">
 567                                                                                         <i class="fa fa-google-plus"></i>
 568                                                 </a>
 569                                             </li>
 570                                             <li>
 571                                                 <a href="#pablo">
 572                                                                                         <i class="fa fa-instagram"></i>
 573                                                 </a>
 574                                             </li>
 575                                                                 </ul>
 576                                                         </div>
 577                                                 </div>
 578                                         </nav>
 579                                         <!-- End Navbar Warning -->
 580
 581                                         <!-- Navbar Danger -->
 582                                         <nav class="navbar navbar-danger">
 583                                                 <div class="container">
 584                                                         <div class="navbar-header">
 585                                                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-danger">
 586                                                                         <span class="sr-only">Toggle navigation</span>
 587                                                                         <span class="icon-bar"></span>
 588                                                                         <span class="icon-bar"></span>
 589                                                                         <span class="icon-bar"></span>
 590                                                                 </button>
 591                                                                 <a class="navbar-brand" href="#pablo">Danger Color</a>
 592                                                         </div>
 593
 594                                                         <div class="collapse navbar-collapse" id="example-navbar-danger">
 595                                                                 <ul class="nav navbar-nav navbar-right">
 596                                                                         <li>
 597                                                 <a href="#pablo">
 598                                                                                         <i class="fa fa-facebook-square"></i> Share
 599                                                 </a>
 600                                             </li>
 601                                             <li>
 602                                                 <a href="#pablo">
 603                                                                                         <i class="fa fa-twitter"></i> Tweet
 604                                                 </a>
 605                                             </li>
 606                                                                         <li>
 607                                                 <a href="#pablo">
 608                                                                                         <i class="fa fa-pinterest"></i> Pin
 609                                                 </a>
 610                                             </li>
 611                                                                 </ul>
 612                                                         </div>
 613                                                 </div>
 614                                         </nav>
 615                                         <!-- End Navbar Danger -->
 616
 617                                         <!-- Navbar Transparent -->
 618                                         <nav class="navbar navbar-transparent">
 619                                                 <div class="container">
 620                                                         <div class="navbar-header">
 621                                                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-transparent">
 622                                                                         <span class="sr-only">Toggle navigation</span>
 623                                                                         <span class="icon-bar"></span>
 624                                                                         <span class="icon-bar"></span>
 625                                                                         <span class="icon-bar"></span>
 626                                                                 </button>
 627                                                                 <a class="navbar-brand" href="#pablo">Transparent</a>
 628                                                         </div>
 629
 630                                                         <div class="collapse navbar-collapse" id="example-navbar-transparent">
 631                                                                 <ul class="nav navbar-nav navbar-right">
 632                                                                         <li>
 633                                                 <a href="#pablo">
 634                                                     <i class="fa fa-facebook-square"></i>
 635                                                     Facebook
 636                                                 </a>
 637                                             </li>
 638                                             <li>
 639                                                 <a href="#pablo">
 640                                                     <i class="fa fa-twitter"></i>
 641                                                     Twitter
 642                                                 </a>
 643                                             </li>
 644                                                                         <li>
 645                                                 <a href="#pablo">
 646                                                                                         <i class="fa fa-instagram"></i> Instagram
 647                                                 </a>
 648                                             </li>
 649                                                                 </ul>
 650                                                         </div>
 651                                                 </div>
 652                                         </nav>
 653                                         <!-- End Navbar Transparent-->
 654                     </div>
 655                 </div>
 656                 </div>
 657                 <!-- End .section-navbars  -->
 658
 659                 <div class="section section-tabs">
 660                         <div class="container">
 661                                 <div class="row">
 662                                         <div class="col-md-6">
 663                                                 <div class="title">
 664                                                         <h3>Tabs with Icons on Card</h3>
 665                                                 </div>
 666
 667                                                 <!-- Tabs with icons on Card -->
 668                                                 <div class="card card-nav-tabs">
 669                                                         <div class="header header-success">
 670                                                                 <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
 671                                                                 <div class="nav-tabs-navigation">
 672                                                                         <div class="nav-tabs-wrapper">
 673                                                                                 <ul class="nav nav-tabs" data-tabs="tabs">
 674                                                                                         <li class="active">
 675                                                                                                 <a href="#profile" data-toggle="tab">
 676                                                                                                         <i class="material-icons">face</i>
 677                                                                                                         Profile
 678                                                                                                 </a>
 679                                                                                         </li>
 680                                                                                         <li>
 681                                                                                                 <a href="#messages" data-toggle="tab">
 682                                                                                                         <i class="material-icons">chat</i>
 683                                                                                                         Messages
 684                                                                                                 </a>
 685                                                                                         </li>
 686                                                                                         <li>
 687                                                                                                 <a href="#settings" data-toggle="tab">
 688                                                                                                         <i class="material-icons">build</i>
 689                                                                                                         Settings
 690                                                                                                 </a>
 691
 692                                                                                         </li>
 693                                                                                 </ul>
 694                                                                         </div>
 695                                                                 </div>
 696                                                         </div>
 697                                                         <div class="content">
 698                                                                 <div class="tab-content text-center">
 699                                                                         <div class="tab-pane active" id="profile">
 700                                                                                 <p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
 701                                                                         </div>
 702                                                                         <div class="tab-pane" id="messages">
 703                                                                                 <p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
 704                                                                         </div>
 705                                                                         <div class="tab-pane" id="settings">
 706                                                                                 <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
 707                                                                         </div>
 708                                                                 </div>
 709                                                         </div>
 710                                                 </div>
 711                                                 <!-- End Tabs with icons on Card -->
 712
 713                                         </div>
 714
 715                                         <div class="col-md-6">
 716                                                 <div class="title">
 717                                                         <h3>Tabs on Plain Card</h3>
 718                                                 </div>
 719
 720                                                 <!-- Tabs on Plain Card -->
 721                                                 <div class="card card-nav-tabs card-plain">
 722                                                         <div class="header header-danger">
 723                                                                 <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
 724                                                                 <div class="nav-tabs-navigation">
 725                                                                         <div class="nav-tabs-wrapper">
 726                                                                                 <ul class="nav nav-tabs" data-tabs="tabs">
 727                                                                                         <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 728                                                                                         <li><a href="#updates" data-toggle="tab">Updates</a></li>
 729                                                                                         <li><a href="#history" data-toggle="tab">History</a></li>
 730                                                                                 </ul>
 731                                                                         </div>
 732                                                                 </div>
 733                                                         </div>
 734                                                         <div class="content">
 735                                                                 <div class="tab-content text-center">
 736                                                                         <div class="tab-pane active" id="home">
 737                                                                                 <p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
 738                                                                         </div>
 739                                                                         <div class="tab-pane" id="updates">
 740                                                                                 <p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
 741                                                                         </div>
 742                                                                         <div class="tab-pane" id="history">
 743                                                                                 <p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
 744                                                                         </div>
 745                                                                 </div>
 746                                                         </div>
 747                                                 </div>
 748                                                 <!-- End Tabs on plain Card -->
 749                                         </div>
 750
 751                                 </div>
 752                         </div>
 753                 </div>
 754                 <!-- End Section Tabs -->
 755
 756             <div class="section section-pagination">
 757                 <div class="container">
 758                     <div class="row">
 759                         <div class="col-md-6">
 760                             <div class="title">
 761                                 <h3>Progress Bars</h3>
 762                             </div>
 763
 764                             <div class="progress progress-line-primary">
 765                                 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
 766                                 <span class="sr-only">60% Complete</span>
 767                               </div>
 768                             </div>
 769
 770                             <div class="progress progress-line-info">
 771                                 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 772                                         <span class="sr-only">60% Complete</span>
 773                                 </div>
 774                             </div>
 775
 776                             <div class="progress progress-line-danger">
 777                                 <div class="progress-bar progress-bar-success" style="width: 35%">
 778                                     <span class="sr-only">35% Complete (success)</span>
 779                                 </div>
 780                                 <div class="progress-bar progress-bar-warning" style="width: 20%">
 781                                     <span class="sr-only">20% Complete (warning)</span>
 782                                 </div>
 783                                 <div class="progress-bar progress-bar-danger" style="width: 10%">
 784                                     <span class="sr-only">10% Complete (danger)</span>
 785                                 </div>
 786                             </div>
 787
 788                                                 <br />
 789                                                 <div class="title">
 790                                 <h3>Navigation Pills</h3>
 791                             </div>
 792
 793                                                 <ul class="nav nav-pills" role="tablist">
 794                                                         <!--
 795                                                                 color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
 796                                 -->
 797                                                         <li>
 798                                                                 <a href="#dashboard" role="tab" data-toggle="tab">
 799                                                                         <i class="material-icons">dashboard</i>
 800                                                                         Dashboard
 801                                                                 </a>
 802                                                         </li>
 803                                                         <li class="active">
 804                                     <a href="#schedule" role="tab" data-toggle="tab">
 805                                                                         <i class="material-icons">schedule</i>
 806                                                                         Schedule
 807                                     </a>
 808                                 </li>
 809                                 <li>
 810                                     <a href="#tasks" role="tab" data-toggle="tab">
 811                                                                         <i class="material-icons">list</i>
 812                                         Tasks
 813                                     </a>
 814                                 </li>
 815                                                         <li>
 816                                     <a href="#payments" role="tab" data-toggle="tab">
 817                                                                         <i class="material-icons">attach_money</i>
 818                                         Payments
 819                                     </a>
 820                                 </li>
 821                             </ul>
 822
 823                         </div>
 824
 825                         <div class="col-md-6">
 826                             <div class="title">
 827                                 <h3>Pagination</h3>
 828                             </div>
 829
 830                             <ul class="pagination pagination-primary">
 831                             <!--
 832                                                         color-classes: "pagination-primary", "pagination-info", "pagination-success", "pagination-warning", "pagination-danger"
 833                             -->
 834                                                         <li><a href="javascript:void(0);">1</a></li>
 835                                                         <li><a href="javascript:void(0);">...</a></li>
 836                                                         <li><a href="javascript:void(0);">5</a></li>
 837                                                         <li><a href="javascript:void(0);">6</a></li>
 838                                                         <li class="active"><a href="javascript:void(0);">7</a></li>
 839                                                         <li><a href="javascript:void(0);">8</a></li>
 840                                                         <li><a href="javascript:void(0);">9</a></li>
 841                                                         <li><a href="javascript:void(0);">...</a></li>
 842                                                         <li><a href="javascript:void(0);">12</a></li>
 843                             </ul>
 844
 845                                                 <ul class="pagination pagination-info">
 846                                                         <li><a href="javascript:void(0);">< prev</a></li>
 847                                                         <li><a href="javascript:void(0);">1</a></li>
 848                                                         <li><a href="javascript:void(0);">2</a></li>
 849                                                         <li class="active"><a href="javascript:void(0);">3</a></li>
 850                                                         <li><a href="javascript:void(0);">4</a></li>
 851                                                         <li><a href="javascript:void(0);">5</a></li>
 852                                                         <li><a href="javascript:void(0);">next ></a></li>
 853                             </ul>
 854
 855                                                 <div class="title">
 856                                 <h3>Labels </h3>
 857                             </div>
 858                             <span class="label label-default">Default</span>
 859                             <span class="label label-primary">Primary</span>
 860                             <span class="label label-info">Info</span>
 861                             <span class="label label-success">Success</span>
 862                             <span class="label label-warning">Warning</span>
 863                             <span class="label label-danger">Danger</span>
 864                         </div>
 865                     </div>
 866
 867                                 <div class="space"></div>
 868
 869                     <div class="title">
 870                         <h3>Notifications</h3>
 871                     </div>
 872                 </div>
 873             </div>
 874
 875             <div class="section section-notifications" id="notifications">
 876                 <div class="alert alert-info">
 877                     <div class="container-fluid">
 878                                         <div class="alert-icon">
 879                                                 <i class="material-icons">info_outline</i>
 880                                         </div>
 881                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 882                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
 883                                         </button>
 884
 885                         <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
 886                     </div>
 887                 </div>
 888                 <div class="alert alert-success">
 889                     <div class="container-fluid">
 890                                         <div class="alert-icon">
 891                                                 <i class="material-icons">check</i>
 892                                         </div>
 893                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 894                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
 895                                         </button>
 896                         <b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
 897                     </div>
 898                 </div>
 899                 <div class="alert alert-warning">
 900                      <div class="container-fluid">
 901                                          <div class="alert-icon">
 902                                                 <i class="material-icons">warning</i>
 903                                         </div>
 904                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 905                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
 906                                         </button>
 907                          <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
 908                     </div>
 909                 </div>
 910                 <div class="alert alert-danger">
 911                      <div class="container-fluid">
 912                                          <div class="alert-icon">
 913                                                 <i class="material-icons">error_outline</i>
 914                                         </div>
 915                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 916                                                 <span aria-hidden="true"><i class="material-icons">clear</i></span>
 917                                         </button>
 918                          <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
 919                     </div>
 920                 </div>
 921                 <div class="clearfix"></div>
 922             </div><!--  end notifications -->
 923
 924             <div class="section">
 925                 <div class="container tim-container">
 926                     <div class="title">
 927                         <h2>Typography</h2>
 928                     </div>
 929                     <div id="typography">
 930                         <div class="row">
 931                             <div class="tim-typo">
 932                                 <h1><span class="tim-note">Header 1</span>The Life of Material Kit </h1>
 933                             </div>
 934                             <div class="tim-typo">
 935                                 <h2><span class="tim-note">Header 2</span>The Life of Material Kit</h2>
 936                             </div>
 937                             <div class="tim-typo">
 938                                 <h3><span class="tim-note">Header 3</span>The Life of Material Kit</h3>
 939                             </div>
 940                             <div class="tim-typo">
 941                                 <h4><span class="tim-note">Header 4</span>The Life of Material Kit</h4>
 942                             </div>
 943                             <div class="tim-typo">
 944                                 <h5><span class="tim-note">Header 5</span>The Life of Material Kit</h5>
 945                             </div>
 946                              <div class="tim-typo">
 947                                 <h6><span class="tim-note">Header 6</span>The Life of Material Kit</h6>
 948                             </div>
 949                             <div class="tim-typo">
 950                                 <p><span class="tim-note">Paragraph</span>
 951                                     I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
 952                             </div>
 953                             <div class="tim-typo">
 954                                 <span class="tim-note">Quote</span>
 955                                 <blockquote>
 956                                  <p>
 957                                  I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
 958                                  </p>
 959                                  <small>
 960                                  Kanye West, Musician
 961                                  </small>
 962                                 </blockquote>
 963                             </div>
 964
 965                             <div class="tim-typo">
 966                                 <span class="tim-note">Muted Text</span>
 967                                 <p class="text-muted">
 968                                 I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
 969                                                     </p>
 970                             </div>
 971                             <div class="tim-typo">
 972                                 <span class="tim-note">Primary Text</span>
 973                                 <p class="text-primary">
 974                                 I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
 975                             </div>
 976                             <div class="tim-typo">
 977                                 <span class="tim-note">Info Text</span>
 978                                 <p class="text-info">
 979                                 I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
 980                             </div>
 981                             <div class="tim-typo">
 982                                 <span class="tim-note">Success Text</span>
 983                                 <p class="text-success">
 984                                 I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
 985                             </div>
 986                             <div class="tim-typo">
 987                                 <span class="tim-note">Warning Text</span>
 988                                 <p class="text-warning">
 989                                 I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
 990                                 </p>
 991                             </div>
 992                             <div class="tim-typo">
 993                                 <span class="tim-note">Danger Text</span>
 994                                 <p class="text-danger">
 995                                 I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
 996                             </div>
 997                             <div class="tim-typo">
 998                                 <h2><span class="tim-note">Small Tag</span>
 999                                                                 Header with small subtitle <br>
1000                                                                 <small>Use "small" tag for the headers</small>
1001                                                         </h2>
1002                             </div>
1003                         </div>
1004                     </div>
1005
1006                                 <div class="space-50"></div>
1007
1008                     <div id="images">
1009                          <div class="title">
1010                             <h2>Images</h2>
1011                         </div>
1012                         <br>
1013                         <div class="row">
1014                                                 <div class="col-sm-2">
1015                                 <h4>Rounded Image</h4>
1016                                 <img src="img/avatar.jpg" alt="Rounded Image" class="img-rounded img-responsive">
1017                             </div>
1018                                                 <div class="col-sm-2 col-sm-offset-1">
1019                                 <h4>Circle Image</h4>
1020                                 <img src="img/avatar.jpg" alt="Circle Image" class="img-circle img-responsive">
1021                             </div>
1022                                                 <div class="col-sm-2 col-sm-offset-1">
1023                                 <h4>Rounded Raised</h4>
1024                                 <img src="img/avatar.jpg" alt="Raised Image" class="img-rounded img-responsive img-raised">
1025                             </div>
1026
1027                             <div class="col-sm-2 col-sm-offset-1">
1028                                 <h4>Circle Raised</h4>
1029                                 <img src="img/avatar.jpg" alt="Thumbnail Image" class="img-circle img-raised img-responsive">
1030                             </div>
1031                         </div>
1032                         <div class="row">
1033
1034                         </div>
1035                     </div>
1036
1037                 </div>
1038             </div>
1039
1040             <div class="section" id="javascriptComponents">
1041                 <div class="container">
1042                     <div class="title">
1043                         <h2>Javascript components</h2>
1044                     </div>
1045
1046                     <div class="row" id="modals">
1047                         <div class="col-md-6">
1048                             <div class="title">
1049                                 <h3>Modal</h3>
1050                             </div>
1051
1052                             <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
1053                               Launch demo modal
1054                             </button>
1055                         </div>
1056                         <div class="col-md-6">
1057                                                 <div class="title">
1058                                 <h3>Popovers</h3>
1059                             </div>
1060
1061                             <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="Popover on left" data-content="Here will be some very useful information about his popover.<br> Here will be some very useful information about his popover." data-container="body">On left</button>
1062
1063                                                 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover." data-container="body">On top</button>
1064
1065                                                 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="Popover on bottom" data-content="Here will be some very useful information about his popover." data-container="body">On bottom</button>
1066
1067                             <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="Popover on right" data-content="Here will be some very useful information about his popover." data-container="body">On right</button>
1068
1069                         </div>
1070                         <br /><br />
1071
1072                             <div class="col-md-6">
1073                                 <div class="title">
1074                                     <h3>Datepicker</h3>
1075                                 </div>
1076                                 <div class="row">
1077                                     <div class="col-md-6">
1078                                                                 <div class="form-group label-static">
1079                                                                         <label class="control-label">Datepicker</label>
1080                                                                         <input type="text" class="datepicker form-control" value="03/12/2016" />
1081                                                                 </div>
1082
1083                                     </div>
1084                                 </div>
1085                             </div>
1086
1087                             <div class="col-md-6">
1088                                                 <div class="title">
1089                                                         <h3>Tooltips</h3>
1090                                                 </div>
1091
1092                                                 <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-container="body">On left</button>
1093
1094                                                 <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-container="body">On top</button>
1095
1096                                                 <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" data-container="body">On bottom</button>
1097
1098                                                 <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip on right" data-container="body">On right</button>
1099
1100                                 <div class="clearfix"></div><br><br>
1101                             </div>
1102
1103                                         <div class="title">
1104                                 <h3>Carousel</h3>
1105                             </div>
1106                                 </div>
1107                         </div>
1108                 </div>
1109
1110             <div class="section" id="carousel">
1111                         <div class="container">
1112                                 <div class="row">
1113                                         <div class="col-md-8 col-md-offset-2">
1114
1115                                                 <!-- Carousel Card -->
1116                                                 <div class="card card-raised card-carousel">
1117                                                         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
1118                                                                 <div class="carousel slide" data-ride="carousel">
1119
1120                                                                         <!-- Indicators -->
1121                                                                         <ol class="carousel-indicators">
1122                                                                                 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
1123                                                                                 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
1124                                                                                 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
1125                                                                         </ol>
1126
1127                                                                         <!-- Wrapper for slides -->
1128                                                                         <div class="carousel-inner">
1129                                                                                 <div class="item active">
1130                                                                                         <img src="img/bg2.jpeg" alt="Awesome Image">
1131                                                                                         <div class="carousel-caption">
1132                                                                                                 <h4><i class="material-icons">location_on</i> Yellowstone National Park, United States</h4>
1133                                                                                         </div>
1134                                                                                 </div>
1135                                                                                 <div class="item">
1136                                                                                         <img src="img/bg3.jpeg" alt="Awesome Image">
1137                                                                                         <div class="carousel-caption">
1138                                                                                                 <h4><i class="material-icons">location_on</i> Somewhere Beyond, United States</h4>
1139                                                                                         </div>
1140                                                                                 </div>
1141                                                                                 <div class="item">
1142                                                                                         <img src="img/bg4.jpeg" alt="Awesome Image">
1143                                                                                         <div class="carousel-caption">
1144                                                                                                 <h4><i class="material-icons">location_on</i> Yellowstone National Park, United States</h4>
1145                                                                                         </div>
1146                                                                                 </div>
1147                                                                         </div>
1148
1149                                                                         <!-- Controls -->
1150                                                                         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
1151                                                                                 <i class="material-icons">keyboard_arrow_left</i>
1152                                                                         </a>
1153                                                                         <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
1154                                                                                 <i class="material-icons">keyboard_arrow_right</i>
1155                                                                         </a>
1156                                                                 </div>
1157                                                         </div>
1158                                                 </div>
1159                                                 <!-- End Carousel Card -->
1160
1161                                         </div>
1162                                 </div>
1163                         </div>
1164                 </div>
1165
1166                 <div class="section">
1167                 <div class="container text-center">
1168                     <div class="row">
1169                         <div class="col-md-8 col-md-offset-2 text-center">
1170                             <h2>Completed with examples</h2>
1171                             <h4>The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.</h4>
1172                         </div>
1173                     </div>
1174                         </div>
1175                 </div>
1176
1177                 <div class="section section-full-screen section-signup" style="background-image: url('img/city.jpg'); background-size: cover; background-position: top center; min-height: 700px;">
1178                         <div class="container">
1179                                 <div class="row">
1180                                         <div class="col-md-4 col-md-offset-4">
1181                                                 <div class="card card-signup">
1182                                                         <form class="form" method="" action="">
1183                                                                 <div class="header header-primary text-center">
1184                                                                         <h4>Sign Up</h4>
1185                                                                         <div class="social-line">
1186                                                                                 <a href="#pablo" class="btn btn-simple btn-just-icon">
1187                                                                                         <i class="fa fa-facebook-square"></i>
1188                                                                                 </a>
1189                                                                                 <a href="#pablo" class="btn btn-simple btn-just-icon">
1190                                                                                         <i class="fa fa-twitter"></i>
1191                                                                                 </a>
1192                                                                                 <a href="#pablo" class="btn btn-simple btn-just-icon">
1193                                                                                         <i class="fa fa-google-plus"></i>
1194                                                                                 </a>
1195                                                                         </div>
1196                                                                 </div>
1197                                                                 <p class="text-divider">Or Be Classical</p>
1198                                                                 <div class="content">
1199
1200                                                                         <div class="input-group">
1201                                                                                 <span class="input-group-addon">
1202                                                                                         <i class="material-icons">face</i>
1203                                                                                 </span>
1204                                                                                 <input type="text" class="form-control" placeholder="First Name...">
1205                                                                         </div>
1206
1207                                                                         <div class="input-group">
1208                                                                                 <span class="input-group-addon">
1209                                                                                         <i class="material-icons">email</i>
1210                                                                                 </span>
1211                                                                                 <input type="text" class="form-control" placeholder="Email...">
1212                                                                         </div>
1213
1214                                                                         <div class="input-group">
1215                                                                                 <span class="input-group-addon">
1216                                                                                         <i class="material-icons">lock_outline</i>
1217                                                                                 </span>
1218                                                                                 <input type="password" placeholder="Password..." class="form-control" />
1219                                                                         </div>
1220
1221                                                                         <!-- If you want to add a checkbox to this form, uncomment this code
1222
1223                                                                         <div class="checkbox">
1224                                                                                 <label>
1225                                                                                         <input type="checkbox" name="optionsCheckboxes" checked>
1226                                                                                         Subscribe to newsletter
1227                                                                                 </label>
1228                                                                         </div> -->
1229                                                                 </div>
1230                                                                 <div class="footer text-center">
1231                                                                         <a href="#pablo" class="btn btn-simple btn-primary btn-lg">Get Started</a>
1232                                                                 </div>
1233                                                         </form>
1234                                                 </div>
1235
1236                                         </div>
1237                                 </div>
1238                         </div>
1239                 </div>
1240
1241                 <div class="col-md-12 text-center">
1242                         <a href="examples/signup-page.html" class="btn btn-simple btn-primary btn-lg" target="_blank">View Signup Page</a>
1243                 </div>
1244
1245                 <div class="space-50"></div>
1246                 <div class="section section-examples">
1247                 <div class="container-fluid text-center">
1248                     <div class="row">
1249                         <div class="col-md-6">
1250                             <a href="examples/landing-page.html" target="_blank">
1251                                 <img src="img/landing.jpg" alt="Rounded Image" class="img-rounded img-raised img-responsive">
1252                                 <button class="btn  btn-simple btn-primary btn-lg">View Landing Page</button>
1253                             </a>
1254                         </div>
1255                         <div class="col-md-6">
1256                             <a href="examples/profile-page.html" target="_blank">
1257                                 <img src="img/profile.jpg" alt="Rounded Image" class="img-rounded img-raised img-responsive">
1258                                 <button class="btn btn-simple btn-primary btn-lg">View Profile Page</button>
1259                             </a>
1260                         </div>
1261                     </div>
1262                 </div>
1263                 </div>
1264
1265             <div class="section section-download">
1266                 <div class="container">
1267                     <div class="row text-center">
1268                         <div class="col-md-8 col-md-offset-2">
1269                             <h2>Do you love this UI Kit?</h2>
1270                             <h4>Cause if you do, it can be yours for FREE. Hit the button below to navigate to Creative Tim where you can find the kit. Start a new project or give an old Bootstrap project a new look!</h4>
1271                         </div>
1272                         <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-4">
1273                             <a href="http://www.creative-tim.com/product/material-kit" class="btn btn-primary btn-lg">
1274                                                         <i class="material-icons">cloud_download</i> Free Download
1275                                                 </a>
1276                         </div>
1277                                 </div>
1278
1279                                 <br><br>
1280
1281                                 <div class="row text-center">
1282                                         <div class="col-md-8 col-md-offset-2">
1283                             <h2>Want more?</h2>
1284                             <h4>We've just launched <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" target="_blank">Material Kit PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
1285                         </div>
1286                                         <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-4">
1287                                                 <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" class="btn btn-upgrade btn-lg" target="_blank">
1288                                                         <i class="material-icons">unarchive</i> Upgrade to PRO
1289                                                 </a>
1290                                         </div>
1291                     </div>
1292
1293                     <div class="row sharing-area text-center">
1294                             <h3>Thank you for supporting us!</h3>
1295                             <a href="#" class="btn btn-twitter">
1296                                 <i class="fa fa-twitter"></i>
1297                                 Tweet
1298                             </a>
1299                             <a href="#" class="btn btn-facebook">
1300                                 <i class="fa fa-facebook-square"></i>
1301                                 Share
1302                             </a>
1303                                                 <a href="#" class="btn btn-google-plus">
1304                                 <i class="fa fa-google-plus"></i>
1305                                 Share
1306                             </a>
1307                                                 <a href="#" class="btn btn-github">
1308                                 <i class="fa fa-github"></i>
1309                                 Star
1310                             </a>
1311                     </div>
1312                 </div>
1313             </div>
1314
1315         </div>
1316     <footer class="footer">
1317             <div class="container">
1318                 <nav class="pull-left">
1319                     <ul>
1320                                         <li>
1321                                                 <a href="http://www.creative-tim.com">
1322                                                         Creative Tim
1323                                                 </a>
1324                                         </li>
1325                                         <li>
1326                                                 <a href="http://presentation.creative-tim.com">
1327                                                    About Us
1328                                                 </a>
1329                                         </li>
1330                                         <li>
1331                                                 <a href="http://blog.creative-tim.com">
1332                                                    Blog
1333                                                 </a>
1334                                         </li>
1335                                         <li>
1336                                                 <a href="http://www.creative-tim.com/license">
1337                                                         Licenses
1338                                                 </a>
1339                                         </li>
1340                     </ul>
1341                 </nav>
1342                 <div class="copyright pull-right">
1343                     &copy; 2016, made with <i class="material-icons">favorite</i> by Creative Tim for a better web.
1344                 </div>
1345             </div>
1346         </footer>
1347 </div>
1348
1349 <!-- Sart Modal -->
1350 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1351         <div class="modal-dialog">
1352                 <div class="modal-content">
1353                         <div class="modal-header">
1354                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1355                                         <i class="material-icons">clear</i>
1356                                 </button>
1357                                 <h4 class="modal-title">Modal title</h4>
1358                         </div>
1359                         <div class="modal-body">
1360                                 <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
1361                                 </p>
1362                         </div>
1363                         <div class="modal-footer">
1364                                 <button type="button" class="btn btn-default btn-simple">Nice Button</button>
1365                                 <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
1366                         </div>
1367                 </div>
1368         </div>
1369 </div>
1370 <!--  End Modal -->
1371
1372
1373 </body>
1374         <!--   Core JS Files   -->
1375         <script src="js/jquery.min.js" type="text/javascript"></script>
1376         <script src="js/bootstrap.min.js" type="text/javascript"></script>
1377         <script src="js/material.min.js"></script>
1378
1379         <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
1380         <script src="js/nouislider.min.js" type="text/javascript"></script>
1381
1382         <!--  Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ -->
1383         <script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
1384
1385         <!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
1386         <script src="js/material-kit.js" type="text/javascript"></script>
1387
1388         <script type="text/javascript">
1389
1390                 $().ready(function(){
1391                         // the body of this function is in material-kit.js
1392                         materialKit.initSliders();
1393             window_width = $(window).width();
1394
1395             if (window_width >= 992){
1396                 big_image = $('.wrapper > .header');
1397
1398                                 $(window).on('scroll', materialKitDemo.checkScrollForParallax);
1399                         }
1400
1401                 });
1402         </script>
1403 </html>