logr

In this example below you will see how to do a logr with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by CarlBoneri, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright CarlBoneri ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>logr</title>
  <style>
html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  overflow: auto !important;
}

/*Handle the CHROME yellow background for autofill*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0px 9999px white;
}

svg:not(:root),
svg {
  display: block;
  overflow: auto;
}

/* Icons */
.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-24 {
  font-size: 24px;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

main,
.content {
  flex: 1 0 auto;
}

/*Helpers*/
.no-pad {
  padding: 0 !important;
}

/*Scroll bars*/

::-webkit-scrollbar {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-button {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.54);
  border: 3px none rgba(0, 0, 0, 0.54);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.64);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.54);
}

::-webkit-scrollbar-track {
  background: #fff;
  border: 2px none #fff;
  border-radius: 1px;
}

::-webkit-scrollbar-track:hover {
  background: #fff;
}

::-webkit-scrollbar-track:active {
  background: #fff;
}

::-webkit-scrollbar-corner {
  background: transparent;
}
/* Global Themes*/
.theme-dark {
  background: #424242;
  background-color: #424242;
  color: #ffffff;
  color: rgba(255, 255, 255, 1);
}

.theme-light {
  background: #fafafa;
  background-color: #fafafa;
  color: #000000;
  color: rgba(0, 0, 0, 0.87);
}

