codecusp/index.html

## index.html
<!DOCTYPE html>

<head>
    <title>Facebook Login</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header>
        <div class="container">
            <div class="content">
                <img src="./img/logo-white.png" alt="Facebook Logo">
                <button>Create New Account</button>
            </div>
        </div>
    </header>
    <main>
        <div class="container">
            <section class="login-form">
                <h1>Login to Facebook</h1>
                <form>
                    <input type="text" placeholder="Email address or phone number">
                    <input type="password" placeholder="Password">
                    <button type="submit">Log In</button>
                    <a href="#">Forgotten Account?</a>
                    <p><span>or</span></p>
                </form>
                <button class="create-account">Create New Account</button>

            </section>
        </div>

    </main>
    <footer>
        <div class="container">
            <ul class="languages">
                <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>
                <button><i>+</i></button>
            </ul>
            <hr>
            <ul class="tags">
                <li><a href="#">Sign up</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Messenger</a></li>
                <li><a href="#">Facebook Lite</a></li>
                <li><a href="#">Watch</a></li>
                <li><a href="#">People</a></li>
                <li><a href="#">Profiles</a></li>
                <li><a href="#">Pages</a></li>
                <li><a href="#">Page Categories</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Places</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Locations</a></li>
                <li><a href="#">Marketplace</a></li>
                <li><a href="#">Groups</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="#">About</a></li>
                <li><a href="#">Create Ad</a></li>
                <li><a href="#">Create Page</a></li>
                <li><a href="#">Developers</a></li>
            </ul>

            <p>Facebook © 2019</p>
        </div>

    </footer>
</body>

</html>

## styles.css
/* Removing user agent default styles */
body, ul, li, a, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}


/* Resetting button styles  */
button {
    border: 0;
}

ul {
    list-style: none;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

/* Header Styles */

header {
    background-color: #3b5998;
    padding: 20px 0;
}

header .content {
    display: flex;
    align-items: center;
}

header button {
    background-color: #42b72a;
    color: #ffffff;
    font-weight: bold;
    padding: 10px 12px;
    margin-left: 20px;
}

header img {
    width: 150px;
}

/* Main Styles */

main {
    background: #e9ebee;
    padding: 50px 0;
}

.login-form {
    margin: 0 auto;
    background: #ffffff;
    width: 600px;
    text-align: center;
    padding: 40px 0;
}

.login-form h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    margin: 10px 0;
    font-weight: 100;
}

.login-form a{
    color: #385898;
    font-size: 12px;
    margin: 10px 0;
    text-decoration: none;
}

form {
    max-width: 300px;
    margin: 0 auto;
}

form input, form button {
    width: 100%;
    box-sizing: border-box;
}

form input {
    margin: 5px 0;
    padding: 8px;
    border: 1px solid #e1e1e1;
    height: 35px;
    font-size: 14px;
}

form button {
    background-color: #4267b2;
    color: white;
    padding: 14px;
    margin: 5px 0;
    font-weight: bold;
}

.create-account {
    padding: 12px 16px;
    font-weight: bold;
    color: #ffffff;
    background: #42b72a;
    margin: 10px 0;
}

