ajbraus/demo-js.html

## demo-js.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Demo JS</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css" />

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="scripts.js"></script>
</head>
<body>
    <div class="container">
        <div id="friend"></div>

        <button id="make-green">Make Green!</button>
        <button id="make-red">Make Red!</button>

        <h1>1. Inline styling</h1>

        <p style="color:red;">Some text</p>

        <h1>2. In document CSS</h1>

        <p class="text-red">some text</p>

        <h1>3. Separate CSS document</h1>

        <p class="text-crimson">some text</p>
        <div class='awesome-text'>another thing</div>


        <form action="" id="login-form">
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" class='form-control' id="email">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" name="password" class='form-control' id="password">
            </div>

            <div class="text-right">
                <button class="btn btn-primary" type='submit'>Save</button>
            </div>
        </form>
        <hr>
        <h3>Logins</h3>
        <div class="list-group" id="logins">

        </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Demo JS</title>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="styles.css" />

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="scripts.js"></script>
	</head>
	<body>
	<div class="container">
	<div id="friend"></div>

	<button id="make-green">Make Green!</button>
	<button id="make-red">Make Red!</button>

	<h1>1. Inline styling</h1>

	<p style="color:red;">Some text</p>

	<h1>2. In document CSS</h1>

	<p class="text-red">some text</p>

	<h1>3. Separate CSS document</h1>

	<p class="text-crimson">some text</p>
	<div class='awesome-text'>another thing</div>


	<form action="" id="login-form">
	<div class="form-group">
	<label for="email">Email</label>
	<input type="email" name="email" class='form-control' id="email">
	</div>
	<div class="form-group">
	<label for="password">Password</label>
	<input type="password" name="password" class='form-control' id="password">
	</div>

	<div class="text-right">
	<button class="btn btn-primary" type='submit'>Save</button>
	</div>
	</form>
	<hr>
	<h3>Logins</h3>
	<div class="list-group" id="logins">

	</div>
	</div>
	</body>
	</html>