ajtazer · January 7, 2023 18:21
diff --git a/Microsoft_Login.html b/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>