form p{
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
    line-height: 0.1em;
    margin: 16px 0 20px;
}
form p span { background:#fff; padding:0 10px; }


/* Footer Styles */

footer {
    padding: 100px 0 20px 0;
}

footer ul li {
    padding-right: 15px;
    padding-bottom: 5px;
    font-size: 14px;
}

footer ul li a{
    color: #385898;
    text-decoration: none;
}

.languages {
    display: flex;
}

.tags {
    display: flex;
    flex-wrap: wrap;
}
	<!DOCTYPE html>

	<head>
	<title>Facebook Login</title>
	<link rel="stylesheet" href="css/styles.css">
	</head>

	<body>
	<header>
	<div class="container">
	<div class="content">
	<img src="./img/logo-white.png" alt="Facebook Logo">
	<button>Create New Account</button>
	</div>
	</div>
	</header>
	<main>
	<div class="container">
	<section class="login-form">
	<h1>Login to Facebook</h1>
	<form>
	<input type="text" placeholder="Email address or phone number">
	<input type="password" placeholder="Password">
	<button type="submit">Log In</button>
	<a href="#">Forgotten Account?</a>
	<p><span>or</span></p>
	</form>
	<button class="create-account">Create New Account</button>

	</section>
	</div>

	</main>
	<footer>
	<div class="container">
	<ul class="languages">
	<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>
	<button><i>+</i></button>
	</ul>
	<hr>
	<ul class="tags">
	<li><a href="#">Sign up</a></li>
	<li><a href="#">Login</a></li>
	<li><a href="#">Messenger</a></li>
	<li><a href="#">Facebook Lite</a></li>
	<li><a href="#">Watch</a></li>
	<li><a href="#">People</a></li>
	<li><a href="#">Profiles</a></li>
	<li><a href="#">Pages</a></li>
	<li><a href="#">Page Categories</a></li>
	<li><a href="#">Events</a></li>
	<li><a href="#">Places</a></li>
	<li><a href="#">Games</a></li>
	<li><a href="#">Locations</a></li>
	<li><a href="#">Marketplace</a></li>
	<li><a href="#">Groups</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="#">About</a></li>
	<li><a href="#">Create Ad</a></li>
	<li><a href="#">Create Page</a></li>
	<li><a href="#">Developers</a></li>
	</ul>

	<p>Facebook © 2019</p>
	</div>

	</footer>
	</body>

	</html>
	/* Removing user agent default styles */
	body, ul, li, a, h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	}


	/* Resetting button styles */
	button {
	border: 0;
	}

	ul {
	list-style: none;
	}

	.container {
	max-width: 960px;
	margin: 0 auto;
	}

	/* Header Styles */

	header {
	background-color: #3b5998;
	padding: 20px 0;
	}

	header .content {
	display: flex;
	align-items: center;
	}

	header button {
	background-color: #42b72a;
	color: #ffffff;
	font-weight: bold;
	padding: 10px 12px;
	margin-left: 20px;
	}

	header img {
	width: 150px;
	}

	/* Main Styles */

	main {
	background: #e9ebee;
	padding: 50px 0;
	}

	.login-form {
	margin: 0 auto;
	background: #ffffff;
	width: 600px;
	text-align: center;
	padding: 40px 0;
	}

	.login-form h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	margin: 10px 0;
	font-weight: 100;
	}

	.login-form a{
	color: #385898;
	font-size: 12px;
	margin: 10px 0;
	text-decoration: none;
	}

	form {
	max-width: 300px;
	margin: 0 auto;
	}

	form input, form button {
	width: 100%;
	box-sizing: border-box;
	}

	form input {
	margin: 5px 0;
	padding: 8px;
	border: 1px solid #e1e1e1;
	height: 35px;
	font-size: 14px;
	}

	form button {
	background-color: #4267b2;
	color: white;
	padding: 14px;
	margin: 5px 0;
	font-weight: bold;
	}

	.create-account {
	padding: 12px 16px;
	font-weight: bold;
	color: #ffffff;
	background: #42b72a;
	margin: 10px 0;
	}

	form p{
	width: 100%;
	text-align: center;
	border-bottom: 1px solid #e1e1e1;
	line-height: 0.1em;
	margin: 16px 0 20px;
	}
	form p span { background:#fff; padding:0 10px; }


	/* Footer Styles */

	footer {
	padding: 100px 0 20px 0;
	}

	footer ul li {
	padding-right: 15px;
	padding-bottom: 5px;
	font-size: 14px;
	}

	footer ul li a{
	color: #385898;
	text-decoration: none;
	}

	.languages {
	display: flex;
	}

	.tags {
	display: flex;
	flex-wrap: wrap;
	}