Home
Roleplay Profile Layouts
Your browser does not support the video tag.
GS#14ATC: Ace Attorney - Court Record
CSS
/* Last Update: 07/22/19 */ /* PAGE BACKGROUND AND FONT */ body { background:#000 url(https://p4ratchet.files.wordpress.com/2016/10/ace-attorney-courtroom1.jpg) center no-repeat fixed; background-size:cover; font-family:sans-serif; font-size:16px; } /* GOOGLE CHROME SCROLLBARS */ ::-webkit-scrollbar { width:8px; height:8px; background-color:#222; } ::-webkit-scrollbar-thumb { background-color:#fff; } /* IMAGE FIELD BACKGROUND IMAGES */ /* I FOR ITEM AND P FOR PROFILE */ #i1 { background:#808080 url('https://vignette4.wikia.nocookie.net/aceattorney/images/8/8b/Badge.png/revision/latest?cb=20160127195254') center; background-size:cover; } #i2 { background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/b/b7/Maya%27s_Magatama.png/revision/latest?cb=20160128175359') center; background-size:cover; } #i3 { background:#808080 url('https://vignette3.wikia.nocookie.net/aceattorney/images/5/56/Autopsy_report.png/revision/latest?cb=20160127194837') center; background-size:cover; } #i4 { background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/0/02/Envelope.png/revision/latest?cb=20160127202929') center; background-size:cover; } #i5 { background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/2/29/Thinker.png/revision/latest?cb=20160129153354') center; background-size:cover; } #i6 { background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/c/c6/Generic_Photo.png/revision/latest?cb=20160127203950') center; background-size:cover; } #i7 { background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/5/52/Key.png/revision/latest?cb=20160127205453') center; background-size:cover; } #i8 { background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/4/46/Grey_Gun.png/revision/latest?cb=20160127204400') center; background-size:cover; } #p1 { background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/7/73/Mia-mug.png/revision/latest?cb=20120226023016') center; background-size:cover; } #p2 { background:#808080 url('https://i.pinimg.com/originals/54/ff/45/54ff459ff86cbb1cf4d096ee4213abf9.png') center; background-size:cover; } #p3 { background:#808080 url('https://vignette2.wikia.nocookie.net/aceattorney/images/b/b1/Pearl_Fey.png/revision/latest?cb=20120226021150') center; background-size:cover; } #p4 { background:#808080 url('http://images.wikia.com/aceattorney/images/3/3f/Edgeworth2.png') center; background-size:cover; } #p5 { background:#808080 url('https://vignette4.wikia.nocookie.net/aceattorney/images/4/45/Larry_Butz_T%26T_Mugshot.png/revision/latest/scale-to-width-down/185?cb=20160321033235') center; background-size:cover; } #p6 { background:#808080 url('https://vignette1.wikia.nocookie.net/aceattorney/images/4/40/Dick_Gumshoe_Mugshot.png/revision/latest?cb=20160321033423') center; background-size:cover; } #p7 { background:#808080 url('') center; background-size:cover; } #p8 { background:#808080 url('') center; background-size:cover; } /* CSS MEAT */ #top, #bottom { position:fixed; left:50%; height:50%; width:40%; min-width:450px; color:#fff; overflow:hidden; transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%); -webkit-transform:translateX(-50%); } /* TOP HALF STUFF */ #top { top:0; } #mugshot { position:absolute; top:0; height:100%; } #quote { position:absolute; bottom:0; left:0; right:0; height:21%; padding:10px; background-color:rgba(0,0,0,0.5); border:2px solid #fff; border-radius:2px; overflow-y:auto; } #top h2 { position:absolute; left:0; bottom:21%; margin:0 0 24px 0; padding:3px 5px; font-size:20px; background-color:rgba(0,0,155,0.5); border:2px solid #fff; border-radius:5px 5px 2px 2px; } #quote, p { text-indent:5%; } /* BOTTOM HALF STUFF */ #bottom { top:50%; background-color:#ccc; } .buttons, span { text-shadow:1px 1px 2px #000; } .buttons { position:absolute; height:7vh; width:120px; overflow:hidden; text-align:center; } .buttons:hover { color:#808080; } .buttons::before { position:absolute; top:2px; right:2px; left:2px; bottom:2px; padding:1vh 0; font-size:4.2vh; } input { display:none; } label { cursor:pointer; } label#reset { left:0; bottom:0; background:linear-gradient(-135deg,transparent 12%,#fff 12%); background:-o-linear-gradient(-135deg,transparent 12%,#fff 12%); background:-moz-linear-gradient(-135deg,transparent 12%,#fff 12%); background:-webkit-linear-gradient(-135deg,transparent 12%,#fff 12%); } label#profiles { top:0; right:0; background:linear-gradient(45deg,transparent 12%,#fff 12%); background:-o-linear-gradient(45deg,transparent 12%,#fff 12%); background:-moz-linear-gradient(45deg,transparent 12%,#fff 12%); background:-webkit-linear-gradient(45deg,transparent 12%,#fff 12%); } label#reset::before { content:"Back"; background:linear-gradient(-135deg,transparent 12%,#8b4513 12%); background:-o-linear-gradient(-135deg,transparent 12%,#8b4513 12%); background:-moz-linear-gradient(-135deg,transparent 12%,#8b4513 12%); background:-webkt-linear-gradient(-135deg,transparent 12%,#8b4513 12%); } label#profiles::before { content:"Profiles"; background:linear-gradient(45deg,transparent 12%,#8b4513 12%); background:-o-linear-gradient(45deg,transparent 12%,#8b4513 12%); background:-moz-linear-gradient(45deg,transparent 12%,#8b4513 12%); background:-webkit-linear-gradient(45deg,transparent 12%,#8b4513 12%); } .courtrecord { position:absolute; top:3.75vh; left:0; bottom:3.75vh; width:100%; background:#222 url(https://vignette1.wikia.nocookie.net/aceattorney/images/c/c1/Screenshot-court.png/revision/latest?cb=20071215141755) center; background-size:auto 100%; border-top:3.75vh solid #696969; overflow:hidden; } .courtrecord + span { position:absolute; margin:2vh 0.7vw; font-size:4.5vh; } .record-body, #navbar { position:absolute; top:1.75vh; height:32.25vh; left:50px; right:50px; text-align:center; } .tab { position:absolute; top:0; left:100%; margin:0 50px; height:100%; width:100%; transition:1s; -o-transition:1s; -moz-transition:1s; -webkit-transition:1s; } .tab h3 { position:absolute; top:0; left:0; right:0; height:20px; margin:0; background-color:#444; border:2px inset #fff; border-top-width:1px; color:#ffa500; font-size:18px; line-height:20px; } .itembox, .itembox div { position:absolute; height:13vh; border:2px solid #fff; border-radius:2px; } .itembox { top:9vh; left:0; right:0; padding:7px 5px; background-color:#705028; } .itembox div { top:5px; } .itembox div:first-child { left:5px; width:13vh; } .desc { left:18vh; right:5px; padding:0 4px; background-color:#9cc793; color:#222; text-align:left; overflow-y:auto; } #default, #profiles { background-color:#bdb76b; } #default { top:100%; left:0; margin:6vh 0; } #reset:checked ~ .record-body #default, #item01:checked ~ .record-body .t1, #item02:checked ~ .record-body .t2, #item03:checked ~ .record-body .t3, #item04:checked ~ .record-body .t4, #item05:checked ~ .record-body .t5, #item06:checked ~ .record-body .t6, #item07:checked ~ .record-body .t7, #item08:checked ~ .record-body .t8, #profiles:checked ~ .record-body #profiles { top:0; left:0; margin:0; transition:1s 0.8s; -o-transition:1s 0.8s; -moz-transition:1s 0.8s; -webkit-transition:1s 0.8s; } #image-field { position:absolute; top:6vh; left:15px; right:15px; } #image-field div, #navbar label, #navbar a { display:inline-block; position:relative; height:10.4vh; width:10.4vh; } #image-field div { margin:0 2px; border:2px inset #bdb76b; } #navbar { display:none; } #navbar label, #navbar a { display:inline-block; top:6vh; margin:2px; } #reset:checked ~ #navbar a, #profiles:checked ~ #navbar label { display:none; } #reset:checked ~ #navbar, #profiles:checked ~ #navbar { display:inline-block; } #quote img, .tab img { max-height:100%; } @media only screen and (orientation:portrait) { #top, #bottom { width:100%; font-size:1.1em; } .buttons::before { padding:2vh 0; font-size:2.2vh; } } #credit { position:fixed; height:17px; right:1%; bottom:0; background-color:#fff; border-radius:5px; }
HTML
<link href="https://dl.dropbox.com/s/w6ty46lyhcwxp2q/gs14-extra-decoration.css" rel="stylesheet"> <div id="top"> <img src="http://img14.deviantart.net/7d0a/i/2010/357/4/f/phoenix_wright___vector_by_honokawa-d35h44y.png" alt="Image of Phoenis Wright the defense attorney" id="mugshot"/> <h2>Phoenix</h2> <div id="quote"> "Why did I become a lawyer in the first place...? Because someone has to look out for the people who have no one on their side." </div> </div> <div id="bottom"> <!-- THIS NEXT HUGE CHUNK IS MOSTLY DECORATIVE OR FUNCTION RELATED, DO NOT TOUCH! --> <div id="grayline"></div><div class="courtrecord"> <input type="radio" name="selection" id="reset" checked="checked"/><input type="radio" name="selection" id="profiles"/> <input type="radio" name="selection" id="item01"/><input type="radio" name="selection" id="item02"/><input type="radio" name="selection" id="item03"/><input type="radio" name="selection" id="item04"/><input type="radio" name="selection" id="item05"/><input type="radio" name="selection" id="item06"/><input type="radio" name="selection" id="item07"/><input type="radio" name="selection" id="item08"/> <div class="record-body" id="main"> <div class="tab" id="profiles"> <h3>Friends</h3> <div id="image-field"> <div id="p1"></div><div id="p2"></div><div id="p3"></div><div id="p4"></div> <br/> <div id="p5"></div><div id="p6"></div><div id="p7"></div><div id="p8"></div> </div></div> <div class="tab" id="default"> <h3>Information</h3> <div id="image-field"> <div id="i1"></div><div id="i2"></div><div id="i3"></div><div id="i4"></div> <br/> <div id="i5"></div><div id="i6"></div><div id="i7"></div><div id="i8"></div> </div></div></div> <div id="gradientfilm"></div> <!-- Okay now you can touch stuff. --> <div class="record-body"> <div class="tab t1"> <h3>Attorney's Badge</h3> <div class="itembox"> <div id="i1"></div> <div class="desc"> <p> Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous. </p> </div> </div> </div> <div class="tab t2"> <h3>Maya's Magatama</h3> <div class="itembox"> <div id="i2"></div> <div class="desc"> <p> Paragraph. </p> </div> </div> </div> <div class="tab t3"> <h3>Autopsy Report</h3> <div class="itembox"> <div id="i3"></div> <div class="desc"> <p> Paragraph. </p> </div> </div> </div> <div class="tab t4"> <h3>Envelope</h3> <div class="itembox"> <div id="i4"></div> <div class="desc"> <p> Paragraph. </p> </div> </div> </div> <div class="tab t5"> <h3>Thinker</h3> <div class="itembox"> <div id="i5"></div> <div class="desc"> <p> Paragraph. </p> </div> </div> </div> <div class="tab t6"> <h3>Photo</h3> <div class="itembox"> <div id="i6"></div> <div class="desc"> <p> Paragraph. </p> </div> </div> </div> <div class="tab t7"> <h3>Key</h3> <div class="itembox"> <div id="i7"></div> <div class="desc"> <p> Paragraph. </p> </div> </div> </div> <div class="tab t8"> <h3>Gun</h3> <div class="itembox"> <div id="i8"></div> <div class="desc"> <p> Paragraph. </p> </div> </div> </div> </div> <!-- FRIEND PROFILE LINKS FOUND BELOW --> <div id="navbar"> <label for="item01"></label> <label for="item02"></label> <label for="item03"></label> <label for="item04"></label> <a href="" target="_blank"></a> <a href="" target="_blank"></a> <a href="" target="_blank"></a> <a href="" target="_blank"></a> <br/> <label for="item05"></label> <label for="item06"></label> <label for="item07"></label> <label for="item08"></label> <a href="" target="_blank"></a> <a href="" target="_blank"></a> <a href="" target="_blank"></a> <a href="" target="_blank"></a> </div> </div> <span>Evidence</span> <label for="profiles" class="buttons" id="profiles"></label> <label for="reset" class="buttons" id="reset"></label> </div> <a href="http://bit.do/eePwi" target="_blank" title="GS#14"> <img src="https://i.imgur.com/loleTtJ.png" id="credit"/> </a>