Name card help

Usage

In editor simply:
-Fill (remove) data, you want to display
-Select style, size
-Adjust settings (font-family, size, position etc.)

---

If you wish reuse your settings, copy the template into a text editor, adjust data, background, color etc. and next time just copy/paste it to the end of editor. For example:

.background{background:url(bords/blue.jpg);background-size:100% 100%}
.card{color:#fff}
.logo{left:4%;top:4%}
.logo p:before{content:"SkyLab ltd."}
.logo p:after{content:"architecture"}
.person{left:0;right:0;top:44%;text-align:center;font-family:Courgette;font-size:18px;text-shadow:1px 1px 1px #000}
.person p:before{content:"John Smith"}
.person p:after{content:"Designer"}
.contact{left:4%;bottom:6%;font-size:14px}
.contact:before{content:"Vancouver"}
.contact p:before{content:"Richmond Str. 234"}
.contact p:after{content:none}
.contact:after{content:"jsmith@mail.com"}
.initial{top:50%;left:50%;font-size:62px}
.initial:before,.initial1:before,.initial1:after{content:'J'}
.initial:after,.initial2:before,.initial2:after{content:'S'}
.initial p:after{color:gold}

---

Filters:

e{filter:url(#red)} red, poppy, orange, sepia, gold, yellow, citron, chartreuse, lime, green, leaf, seafoam, turquoise, cyan, sky, azure, royal, blue, indigo, violet, purple, magenta, fuchsia, rose, crimson
e{filter:url(#lightA1)} A1-6=top-left B1-6=top-right C1-6=bottom-right D1-6=bottom-left E1-7=from left to right F1-9=from top to bottom

---

HTML:

Card:

<div class=card>
  <div class=background></div>
  <div class=decor></div>
  <div class=initial>
    <p class=initial1>
    <p class=initial2>
  </div>
  <div class=logo>
    <p>
  </div>
  <div class=person>
    <p>
  </div>
  <div class=contact>
    <p>
  </div>
  <div class=frame></div>
</div>

Backface:

<div class=back>
  <div></div>
  <p>
</div>

---

Styles

Horizontal:

Vertical:

Non latin characters

Stylesheets accept only latin characters.
Turn the keybord to Your language and write Your text. (only text and font !)
.person p:before {content:"Афанасий"}
Same goes for font family.
.person p:before {font-family:феврал}

I included some fonts You may use without setting font family.
armenian, bengali, burmese, chinese, georgian, hindi, japanese, khmer, korean, malayalam