Skip to content

Instantly share code, notes, and snippets.

@pranaybathini
Created February 19, 2022 17:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pranaybathini/d3875355c93e726899c5104cb388cb66 to your computer and use it in GitHub Desktop.
Save pranaybathini/d3875355c93e726899c5104cb388cb66 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<svg x="20" y="20" width="340px" height="400px" xmlns="http://www.w3.org/2000/svg">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700");
.body {
font-family: "Open Sans", Helvetica, sans-serif;
text-align: left;
margin: 20px;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
font-weight: 400;
}
.card {
display: inline-block;
width: 240px;
height: auto;
padding: 1em;
border-radius: 15px;
margin: 10px;
background: #ffffff;
text-align: left;
box-shadow: 0px 5px 20px -10px #ffffff;
position: relative;
transition: 0.4s;
}
.card__caption {
background-color: rgba(255, 255, 255, 0.65);
padding: 1em;
position: relative;
border-radius: 0 0 3px 3px;
}
.card__image-container {
background-color: rgba(0, 0, 0, 0.7);
text-align: left;
padding: 1em 1em 0;
border-radius: 3px 3px 0 0;
}
.card__type {
position: absolute;
top: 0;
right: 1em;
transform: translateY(-50%);
color: #ffffff;
text-transform: uppercase;
font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
letter-spacing: 0.1em;
padding: 0.25em;
line-height: 1;
border-radius: 2px;
background: #bbbbbb;
}
.card__label {
font-size: 10px;
text-transform: uppercase;
font-weight: 400;
display: block;
margin-bottom: 3px;
}
.card__name {
font-family: "Open Sans Condensed", "Open Sans", helvetica, sans-serif;
text-align: center;
font-size: 1.5em;
font-weight: 1000;
letter-spacing: 0.02em;
}
.card__stats {
margin: 1em 0;
width: 100%;
}
.card__stats th {
font-family: "Open Sans", helvetica, sans-serif;
text-align: left;
font-weight: 300;
}
.card__stats th,
.card__stats td {
width: 50%;
padding: 0.25em 0.5em 0;
}
.card__abilities {
display: flex;
justify-content: space-between;
}
.card__ability {
margin-top: 1em;
flex: 1 0;
}
.card--normal {
background: linear-gradient(110deg, #fdbb2d 0%, #3a1c71 100%);
box-shadow: 0px 5px 20px -10px #ffffff;
}
.card--normal .card__type {
background-color: #c08a53;
}
.card:nth-child(1) {
transform: translateY(0px) rotate(2deg);
}
</style>
<foreignObject x="20" y="20" width="340px" height="400px">
<div id="body" xmlns="http://www.w3.org/1999/xhtml">
<div id="card">
<figure class="card card--normal">
<div class="card__image-container"></div>
<figcaption class="card__caption">
<h1 class="card__name">Loot Royale</h1>
<h3 class="card__type">#1234</h3>
<table class="card__stats">
<tbody>
<tr>
<th>Mk47 Mutant</th>
</tr>
<tr>
<th>VSS Vintorez</th>
</tr>
<tr>
<th>Motorcycle Helmet</th>
</tr>
<tr>
<th>Military Vest</th>
</tr>
<tr>
<th>Molotov Cocktail</th>
</tr>
<tr>
<th>Mega Energy Drink</th>
</tr>
<tr>
<th>Dacia 1300</th>
</tr>
<tr>
<th>2x Aimpoint Scope</th>
</tr>
</tbody>
</table>
</figcaption>
</figure>
</div>
</div>
</foreignObject>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment