AndFran/login.html

## login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blue-text {
            color: blue;
        }

        .red-text {
            color: red;
        }

        .yellow-text {
            color: yellow;
        }

        .green-text {
            color: green;
        }

        .center-text {
            text-align: center;
        }

        .big-letters {
            font-size: 50px;
        }

        .color-main-grey {
            color: #868e96;
        }

        .main-box-div {
            width: 500px;
            height: 250px;
            background-color: #9fcdff;
        }

        .center-block {
            margin: 0 auto;
        }

        #email_input {
            display: block;
            width: 80%;
            height: 10%;
            border-radius: 15px;
            border: 0;
            background-color: yellow;
            top: 20px;
            position: relative;
        }

        #login_button {
            display: block;
            width: 80%;
            height: 10%;
            border-radius: 15px;
            border: 0;
            background-color: #20c997;
            position: relative;
            top: 30px;
        }

        #circle {
            position: relative;
            top: 10px;
            background: #f00;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .links{
            color: blue;
            text-decoration: none;
        }

    </style>
</head>
<body>
<h2 class="center-text">
    <span class="blue-text">B</span><span class="red-text">o</span><span class="yellow-text">o</span><span
        class="blue-text">g</span><span class="green-text">l</span><span class="red-text">e</span>
</h2>
<h2 class="center-text big-letters color-main-grey">One account. All of Boogle</h2>
<h2 class="center-text color-main-grey">Sign in with your Boogle account</h2>

<div class="main-box-div center-block">
    <div id="circle" class="center-block"></div>
    <input type="text" placeholder="Enter your email" class="center-block" id="email_input">
    <button id="login_button" class="center-block">Next</button>
</div>
<p class="center-text"><a href="" class="links">Create an account</a></p>

<p class="center-text">Final part skipped..........no icons</p>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	.blue-text {
	color: blue;
	}

	.red-text {
	color: red;
	}

	.yellow-text {
	color: yellow;
	}

	.green-text {
	color: green;
	}

	.center-text {
	text-align: center;
	}

	.big-letters {
	font-size: 50px;
	}

	.color-main-grey {
	color: #868e96;
	}

	.main-box-div {
	width: 500px;
	height: 250px;
	background-color: #9fcdff;
	}

	.center-block {
	margin: 0 auto;
	}

	#email_input {
	display: block;
	width: 80%;
	height: 10%;
	border-radius: 15px;
	border: 0;
	background-color: yellow;
	top: 20px;
	position: relative;
	}

	#login_button {
	display: block;
	width: 80%;
	height: 10%;
	border-radius: 15px;
	border: 0;
	background-color: #20c997;
	position: relative;
	top: 30px;
	}

	#circle {
	position: relative;
	top: 10px;
	background: #f00;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	}

	.links{
	color: blue;
	text-decoration: none;
	}

	</style>
	</head>
	<body>
	<h2 class="center-text">
	<span class="blue-text">B</span><span class="red-text">o</span><span class="yellow-text">o</span><span
	class="blue-text">g</span><span class="green-text">l</span><span class="red-text">e</span>
	</h2>
	<h2 class="center-text big-letters color-main-grey">One account. All of Boogle</h2>
	<h2 class="center-text color-main-grey">Sign in with your Boogle account</h2>

	<div class="main-box-div center-block">
	<div id="circle" class="center-block"></div>
	<input type="text" placeholder="Enter your email" class="center-block" id="email_input">
	<button id="login_button" class="center-block">Next</button>
	</div>
	<p class="center-text"><a href="" class="links">Create an account</a></p>

	<p class="center-text">Final part skipped..........no icons</p>

	</body>
	</html>