diff --git a/login screen/index.html b/login screen/index.html
new file mode 100644
index 0000000..8ee8d0e
--- /dev/null
+++ b/login screen/index.html	
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Login</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+<section class="form">
+     
+    <center> <div class="form-title">
+     	<h1>Login</h1>
+
+     	<a  class="a1" href="https://facebook.com" >Login with Facebook</a> <br>
+     	
+     	<br>	<a class="a2" href="https://mail.google.com/" >Login with Google</a>
+     
+     </div>
+
+
+   <h2><b>Login with email</b></h2>
+
+<div class="form-body">
+ 
+<form name="contactForm" action="#" method="">
+	<div>
+	<input type="text" name="txtName" placeholder="Your  Username/Email" required>
+	<br>
+	<input type="password"  name="txtpass" placeholder="Your Password" required>
+
+
+<div class="btns">
+<input type="Submit" value="Login" name="btnLogin"><br> <br>		
+
+
+</div></section>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/login screen/style.css b/login screen/style.css
new file mode 100644
index 0000000..76747e2
--- /dev/null
+++ b/login screen/style.css	
@@ -0,0 +1,103 @@
+*{
+	font-family:"Century Gothic";
+}
+a:link, a:visited {
+  background-color: #f44336;
+  color: white;
+  padding: 14px 25px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border-radius: 5%;
+}
+
+a:hover, a:active {
+  background-color: grey;
+}
+
+
+.form {
+
+	background-color:#3A469C;
+	border: #0E98D7 5px solid;
+    padding:50px;
+    width: 60%
+    display:inline-block;
+}
+
+
+.form-title{
+	margin-bottom: 50px
+}
+
+.form-title p{
+	color: white;
+	font-size:15px;
+	text-align: center;
+}
+
+
+
+.form-title h1{
+	color: white;
+	font-size: 50px;
+	text-align: center;
+}
+
+.form-body{
+	display: inline-block;
+}
+
+
+label{
+	color: white;
+}
+
+input::placeholder{
+	color:#0E98D7;
+}
+
+input[type=text], input[type=Password] {
+	color:#0E98D7;
+	background-color:#3A469C; 
+	width: 100%;
+	border: none;
+	border-bottom: 2px #0E98D7 solid; 
+	margin-top: 20px;
+	margin-bottom: 20px;
+	padding: 5px;
+}
+
+.btns{
+	text-align: center;
+	margin-top: 20px;
+}
+
+
+.btns input{
+	background-color:#3A469C;
+	border: white 1px solid;
+	padding: 10px;
+	color: white;
+    margin-right: 20px;
+}
+
+
+input [type=Submit] {
+
+	background-repeat: no-repeat;
+	background-size: 50px 50px;
+	width: 100px;
+	height: 100px;
+}
+
+input[type=text]:focus,input[type=pass]:focus, {
+	outline: none;
+}
+
+h2{
+	text-align: center;
+	color: white;
+}
\ No newline at end of file
