Skip to content
View in the app

A better way to browse. Learn more.
MagicDuel Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Personal Page Template: The White Cube (version 2)

The Warrior
in Personal Page Templates

Featured Replies

Following on from http://magicduel.invisionzone.com/topic/14318-personal-page-template-the-white-cube-for-documents/, I have created version 2 which gives you more freedom, more faces to the cube and follows the separation of concerns. For any caveats see original template.

 

[log='CSS']

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.stage {
	-webkit-perspective: 800;
	-moz-perspective: 800;
	-ms-persective: 800;
	-o-perspective: 800;
	perspective: 800;
	-webkit-perspective-origin: 50% 50%;
	-moz-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	-o-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
}
.cube {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	-ms-transition: -ms-transform 1s;
	transition: transform 1s;
	position: relative;
	width: 500px;
	height: 500px;
	margin: 150px auto;
}
.cube .face {
	width: 100%;
	height: 100%;
	position: absolute;
	background: white;
	padding: 1em;
	overflow: auto;
	border: solid 1px grey;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 1s 1s;
	-moz-transition: opacity 1s 1s;
	-o-transition: opacity 1s 1s;
	-ms-transition: opacity 1s 1s;
	transition: opacity 1s 1s;
}
.cube .face * {
	background: white !important;
}
.cube .face.top {
	-webkit-transform: rotateX(90deg) translateZ(250px);
	-moz-transform: rotateX(90deg) translateZ(250px);
	-o-transform: rotateX(90deg) translateZ(250px);
	-ms-transform: rotateX(90deg) translateZ(250px);
	transform: rotateX(90deg) translateZ(250px);
}
.cube .face.top-interior {
	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.bottom {
	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
}
.cube .face.bottom-interior {
	-webkit-transform: rotateX(90deg) translateZ(-250px);
	-moz-transform: rotateX(90deg) translateZ(-250px);
	-o-transform: rotateX(90deg) translateZ(-250px);
	-ms-transform: rotateX(90deg) translateZ(-250px);
	transform: rotateX(90deg) translateZ(-250px);
}
.cube .face.left {
	-webkit-transform: rotateY(-90deg) translateZ(250px);
	-moz-transform: rotateY(-90deg) translateZ(250px);
	-o-transform: rotateY(-90deg) translateZ(250px);
	-ms-transform: rotateY(-90deg) translateZ(250px);
	transform: rotateY(-90deg) translateZ(250px);
}
.cube .face.left-interior {
	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	-o-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.right {
	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	-o-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	transform: rotateY(90deg) rotate(180deg) translateZ(250px);
}
.cube .face.right-interior {
	-webkit-transform: rotateY(-90deg) translateZ(-250px);
	-moz-transform: rotateY(-90deg) translateZ(-250px);
	-o-transform: rotateY(-90deg) translateZ(-250px);
	-ms-transform: rotateY(-90deg) translateZ(-250px);
	transform: rotateY(-90deg) translateZ(-250px);
}
.cube .face.front {
	-webkit-transform: translateZ(250px);
	-moz-transform: translateZ(250px);
	-o-transform: translateZ(250px);
	-ms-transform: translateZ(250px);
	transform: translateZ(250px);
}
.cube .face.front-interior {
	-webkit-transform: rotateY(180deg) translateZ(-250px);
	-moz-transform: rotateY(180deg) translateZ(-250px);
	-o-transform: rotateY(180deg) translateZ(-250px);
	-ms-transform: rotateY(180deg) translateZ(-250px);
	transform: rotateY(180deg) translateZ(-250px);
}
.cube .face.back {
	-webkit-transform: rotateY(180deg) translateZ(250px);
	-moz-transform: rotateY(180deg) translateZ(250px);
	-o-transform: rotateY(180deg) translateZ(250px);
	-ms-transform: rotateY(180deg) translateZ(250px);
	transform: rotateY(180deg) translateZ(250px);
}
.cube .face.back-interior {
	-webkit-transform: translateZ(-250px);
	-moz-transform: translateZ(-250px);
	-o-transform: translateZ(-250px);
	-ms-transform: translateZ(-250px);
	transform: translateZ(-250px);
}
.cube[data-face="top"], .cube[data-face="bottom-interior"] {
	-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	-o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	-ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="bottom"], .cube[data-face="top-interior"] {
	-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	-moz-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	-o-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	-ms-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="front"], .cube[data-face="back-interior"] {
	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="left"], .cube[data-face="right-interior"] {
	-webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	-moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	-o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	-ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
.cube[data-face="right"], .cube[data-face="left-interior"] {
	-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	-moz-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	-o-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	-ms-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
.cube[data-face="back"], .cube[data-face="front-interior"] {
	-webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	-moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	-o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	-ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="bottom-interior"] .face.top,
.cube[data-face="top-interior"] .face.bottom,
.cube[data-face="back-interior"] .face.front,
.cube[data-face="right-interior"] .face.left,
.cube[data-face="left-interior"] .face.right,
.cube[data-face="front-interior"] .face.back {
	opacity: 0;
	pointer-events: none;
}
[onclick] {
	cursor: pointer;
} 

[/log]

[log='jQuery']

// Inlined in link 'onclick' attribute. Links follow the genre of:
$('.cube').attr({'data-face': /*face-name*/});
// Where /*face-name*/ is replaced with one of:
// 'top', 'top-interior', 'bottom', 'bottom-interior', 'left', 'left-interior', 'right', 'right-interior', 'front', 'front-interior', 'back' or 'back-interior'

[/log]

[log='HTML']

<h1 class="general-sectionheader">The Warrior</h1>
<div style="text-align: center;">
	<a onclick="$('.cube').attr({'data-face': 'top'});">
		<img src="/img/skin/default/mdadocs1.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'bottom'});">
		<img src="/img/skin/default/mdadocs2.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'front'});">
		<img src="/img/skin/default/mdadocs3.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'left'});">
		<img src="/img/skin/default/mdadocs4.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'right'});">
		<img src="/img/skin/default/mdadocs5.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'back'});">
		<img src="/img/skin/default/mdadocs6.gif">
	</a>
</div>
<div style="text-align: center;">
	<a onclick="$('.cube').attr({'data-face': 'top-interior'});" class="frm-textbutton-gold">1</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'bottom-interior'});" class="frm-textbutton-gold">2</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'front-interior'});" class="frm-textbutton-gold">3</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'left-interior'});" class="frm-textbutton-gold">4</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'right-interior'});" class="frm-textbutton-gold">5</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'back-interior'});" class="frm-textbutton-gold">6</a>
