Untitled

<!DOCTYPE html>
<html>
  <head>
  <style>

    html {
      min-height: 120%;
    }

    body {
      background-image: linear-gradient(to bottom,  #A7ADC6 0%, #d9ded8 100%);
    }

    .welcome {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 270%;
      color: white
    }
    input[type=text], input[type=password] {
      width: 100%;
      padding: 14px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 16px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 110%;
    }

    input[type=submit]:hover {
      background-color: #45a049;
    }
    .social {
      display: block;
      margin: 0 auto;
      overflow: hidden;
      width: 104%;
    }

    .social ul{
      display: block;
    }
    .social ul li{
      list-style: none;
      float: left;
      width: 30%;
      margin: 0 1%;
    }
    .social ul li a:hover{
      opacity: .8;
    }
    .social ul li a{
      display: inline-block;
      font-size: 24px;
      text-decoration: none;
      color: #fff;
      padding: 6px;
      display: block;
      text-align: center;
      border-radius: 4px;
    }
    .social ul li a.facebook{
      background: #3a589a;
    }
    .social ul li a.twitter {
      background: #4099ff;
    }
    .social ul li a.google-plus {
      background: #e9544f;
    }
   .box {
      border-radius: 20px;
      background-color: #f2f2f2;
      padding: 20px;
      width: 24%;
      font-size: 110%;
      position: absolute;
      /* TO ADJUST THE POSITION OF BOX, EDIT TOP: AND RIGHT: PERCENTAGE */
      top: 40%;
      right: 36%;
    }

    .back a{
      color: #A7ADC6;
      font-size: 250%;

    }

	.back a:hover{
      color: #45a049;
    }

    #forgot {
      padding-left: 20%;
    }

	#forgot a:link{
		color: blue;
		background-color: transparent;
		text-decoration: none;
	}
	#forgot a:visited{
		color: blue;
		background-color: transparent;
		text-decoration: none;
	}
	#forgot a:hover{
		color: red;
		background-color: transparent;
		text-decoration: underline;
	}

    /* HEADER START*/
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f1f5f5;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: black;
      text-align: center;
      padding: 60px;
      text-decoration: none;
    }

    li a:hover {
      background-color: #A7ADC;
    }
    /* HEADER END*/


  </style>


    <title>ShoeRacc | Sign in</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  </head>

  <body>
    <header>
    <ul>
      <li> <IMG height="160" width="220" SRC="..\images\shoeracc.png"> </li>
            <font size="6">

      <li>  <a  href="..\">Home</a> </li>

      <li>  <a  href="..\login">Accounts</a> </li>

      <li>  <a  href="..\listing">Product Listings</a> </li>

      </font>
      </ul>
      </header>
    <br>
    <br>
    <div class="welcome"><center><strong>Welcome to ShoeRacc! Please login below.</strong></center></div>
    <div class="box">
      <br>
      <form action="">
        <label for="username">Email or Username:</label>
        <br>
        <input type="text" id="username" name="username" placeholder="Please enter your email or username" required>
        <br>
        <label for="password">Password:</label>
        <br>
        <input type="password" id="password" name="password" placeholder="Please enter your password" required>
        <p>
          <label>
            <input type="checkbox" id="keep" name="keep"> Keep me logged in</label>
          <span id="forgot"><a href="..\" target="_blank">Forgot Password?</a></span>
        </p>
        <input type="submit" value="LOGIN">
        <br>
        <br>
        <span><center> Connect with:</center></span>
        <br>
        <div class="social">
          <ul>
            <li>
              <a href="http://facebook.com" class="facebook" target="_blank">
                <span class="fa fa-facebook"></span>
              </a>
            </li>
            <li>
              <a href="http://twitter.com" class="twitter" target="_blank">
                <span class="fa fa-twitter"></span>
              </a>
            </li>
            <li>
              <a href="http://plus.google.com" class="google-plus" target="_blank">
                <span class="fa fa-google-plus"></span>
              </a>
            </li>
          </ul>
        </div>
        <br>
        <div class="back">
        <center>
          <a href="#" onclick="history.go(-1)">
            <span class="fa fa-arrow-circle-left"></span>
          </a>
        </center>

        </div>
      </form>

    </div>

  </body>

</html>