Chat form - YarTechnology

Back

Live Code Preview

Code Sections

HTML Code

<div class="container">
      <div class="nav-bar">
      	<a>Chat</a>
        <div class="close">
         	<div class="line one"></div>
         	<div class="line two"></div>
        </div>
      </div>
      <div class="messages-area">
        
        <div class="message one"></div>
        <div class="message two"></div>
        <div class="message three"></div>
        <div class="message four"></div>
        <div class="message five"></div>
        <div class="message six"></div>
      </div>
      <div class="sender-area">
        <div class="input-place">
        	<input placeholder="Send a message." class="send-input" type="text">
            <div class="send">
				<svg class="send-icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path fill="#6B6C7B" d="M481.508,210.336L68.414,38.926c-17.403-7.222-37.064-4.045-51.309,8.287C2.86,59.547-3.098,78.551,1.558,96.808 L38.327,241h180.026c8.284,0,15.001,6.716,15.001,15.001c0,8.284-6.716,15.001-15.001,15.001H38.327L1.558,415.193 c-4.656,18.258,1.301,37.262,15.547,49.595c14.274,12.357,33.937,15.495,51.31,8.287l413.094-171.409 C500.317,293.862,512,276.364,512,256.001C512,235.638,500.317,218.139,481.508,210.336z"></path></g></g></svg>
        	</div>
      	</div>
      </div>
    <div></div></div>

CSS Code

.container {
  width: 300px;
  height: 320px;
  background-color: #343541;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  width: 100%;
  height: 40px;
  background-color: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-bar a {
  color: #6B6C7B;
  white-space: nowrap;
  margin-left: 10px;
  user-select: none;
}

.close {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.line {
  position: absolute;
  width: 20px;
  height: 3px;
  background-color: #6B6C7B;
  border-radius: 30px;
}

.line.one {
  transform: rotate(45deg)
}

.line.two {
  transform: rotate(135deg)
}

.messages-area {
  background-color: green;
  width: 100%;
  height: 210px;
}

.sender-area {
  background-color: #343541;
  width: 100%;
  height: 70px;
  display: flex;
  border-radius: 8px;
}

.message {
  width: 100%;
  height: 40px;
}

.message.one,
.message.three,
.message.five {
  background-color: #2E2F3A;
}

.message.two,
.message.four,
.message.six {
  background-color: #343541;
}

.send-img {
  width: 30px;
}

.send-input {
  outline: none;
  display: flex;
  border: none;
  background: none;
  height: 40px;
  width: 230px;
  border-radius: 7px;
  background: none;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 5px;
}

.send-input::placeholder {
  color: #828E9E;
}

.input-place {
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  margin-left: 10px;
  align-items: center;
  background-color: #40414F;
  border-radius: 7px;
  height: 40px;
  width: 280px;
  gap: 5px;
  border: 1px solid #2E2F3A;
}

.send {
  width: 30px;
  height: 30px;
  background-color: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.send-icon {
  width: 17px;
}