</div>
<div class="stage">
	<div class="cube">
		<div class="face top">[doc1]</div>
		<div class="face top-interior">1</div>
		<div class="face bottom">[doc2]</div>
		<div class="face bottom-interior">2</div>
		<div class="face front">[doc3]</div>
		<div class="face front-interior">3</div>
		<div class="face left">[doc4]</div>
		<div class="face left-interior">4</div>
		<div class="face right">[doc5]</div>
		<div class="face right-interior">5</div>
		<div class="face back">[doc6]</div>
		<div class="face back-interior">6</div>
	</div>
</div> 

[/log]

To add to your personal page, switch to HTML and copy the 'Everything' section into the HTML area.

[log='Everything']

<!doctype html>
<style>
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.stage {
	-webkit-perspective: 800;
	-moz-perspective: 800;
	-ms-persective: 800;
	-o-perspective: 800;
	perspective: 800;
	-webkit-perspective-origin: 50% 50%;
	-moz-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	-o-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
}
.cube {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	-ms-transition: -ms-transform 1s;
	transition: transform 1s;
	position: relative;
	width: 500px;
	height: 500px;
	margin: 150px auto;
}
.cube .face {
	width: 100%;
	height: 100%;
	position: absolute;
	background: white;
	padding: 1em;
	overflow: auto;
	border: solid 1px grey;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 1s 1s;
	-moz-transition: opacity 1s 1s;
	-o-transition: opacity 1s 1s;
	-ms-transition: opacity 1s 1s;
	transition: opacity 1s 1s;
}
.cube .face * {
	background: white !important;
}
.cube .face.top {
	-webkit-transform: rotateX(90deg) translateZ(250px);
	-moz-transform: rotateX(90deg) translateZ(250px);
	-o-transform: rotateX(90deg) translateZ(250px);
	-ms-transform: rotateX(90deg) translateZ(250px);
	transform: rotateX(90deg) translateZ(250px);
}
.cube .face.top-interior {
	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
	transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.bottom {
	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
	transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
}
.cube .face.bottom-interior {
	-webkit-transform: rotateX(90deg) translateZ(-250px);
	-moz-transform: rotateX(90deg) translateZ(-250px);
	-o-transform: rotateX(90deg) translateZ(-250px);
	-ms-transform: rotateX(90deg) translateZ(-250px);
	transform: rotateX(90deg) translateZ(-250px);
}
.cube .face.left {
	-webkit-transform: rotateY(-90deg) translateZ(250px);
	-moz-transform: rotateY(-90deg) translateZ(250px);
	-o-transform: rotateY(-90deg) translateZ(250px);
	-ms-transform: rotateY(-90deg) translateZ(250px);
	transform: rotateY(-90deg) translateZ(250px);
}
.cube .face.left-interior {
	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	-o-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
	transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
}
.cube .face.right {
	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	-o-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
	transform: rotateY(90deg) rotate(180deg) translateZ(250px);
}
.cube .face.right-interior {
	-webkit-transform: rotateY(-90deg) translateZ(-250px);
	-moz-transform: rotateY(-90deg) translateZ(-250px);
	-o-transform: rotateY(-90deg) translateZ(-250px);
	-ms-transform: rotateY(-90deg) translateZ(-250px);
	transform: rotateY(-90deg) translateZ(-250px);
}
.cube .face.front {
	-webkit-transform: translateZ(250px);
	-moz-transform: translateZ(250px);
	-o-transform: translateZ(250px);
	-ms-transform: translateZ(250px);
	transform: translateZ(250px);
}
.cube .face.front-interior {
	-webkit-transform: rotateY(180deg) translateZ(-250px);
	-moz-transform: rotateY(180deg) translateZ(-250px);
	-o-transform: rotateY(180deg) translateZ(-250px);
	-ms-transform: rotateY(180deg) translateZ(-250px);
	transform: rotateY(180deg) translateZ(-250px);
}
.cube .face.back {
	-webkit-transform: rotateY(180deg) translateZ(250px);
	-moz-transform: rotateY(180deg) translateZ(250px);
	-o-transform: rotateY(180deg) translateZ(250px);
	-ms-transform: rotateY(180deg) translateZ(250px);
	transform: rotateY(180deg) translateZ(250px);
}
.cube .face.back-interior {
	-webkit-transform: translateZ(-250px);
	-moz-transform: translateZ(-250px);
	-o-transform: translateZ(-250px);
	-ms-transform: translateZ(-250px);
	transform: translateZ(-250px);
}
.cube[data-face="top"], .cube[data-face="bottom-interior"] {
	-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	-o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	-ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
	transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="bottom"], .cube[data-face="top-interior"] {
	-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	-moz-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	-o-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	-ms-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
	transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="front"], .cube[data-face="back-interior"] {
	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cube[data-face="left"], .cube[data-face="right-interior"] {
	-webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	-moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	-o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	-ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
	transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
.cube[data-face="right"], .cube[data-face="left-interior"] {
	-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	-moz-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	-o-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	-ms-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
	transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
.cube[data-face="back"], .cube[data-face="front-interior"] {
	-webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	-moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	-o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	-ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
.cube[data-face="bottom-interior"] .face.top,
.cube[data-face="top-interior"] .face.bottom,
.cube[data-face="back-interior"] .face.front,
.cube[data-face="right-interior"] .face.left,
.cube[data-face="left-interior"] .face.right,
.cube[data-face="front-interior"] .face.back {
	opacity: 0;
	pointer-events: none;
}
[onclick] {
	cursor: pointer;
}
</style>
<h1 class="general-sectionheader">The Warrior</h1>
<div style="text-align: center;">
	<a onclick="$('.cube').attr({'data-face': 'top'});">
		<img src="/img/skin/default/mdadocs1.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'bottom'});">
		<img src="/img/skin/default/mdadocs2.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'front'});">
		<img src="/img/skin/default/mdadocs3.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'left'});">
		<img src="/img/skin/default/mdadocs4.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'right'});">
		<img src="/img/skin/default/mdadocs5.gif">
	</a>
	<a onclick="$('.cube').attr({'data-face': 'back'});">
		<img src="/img/skin/default/mdadocs6.gif">
	</a>
</div>
<div style="text-align: center;">
	<a onclick="$('.cube').attr({'data-face': 'top-interior'});" class="frm-textbutton-gold">1</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'bottom-interior'});" class="frm-textbutton-gold">2</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'front-interior'});" class="frm-textbutton-gold">3</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'left-interior'});" class="frm-textbutton-gold">4</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'right-interior'});" class="frm-textbutton-gold">5</a>&nbsp;
	<a onclick="$('.cube').attr({'data-face': 'back-interior'});" class="frm-textbutton-gold">6</a>
</div>
<div class="stage">
	<div class="cube">
		<div class="face top">[doc1]</div>
		<div class="face top-interior">1</div>
		<div class="face bottom">[doc2]</div>
		<div class="face bottom-interior">2</div>
		<div class="face front">[doc3]</div>
		<div class="face front-interior">3</div>
		<div class="face left">[doc4]</div>
		<div class="face left-interior">4</div>
		<div class="face right">[doc5]</div>
		<div class="face right-interior">5</div>
		<div class="face back">[doc6]</div>
		<div class="face back-interior">6</div>
	</div>
</div> 

[/log]

 

Until, I change it, a live preview is shown on my profile page: http://magicduel.com/players/The_Warrior

Edited by The Warrior

  • Quote

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest
    Reply to this topic...
    Go to topic listing

    Forum Statistics

    • Total Topics 17.5k
    • Total Posts 182.2k

    Account

    Navigation

    Search

    Search

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.