Tutor

✨ SASITHORN SRIJUN

<html>
  <head>
    <title>Tutor</title>
    <style>
      * {
        margin: 0;
        box-sizing:border-box;
      }
      .title-bar {
        background:red;
        height:64px;
      }
      .header {
        background:grey;
        height:600px;
        background-attachment:fixed;
        position:relative;
        display:flex;
      }
      .side-left{
        background:pink;
        width:60%;
        height:600px;
        background-position:center;
        color:#fff9;
        display:flex;
        background-attachment:fixed;
        position:relative;
        justify-content:center;
        align-items:center;
        font-size:3em;
      }
      .side-right{
        background:blue;
        width:40%;
        height:600px;
      }
      .content{
        background:#FFECDC;
        max-width:900px;
        margin:auto;
        padding:2em;
        height:100%;
      }
      .card {
        background:#fff;
        height:500px;
        width:350px;
        border-radius:50px;
        box-shadow:7px 7px 10px #0221;
        overflow:hidden;
      }
      .card-top {
        background:#fd3;
        height:300px;
      }
      .card-bottom {
        background:#fa4;
        height:200px;
      }
    </style>
  </head>
  <body>
    <div class="title-bar">
      
    </div>
    <div class="header">
      <div class="side-left">
        <h1>
          tutor
        </h1>
      </div>
      <div class="side-right">
        
      </div>
    </div>
    <div class="content">
      <div class="card">
        <div class="card-top">
        </div>
        <div class="card-bottom">
          
        </div>
      </div>
    </div>
  </body>
</html>