HTML/CSS - Web Chat App Online Editor and JavaScript Compiler

html

<!--This web app was built by Ogunleke Samuel Ayomide on 2020.
Enjoy the functionalities of this code but please do not copy or paste anything here,
thanks for your understanding! Note that this web chat app is on development, pls like and share.-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="chapp.css"/>
    <title>CHAPP</title>
  </head>
  <body>
<div class="loader"></div>
  <div id="chat-container">
      <div id="search-container">
          <input type="text" placeholder="Search" />
      </div>
      <div id="conversation-list">
        <div class="conversation" onclick="document.getElementById('chat-message-list').style.display = 'flex'">
          <img src="Martin_3.jpg" alt="Martin Chinanu" />
          <div class="title-text">
            <span>Martin Chinanu</span>
          </div>
          <div class="created-date">
            15:55
          </div>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
 html {
   font-family: Arial, Helvetica, sans-serif;
   background: linear-gradient(to right,  #57c1eb 0%,  #246fa8 100%);
   font-size: 10px;
}
body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  display: grid;
  place-items: center;
}
#chat-container {
  display: grid;
  grid:
      'search-container chat-title' 71px
      'conversation-list chat-message-list' 1fr

BROWSER

Console