Milford School

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

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

Technologies

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

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

  
</head>

<body>

  <div class="header">
      <div class="container">
        <div class="dropdown">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/2/milford-school/menu.svg" width="30px">
          <ul class="dropdown-menu">
            <li><a href="#">Admissions</a></li>
            <li><a href="#">Academics</a></li>
            <li><a href="#">Research</a></li>
            <li><a href="#">Campus Life</a></li>
            <li><a href="#">Administration</a></li>
          </ul>
        </div>
        <h1>Milford School</h1>
        
      </div>
    </div>

    <div class="main">
      <div class="container">
        <form role="form">
          <div class="form-group">
            <p class="email-error"></p>
            <input type="email" class="form-control" id="email" placeholder="Email">
          </div>
          <div class="form-group">
            <p class="password-error"></p>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <button type="submit" class="btn btn-default">Sign in</button>
        </form>      
      </div>
    </div>
    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/milford-school-MvbQPm */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/2/milford-school/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

.header {
  background-color: rgba(0,0,0,0.8);
  padding: 10px 0;
}

.header h1 {
  color: #fff;
  display: inline-block;
  font-size: 20px;
  margin: 0 0 0 5px
}

.dropdown {
  position: relative;
  display: inline;
  cursor: pointer;
}

.dropdown-menu {
  border-radius:0px; 
  box-shadow:none; 
  border:none;
  min-width: 200px;
  top: 32px;
  background-color: rgba(0,0,0,0.8);
}

.dropdown-menu li a {
  color: #fff;
  font-size: 16px;
  padding: 5px 15px;
}

.main .container {
  position: relative;
  top: 200px;
  width: 400px;
}

.form-control,
.btn-default {
  background-color: rgba(255,255,255,0.8);
  border-radius: 0;
}

.form-control {
  font-size: 18px;
}

.email-error,
.password-error {
  color: #dd4b39;
  font-size: 16px;
  font-weight: 600;
  text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 2px;
  background-color: rgba(0,0,0,0.8);
  margin: 0;
  line-height: 10px;
  padding: 10px;
} 

/*Downloaded from https://www.codeseek.co/0319AM/milford-school-MvbQPm */
$(document).ready(function() {
  $(".dropdown img").click(function() {
    (".dropdown-menu").toggle();
  });
  $("form").submit(function() {
    var email = $("#email").val();
    var password = $("#password").val();
    
    if (email === "") {
      $(".email-error").html("Please enter your email address.")
    } 
    if (password === "") {
      $(".password-error").html("Please enter your password.")
    }
    return false;
  });
});

Comments