3

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

Thumbnail
This awesome code was written by MGK_888, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MGK_888 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html>
<head>
  <title>Log in - Sch&uuml;ler f&uuml;r Sch&uuml;ler!</title>
  <link rel="stylesheet" type="text/css" href="3.css">
</head>
<body>

<h1>Log in!</h1>

<div class="form">
  <form>
      <div class="line"><label for="username">Username *: </label><input type="text" id="username" /></div>
      <div class="line"><label for="pwd">Password *: </label><input type="password" id="pwd" /></div>
  </form>
</div>



</body>

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MGK_888/3-PWmREJ */
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Overpass');


* {
  padding: 0;
  margin: 0;
}

body {
  font-family:Arial, Sans-Serif;
  background-image: url(http://wallpapershome.com/images/pages/pic_h/4748.jpg);
}

.form {
  font-family: 'Overpass', sans-serif;
  width:300px;
  margin:0 auto;
  background-color: white;
  text-align: center;
  border: 5px solid white;
  border-radius: 25px;
  padding: 150px 5px 20px 5px;
  margin-top: 50px;
  z-index: 1;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 100px;
  text-align: center;
  text-shadow: 2px 2px black;
  padding-top: 50px;
  width: 100%;
  position: fixed;
  color: rgb(211, 228, 255);
  top: 0;
  z-index: 2;
}

/* Nicely lines up the labels. */
form label {display:inline-block;
  width:140px;
}

/* You could add a class to all the input boxes instead, if you like. That would be safer, and more backwards-compatible */
form input[type="text"],
form input[type="password"],
form input[type="email"] {width:160px;}

form .line {clear:both;}
form .line.submit {text-align:right;}

Comments