Wolfie
New Member
[dohtml]
<div class="outside2"><div class="outside">
<div class="leftcorner2"></div> <div class="leftcorner"></div><div class="leftcol"><img src="https://media.moddb.com/images/members/5/4393/4392986/Coruscant_Icon_6.png" width="50" height="50">
<span class="tempname">
CORUSCANT
</span>
<div class="tempbars">
<span><div class="tempstat" style="width:102px"></div></span>
<span><div class="tempstat" style="width:42px"></div></span>
<span><div class="tempstat" style="width:80px"></div></span>
<span><div class="tempstat" style="width:102px"></div></span>
<span><div class="tempstat" style="width:65px"></div></span>
</div><br><br>         <span class="loader"></span> </div><div class="temptext"><div class="temptext2">
POST GOES HERE!
</div></div><div class="extratext">initialising<img src="https://i.ibb.co/dGXxW0w/33aa21-d62d886aee8c4c87a06aafa61278bd03-mv2.gif" height="7"></div><div class="templine1"></div><div class="templine2"></div><div class="tempcopyright"></div>
</div></div>
<style>
.outside {width:450px; height:450px; background-color:#151515; margin:auto; position:relative;}
.outside2 {padding:20px; border:1px solid #ff7000; width:450px; height:450px; margin:auto}
.leftcorner {position:absolute; width: 0;
height: 0;
border-style: solid;
border-width: 275px 275px 0 0;
border-color: #282828 transparent transparent transparent;
}
.leftcorner2 {position:absolute; width: 0;
height: 0;
border-style: solid;
border-width: 295px 295px 0 0;
border-color: #ff7000 transparent transparent transparent;
}
.temptext {position:absolute; width:220px; height:300px; bottom:20px; border:1px solid #913535; right:20px; color:#282828; padding:20px}
.temptext2 {width:200px; padding-right:20px; height:300px; overflow-y:auto; font-family:arial; font-size:10px; letter-spacing:-0px; line-height:130%; text-align:justify; color:#b6b6b6; scrollbar-width: thin; scrollbar-color: #ff7000#282828;}
.temptext2::-webkit-scrollbar {width:5px; background-color:#282828}
.temptext2::-webkit-scrollbar-thumb {background-color:#ff7000;}
.leftcol {position:absolute; left:20px; width:120px; height:410px; top:20px}
.leftcol img {border-radius:50%; padding:5px; border:1px solid #ff7000; }
.tempname {color:#fff; font-size:18px; font-weight:700; display:block; text-align:center; line-height:150%; font-family:georgia; padding:20px 0 20px 0; font-style:italic; letter-spacing:2px; margin-bottom:50px; border-bottom:1px solid #ff7000; text-shadow: 0px 2px #ff7000;}
.tempbars span {width:120px; height:10px; background-color:#282828; display:block; margin-bottom:15px; position:relative;}
.tempstat {position:absolute; height:4px; top:3px; left:3px; background-color:#ff7000}
.extratext {color:#fff; position:absolute; right:30px; top:70px; text-transform:uppercase; font-size:8px;}
.templine1 {position:absolute; width:120px; right:20px; top:20px; border-bottom:1px solid #ff7000}
.templine2 {position:absolute; width:90px; right:20px; top:45px; border-bottom:1px solid #ff7000}
.tempcopyright {font-size:10px; font-weight:700; color: #ff7000; position:absolute; right:100px; top:68px; font-family:georgia}
.tempcopyright a {color:#ff7000; text-decoration:none;}
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #FFF #FFF transparent transparent;
box-sizing: border-box;
animation: rotation 1.5s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #FF7000 #FF7000;
width: 40px;
height: 40px;
border-radius: 50%;
box-sizing: border-box;
animation: rotationBack 1s linear infinite;
transform-origin: center center;
}
.loader::before {
width: 32px;
height: 32px;
border-color: #FFF #FFF transparent transparent;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
[/dohtml]
<div class="outside2"><div class="outside">
<div class="leftcorner2"></div> <div class="leftcorner"></div><div class="leftcol"><img src="https://media.moddb.com/images/members/5/4393/4392986/Coruscant_Icon_6.png" width="50" height="50">
<span class="tempname">
CORUSCANT
</span>
<div class="tempbars">
<span><div class="tempstat" style="width:102px"></div></span>
<span><div class="tempstat" style="width:42px"></div></span>
<span><div class="tempstat" style="width:80px"></div></span>
<span><div class="tempstat" style="width:102px"></div></span>
<span><div class="tempstat" style="width:65px"></div></span>
</div><br><br>         <span class="loader"></span> </div><div class="temptext"><div class="temptext2">
POST GOES HERE!
</div></div><div class="extratext">initialising<img src="https://i.ibb.co/dGXxW0w/33aa21-d62d886aee8c4c87a06aafa61278bd03-mv2.gif" height="7"></div><div class="templine1"></div><div class="templine2"></div><div class="tempcopyright"></div>
</div></div>
<style>
.outside {width:450px; height:450px; background-color:#151515; margin:auto; position:relative;}
.outside2 {padding:20px; border:1px solid #ff7000; width:450px; height:450px; margin:auto}
.leftcorner {position:absolute; width: 0;
height: 0;
border-style: solid;
border-width: 275px 275px 0 0;
border-color: #282828 transparent transparent transparent;
}
.leftcorner2 {position:absolute; width: 0;
height: 0;
border-style: solid;
border-width: 295px 295px 0 0;
border-color: #ff7000 transparent transparent transparent;
}
.temptext {position:absolute; width:220px; height:300px; bottom:20px; border:1px solid #913535; right:20px; color:#282828; padding:20px}
.temptext2 {width:200px; padding-right:20px; height:300px; overflow-y:auto; font-family:arial; font-size:10px; letter-spacing:-0px; line-height:130%; text-align:justify; color:#b6b6b6; scrollbar-width: thin; scrollbar-color: #ff7000#282828;}
.temptext2::-webkit-scrollbar {width:5px; background-color:#282828}
.temptext2::-webkit-scrollbar-thumb {background-color:#ff7000;}
.leftcol {position:absolute; left:20px; width:120px; height:410px; top:20px}
.leftcol img {border-radius:50%; padding:5px; border:1px solid #ff7000; }
.tempname {color:#fff; font-size:18px; font-weight:700; display:block; text-align:center; line-height:150%; font-family:georgia; padding:20px 0 20px 0; font-style:italic; letter-spacing:2px; margin-bottom:50px; border-bottom:1px solid #ff7000; text-shadow: 0px 2px #ff7000;}
.tempbars span {width:120px; height:10px; background-color:#282828; display:block; margin-bottom:15px; position:relative;}
.tempstat {position:absolute; height:4px; top:3px; left:3px; background-color:#ff7000}
.extratext {color:#fff; position:absolute; right:30px; top:70px; text-transform:uppercase; font-size:8px;}
.templine1 {position:absolute; width:120px; right:20px; top:20px; border-bottom:1px solid #ff7000}
.templine2 {position:absolute; width:90px; right:20px; top:45px; border-bottom:1px solid #ff7000}
.tempcopyright {font-size:10px; font-weight:700; color: #ff7000; position:absolute; right:100px; top:68px; font-family:georgia}
.tempcopyright a {color:#ff7000; text-decoration:none;}
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #FFF #FFF transparent transparent;
box-sizing: border-box;
animation: rotation 1.5s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #FF7000 #FF7000;
width: 40px;
height: 40px;
border-radius: 50%;
box-sizing: border-box;
animation: rotationBack 1s linear infinite;
transform-origin: center center;
}
.loader::before {
width: 32px;
height: 32px;
border-color: #FFF #FFF transparent transparent;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
[/dohtml]
Last edited: