[882] HTML

<html>
<head>
<!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
</head>
<style>
body{
	font-family:sans-serif;
	
}
ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
	background-color:#333;
}
li{
	float:left;
}
li a{
	display:block;
	color:white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
li a:hover{
	background-color:MediumSeaGreen;
}

.modal {
  /*z-index: 1;
  left: 0;
  top: 0;*/
  /*width: 100%; 
  height: 100%;*/ 
  /*overflow: auto; */ 
  /*padding-top: 50px;*/
}

.modal-content {
  background-color: #fefefe;
  /*margin: 5% auto 5% auto;*/ 
  border: 1px solid #888;
  /*width: 40%; */
}



input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 10px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}


input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

button:hover {
  opacity:1;
  background-color:MediumSeaGreen;
}


.register, .login {
  padding: 14px 20px;
  color:white;
  background-color:#333;
  float: left;
  width: 50%;
}


.container {
  padding: 16px;
}

.grid-container {
  display: grid;
  /*grid-template-columns: none none none;*/
  
  grid-template-columns: 33% 34% 33%;
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: #d6d6c2;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}


@media only screen and (max-width: 600px) {
  .grid-container {
  display: block;
  /*grid-template-columns: auto auto auto;*/
  /*background-color: #2196F3;*/
  padding: 10px;
}
.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

}



</style>


<body>
<h1>Gazelle.rocks</h1>
<div>
<nav>
<ul>
	<li><a href="https://gazelle.rocks">Home</a></li>
	<li><a href="https://gazelle.rocks/demo?cookie=test_qipytwypbyflqfpg&_botConfig=">Talk to bot</a></li>
	<!--<li><a href="https://gazelle.rocks/crud/Conversation">Converstation</a></li>
	<li><a href="https://gazelle.rocks/crud/Lead">Leads</a></li>
	<li><a href="https://gazelle.rocks/crud/ConversationFeedback">Conversations feedbacks</a>
	<li><a href="https://gazelle.rocks/crud/Domain">Domains</a></li>
	<li><a href="https://gazelle.rocks/crud/UserKeyword">User Keyboards</a></li>
	<li><a href="https://gazelle.rocks/crud/UploadedSound">Upload Sounds</a></li>
	<li><a href="https://gazelle.rocks/crud/Settings">Settings</a></li>-->
	<li><a href="https://gazelle.rocks/crud/UserPost">User posts</a></li>
	<li><a href="https://gazelle.rocks/crud/User">User</a></li>
	<li><a href="https://gazelle.rocks/crud/login">Login</a></li>
	<li><a href="https://gazelle.rocks/register">Register</a></li>
</ul>
</nav>
</div>




<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">
		<div id="id01" class="modal">
  <form class="modal-content" method="POST" action="https://gazelle.rocks/crud/login">
    <div class="container">
      <h1>Login</h1>
      <hr>
      <label for="email"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="user" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="pw" required>

      

      <div class="clearfix">
        <button type="button" onclick="location.href='https://gazelle.rocks/register'" class="register">Register</button>
        <button type="submit" class="login">Login</button>
      </div>
    </div>
  </form>
</div>

  
  </div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>





</body>
</html>