Safe's editor, editing: Drivers License by 8Byte

Contact me if you need help

Template Information

Drivers License 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

Name
XX/XX/XXXX
he/they
XX"XX'
species
occupation
@owner
@designer
Quote goes here...

Code Output

<div class="container" style="max-width: 550px;">
  <!-- TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. -->
  <!--- the license --->
  <div class="card border-0 bg-faded">
    <!--- faded background image --->
    <div class="card border-0 h-100 w-100" style="position: absolute; background:url(/img/placeholder-background.png); background-size: cover; opacity: 0.3;"></div>
    <div style="position: absolute; right: -40px; top: -20px; z-index: 100;">
      <div class="container">
        <div style="position: absolute; top: 5px; left: 25px; z-index: 101;">
          <iframe class="flex-fill" style="width:100%;height:50px;width:50px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/nx-qpEMUzes"></iframe>
        </div>
        <span class="fa-stack fa-2x">
          <i class="fas fa-circle fa-stack-2x text-primary"></i>
          <i class="fas fa-music fa-stack-1x text-light fa-spin"></i>
        </span>
      </div>
    </div>
    <!--- content --->
    <div class="row no-gutters p-3">
      <div class="col-md-4 p-1">
        <!--- profile picture image --->
        <div class="card border-0 w-100" style="background:url(/img/placeholder-solid.png); background-size: cover; height: 250px;"></div>
      </div>
      <div class="col-md-8 p-3">
        <div class="row no-gutters">
          <!--- the basics --->
          <div class="col-2 p-1">
            <i class="far fa-user text-primary"></i>
          </div>
          <div class="col-4 p-1">
            Name
          </div>
          <div class="col-2 p-1">
            <i class="far fa-birthday-cake text-primary"></i>
          </div>
          <div class="col-4 p-1">
            XX/XX/XXXX
          </div>
          <div class="col-2 p-1">
            <i class="far fa-venus-mars text-primary"></i>
          </div>
          <div class="col-4 p-1">
            he/they
          </div>
          <div class="col-2 p-1">
            <i class="far fa-ruler text-primary"></i>
          </div>
          <div class="col-4 p-1">
            XX"XX'
          </div>
          <div class="col-2 p-1">
            <i class="far fa-dna text-primary"></i>
          </div>
          <div class="col-4 p-1">
            species
          </div>
          <div class="col-2 p-1">
            <i class="far fa-briefcase text-primary"></i>
          </div>
          <div class="col-4 p-1">
            occupation
          </div>
          <div class="col-2 p-1">
            <i class="far fa-home text-primary"></i>
          </div>
          <div class="col-4 p-1">
            @owner
          </div>
          <div class="col-2 p-1">
            <i class="far fa-pencil text-primary"></i>
          </div>
          <div class="col-4 p-1">
            @designer
          </div>
        </div>
        <hr>
        <!--- quote section --->
        <div class="overflow-auto" style="max-height: 75px;">
          <span>
            Quote goes here...
          </span>
        </div>
      </div>
    </div>
  </div>
  <!-- TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. -->
  <div class="pull-right"><a class="tooltipster" title="code credits" href="https://toyhou.se/8byte"><i class="fas fa-crow"></i></a></div>
  </div>