/* Positioning Helpers*/
.absolute-center {
  right: 50vw;
  bottom: 50vh;
  transform: translateX(50%) translateY(50%);
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.27);
  padding: 1rem;
}
.center-hv {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.fp-img {
  background: url(image/path) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Typeit variables */
.type-wrap {
    margin: 10px auto;
    padding: 20px;
    background: initial;
    font-size:2rem;
}
.typed-text{
  display:inline-block;
  color:#000000 !important;
  font-size:2rem;
}

#typed3{
  color:#000000
}
.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 1s infinite;
  -moz-animation: blink 1s infinite;
  animation: blink 1s infinite;
  font-size: 2rem;
  color:cyan;
  margin-left:0;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.why-d {
  color:#242424;
}
.why-p {
  color:#ff4081;
}
.dark-2{
  background-color:#121212 !important;
  background:#121212 !important;
}
</style>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset='UTF-8' />
  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css" type="text/css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.js"></script>
  <style>
    /*
  NOTES
  Using wildcards in selectors: [attribut{regex}="string"]
  EXAMPLES:
    + class contains the string "test" ==> [class*="test"]
    + class starts_with the string "test" ==> [class^="test"]
*/

    input:-webkit-autofill+label {
      -webkit-transform: translateY(-14px) scale(0.8);
      transform: translateY(-14px) scale(0.8);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 500px white inset;
    }

    .input-field label:not(.label-icon).active {
      -webkit-transform: translateY(-14px) scale(1) !important;
      transform: translateY(-14px) scale(1) !important;
      -webkit-transform-origin: 0 0 !important;
      transform-origin: 0 0 !important;
    }


    html,
    body {
      font-family: "Roboto", sans-serif;
      font-size: 100%;
    }

    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: auto !important;
    }

    /* GRID */

    main,
    .content {
      flex: 1 0 auto;
    }

    /* Spacing-Helpers */

    /* pads */

    [class*="no-pad"],
    .no-pad {
      padding: 0 !important;
    }

    [class*="no-margin"],
    .no-margin {
      margin: 0 !important;
    }

    [class*="auto-margin"],
    .auto-margin {
      margin: 0px auto !important;
    }

    /* Positioning Helpers*/

    .absolute-center {
      right: 50vw;
      bottom: 50vh;
      transform: translateX(50%) translateY(50%);
      position: absolute;
      border: 1px solid #ffffff45;
      border: 1px solid rgba(255, 255, 255, 0.27);
      padding: 1rem;
    }

    .center-hv {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    /* Full page body background image */

    .fp-img {
      background: url(image/path) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    /*
  Handle the CHROME yellow background for autofill
  Also-note that adding autocomplete="off" may be required for firefox30
  EG: <input type="text" name="foo" autocomplete="off" />
*/

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus input:-webkit-autofill,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
      border: none !important;
      -webkit-text-fill-color: inherit !important;
      -webkit-box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0 9999px white;
      box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0 9999px white;
      -webkit-transition: background-color 5000s ease-in-out 0s;
      -o-transition: background-color 5000s ease-in-out 0s;
      transition: background-color 5000s ease-in-out 0s;
    }

    svg:not(:root),
    svg {
      display: block;
      overflow: auto;
    }

    /*Scroll bars*/

    ::-webkit-scrollbar {
      width: 3px;
      height: 2px;
    }

    ::-webkit-scrollbar-button {
      width: 3px;
      height: 2px;
    }

    ::-webkit-scrollbar-thumb {
      background: #00000091;
      background: rgba(0, 0, 0, 0.54);
      border: 3px none #00000091;
      border: 3px none rgba(0, 0, 0, 0.54);
      border-radius: 1px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #000000a3;
      background: rgba(0, 0, 0, 0.64);
    }

    ::-webkit-scrollbar-thumb:active {
      background: #00000091;
      background: rgba(0, 0, 0, 0.54);
    }

    ::-webkit-scrollbar-track {
      background: #ffffff;
      border: 2px none #ffffff;
      border-radius: 1px;
    }

    ::-webkit-scrollbar-track:hover {
      background: #ffffff;
    }

    ::-webkit-scrollbar-track:active {
      background: #ffffff;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    /* Global Themes*/

    .theme-dark {
      background: #424242;
      background-color: #424242;
      color: #ffffff;
      color: rgba(255, 255, 255, 1);
    }

    .theme-light {
      background: #fafafa;
      background-color: #fafafa;
      color: #000000;
      color: rgba(0, 0, 0, 0.87);
    }

    /* 
 Typeit variables 
 https://mattboldt.com/typed.js/
 <script src="http://www.mattboldt.com/typed.js/lib/typed.min.js"></script>
 
*/

    .type-wrap {
      margin: 10px auto;
      padding: 20px;
      background: initial;
      font-size: 2rem;
    }

    .typed-text {
      display: inline-block;
      color: #000000 !important;
      font-size: 2rem;
    }

    #typed3 {
      color: #000000;
    }

    .typed-cursor {
      opacity: 1;
      -webkit-animation: blink 1s infinite;
      -moz-animation: blink 1s infinite;
      animation: blink 1s infinite;
      font-size: 2rem;
      color: cyan;
      margin-left: 0;
    }

    @keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @-moz-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
  <style>
    html,
    body {
      font-family: "Roboto", sans-serif;
      font-size: 100%;
    }

    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      margin: 0px;
      padding: 0px;
      height: 100%;
      width: 100%;
      overflow: auto !important;
    }

    /*Handle the CHROME yellow background for autofill*/

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus input:-webkit-autofill,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
      border: none !important;
      -webkit-text-fill-color: inherit !important;
      -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
      transition: background-color 5000s ease-in-out 0s;
      box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0px 9999px white;
    }

    svg:not(:root),
    svg {
      display: block;
      overflow: auto;
    }

    /* Icons */

    .material-icons.md-18 {
      font-size: 18px;
    }

    .material-icons.md-24 {
      font-size: 24px;
    }

    .material-icons.md-36 {
      font-size: 36px;
    }

    .material-icons.md-48 {
      font-size: 48px;
    }

    /* Rules for using icons as black on a light background. */

    .material-icons.md-dark {
      color: rgba(0, 0, 0, 0.54);
    }

    .material-icons.md-dark.md-inactive {
      color: rgba(0, 0, 0, 0.26);
    }

    /* Rules for using icons as white on a dark background. */

    .material-icons.md-light {
      color: rgba(255, 255, 255, 1);
    }

    .material-icons.md-light.md-inactive {
      color: rgba(255, 255, 255, 0.3);
    }

    main,
    .content {
      flex: 1 0 auto;
    }

    /*Helpers*/

    .no-pad {
      padding: 0 !important;
    }

    /*Scroll bars*/

    ::-webkit-scrollbar {
      width: 3px;
      height: 2px;
    }

    ::-webkit-scrollbar-button {
      width: 3px;
      height: 2px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.54);
      border: 3px none rgba(0, 0, 0, 0.54);
      border-radius: 1px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.64);
    }

    ::-webkit-scrollbar-thumb:active {
      background: rgba(0, 0, 0, 0.54);
    }

    ::-webkit-scrollbar-track {
      background: #fff;
      border: 2px none #fff;
      border-radius: 1px;
    }

    ::-webkit-scrollbar-track:hover {
      background: #fff;
    }

    ::-webkit-scrollbar-track:active {
      background: #fff;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    /* Global Themes*/

    .theme-dark {
      background: #424242;
      background-color: #424242;
      color: #ffffff;
      color: rgba(255, 255, 255, 1);
    }

    .theme-light {
      background: #fafafa;
      background-color: #fafafa;
      color: #000000;
      color: rgba(0, 0, 0, 0.87);
    }

    /* Positioning Helpers*/

    .absolute-center {
      right: 50vw;
      bottom: 50vh;
      transform: translateX(50%) translateY(50%);
      position: absolute;
      border: 1px solid rgba(255, 255, 255, 0.27);
      padding: 1rem;
    }

    .center-hv {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .fp-img {
      background: url(image/path) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    /* Typeit variables */

    .type-wrap {
      margin: 10px auto;
      padding: 20px;
      background: initial;
      font-size: 2rem;
    }

    .typed-text {
      display: inline-block;
      color: #000000 !important;
      font-size: 2rem;
    }

    #typed3 {
      color: #000000
    }

    .typed-cursor {
      opacity: 1;
      -webkit-animation: blink 1s infinite;
      -moz-animation: blink 1s infinite;
      animation: blink 1s infinite;
      font-size: 2rem;
      color: cyan;
      margin-left: 0;
    }

    @keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @-moz-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .why-d {
      color: #242424;
    }

    .why-p {
      color: #ff4081;
    }

    .dark-2 {
      background-color: #121212 !important;
      background: #121212 !important;
    }
  </style>
  <script>
    $(document).ready(function() {
      $(".rt-select").material_select();
      $(".rt-select").on('change', function(e) {
        //console.log($(this).find(":selected").val(););
        $(this).material_select();
      });
    });
  </script>
</head>

<!-- END HEAD -->
<!-- BEGIN BODY -->

<body>
  <div class="row">
    <div class="col s12">
      <div class="card" style="margin-top:15vh;width:50vw">
        <div class="card-content">
          <div class="row center-align" style="margin-bottom:2px">
            <img class="responsive-img center-align" src="https://pathli.com/app/assets/build/images/whyles_circle.png" alt="" style="-webkit-filter: drop-shadow(1px -2px 3px #444); filter: drop-shadow(1px 2px 3px #444);">
          </div>

          <div class="row" style="">
            <div class="input-field col s12">
              <input id="user_name" type="text" autocomplete="new-user" />
              <label for="user_name">First Name</label>
            </div>
          </div>
          <div class="row" style="">
            <div class="input-field col s12">
              <input id="user_pw" type="password" autocomplete="new-pod" />
              <label for="user_pw">Password</label>
            </div>

          </div>
        </div>
        <div class="card-action" style="border-top-color:rgba(0,0,0,0.27)">
          <form action="" style="display:inline" class="input-field">
            <a href="#" class="waves-effect waves-light btn btn-flat light-blue" style="right:0;left:calc(100% - 70px)">
            <i class="material-icons">send</i>
            </a></form>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>
<!-- END BODY -->

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/CarlBoneri/logr-wjdGbB */
/*
  NOTES
  Using wildcards in selectors: [attribut{regex}="string"]
  EXAMPLES:
    + class contains the string "test" ==> [class*="test"]
    + class starts_with the string "test" ==> [class^="test"]
*/
input:-webkit-autofill + label {
  -webkit-transform: translateY(-14px) scale(0.8);
  transform: translateY(-14px) scale(0.8);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
input:-webkit-autofill { -webkit-box-shadow:0 0 0 500px white inset; }

.input-field label:not(.label-icon).active {
  -webkit-transform: translateY(-14px) scale(1) !important;
          transform: translateY(-14px) scale(1) !important;
  -webkit-transform-origin: 0 0 !important;
          transform-origin: 0 0 !important;
}


html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: auto !important;
}

/* GRID */

main,
.content {
  flex: 1 0 auto;
}

/* Spacing-Helpers */
/* pads */
[class*="no-pad"],
.no-pad {
  padding: 0 !important;
}

[class*="no-margin"],
.no-margin {
  margin: 0 !important;
}

[class*="auto-margin"],
.auto-margin {
  margin: 0px auto !important;
}

/* Positioning Helpers*/
.absolute-center {
  right: 50vw;
  bottom: 50vh;
  transform: translateX(50%) translateY(50%);
  position: absolute;
  border: 1px solid #ffffff45;
  border: 1px solid rgba(255, 255, 255, 0.27);
  padding: 1rem;
}

.center-hv {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Full page body background image */
.fp-img {
  background: url(image/path) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*
  Handle the CHROME yellow background for autofill
  Also-note that adding autocomplete="off" may be required for firefox30
  EG: <input type="text" name="foo" autocomplete="off" />
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0 9999px white;
  box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0 9999px white;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

svg:not(:root),
svg {
  display: block;
  overflow: auto;
}

/*Scroll bars*/

::-webkit-scrollbar {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-button {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  background: #00000091;
  background: rgba(0, 0, 0, 0.54);
  border: 3px none #00000091;
  border: 3px none rgba(0, 0, 0, 0.54);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
  background: #000000a3;
  background: rgba(0, 0, 0, 0.64);
}

::-webkit-scrollbar-thumb:active {
  background: #00000091;
  background: rgba(0, 0, 0, 0.54);
}

::-webkit-scrollbar-track {
  background: #ffffff;
  border: 2px none #ffffff;
  border-radius: 1px;
}

::-webkit-scrollbar-track:hover {
  background: #ffffff;
}

::-webkit-scrollbar-track:active {
  background: #ffffff;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Global Themes*/
.theme-dark {
  background: #424242;
  background-color: #424242;
  color: #ffffff;
  color: rgba(255, 255, 255, 1);
}

.theme-light {
  background: #fafafa;
  background-color: #fafafa;
  color: #000000;
  color: rgba(0, 0, 0, 0.87);
}

/* 
 Typeit variables 
 https://mattboldt.com/typed.js/
 <script src="http://www.mattboldt.com/typed.js/lib/typed.min.js"></script>
 
*/

.type-wrap {
  margin: 10px auto;
  padding: 20px;
  background: initial;
  font-size: 2rem;
}

.typed-text {
  display: inline-block;
  color: #000000 !important;
  font-size: 2rem;
}

#typed3 {
  color: #000000;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 1s infinite;
  -moz-animation: blink 1s infinite;
  animation: blink 1s infinite;
  font-size: 2rem;
  color: cyan;
  margin-left: 0;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*Downloaded from https://www.codeseek.co/CarlBoneri/logr-wjdGbB */
$(document).ready(function() {
  $(".rt-select").material_select();
  $(".rt-select").on('change', function(e){
    //console.log($(this).find(":selected").val(););
    $(this).material_select();
  });
});

Comments