<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css">
<!-- Other HTML code -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
<!-- Your JavaScript file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center vh-100">
<div class="row w-100">
<div class="col-md-6 left-section d-flex flex-column justify-content-center align-items-content-end">
<h1>facebook</h1>
<p>Connect with friends and the world around you on Facebook.</p>
</div>
<div class="col-md-6">
<div class="card login-box">
<div class="card-body">
<input type="email" class="form-control mb-2 p-3" placeholder="Email address or phone number">
<input type="password" class="form-control mb-2 p-3" placeholder="Password">
<button class="btn btn-primary btn-block mb-2 p-2 w-100">Log In</button>
<a href="#" class="d-block text-center mb-2 forgot-password">Forgot password?</a>
<hr>
<div class="text-center">
<button class="btn btn-success btn-block p-2">Create new account</button>
</div>
</div>
</div>
<p class="text-center create-page">Create a Page for a celebrity, brand or business.</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>