hetg

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial</title>
    </head>



<style>
    body {
        background:#f5f5dc4f;
        margin:0;
        height:100vh;
        width:100vw;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .sign-in-div{
        background:white;
        display:flex;
        align-items:center;
        flex-direction:column;
    padding: 20px;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
    border-radius: 10px;
    height: 460px;
    width: 352px;
    }
    .sign-in-div * {
        margin:10px;
    }
    .sign-in-div input {
    font-size: 1.2rem;
    line-height: 1.33;
   
    width: 304px;
    border: 1px solid rgba(0,0,0,0.6);
    border-radius: 5px;
    outline: none;
    padding: 22px 12px 6px;
    }
    .sign-in-div input:focus-visible {
    border: 2px solid blue;
    }
    .title{
        width:100%;
    }
    .log-in-btn{
       height: 50px;
    width: 100%;
    background: #0066ff;
    border: none;
    font-weight: 600;
    font-size: 1.2rem;
    color: white;
    /* padding: 28px 16px; */
    border-radius: 30px;
    }
    .g-in-btn{
     height: 50px;
    width: 100%;
    border: 1px solid black;
    font-weight: 600;
    font-size: 1.2rem;
    color: #555555;
    /* padding: 28px 16px; */
    background: white;
    border-radius: 30px;
    }
    .or-tag{
        width:100%;
        display:flex;
    }
    .or-tag hr{
        width:40%;
    }
</style>

<body>
    <div class="sign-in-div">
        <div class="title">
              <h2>Sign in</h2>
        <p>Collabrate without hassle</p>
        </div>
      
        
        <input type="text" placeholder="Username"></input>
        <input type="password" placeholder="Password"></input>
        <button class="log-in-btn">Sign in</button>
        <div class="or-tag"><hr>or<hr></div>
         <button class="g-in-btn">Continue with google</button>
    </div>
</body>
    
    
    
</html>
Editor is loading...