Safe's editor, editing: Luna by 8Byte

Contact me if you need help

Template Information

Luna by 8Byte

Notice

Please visit the author and give your support for the theme.

Learn more

Author's Rules

The author, 8Byte, has a set of rules that you must follow when using the template. Please check them here.

See the rules

Form

Preview

Luna

Nickname
Nickname
Gender
Gender
Pronouns
Pronouns
Birthday
B-day
Species
Species
Occupation
Occupation
Residence
Residence

i. summary

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

ii. backstory

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

iii. personality

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  • Design Note
  • Design Note 2

Cutie Mark

Name

Relationship

Name

Relationship

Name

Relationship

Name

Relationship
/

Code Output

<div class="container p-0 w-100">
  <!--- TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. --->
  <!--- header image --->
  <div class="p-1">
    <div
      class="container w-100"
      style="
        background: url(/img/placeholder-solid.png);
        background-size: cover;
        background-position: center;
        height: 250px;
      "
    ></div>
  </div>
  <!--- palette --->
  <div class="row no-gutters" style="flex-wrap: wrap">
    <div class="col p-1">
      <div
        style="background: #000; height: 50px; min-width: 150px;"
      ></div>
    </div>
    <div class="col p-1">
      <div
        style="background: #000; height: 50px; min-width: 150px;"
      ></div>
    </div>
    <div class="col p-1">
      <div
        style="background: #000; height: 50px; min-width: 150px;"
      ></div>
    </div>
    <div class="col p-1">
      <div
        style="background: #000; height: 50px; min-width: 150px;"
      ></div>
    </div>
  </div>
  <!--- main content --->
  <div class="row no-gutters">
    <div class="order-md-1 order-1 col-md-3 col-6 p-1">
      <!--- profile picture --->
      <div
        class="w-100 mb-2"
        style="
          background: url(/img/placeholder.png);
          background-size: cover;
          padding-top: 100%;
        "
      ></div>
      <!--- name --->
      <div class="container p-2 mb-2 bg-left bg-faded">
        <h1>Luna</h1>
      </div>
      <!--- info boxes --->
      <div class="container overflow-auto p-2 mb-2" style="height: 260px">
        <!--- info 1 --->
        <div class="row no-gutters mb-1">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">
            Nickname
          </div>
          <div
            class="
              order-md-2 order-1
              col-md-6 col-12
              p-1
              text-right
              bg-right bg-faded
            "
          >
            <strong>Nickname</strong>
          </div>
        </div>
        <!--- info 2 --->
        <div class="row no-gutters mb-1">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">
            Gender
          </div>
          <div
            class="
              order-md-2 order-1
              col-md-6 col-12
              p-1
              text-right
              bg-right bg-faded
            "
          >
            <strong>Gender</strong>
          </div>
        </div>
        <!--- info 3 --->
        <div class="row no-gutters mb-1">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">
            Pronouns
          </div>
          <div
            class="
              order-md-2 order-1
              col-md-6 col-12
              p-1
              text-right
              bg-right bg-faded
            "
          >
            <strong>Pronouns</strong>
          </div>
        </div>
        <!--- info 4 --->
        <div class="row no-gutters mb-1">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">
            Birthday
          </div>
          <div
            class="
              order-md-2 order-1
              col-md-6 col-12
              p-1
              text-right
              bg-right bg-faded
            "
          >
            <strong>B-day</strong>
          </div>
        </div>
        <!--- info 5 --->
        <div class="row no-gutters mb-1">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">
            Species
          </div>
          <div
            class="
              order-md-2 order-1
              col-md-6 col-12
              p-1
              text-right
              bg-right bg-faded
            "
          >
            <strong>Species</strong>
          </div>
        </div>
        <!--- info 6 --->
        <div class="row no-gutters mb-1">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">
            Occupation
          </div>
          <div
            class="
              order-md-2 order-1
              col-md-6 col-12
              p-1
              text-right
              bg-right bg-faded
            "
          >
            <strong>Occupation</strong>
          </div>
        </div>
        <!--- info 7 --->
        <div class="row no-gutters mb-1">
          <div class="order-md-1 order-2 col-md-6 col-12 p-1">
            Residence
          </div>
          <div
            class="
              order-md-2 order-1
              col-md-6 col-12
              p-1
              text-right
              bg-right bg-faded
            "
          >
            <strong>Residence</strong>
          </div>
        </div>
        <!--- end info --->
      </div>
    </div>
    <div class="order-md-2 order-3 col-md-6 col-12 p-1">
      <!--- summary --->
      <div class="container p-2 mb-2" style="height: 181px">
        <h1>i. summary</h1>
        <div class="overflow-auto" style="height: 150px">
          
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
          
        </div>
      </div>
      <!--- backstory --->
      <div class="container p-2 mb-2" style="height: 181px">
        <h1>ii. backstory</h1>
        <div class="overflow-auto" style="height: 150px">
          
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
          
        </div>
      </div>
      <!--- personality --->
      <div class="container p-2 mb-2" style="height: 181px">
        <h1>iii. personality</h1>
        <div class="overflow-auto" style="height: 150px">
          
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
          
        </div>
      </div>
    </div>
    <div class="order-md-3 order-2 col-md-3 col-6 p-1">
      <div class="row no-gutters">
        <!--- design notes --->
        <div
          class="order-md-1 order-3 container overflow-auto p-2 mb-2"
          style="height: 260px"
        >
          <ul class="list-unstyled" style="font-size: 18px">
            
            <li><i class="fas fa-moon"></i> Design Note</li>
            

            <li><i class="fas fa-moon"></i> Design Note 2</li>
            
          </ul>
        </div>
        <!--- cutie mark --->
        <div
          class="
            order-md-2 order-1
            container
            p-2
            mb-2
            bg-left bg-faded
          "
        >
          <h1>Cutie Mark</h1>
        </div>
        <div
          class="order-md-3 order-2 w-100 mb-2"
          style="
            background: url(/img/placeholder-transparent.png);
            background-size: cover;
            padding-top: 100%;
          "
        ></div>
      </div>
    </div>
  </div>
  <!--- relationship --->
  <div class="row no-gutters">
    <!--- relation 1 --->
    <div class="col p-1" style="min-width: 150px; max-width: 300px">
      <a href="https://toyhou.se/">
        <div class="text-right p-1 bg-left bg-faded text-faded">
          <h3>Name</h3>
        </div>
        <img
          class="w-100"
          src="/img/placeholder.png"
          style="padding-top: 0"
        />
        <div class="p-1 bg-right bg-faded">
          <h3>Relationship</h3>
        </div>
      </a>
    </div>
    <!--- relation 2 --->
    <div class="col p-1" style="min-width: 150px; max-width: 300px">
      <a href="https://toyhou.se/">
        <div class="text-right p-1 bg-left bg-faded text-faded">
          <h3>Name</h3>
        </div>
        <img
          class="w-100"
          src="/img/placeholder.png"
          style="padding-top: 0"
        />
        <div class="p-1 bg-right bg-faded">
          <h3>Relationship</h3>
        </div>
      </a>
    </div>
    <!--- relation 3 --->
    <div class="col p-1" style="min-width: 150px; max-width: 300px">
      <a href="https://toyhou.se/">
        <div class="text-right p-1 bg-left bg-faded text-faded">
          <h3>Name</h3>
        </div>
        <img
          class="w-100"
          src="/img/placeholder.png"
          style="padding-top: 0"
        />
        <div class="p-1 bg-right bg-faded">
          <h3>Relationship</h3>
        </div>
      </a>
    </div>
    <!--- relation 4 --->
    <div class="col p-1" style="min-width: 150px; max-width: 300px">
      <a href="https://toyhou.se/">
        <div class="text-right p-1 bg-left bg-faded text-faded">
          <h3>Name</h3>
        </div>
        <img
          class="w-100"
          src="/img/placeholder.png"
          style="padding-top: 0"
        />
        <div class="p-1 bg-right bg-faded">
          <h3>Relationship</h3>
        </div>
      </a>
    </div>
    <!--- end relations --->
  </div>
  <div class="pull-right">
    <!--- TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. --->
    <a
      class="tooltipster"
      title="layout credits"
      href="https://toyhou.se/TNR"
      ><i class="fas fa-star"></i
    ></a>
    /
    <a
      class="tooltipster"
      title="code credits"
      href="https://toyhou.se/8byte"
      ><i class="fas fa-crow"></i
    ></a>
  </div>
</div>