Guild Editor

by roomyrooms

HTML

<div id='guild_editor_container'>
  
  <div id='guild_editor_scroll'>
      
      <span class='guild_editor_section_text'>
        Guild Name
      </span>
      <br>
      <input class='guild_editor_section_input' placeholder='Knights of Honesty'>
      
      <br>
      <span class='guild_editor_section_text'>
        Guild Image
      </span>
      <br>
      <input class='guild_editor_section_input' placeholder='https://yourlinkhere.com/'>
      
      <br>
      <span class='guild_editor_section_text'>
        Guild MOTD
      </span>
      <br>
      <textarea class='guild_editor_section_input' placeholder="Don't forget to donate resources for our next guildhouse!" rows=3></textarea>
      
      <br>
      <span class='guild_editor_section_text'>
        Rank Names
      </span>
      <div id='guild_rank_container'>
        <input class='guild_editor_section_input' maxlength=20 placeholder='#1 Leader'>
        <input class='guild_editor_section_input' maxlength=20 placeholder='#2 Right-hand'>
        <input class='guild_editor_section_input' maxlength=20 placeholder='#3 Officer'>
        <input class='guild_editor_section_input' maxlength=20 placeholder='#4 Staff'>
        <input class='guild_editor_section_input' maxlength=20 placeholder='#5 Newbie'>
      </div>
      
  </div>
  
</div>

CSS

#guild_editor_container {
  width: 60%;
  font-family: Constantia;
}

#guild_editor_scroll {
  min-height: 300px;
  border: 10px solid;
  border-image: url(https://i.gyazo.com/34a29fe2749b507b0ab6e8358baaf798.png) 10 round;
  background: #191919;
  border-radius: 5px;
  padding-left: 2px;
}

.guild_editor_section_pretext {
  color: #ddd;
  font-size: 16px;
  text-shadow: 1px 1px #333;
}

.guild_editor_section_text {
  color: #ddd;
  text-shadow: 1px 1px #333;
}

.guild_editor_section_input {
  margin-left: 6px;
  margin-bottom: 6px;
  min-height: 14px;
  resize: vertical;
  width: 95%;
  outline: none;
  background-color: #bbb;
  border-width: 2px;
  border-style: outset;
  border-color: #999;
  transition: border-color .2s ease-in-out;
  border-radius: 5px;
}

.guild_editor_section_input:focus {
  border-color: #ffbe00;
}

.guild_editor_large_input {
  color: #000;
}

#guild_rank_container {
  width: 50%;
}