Injury Application

by roomyrooms

HTML

<div id='injury_container'>
  <div id='injury_scroll'>
    <div id='injury_contents'>
      You've dealt a <strong>Major Injury</strong> to Roomy Rooms! You can customize the name and description of the injury below, or leave it blank to apply a default name and description.
      <br><br>
      <div class='injury_name'>Injury Name:</div>
      <input id='injury_name_input' placeholder='Grevious Wound' type='text' maxlength='70'>

      <div class='injury_desc'>Injury Description:</div>
      <textarea id='injury_desc_input' placeholder='A vicious cut from chest to hip.' maxlength='1000'></textarea>
    </div>
  </div>
</div>

CSS

#injury_container {
  border: 10px solid;
  border-image: url(https://i.gyazo.com/34a29fe2749b507b0ab6e8358baaf798.png) 10 repeat;
  background: #191919;
  border-radius: 5px;
  overflow: hidden;
  font-family: Verdana;
  width: 512px;
}

#injury_scroll {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
}

#injury_contents {
  color: #ddd;
  text-shadow: 1px 1px #000;
  font-size: 12px;
}


.injury_desc {
  margin-top: 4px;
  padding: 1px;
  font-weight: 600;
}

#injury_desc_input {
  margin-top: 1px;
  display: block;
  width: calc(100% - 3px);
  height: 50px;
  outline: none;
  border-radius: 3px;
  border: none;
  resize: vertical;
}


.injury_name {
  padding: 1px;
  font-weight: 600;
}

#injury_name_input {
  margin-top: 1px;
  display: block;
  width: calc(100% - 3px);
  outline: none;
  border-radius: 3px;
  border: none;
}