Jabont Grid – Unsplash

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:0;
        font-family:sans-serif;
      }
      .header{
        display:grid;
        grid-template:400px/100%;
      }
      .header>div{
        grid-row:1/2;
        grid-column:1/2;
        position:relative;
      }
      .search{
        width:100%;
        padding:.5em;
        border-radius:3px;
        border:none;
        font-size:1.2em
      }
      .header-bg{
        width:100%;
        height:100%;
        object-fit:cover;
        opacity:.5;
      }
      .header-bggggggggg{
        background:#000
      }
      .header-content{
        color:white;
        align-items:center;
        display:grid;
        width:100%;
        max-width:900px;
        margin:auto;
      }
      .header-content>div{
        padding:1em;
      }
      h1{
        margin:0;
        margin-bottom:.5em;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="header-bggggggggg">
        <img src="https://images.unsplash.com/photo-1622495893726-f1478dcebc03?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1119&q=80" class="header-bg">
      </div>
      <div class="header-content">
        <div>
          <h1>
            Unsplash
          </h1>
          <div>
            The internet’s source of freely-usable images.
          </div>
          <div>
            Powered by creators everywhere.
          </div>
          <br>
          <input type="text" class="search">
        </div>
      </div>
    </div>
  </body>
</html>