CarlBoneri/index.html

## index.html
<html>

<head>
  <!--Import Google Icon Font-->
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Icon and Roboto Fonts -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>

<body>
  <div class="centered">
    <!-- card -->
    <div class="card col s12">
      <!-- card content -->
      <div class="card-content">
        <!--img-->
        <div class="row" style="margin-bottom:0">
          <div class="center-align">
            <img alt="" src="https://cbylz.com/app/assets2/whyles_icon_120.png">
          </div>
        </div>
        <!--forms-->
        <div class="row" style="margin-bottom:0">
          <div class="input-field col s6">
            <input id="user_name" type="text" class="">
            <label for="user_name">username</label>
          </div>
          <div class="input-field col s6">
            <input id="password" type="password" class="">
            <label for="password">password</label>
          </div>
        </div>
      </div>
      <!-- card-footer-->
      <div class="card-action">
        <a href="#" class="btn btn-flat indigo accent-2 white-text waves-effect right">
           login
          <i class="material-icons right">exit_to_app</i>

          </a>
      </div>
    </div>
  </div>
</body>

</html>

## rlogin.markdown

      
    Raw
  

              rlogin.markdown
            
          
    rlogin

A Pen by Carl Boneri on CodePen.
License.

  
## style.css
html,
body {
  font-family: 'Roboto', sans-serif;
  background: #E0E0E0;
  color: rgba(0, 0, 0, 0.87);
}

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

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

.centered {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.card.login-card {
     position: absolute;
     -moz-transform: translate(-50%, -50%)
     -webkit-transform: translate(-50%, -50%)
     -ms-transform: translate(-50%, -50%)
     -o-transform: translate(-50%, -50%)
     transform: translate(-50%, -50%);
}

.row.no-margin,
.row.no-margin > .col {
  margin:1%;
  padding:0;
}


.abs-center {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}


/*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);
}

/*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;
}


/*.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) {
  position: unset !important;
  display: inherit !important;
}*/

.card .card-action a.right {
      margin-bottom: 1rem !important;
}
	<html>

	<head>
	<!--Import Google Icon Font-->
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Icon and Roboto Fonts -->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<!--Import materialize.css-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
	<!--Import jQuery before materialize.js-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
	</head>

	<body>
	<div class="centered">
	<!-- card -->
	<div class="card col s12">
	<!-- card content -->
	<div class="card-content">
	<!--img-->
	<div class="row" style="margin-bottom:0">
	<div class="center-align">
	<img alt="" src="https://cbylz.com/app/assets2/whyles_icon_120.png">
	</div>
	</div>
	<!--forms-->
	<div class="row" style="margin-bottom:0">
	<div class="input-field col s6">
	<input id="user_name" type="text" class="">
	<label for="user_name">username</label>
	</div>
	<div class="input-field col s6">
	<input id="password" type="password" class="">
	<label for="password">password</label>
	</div>
	</div>
	</div>
	<!-- card-footer-->
	<div class="card-action">
	<a href="#" class="btn btn-flat indigo accent-2 white-text waves-effect right">
	login
	<i class="material-icons right">exit_to_app</i>

	</a>
	</div>
	</div>
	</div>
	</body>

	</html>
	html,
	body {
	font-family: 'Roboto', sans-serif;
	background: #E0E0E0;
	color: rgba(0, 0, 0, 0.87);
	}

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

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

	.centered {
	display: flex;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	}

	.card.login-card {
	position: absolute;
	-moz-transform: translate(-50%, -50%)
	-webkit-transform: translate(-50%, -50%)
	-ms-transform: translate(-50%, -50%)
	-o-transform: translate(-50%, -50%)
	transform: translate(-50%, -50%);
	}

	.row.no-margin,
	.row.no-margin > .col {
	margin:1%;
	padding:0;
	}


	.abs-center {
	position: fixed;
	top: 50%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
	}



	/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);
	}

	/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;
	}


	/*.card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) {
	position: unset !important;
	display: inherit !important;
	}*/

	.card .card-action a.right {
	margin-bottom: 1rem !important;
	}