+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
below is the Profile CSS. put it in the first box.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
02-583729
STARFLEET PERSONNEL FILES
6
81282930
819220349178383
001283934
00405
28283
4475905000664
4
4677865
12332535
333455
24687943
00202
64784
2342356
46789
32365726767324
008
8737894
678
92872772940
333456
23466
8962374
24623409532
63820
901783034
892162
001262
901837336
618215
49999
6600066
3133435
66142893
272393
93737371
6646585
90120
91234
23784029384
3141592
24
9
420249
00693487341
734544
23534253
2923-757
9629-444
1524-890
6383-712
93-869265
03-735280
44-720164
94-638210
SF ID NO: ___
RANK: ___
HEIGHT: ___
WEIGHT: ___
BORN: ___ ORIGIN: ___
PLACE OF BIRTH: ___
ASSIGNMENT: ___
LAST SHIP: ___
ACADEMY CLASS: ___
4266
7363
8365
1029
name of character
personal biography:
info about character goes here, automatically all-caps, box scrolls.
code by @O-P-A-L
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
below is the CSS code. paste into the second box on the profile editor.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@media only screen and (max-width: 1860px) {
.horsepill {width:45% !important;}
}
@media only screen and (max-width: 1700px) {
.f1 p, .f2 p, .f3 p, .f4 p {left:40px !important;}
.b1 {text-indent: 0.3em !important;} .b2 {text-indent:1.5em !important;}
.leftinfo {right:-4px !important;}
.HUD {right:-2px !important;}
.a1 {width:42% !important;} .e1 {width:88.5% !important;} .g1 {width:34% !important;}
.rightinfo p {padding-right:30px !important;}
}
@media only screen and (max-width: 1300px) {
.f1 p, .f2 p, .f3 p, .f4 p {left:10px !important;}
.b1 {text-indent: 0.2em !important;} .b2 {text-indent:1.4em !important;}
.aa1 p, .aa2 p, .aa3 p, .aa4 p, .aa5 p {left:5px !important;}
.b1, .b2, .c1, .horsepill, .f1, .f2, .f3, .f4, .aa1, .aa2, .aa3, .aa4, .aa5 {font-size:25px !important;}
.f1, .f2, .f3, .f4 {left:15px;}
.ten {font-size:20px !important;}
}
@media only screen and (max-width: 1150px) {
.horsepill {width:43% !important; font-size:23px !important;}
}
@media only screen and (max-width: 1050px) {
.ten {width:7% !important; font-size:13px !important;}
.horsepill {height:50px !important;padding:10px !important}
.lcarstitle {font-size:4em !important;}
.lcarsname {font-size:1.5em !important;}
.HUD {height:220px !important;}
.b1.lavender {height:80px !important;}
.b2.periwinkle {height:150px !important;}
.HUDbackground {height:auto !important;}
.a1 {width:41% !important;}
#begin {height:235px !important;}
.e1 {width:81.3% !important;margin-right:21px !important;}
.e2 {width:7.3% !important;}
.rightinfo.textorange p.textperiwinkle {font-size:1.2em !important;}
}
@media only screen and (max-width:1000px) {
.d1 {width:100% !important;height:650px !important;}
.d2 {width:97% !important; right:-20px !important;}
.bottombox {height:1300px !important;}
.e1 {width:87.3% !important;}
}
@media only screen and (max-width:666px) {
.bigbox {min-width:390px !important; margin-right:0 !important;text-decoration:none;}
.lcarstitle {font-size:2.8em !important;}
.rightinfo p {padding-right:45px !important;}
.c1 {width:100% !important; height:100px !important; margin-left:-25px !important;}
.ten {margin:5px !important;}
.c2 {width:100% !important;}
.HUD {height:290px !important;}
#begin {height:300px !important; margin-bottom:15px !important}
.b2.periwinkle {height:223px !important; border-radius:0 0 0 110px !important;text-indent:-9999999px !important;}
.b1 {text-indent:-99999999px !important;}
.a1 {width:37% !important;}
.f1 p, .f2 p, .f3 p, .f4 p, {font-size:18px !important;}
.aa1 p, .aa2 p, .aa3 p, .aa4 p, .aa5 p {font-size:23px !important;}
.e1 {width:83.3% !important;}
}
@import url('https://fonts.googleapis.com/css?family=Sofia+Sans+Extra+Condensed:ital,wght@0,700;1,700&display=swap');
.peach {background-color:LightSalmon;}.textpeach {color:LightSalmon;}
.orange {background-color:DarkOrange;}.textorange {color:DarkOrange;}
.maroon{background-color:IndianRed;}.textmaroon{color:IndianRed;}
.lavender {background-color:Plum;}.textlavender{color:Plum;}
.periwinkle {background-color:CornflowerBlue;}.textperiwinkle{color:CornflowerBlue;}
.paperwhite {background-color:LightYellow;}.textpaperwhite{color:LightYellow;}
.cream {background-color:PeachPuff;}.textcream{color:PeachPuff;}
.profile-content-title {
display: none;
}
#content {
padding: 0;
}
.bigbox {
font-family: 'Sofia Sans Extra Condensed', sans-serif;
font-weight: 700 !important;
font-style: normal;
text-transform: uppercase;
letter-spacing: -.05em;
}
.row.profile-header {
display: none;
}
body {
background-color:black;
}
.a1 {
width: 43%;
margin-right: 7px;
font-size:2em;
}
.a2 {
width: 3%;
margin-right: 7px;
}
.a3 {
width: 19%;
margin-right: 7px;
}
.a4 {
width: 30%;
}
.a5 {
width: 3%;
margin-left: 7px;
}
.b1.lavender {
height: 100px;
margin-bottom: 7px;
color: #000;
text-indent: 0.8em;
position:relative;
}
.b2.periwinkle {
height: 193px;
border-radius: 0 0 0 150px;
color: #000;
text-indent: 1.8em;
}
.HUD {
background-color: black;
height: 280px;
width: 90%;
position: absolute;
z-index: 2;
right: 0;
border-radius: 0 0 0 70px;
}
.c1 {
width: 64%;
height: 160px;
}
.c2 {
width: 35%;
height: 160px;
}
.ten {
width: 8%;
height: 150px;
float: right;
margin: 5px;
line-height: 1.2em;
font-size: 1.5em;
text-align: right;
}
.horsepill {
color: #000;
width: 230px;
height: 75px;
border-radius: 100px;
margin: 7px 7px 0 7px;
display: inline-block;
vertical-align: top;
text-align: right;
padding: 30px;
line-height: 1.5;
font-size:2em;
}
.d1 {
width: 46.6%;
height: 500px;
margin-right: 7px;
position:relative;
z-index:1;
}
.d2 {
height: 500px;
width: 52%;
position:relative;
z-index:1;
}
.e1 {
height: 600px;
width: 91%;
margin-right: 7px;
z-index: 1;
color:black;
font-size:2em;
}
.e2 {
width: 6.3%;
height: 600px;
z-index: 1;
}
.f1 {
width: 100%;
height: 125px;
border-radius: 100px 0 0 0;
margin-bottom: 7px;
position:relative;
}
.f2 {
width: 100%;
height: 200px;
margin-bottom: 7px;
color:black;
position:relative;
}
.f3 {
width: 100%;
height: 50px;
margin-bottom: 7px;
position:relative;
}
.f4 {
width: 100%;
height: 208px;
position:relative;
}
.g1 {
width: 36%;
height: 600px;
margin-right: 7px;
color:black;
font-size:2em;
}
.g2 {
width: 56.5%;
height: 600px;
margin-right: 7px;
}
.g3 {
width: 5.6%;
height: 600px;
}
.leftinfo {
background-color: black;
width: 77%;
height: 585px;
position: absolute;
z-index: 2;
right: -1px;
top: 20px;
border-radius: 60px 0 0 0;
}
.aa1 {
width: 100%;
height: 80px;
border-radius: 75px 0 0 0;
margin-bottom: 7px;
position:relative;
}
.aa2 {
width: 100%;
height: 125px;
margin-bottom: 7px;
position:relative;
}
.aa3 {
width: 100%;
height: 125px;
margin-bottom: 7px;
position:relative;
}
.aa4 {
width: 100%;
height: 100px;
margin-bottom: 7px;
position:relative;
}
.aa5 {
width: 100%;
height: 150px;
position:relative;
}
.rightinfo {
background-color: #000;
position: absolute;
z-index: 2;
height: 600px;
width: 94%;
right: -15px;
top: 20px;
border-radius: 50px 0 0 0;
padding: 0 0 10px 20px;
font-size: 2em;
overflow-y: scroll;
}
.picframe {
background-image: linear-gradient(to bottom,#00008B,#4169E1);
height: 300px;
width: 250px;
margin: 30px 0 0 30px;
padding-top: 10px;
}
.biopic {
height: 290px;
width: 250px;
background-position: top;
background-repeat: no-repeat;
}
.infotext {
font-size: 2em;
line-height: 1em;
margin-left: 30px;
}
.sig {
font-size: 20px;
position: absolute;
bottom: 0;
right: 50px;
margin:5px;
}