What is a werecard?
Werecards started as a form with information about members of alt.horror.werewolves but eventually became used more widely on several different Were forums. They provide basic information about a member, including information about their therianthropy.
This allows a user to talk about their identity and their relationship to it.
There have been several iterations of werecards, with two of those templates findable here: [LINK]
What is this page?
This page has a card template!
This card is a simplified version of these older lists intended to look like a ID card. It is meant to be placed as a premade element on a website. One just adds small tweaks as indicated to personalize the card.
The code has been provided below, simply copy-paste the code into your website and start tweaking!
Unlike the original forms, this card is meant to be much more concise, with the ability for the person to link more in-depth descriptions to learn more.
This code is free to use!
Code for the werecard:
CSS:
.card {
margin-left: 15%;
margin-right: 15%;
padding-left: 0.5%;
padding-top: 0%;
background-color: #f1f1f1;
border: solid black;
border-radius: 5px
}
/*this creates the html card box. Customize the 'background-color' and border properties however you prefer*/
.bottomcard {
margin-left: 0%;
margin-top: 0%;
margin-right: 1%;
margin-bottom: 1%;
padding: 1%;
background-color: white;
}
/*This creates the bit inside the html card bow where you put the customizable text*/
.card h2{ color:black}
.card p{ color: black}
/*this is for styling just the text of the card*/
.column-c {
float: left;
}
/*This is to make a column specifically for the card*/
.left {
padding-right: 2%;
width: 30%;
}
/*this is the picture colum*/
.right {
width:70%;
}
/*this is the text column*/
.row-c:after {
content: "";
display: table;
clear:both;
}
/*this clears the float after the column and such*/
HTML:
<center><h2>-name-'s Werecard</h2></center>
<!-- Place your name at the top above, you can personalize with small symbols within the title brackets if you want -->
<div class="bottomcard">
<div class="row-c">
<div class="column-c left">
<img src="/syspages/codyemote1.png" width= 100%>
<!-- This is where you put your picture. Replace ours with yours! Put the url of your picture in the quotations. Square pictures larger than 200px wide will work best-->
<br>
<center><p><em>This card gives the holder right to do whatever they want with their identity forever!</em></p></center>
</div>
<div class="column-c right">
<!-- This is where you add your information. You can put as much or as little on this card as you want. ONLY add information you are comfortable with! Other ideas for what you can add to your card include: Gender, Sexuality, Age, Occupation, Known languages, Relationship status, Favorite media, and full kintype descriptions.-->
<p>PRONOUNS:</p> <!--Pronouns here-->
<p>OTHER ALIASES:</p> <!--Any other names here-->
<p>LABELS:</p> <!--What your nonhuman and fictional related identity labels are-->
<p>DESCRIPTION:</p> <!--Describe your identity further here-->
<p>HOBBIES:</p> <!--What you do for fun-->
<p>CONTACT:</p> <!--Contact venues such as an e-mail address here-->
<p>WEBSITE:</p> <!--Put your personal website link here-->
<p>OTHER:</p> <!--Other identity labels you have that you feel like listing-->
</div>
</div>
</div>