ajtazer/Microsoft_Login.html

## Microsoft_Login.html
<!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>Microsoft Login</title>
  </head>
  <body>
    <!-- css start  -->
    <style>
      *, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    /* The Gradient Background for page */
    background: linear-gradient(135deg, rgba(175, 118, 54,0.45) 0%, rgba(149, 192, 233, 0.45) 50%, rgba(181, 212, 177, 0.45) 85%, rgba(228, 226, 136, 0.45) 100%);

}

.main-container{
    display: flex;
    width: 90%;
    justify-content: center;
    position: relative;
}

.form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.content-form{
    display: flex;
    flex-direction: column;
    width: 90%;
    gap: 1.25rem;
    background-color: white;
    padding: 4rem 2rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Styling for Microsoft Stuff */
.MS-heading-box{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.MS-logo{
    height: 2rem;
    aspect-ratio: 1/1;
}

.MS-text{
    font-size: 1.5rem;
    font-weight: 500;
    color: gray;
}

h1{
    font-weight: 500;
}

input{
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid gray;
    font-size: 1.15rem;
}

.q-mark-container{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.q-logo{
    height: 1.25rem;
    aspect-ratio: 1/1;
}

span{
    color: rgb(40, 162, 219);
    font-weight: 500;
}

button{
    width: 20%;
    padding: 0.65rem 1rem;
    text-align: center;
    font-weight: 500;
    background-color: rgb(40, 133, 219);
    color: white;
    border: none;
    font-size: 1rem;
    align-self: flex-end;
}

.signin-container{
    width: 90%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: white;
    font-size: 1.15rem;
    padding: 1rem 2rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}

.security-key{
    height: 1.5rem;
    aspect-ratio: 1/1;
}

/* Device Responsiveness */
/* help: https://tailwindcss.com/docs/screens */

@media only screen and (min-width: 640px) {
    .main-container{
        width: 90%;
    }
  }

  @media only screen and (min-width: 768px) {
    .main-container{
        width: 70%;
    }
  }

@media only screen and (min-width: 1024px) {
    .main-container{
        width: 50%;
    }
  }

@media only screen and (min-width: 1280px) {
    .main-container{
        width: 33%;
    }
  }
    </style>
    <!-- css end  -->

    <div class="main-container">
      <div class="form-container">
        <form class="content-form">
          <div class="MS-heading-box">
            <img
              src="https://cdn-icons-png.flaticon.com/512/732/732221.png"
              class="MS-logo"
            />
            <h2 class="MS-text">Microsoft</h2>
          </div>
          <h1>Sign In</h1>
          <input
            type="text"
            name=""
            id="form-text-input"
            placeholder="Email, Phone or Skype"
          />
          <p>
            No account?
            <span>Create One!</span>
          </p>
          <div class="q-mark-container">
            <span>Sign in with a security key</span>
            <img
              src="https://svgur.com/i/pN4.svg"
              class="q-logo"
            />
          </div>
          <button>Next</button>
        </form>
        <div class="signin-container">
          <img
            src="https://svgur.com/i/pMP.svg"
            class="security-key"
          />
          <p>Sign-in options</p>
        </div>
      </div>
    </div>
  </body>
</html>
	<!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>Microsoft Login</title>
	</head>
	<body>
	<!-- css start -->
	<style>
	*, html{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Segoe UI', sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	/* The Gradient Background for page */
	background: linear-gradient(135deg, rgba(175, 118, 54,0.45) 0%, rgba(149, 192, 233, 0.45) 50%, rgba(181, 212, 177, 0.45) 85%, rgba(228, 226, 136, 0.45) 100%);

	}

	.main-container{
	display: flex;
	width: 90%;
	justify-content: center;
	position: relative;
	}

	.form-container{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	}

	.content-form{
	display: flex;
	flex-direction: column;
	width: 90%;
	gap: 1.25rem;
	background-color: white;
	padding: 4rem 2rem;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}

	/* Styling for Microsoft Stuff */
	.MS-heading-box{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	}

	.MS-logo{
	height: 2rem;
	aspect-ratio: 1/1;
	}

	.MS-text{
	font-size: 1.5rem;
	font-weight: 500;
	color: gray;
	}

	h1{
	font-weight: 500;
	}

	input{
	padding: 0.5rem 0;
	border: none;
	border-bottom: 1px solid gray;
	font-size: 1.15rem;
	}

	.q-mark-container{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	}

	.q-logo{
	height: 1.25rem;
	aspect-ratio: 1/1;
	}

	span{
	color: rgb(40, 162, 219);
	font-weight: 500;
	}

	button{
	width: 20%;
	padding: 0.65rem 1rem;
	text-align: center;
	font-weight: 500;
	background-color: rgb(40, 133, 219);
	color: white;
	border: none;
	font-size: 1rem;
	align-self: flex-end;
	}

	.signin-container{
	width: 90%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: white;
	font-size: 1.15rem;
	padding: 1rem 2rem;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}

	.security-key{
	height: 1.5rem;
	aspect-ratio: 1/1;
	}

	/* Device Responsiveness */
	/* help: https://tailwindcss.com/docs/screens */

	@media only screen and (min-width: 640px) {
	.main-container{
	width: 90%;
	}
	}

	@media only screen and (min-width: 768px) {
	.main-container{
	width: 70%;
	}
	}

	@media only screen and (min-width: 1024px) {
	.main-container{
	width: 50%;
	}
	}

	@media only screen and (min-width: 1280px) {
	.main-container{
	width: 33%;
	}
	}
	</style>
	<!-- css end -->

	<div class="main-container">
	<div class="form-container">
	<form class="content-form">
	<div class="MS-heading-box">
	<img
	src="https://cdn-icons-png.flaticon.com/512/732/732221.png"
	class="MS-logo"
	/>
	<h2 class="MS-text">Microsoft</h2>
	</div>
	<h1>Sign In</h1>
	<input
	type="text"
	name=""
	id="form-text-input"
	placeholder="Email, Phone or Skype"
	/>
	<p>
	No account?
	<span>Create One!</span>
	</p>
	<div class="q-mark-container">
	<span>Sign in with a security key</span>
	<img
	src="https://svgur.com/i/pN4.svg"
	class="q-logo"
	/>
	</div>
	<button>Next</button>
	</form>
	<div class="signin-container">
	<img
	src="https://svgur.com/i/pMP.svg"
	class="security-key"
	/>
	<p>Sign-in options</p>
	</div>
	</div>
	</div>
	</body>
	</html>