Closed Ria's -- code dump?

[RI.a]

[class=header] width: 400px; height: 250px; background-color:#ffffff; background-opacity:60%; font: Heebo; font-size:12px; font-color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Introduction
Hello one and all. I've been fascinated and inspired by all the amazing, talented bbcoders here. Like seriously. Everyone is so amazing. Is that enough bootlicking yet? jokes
I am still very new to coding, but I really want to put in the time and effort to learn cos I wanna do cool shit. Don't expect this thread to have awesome codes. Maybe in the next few months/years lol. I don't know how frequent I'll make codes cos life, so don't expect much activity on this thread? Though I doubt anyone will anyway lol.
Let me know what you think? Would love to hear some feedback or even any advice!
Rules
Codes are free to use, please just keep the credits. Would love to see if anyone is using it.
I don't know if the codes are mobile friendly/compatible. Don't ask me if I can make it so, cos I'm not anywhere close to that skill level.
Err I can't think of any other rules. Have fun?
Hope you enjoy!

[/div]

 

[RI.a]

[class=header] width: 200px; height: 90px; background:#ffffff; font: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Intrigued
Feel kinda nervous putting this up. But here's the first one! Whooo!
A very simple template for a CS. I'm hoping it's versatile enough and looks good at the same time? I guess this would only look nice with a good background image. hmm....
Scroll at the dancing leaf for more!
SO not mobile friendly.
I've left borders at 0px for the background and the text boxes. So if you wish, you can add them back in.
I don't own the image!
Edit: Added new classes so the code looks neater-ish.[/div]

[class=background] background:url('https://hdqwalls.com/download/fall-season-anime-artwork-au-1336x768.jpg'); background-size:cover; padding:5px; max-width:1070px; margin:auto;center; border:0pt solid white; [/class] [class=basics] width:200px; height:50px; font-size:12px; margin-left:100px; border:0px dashed dark gray; [/class] [class=mainbox] width:380px; height:500px; color:#222222; font-size:12px; margin:10px 5px 10px 10px; border:0px solid #727272; [/class] [class=box2] width: 620px; height: 160px; color:#222222; font-size:12px; margin-left:420px; margin-top:-190px; [/class] [class=credits] margin:auto;center; max-width:1070px; font:Heebo; font-size:9px; opacity:0.5; [/class]
[div class=background]
[div class=basics]

Name​

[/div][div class=basics] age ////////////////// gender
race //////////////////// other[/div]
[div class=mainbox]

Personality
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dapibus quam. Nulla dapibus nisl enim, vitae ullamcorper tellus mollis vitae. Nunc malesuada neque nibh, eu dictum urna ullamcorper efficitur. Pellentesque suscipit semper pellentesque. Cras pharetra vulputate feugiat. Duis molestie pretium sagittis. Duis eleifend ligula nibh, quis rhoncus diam elementum sit amet. Pellentesque ante libero, ultricies eget urna eget, euismod tincidunt augue.

Nunc fringilla, risus quis euismod accumsan, mi purus tristique libero, auctor placerat dui metus vel nisl. Sed neque leo, viverra vel rutrum vitae, bibendum quis justo. Quisque mauris nisl, luctus in erat ut, pharetra rhoncus erat. Nulla leo tellus, scelerisque id accumsan non, hendrerit mollis arcu. Mauris non elit mi. Duis bibendum mauris sit amet condimentum auctor. Praesent lobortis molestie dui, quis efficitur sem tempor eu. Vestibulum sed tellus mattis, egestas enim faucibus, pharetra eros. Maecenas non nunc vitae metus molestie finibus. Donec pharetra dapibus augue, id tristique nunc malesuada vitae. Curabitur at finibus turpis. Vestibulum et suscipit sem. Maecenas pharetra vulputate mi eget malesuada. Curabitur elementum, dui a venenatis venenatis, leo leo euismod ipsum, sed bibendum diam nisi eu ligula. In consectetur ullamcorper tortor nec consectetur.

History
Nunc sodales posuere purus. Maecenas cursus libero vel risus scelerisque molestie. Mauris leo erat, pellentesque non auctor in, tristique eu eros. Proin massa felis, gravida non pretium ac, dictum pellentesque nunc. Vivamus eget quam lectus. Praesent vitae iaculis massa. Aenean malesuada ante non nibh posuere maximus. Pellentesque in auctor est. Ut sagittis consectetur dignissim. Morbi auctor urna non iaculis euismod.

In velit libero, condimentum eget aliquet in, venenatis ut erat. Sed euismod interdum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer suscipit imperdiet est, quis iaculis nisl pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus elit. Cras quis erat ultrices, pellentesque neque sit amet, maximus erat.

Phasellus viverra accumsan placerat. Proin ut convallis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi lacinia ligula ipsum, nec porttitor leo hendrerit in. Nulla urna erat, tincidunt eget ex et, feugiat placerat lorem. Curabitur ac risus quam. Nam rhoncus ipsum id quam vulputate tristique. In neque leo, pulvinar in nunc quis, volutpat venenatis libero. Sed tristique vitae erat placerat rutrum. Curabitur congue elit sit amet ligula viverra, id ullamcorper lectus tincidunt. Vivamus id mauris elit.

[/div]

[div class=box2]

Other Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies enim ut ultricies ullamcorper. Nam hendrerit nibh sit amet congue elementum. Cras elementum nec neque vitae faucibus. Morbi sit amet nisi a est imperdiet aliquam sed ut erat. Nulla eu blandit eros. Cras viverra rutrum nibh, in imperdiet nisl commodo et. Mauris facilisis nulla risus, et vestibulum sem blandit nec. Nulla tempor volutpat molestie. Nullam venenatis a turpis in aliquet.

Sed et dolor non purus luctus tempus. Praesent quis lacus sit amet justo lobortis volutpat sed ullamcorper erat. Pellentesque vulputate leo quis posuere commodo. Suspendisse lobortis sapien a massa dapibus, ut commodo elit venenatis. Duis sed euismod lacus. Phasellus pharetra purus vel varius fringilla. Ut dapibus scelerisque congue. In sit amet sapien dolor. Proin luctus euismod risus. Donec vestibulum, leo sit amet iaculis egestas, risus metus maximus dui, nec auctor sem velit sit amet ligula. Donec sodales libero at mi fringilla lobortis. Proin blandit sapien eu dolor dictum, sed imperdiet sem venenatis. Donec tincidunt quis lorem sed pellentesque. Suspendisse tincidunt at ipsum vel suscipit. Nulla rutrum mollis nulla.

[/div][/border][/div][div class=credits]credits RI.a [/div]

Spoiler: code

[nobr]

[class=background]
background:url('https://hdqwalls.com/download/fall-season-anime-artwork-au-1336x768.jpg');
background-size:cover;
padding:5px;
max-width:1070px;
margin:auto;center;
border:0pt solid white;
[/class]

[class=basics]
width:200px;
height:50px;
font-size:12px;
margin-left:100px;
border:0px dashed dark gray;
[/class]

[class=mainbox]
width:380px;
height:500px;
color:#222222;
font-size:12px;
margin:10px 5px 10px 10px;
border:0px solid #727272;
[/class]

[class=box2]
width: 620px;
height: 160px;
color:#222222;
font-size:12px;
margin-left:420px;
margin-top:-190px;
[/class]

[class=credits]
margin:auto;center;
max-width:1070px;
font:Heebo;
font-size:9px;
opacity:0.5;
[/class]

[/nobr]
[div class=background]
[font=Bad Script][color=#ffffff][div class=basics][size=15][center]Name[/center][/size][/div][/color][/font][color=#ffffff][div class=basics][font=Montserrat][color=#828282][fa]fa-calendar[/fa] age [color=transparent]//////////////////[/color][fa]fa-venus-mars[/fa] gender
[fa]fa-info-circle[/fa] race [color=transparent]////////////////////[/color][fa]fa-question[/fa] other[/color][/font][/div][font=Montserrat][color=#828282][/color][/font][/color]
[div class=mainbox][div=padding:5px;overflow:hidden;height:490px;overflow:auto;][font=Montserrat][justify][size=4][color=#999999][b]Personality[/b][/color][/size][color=#999999]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dapibus quam. Nulla dapibus nisl enim, vitae ullamcorper tellus mollis vitae. Nunc malesuada neque nibh, eu dictum urna ullamcorper efficitur. Pellentesque suscipit semper pellentesque. Cras pharetra vulputate feugiat. Duis molestie pretium sagittis. Duis eleifend ligula nibh, quis rhoncus diam elementum sit amet. Pellentesque ante libero, ultricies eget urna eget, euismod tincidunt augue.

Nunc fringilla, risus quis euismod accumsan, mi purus tristique libero, auctor placerat dui metus vel nisl. Sed neque leo, viverra vel rutrum vitae, bibendum quis justo. Quisque mauris nisl, luctus in erat ut, pharetra rhoncus erat. Nulla leo tellus, scelerisque id accumsan non, hendrerit mollis arcu. Mauris non elit mi. Duis bibendum mauris sit amet condimentum auctor. Praesent lobortis molestie dui, quis efficitur sem tempor eu. Vestibulum sed tellus mattis, egestas enim faucibus, pharetra eros. Maecenas non nunc vitae metus molestie finibus. Donec pharetra dapibus augue, id tristique nunc malesuada vitae. Curabitur at finibus turpis. Vestibulum et suscipit sem. Maecenas pharetra vulputate mi eget malesuada. Curabitur elementum, dui a venenatis venenatis, leo leo euismod ipsum, sed bibendum diam nisi eu ligula. In consectetur ullamcorper tortor nec consectetur.

[size=4][color=#999999][b]History[/b][/color][/size][color=#999999]
Nunc sodales posuere purus. Maecenas cursus libero vel risus scelerisque molestie. Mauris leo erat, pellentesque non auctor in, tristique eu eros. Proin massa felis, gravida non pretium ac, dictum pellentesque nunc. Vivamus eget quam lectus. Praesent vitae iaculis massa. Aenean malesuada ante non nibh posuere maximus. Pellentesque in auctor est. Ut sagittis consectetur dignissim. Morbi auctor urna non iaculis euismod.

In velit libero, condimentum eget aliquet in, venenatis ut erat. Sed euismod interdum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer suscipit imperdiet est, quis iaculis nisl pharetra et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus elit. Cras quis erat ultrices, pellentesque neque sit amet, maximus erat.

Phasellus viverra accumsan placerat. Proin ut convallis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi lacinia ligula ipsum, nec porttitor leo hendrerit in. Nulla urna erat, tincidunt eget ex et, feugiat placerat lorem. Curabitur ac risus quam. Nam rhoncus ipsum id quam vulputate tristique. In neque leo, pulvinar in nunc quis, volutpat venenatis libero. Sed tristique vitae erat placerat rutrum. Curabitur congue elit sit amet ligula viverra, id ullamcorper lectus tincidunt. Vivamus id mauris elit.[/color][/color][/justify][color=#999999][/color][/font][/div][font=Montserrat][color=#999999][/color][/font][/div][font=Montserrat][color=#999999]

[div class=box2][div=padding:5px;overflow:hidden;height:150px;overflow:auto;][font=Montserrat][center][heightrestrict=150][img]https://media.giphy.com/media/8HXkVIqwmPp9C/source.gif[/img][/heightrestrict][/center][heightrestrict=150][/heightrestrict][size=4][justify][color=#999999][b]Other[/b][/color][/justify][/size][justify][color=#999999] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies enim ut ultricies ullamcorper. Nam hendrerit nibh sit amet congue elementum. Cras elementum nec neque vitae faucibus. Morbi sit amet nisi a est imperdiet aliquam sed ut erat. Nulla eu blandit eros. Cras viverra rutrum nibh, in imperdiet nisl commodo et. Mauris facilisis nulla risus, et vestibulum sem blandit nec. Nulla tempor volutpat molestie. Nullam venenatis a turpis in aliquet.

Sed et dolor non purus luctus tempus. Praesent quis lacus sit amet justo lobortis volutpat sed ullamcorper erat. Pellentesque vulputate leo quis posuere commodo. Suspendisse lobortis sapien a massa dapibus, ut commodo elit venenatis. Duis sed euismod lacus. Phasellus pharetra purus vel varius fringilla. Ut dapibus scelerisque congue. In sit amet sapien dolor. Proin luctus euismod risus. Donec vestibulum, leo sit amet iaculis egestas, risus metus maximus dui, nec auctor sem velit sit amet ligula. Donec sodales libero at mi fringilla lobortis. Proin blandit sapien eu dolor dictum, sed imperdiet sem venenatis. Donec tincidunt quis lorem sed pellentesque. Suspendisse tincidunt at ipsum vel suscipit. Nulla rutrum mollis nulla.[/color][/justify][/font][/div][/div][/color][/font][/border][font=Montserrat][color=#999999][/color][/font][/div][div class=credits][comment]DO NOT REMOVE[/comment]credits [USER=55064]@RI.a[/USER][/div]

 

[RI.a]

[class=header] width: 250px; height: 90px; background#ffffff; font: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; opacity:1.0; [/class]
[div class=header]Dodg-y
IC post?
Originally meant to be a CS. The idea I had had vertical tabs and the main spill of text would be where it is-ish. But idk how. Someone teach me pls T T
Not mobile friendly/compatible.
Please keep the creds!
Again, I don't own the image.
[/div]

Spoiler: code

 [nobr]
[class=background]
width:600px;
height:360px;
margin:auto;
margin:center;
background:url('https://i.imgur.com/ZdfgR5K.png');
background-size:100%;
[/class]

[class=textbox]
width:300px;
height:300px;
padding:5px;
overflow:hidden;
overflow:auto;
font:Karla;
font-size:12px;
background:white;
border:1px solid #dddddd;
opacity:0.8;
margin-left:-50px;
[/class]

[class=minibox]
width:70px;
height:40px;
padding:10px;
font:Karla;
font-size:11px;
text-align:right;
background:white;
border:1px solid #dddddd;
opacity:0.5;
margin-left:510px;
margin-top:-60px;
[/class]

[class=credits]
max-width:600px;
margin:auto;
font: Heebo;
font-size: 10px;
opacity:0.3;
[/class]
[/nobr]

[div class=background][div=width:2px;height:340px;background:black;position:absolute;margin-left:-60px;margin-top:10px;][/div][div=width:5px;height:340px;background:black;position:absolute;margin-left:-55px;margin-top:20px;][/div]
[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit, sem quis laoreet malesuada, arcu sem porttitor turpis, ut pharetra lacus odio et metus. Duis accumsan pretium malesuada. Phasellus non dui eros. Curabitur interdum ut leo faucibus feugiat. Quisque fermentum enim lacus, ac consequat nunc placerat et. Etiam laoreet venenatis felis sed interdum. Ut molestie sem vel aliquam efficitur. Maecenas fermentum dui nec ipsum lacinia, vel faucibus nibh volutpat. Nulla facilisi. Etiam viverra, lacus non rutrum fermentum, dolor leo facilisis libero, eget gravida ex urna vel nunc. Morbi eget massa sit amet magna malesuada faucibus in non lectus. Phasellus fringilla tortor id nibh blandit aliquam. Cras vitae arcu orci. Vivamus fringilla dapibus magna, non tempor dui efficitur eu.

Aliquam semper ut lacus a malesuada. Vivamus pretium auctor nibh, et semper est commodo eu. Phasellus pellentesque erat vitae augue pretium vestibulum. Phasellus eget congue lectus, ut cursus diam. Sed auctor tempus dolor, a molestie ipsum convallis eu. Mauris nec mi dui. Nullam facilisis massa sit amet erat mollis vestibulum. Aenean finibus varius tellus, vitae ornare nibh eleifend ac.

Donec quis ligula dictum, mollis purus sit amet, efficitur sem. Aliquam nec tortor pharetra, porta ex eget, vehicula ante. Proin et enim sed nulla congue lobortis nec quis lacus. In metus augue, placerat at quam vel, dignissim blandit elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque et velit eu semper. Phasellus fringilla erat odio, et efficitur nibh commodo a. Etiam sodales et eros non iaculis. Donec interdum tortor quis orci faucibus, maximus varius tellus aliquet. Vestibulum aliquet sapien ac risus accumsan, vel porta enim ornare. In velit libero, dapibus ut orci ac, porta tempus leo. Aliquam erat urna, dignissim at nisl vel, tristique sagittis nisl. Phasellus molestie viverra pellentesque. Suspendisse potenti. Proin maximus efficitur sollicitudin.

[/div]
[div class=minibox]NAME? LOCATION? MENTIONS?
[/div]

[/div][comment]DO NOT REMOVE[/comment][div class=credits]credits [USER=55064]@RI.a[/USER] [/div]

[class=background] width:600px; height:360px; margin:auto; margin:center; background:url('https://i.imgur.com/ZdfgR5K.png'); background-size:100%; [/class] [class=textbox] width:300px; height:300px; padding:5px; overflow:hidden; overflow:auto; font:Karla; font-size:12px; background:white; border:1px solid #dddddd; opacity:0.8; margin-left:-50px; [/class] [class=minibox] width:70px; height:40px; padding:10px; font:Karla; font-size:11px; text-align:right; background:white; border:1px solid #dddddd; opacity:0.5; margin-left:510px; margin-top:-60px; [/class] [class=credits] max-width:600px; margin:auto; font: Heebo; font-size: 10px; opacity:0.3; [/class]

[div class=background]

[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit, sem quis laoreet malesuada, arcu sem porttitor turpis, ut pharetra lacus odio et metus. Duis accumsan pretium malesuada. Phasellus non dui eros. Curabitur interdum ut leo faucibus feugiat. Quisque fermentum enim lacus, ac consequat nunc placerat et. Etiam laoreet venenatis felis sed interdum. Ut molestie sem vel aliquam efficitur. Maecenas fermentum dui nec ipsum lacinia, vel faucibus nibh volutpat. Nulla facilisi. Etiam viverra, lacus non rutrum fermentum, dolor leo facilisis libero, eget gravida ex urna vel nunc. Morbi eget massa sit amet magna malesuada faucibus in non lectus. Phasellus fringilla tortor id nibh blandit aliquam. Cras vitae arcu orci. Vivamus fringilla dapibus magna, non tempor dui efficitur eu.

Aliquam semper ut lacus a malesuada. Vivamus pretium auctor nibh, et semper est commodo eu. Phasellus pellentesque erat vitae augue pretium vestibulum. Phasellus eget congue lectus, ut cursus diam. Sed auctor tempus dolor, a molestie ipsum convallis eu. Mauris nec mi dui. Nullam facilisis massa sit amet erat mollis vestibulum. Aenean finibus varius tellus, vitae ornare nibh eleifend ac.

Donec quis ligula dictum, mollis purus sit amet, efficitur sem. Aliquam nec tortor pharetra, porta ex eget, vehicula ante. Proin et enim sed nulla congue lobortis nec quis lacus. In metus augue, placerat at quam vel, dignissim blandit elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque et velit eu semper. Phasellus fringilla erat odio, et efficitur nibh commodo a. Etiam sodales et eros non iaculis. Donec interdum tortor quis orci faucibus, maximus varius tellus aliquet. Vestibulum aliquet sapien ac risus accumsan, vel porta enim ornare. In velit libero, dapibus ut orci ac, porta tempus leo. Aliquam erat urna, dignissim at nisl vel, tristique sagittis nisl. Phasellus molestie viverra pellentesque. Suspendisse potenti. Proin maximus efficitur sollicitudin.

[/div]
[div class=minibox]NAME? LOCATION? MENTIONS?
[/div]

[/div][div class=credits]credits RI.a [/div]

 

[RI.a]

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Social life ???
I want to thank pasta Your div tutorial thread helped A LOT! tysm for your awesomeness! Anyone struggling with tabs, divs etc should check it out. Link
Honesetly, idk what this is. OMG IT IS MOBILE FRIENDLY WTF. At least on my phone. Not sure about smaller screens! The code itself is probably very messy. This is like testing what I have learnt and can do so far. So use this at your own risk. I have a couple of other CS templates in my workshop, but idk if I would post them.
New features: tabs! overlay text! shadow! positions! yayyyy
[class= mediaboxes] These have no fixed height, so you can add/write however much info you want in these.
None of the pictures used here are mine![/div]
[class=background] margin:auto;center; width: 350px; height: 500px; background:#e2c0b7; padding:0px; [/class] [class=image] width:330px; height:480px; position:relative; background:url('http://img.hb.aicdn.com/a8ce034e45ad73dae9ae39addbac854542ce08661359c-8T7Gpk_fw658') no-repeat; background-size:100%; [/class] [class=tabcontent] height:435px; margin:auto;center; padding:0px; font-family:Montserrat; font-size:10px; color:#636363; text-align:justify; [/class] [class=overlaytext] width:100px; font-size:15px; color:#efdcdc; transform:rotate(-30deg); text-shadow: 1px 2px 0px black; position:relative; top:-440px; left:240px; [/class] [class=mediabox] background:white; width:320px; font-family:Montserrat; font-size:9px; color:black; [/class] [class=profilepic] width:20px; height:20px; background:url('http://img.hb.aicdn.com/a8ce034e45ad73dae9ae39addbac854542ce08661359c-8T7Gpk_fw658') no-repeat; background-size:100%; border-radius:50px; [/class] [class=tabcover] width:330px; height:35px; position:relative; background:#e2c0b7; left:0px; top:-460px; pointer-events:none; font:Raleway; font-size:12px; color:#f0888c; padding:10px; [/class] [class=credit] margin:auto;center; width:350px; height:5px; background:white; font-family:Heebo; font-size:9px; color:#aaa; position:relative; top:-20px; [/class]
[div class=background]

• T01

• [div class=tabcontent][div class=image]

• T01
• T02
• T03
• T04

• [div class=overlaytext]ニャアー[/div]//////////[/div]
• [div class=tabcontent]
  
  [div class=mediabox]

  [div class=profilepic]
  _username
  
  //////
  1, 039 likes
  _username spring//ハル//春
  load more comments
  5 hours ago
  
  
  [div class=profilepic]
  [/div]
  _username
  
  //////
  2, 055 likes
  _username mama's boy
  load more comments
  10 hours ago
  
  [/div]
  Basics
  Name
  Nickname(s)
  Age
  Birthday
  Occupation
  Style
  [/div][/div]
• [div class=tabcontent]
  Personality
  Virtues
  Vices
  Likes
  Dislikes
  
  [div class=mediabox]

  [div class=profilepic]
  nickname @_username 15m
  Lost in Japan by @ShawnMendes is everything
  
  //102/////92/////93
  [/div]
  [/div][/div]
• [div class=tabcontent]
  [div class=mediabox]

  

  //

  
  

  VLOG #202 | KOTATSU LIFE////////////////////////\\\\\\\\\\\\\\\\
  60K views
  //////////////////////

  
  

  
  
  

  [div class=profilepic]
  _username/////////////////\\\\\\\\\\\\\\\\SUBSCRIBE
  5K subscribers
  
  
  Load all comments
  
  [/div]
  History
  Other
  [/div][/div]

[/div]
[div class=tabcover]

////////////////////////////////////////////////////////////

[/div][/div]
[div class=credit]credits RI.a [/div]

Spoiler: code

[nobr]
[class=background]
margin:auto;center;
width: 350px;
height: 500px;
background:#e2c0b7;
padding:0px;
[/class]

[class=image]
width:330px;
height:480px;
position:relative;
background:url('http://img.hb.aicdn.com/a8ce034e45ad73dae9ae39addbac854542ce08661359c-8T7Gpk_fw658') no-repeat;
background-size:100%;
[/class]

[class=tabcontent]
height:435px;
margin:auto;center;
padding:0px;
font-family:Montserrat;
font-size:10px;
color:#636363;
text-align:justify;
[/class]

[class=overlaytext]
width:100px;
font-size:15px;
color:#efdcdc;
transform:rotate(-30deg);
text-shadow: 1px 2px 0px black;
position:relative;
top:-440px;
left:240px;
[/class]

[class=mediabox]
background:white;
width:320px;
font-family:Montserrat;
font-size:9px;
color:black;
[/class]

[class=profilepic]
width:20px;
height:20px;
background:url('http://img.hb.aicdn.com/a8ce034e45ad73dae9ae39addbac854542ce08661359c-8T7Gpk_fw658') no-repeat;
background-size:100%;
border-radius:50px;
[/class]

[class=tabcover]
width:330px;
height:35px; 
position:relative;
background:#e2c0b7;
left:0px;
top:-460px;
pointer-events:none;
font:Raleway;
font-size:12px;
color:#f0888c;
padding:10px;
[/class]

[class=credit]
margin:auto;center;
width:350px;
height:5px;
background:white;
font-family:Heebo;
font-size:9px;
color:#aaa;
position:relative;
top:-20px;
[/class]
[/nobr]
[div class=background][div=width:350px;height:435px;position:relative;left:-5px;][tabs][tab=T01][div class=tabcontent][div class=image][/div][div class=overlaytext]ニャアー[fa]fa-heart[/fa][/div][color=transparent]//////////[/color][/div][/tab][tab=T02][div class=tabcontent][div=height:435px;overflow-y:scroll;]
[div class=mediabox][div=position:relative;left:5px;top:5px;][div class=profilepic][/div][/div][div=position:relative;top:-10px;left:30px;][b]_username[/b][/div][img]https://i.imgur.com/zZ5OpxX.jpg?1[/img][div=position:relative;left:5px;top:5px;][fa]fa-heart[/fa][color=transparent]///[/color][fa]fa-comment[/fa][color=transparent]///[/color][fa]fa-paper-plane[/fa]
[b]1, 039 likes[/b]
[b]_username[/b] spring//ハル//春
[color=#ddd]load more comments
5 hours ago[/color][/div]
[div=position:relative;left:5px;top:5px;][div class=profilepic][/div][/div][div=position:relative;top:-10px;left:30px;][b]_username[/b][/div][img]http://i.imgur.com/psKUM8E.gif?1[/img][div=position:relative;left:5px;top:5px;][fa]fa-heart[/fa][color=transparent]///[/color][fa]fa-comment[/fa][color=transparent]///[/color][fa]fa-paper-plane[/fa]
[b]2, 055 likes[/b]
[b]_username[/b] mama's boy
[color=#ddd]load more comments
10 hours ago[/color][/div]
[/div]
Basics
Name
Nickname(s)
Age
Birthday
Occupation
Style
[/div][/div][/tab][tab=T03][div class=tabcontent][div=height:435px;overflow-y:scroll;]Personality
Virtues
Vices
Likes
Dislikes

[div class=mediabox][div=position:relative;top:5px;left:5px;][div class=profilepic][/div][/div][div=position:relative;top:-10px;left:35px;][b]nickname[/b] [color=#ccc]@_username 15m[/color] 
Lost in Japan by @ShawnMendes is everything

[fa]fa-comment[/fa][color=transparent]//[/color]102[color=transparent]///[/color][fa]fa-retweet[/fa][color=transparent]//[/color]92[color=transparent]///[/color][fa]fa-heart[/fa][color=transparent]//[/color]93[/div][/div]
[/div][/div][/tab][tab=T04][div class=tabcontent][div=height:435px;overflow-y:scroll;][div class=mediabox][img]https://cdn.animeout.xyz/wp-content/uploads/2017/10/imouto-sae-ireba-ii.jpg[/img][div=position:relative;left:300px;top:-20px;][fa]fa-expand[/fa][/div][div=position:relative;left:10px;top:-10px;][fa]fa-play[/fa][color=transparent]//[/color][fa]fa-fast-forward[/fa][/div][div=width:270px;height:1px;background:#777;position:relative;top:-17px;left:40px;][/div]
[div=position:relative;left:5px;]VLOG #202 | KOTATSU LIFE[color=transparent]////////////////////////\\\\\\\\\\\\\\\\[/color][fa]fa-caret-down[/fa]
[color=#bbb]60K views
[size=12][color=transparent]//[/color][fa]fa-thumbs-up[/fa][color=transparent]///////[/color][fa]fa-thumbs-down[/fa][color=transparent]///////[/color][fa]fa-share[/fa][color=transparent]//////[/color][fa]fa-plus[/fa][/size][/color][/div]
[div=width:320px;height:1px;background:#ccc;][/div]

[div=position:relative;left:10px;][div class=profilepic][/div][/div][div=position:relative;top:-22px;left:40px;] _username[color=transparent]/////////////////\\\\\\\\\\\\\\\\[/color]SUBSCRIBE [fa]fa-bell[/fa]
[color=#ccc]5K subscribers[/color][/div][div=width:320px;height:1px;background:#ccc;][/div]
[div=position:relative;left:10px;][color=#ccc]Load all comments[/color][/div]
[/div]
History
Other
[/div][/div][/tab]
[/tabs][/div]
[div class=tabcover]
[div=position:relative;top:-10px;][color=transparent]////////////[/color][fa]fa-home[/fa][color=transparent]////////////////[/color][fa]fa-instagram[/fa][color=transparent]////////////////[/color][fa]fa-twitter[/fa][color=transparent]////////////////[/color][fa]fa-youtube[/fa][/div][/div][/div]
[div class=credit][comment]DO NOT REMOVE[/comment]credits [USER=55064]@RI.a[/USER] [/div]

 

[Cliffspiracy]

RI.a : I might use that first and second code, if that's alright with you.

 

[RI.a]

RI.a : I might use that first and second code, if that's alright with you.

Of course! ^^ Thank you for asking!

 

[AnimeGenork]

I honestly might use that IC code sometime
If only because my own codes are no

 

[RI.a]

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]IC code for An Otaku's Life
Mobile-friendly maybe?
New features: Hovers! Hover over the name!
Finally figured it out! omg Now to wrap my head around animations! orz
I don't own the image.[/div]
[class=wrapper] width:80vw; max-width:300px; height:420px; margin:auto;center; flex-wrap:wrap; border:1px solid #840505; overflow:hidden; background:url('https://i.imgur.com/NwqrMkn.jpg'); background-size:100%; z-index:3px; [/class] [class=scroll] width:90vw; max-width:310px; height:100%; overflow-y:auto; [/class] [class=textbox] width:80vw; max-width:300px; font-family:Montserrat; font-size:12px; color:#212121; padding:2px; background: rgba(255, 255, 255, 0.9); position:relative; top:420px; [/class] [class=overlay] width:80vw; max-width:320px; margin:auto;center; position:relative; top:-461px; left:-10px; font-family:Montserrat; font-size:25px; color:#fff; text-shadow:3px 2px 0px #840505; z-index:2px; [/class] [class=tags] opacity:0.0; width:80vw; max-width:320px; margin:auto;center; position:relative; top:-490px; left:-10px; text-align:right; font-family:Montserrat; font-size:10px; color:#ccc; z-index:3px; transition: all 0.3s ease; [/class] [class name=tags state=hover] opacity:1.0; transform: translateY(20px); [/class] [class=credit] width:80vw; max-width:300px; opacity:0.5; font-family:Heebo; font-size:8px; margin:auto;center; [/class]
[div class=wrapper][div class=scroll]
[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur laoreet fermentum molestie. Duis auctor id tortor sed pretium. Pellentesque congue ex eu dolor condimentum sodales at eu dui. Aenean rhoncus vehicula nisi eget facilisis. Nullam libero dui, bibendum ac fermentum quis, auctor non neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis non sapien quis rhoncus. Etiam interdum erat nibh, nec pharetra diam ullamcorper et. Sed ut imperdiet dui, sit amet varius elit. In sodales ante vel rutrum pharetra. Praesent porta tortor eget gravida bibendum. Proin venenatis et eros ac pellentesque. Integer ligula massa, elementum ut justo non, volutpat faucibus sem.

Aenean eu imperdiet enim. Ut at fermentum lorem. Suspendisse potenti. Mauris eleifend rhoncus nisi, a ullamcorper urna interdum sed. Aliquam in nunc ullamcorper, efficitur felis ac, aliquet justo. Fusce cursus erat nisl, vitae elementum arcu auctor quis. Praesent ultricies sed massa et imperdiet. Praesent ut leo odio. Duis et arcu eget magna congue iaculis in non felis. Mauris rutrum velit nec ultricies faucibus. Curabitur massa nibh, euismod in mattis non, condimentum quis risus. Suspendisse vel purus euismod ipsum ornare laoreet vel sit amet felis. Aliquam tristique augue nec tincidunt dapibus. Nullam nec placerat sem. Integer eget sem purus.

Cras nec mauris eget dolor commodo ultrices sed id tortor. Integer diam mi, fermentum quis commodo at, venenatis quis erat. Praesent in ex dictum, placerat magna vitae, pellentesque est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a est viverra, vestibulum eros vel, congue nibh. Praesent rutrum lacus consequat sapien vehicula condimentum. Nulla diam felis, tincidunt vel condimentum eget, gravida suscipit eros. Duis ut lobortis nibh. Mauris at risus urna. Etiam rutrum purus sed sem tempor, et aliquam tortor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla, erat at faucibus viverra, ipsum ex cursus est, eget cursus ligula nulla ut eros. Curabitur in pretium sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[/div][/div][/div][div class=credit]credits RI.a [/div][div class=overlay]Character's Name[/div][div class=tags]Location?
@mentions here[/div]

Spoiler: code

[nobr]
[class=wrapper]
width:80vw;
max-width:300px;
height:420px;
margin:auto;center;
flex-wrap:wrap;
border:1px solid #840505;
overflow:hidden;
background:url('https://i.imgur.com/NwqrMkn.jpg');
background-size:100%;
z-index:3px;
[/class]

[class=scroll]
width:90vw;
max-width:310px;
height:100%;
overflow-y:auto;
[/class]

[class=textbox]
width:80vw;
max-width:300px;
font-family:Montserrat;
font-size:12px;
color:#212121;
padding:2px;
background: rgba(255, 255, 255, 0.9);
position:relative;
top:420px;
[/class]

[class=overlay]
width:80vw;
max-width:320px;
margin:auto;center;
position:relative;
top:-461px;
left:-10px;
font-family:Montserrat;
font-size:25px;
color:#fff;
text-shadow:3px 2px 0px #840505;
z-index:2px;
[/class]

[class=tags]
opacity:0.0;
width:80vw;
max-width:320px;
margin:auto;center;
position:relative;
top:-490px;
left:-10px;
text-align:right;
font-family:Montserrat;
font-size:10px;
color:#ccc;
z-index:3px;
transition: all 0.3s ease;
[/class]

[class name=tags state=hover]
opacity:1.0; 
transform: translateY(20px);
[/class]

[class=credit]
width:80vw;
max-width:300px;
opacity:0.5;
font-family:Heebo;
font-size:8px;
margin:auto;center;
[/class]
[/nobr]
[div class=wrapper][div class=scroll]
[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur laoreet fermentum molestie. Duis auctor id tortor sed pretium. Pellentesque congue ex eu dolor condimentum sodales at eu dui. Aenean rhoncus vehicula nisi eget facilisis. Nullam libero dui, bibendum ac fermentum quis, auctor non neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis non sapien quis rhoncus. Etiam interdum erat nibh, nec pharetra diam ullamcorper et. Sed ut imperdiet dui, sit amet varius elit. In sodales ante vel rutrum pharetra. Praesent porta tortor eget gravida bibendum. Proin venenatis et eros ac pellentesque. Integer ligula massa, elementum ut justo non, volutpat faucibus sem.

Aenean eu imperdiet enim. Ut at fermentum lorem. Suspendisse potenti. Mauris eleifend rhoncus nisi, a ullamcorper urna interdum sed. Aliquam in nunc ullamcorper, efficitur felis ac, aliquet justo. Fusce cursus erat nisl, vitae elementum arcu auctor quis. Praesent ultricies sed massa et imperdiet. Praesent ut leo odio. Duis et arcu eget magna congue iaculis in non felis. Mauris rutrum velit nec ultricies faucibus. Curabitur massa nibh, euismod in mattis non, condimentum quis risus. Suspendisse vel purus euismod ipsum ornare laoreet vel sit amet felis. Aliquam tristique augue nec tincidunt dapibus. Nullam nec placerat sem. Integer eget sem purus.

Cras nec mauris eget dolor commodo ultrices sed id tortor. Integer diam mi, fermentum quis commodo at, venenatis quis erat. Praesent in ex dictum, placerat magna vitae, pellentesque est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a est viverra, vestibulum eros vel, congue nibh. Praesent rutrum lacus consequat sapien vehicula condimentum. Nulla diam felis, tincidunt vel condimentum eget, gravida suscipit eros. Duis ut lobortis nibh. Mauris at risus urna. Etiam rutrum purus sed sem tempor, et aliquam tortor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla, erat at faucibus viverra, ipsum ex cursus est, eget cursus ligula nulla ut eros. Curabitur in pretium sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[/div][/div][/div][div class=credit][comment]please do not remove[/comment]credits [USER=55064]@RI.a[/USER][/div][div class=overlay]Character's Name[/div][div class=tags]Location?
@mentions here[/div]

 

[Makomin]

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]IC code for An Otaku's Life
Mobile-friendly maybe?
New features: Hovers! Hover over the name!
Finally figured it out! omg Now to wrap my head around animations! orz
I don't own the image.[/div]
[class=wrapper] width:80vw; max-width:300px; height:420px; margin:auto;center; flex-wrap:wrap; border:1px solid #840505; overflow:hidden; background:url('https://i.imgur.com/NwqrMkn.jpg'); background-size:100%; z-index:3px; [/class] [class=scroll] width:90vw; max-width:310px; height:100%; overflow-y:auto; [/class] [class=textbox] width:80vw; max-width:300px; font-family:Montserrat; font-size:12px; color:#212121; padding:2px; background: rgba(255, 255, 255, 0.9); position:relative; top:420px; [/class] [class=overlay] width:80vw; max-width:320px; margin:auto;center; position:relative; top:-461px; left:-10px; font-family:Montserrat; font-size:25px; color:#fff; text-shadow:3px 2px 0px #840505; z-index:2px; [/class] [class=tags] opacity:0.0; width:80vw; max-width:320px; margin:auto;center; position:relative; top:-490px; left:-10px; text-align:right; font-family:Montserrat; font-size:10px; color:#ccc; z-index:3px; transition: all 0.3s ease; [/class] [class name=tags state=hover] opacity:1.0; transform: translateY(20px); [/class] [class=credit] width:80vw; max-width:300px; opacity:0.5; font-family:Heebo; font-size:8px; margin:auto;center; [/class]
[div class=wrapper][div class=scroll]
[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur laoreet fermentum molestie. Duis auctor id tortor sed pretium. Pellentesque congue ex eu dolor condimentum sodales at eu dui. Aenean rhoncus vehicula nisi eget facilisis. Nullam libero dui, bibendum ac fermentum quis, auctor non neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis non sapien quis rhoncus. Etiam interdum erat nibh, nec pharetra diam ullamcorper et. Sed ut imperdiet dui, sit amet varius elit. In sodales ante vel rutrum pharetra. Praesent porta tortor eget gravida bibendum. Proin venenatis et eros ac pellentesque. Integer ligula massa, elementum ut justo non, volutpat faucibus sem.

Aenean eu imperdiet enim. Ut at fermentum lorem. Suspendisse potenti. Mauris eleifend rhoncus nisi, a ullamcorper urna interdum sed. Aliquam in nunc ullamcorper, efficitur felis ac, aliquet justo. Fusce cursus erat nisl, vitae elementum arcu auctor quis. Praesent ultricies sed massa et imperdiet. Praesent ut leo odio. Duis et arcu eget magna congue iaculis in non felis. Mauris rutrum velit nec ultricies faucibus. Curabitur massa nibh, euismod in mattis non, condimentum quis risus. Suspendisse vel purus euismod ipsum ornare laoreet vel sit amet felis. Aliquam tristique augue nec tincidunt dapibus. Nullam nec placerat sem. Integer eget sem purus.

Cras nec mauris eget dolor commodo ultrices sed id tortor. Integer diam mi, fermentum quis commodo at, venenatis quis erat. Praesent in ex dictum, placerat magna vitae, pellentesque est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a est viverra, vestibulum eros vel, congue nibh. Praesent rutrum lacus consequat sapien vehicula condimentum. Nulla diam felis, tincidunt vel condimentum eget, gravida suscipit eros. Duis ut lobortis nibh. Mauris at risus urna. Etiam rutrum purus sed sem tempor, et aliquam tortor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla, erat at faucibus viverra, ipsum ex cursus est, eget cursus ligula nulla ut eros. Curabitur in pretium sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[/div][/div][/div][div class=credit]credits RI.a [/div][div class=overlay]Character's Name[/div][div class=tags]Location?
@mentions here[/div]

Spoiler: code

[class=wrapper] width:80vw; max-width:300px; height:420px; margin:auto;center; flex-wrap:wrap; border:1px solid #840505; overflow:hidden; background:url('https://i.imgur.com/NwqrMkn.jpg'); background-size:100%; z-index:3px; [/class] [class=scroll] width:90vw; max-width:310px; height:100%; overflow-y:auto; [/class] [class=textbox] width:80vw; max-width:300px; font-family:Montserrat; font-size:12px; color:#212121; padding:2px; background: rgba(255, 255, 255, 0.9); position:relative; top:420px; [/class] [class=overlay] width:80vw; max-width:320px; margin:auto;center; position:relative; top:-461px; left:-10px; font-family:Montserrat; font-size:25px; color:#fff; text-shadow:3px 2px 0px #840505; z-index:2px; [/class] [class=tags] opacity:0.0; width:80vw; max-width:320px; margin:auto;center; position:relative; top:-490px; left:-10px; text-align:right; font-family:Montserrat; font-size:10px; color:#ccc; z-index:3px; transition: all 0.3s ease; [/class] [class name=tags state=hover] opacity:1.0; transform: translateY(20px); [/class] [class=credit] width:80vw; max-width:300px; opacity:0.5; font-family:Heebo; font-size:8px; margin:auto;center; [/class]
[div class=wrapper][div class=scroll]
[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur laoreet fermentum molestie. Duis auctor id tortor sed pretium. Pellentesque congue ex eu dolor condimentum sodales at eu dui. Aenean rhoncus vehicula nisi eget facilisis. Nullam libero dui, bibendum ac fermentum quis, auctor non neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis non sapien quis rhoncus. Etiam interdum erat nibh, nec pharetra diam ullamcorper et. Sed ut imperdiet dui, sit amet varius elit. In sodales ante vel rutrum pharetra. Praesent porta tortor eget gravida bibendum. Proin venenatis et eros ac pellentesque. Integer ligula massa, elementum ut justo non, volutpat faucibus sem.

Aenean eu imperdiet enim. Ut at fermentum lorem. Suspendisse potenti. Mauris eleifend rhoncus nisi, a ullamcorper urna interdum sed. Aliquam in nunc ullamcorper, efficitur felis ac, aliquet justo. Fusce cursus erat nisl, vitae elementum arcu auctor quis. Praesent ultricies sed massa et imperdiet. Praesent ut leo odio. Duis et arcu eget magna congue iaculis in non felis. Mauris rutrum velit nec ultricies faucibus. Curabitur massa nibh, euismod in mattis non, condimentum quis risus. Suspendisse vel purus euismod ipsum ornare laoreet vel sit amet felis. Aliquam tristique augue nec tincidunt dapibus. Nullam nec placerat sem. Integer eget sem purus.

Cras nec mauris eget dolor commodo ultrices sed id tortor. Integer diam mi, fermentum quis commodo at, venenatis quis erat. Praesent in ex dictum, placerat magna vitae, pellentesque est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a est viverra, vestibulum eros vel, congue nibh. Praesent rutrum lacus consequat sapien vehicula condimentum. Nulla diam felis, tincidunt vel condimentum eget, gravida suscipit eros. Duis ut lobortis nibh. Mauris at risus urna. Etiam rutrum purus sed sem tempor, et aliquam tortor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla, erat at faucibus viverra, ipsum ex cursus est, eget cursus ligula nulla ut eros. Curabitur in pretium sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[/div][/div][/div][div class=credit]credits RI.a [/div][div class=overlay]Character's Name[/div][div class=tags]Location?
@mentions here[/div][/code]

Hi! Your codes are lovely, first and foremost and congrats on getting featured on RPN's newsletter. c:

If it's alright, can I use this coding for a rp I'm in? Also, I can't see the codes. X)

 

[RI.a]

Hi! Your codes are lovely, first and foremost and congrats on getting featured on RPN's newsletter. c:

If it's alright, can I use this coding for a rp I'm in? Also, I can't see the codes. X)

Thank youuuu

oh god I'll change that right now. i'm so sorry

And of course you can! ^^ Just keep the credits please haha

 

[Makomin]

Thank youuuu

oh god I'll change that right now. i'm so sorry

And of course you can! ^^ Just keep the credits please haha

Of course! And thanks again. c:

 

[RI.a]

Of course! And thanks again. c:

Thanks hehe. I've changed it now, so you should be able to see the code. ^^

 

[Makomin]

Thanks hehe. I've changed it now, so you should be able to see the code. ^^

HDBCBDH THANK.

You're so wonderful.

 

[RI.a]

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Good Morning CS
Not mobile-friendly
New features: animation, script, clip-paths.
EDIT: I FINALLY FIXED IT. ENJOY! PLEASE LEAVE THE CREDITS. THANK YOU ^^
Thank you to Alteras senpai for being so patient and answering all my queries! There's something glitching up the script. I'm not sure what. :/ So I'm not going to include the code for now. If you are a kind soul and are willing to find out what's going on, bless you. And you have my eternal thanks if you solve wtv is going on hahahha If you want to use it anyway, go ahead. You can remove the background and replace it with your own etc. I've added a "class=centerimage" for your character image so you just gotta add the image url into that and add it into the class. Toggle with the dims if you wish. (:
I don't own the image.[/div]
[class=background] width:900px; height:60vh; background:url('https://i.imgur.com/tV41r9H.jpg') no-repeat; background-size:100%; overflow:hidden; display:flex; flex-wrap:wrap; margin:auto;center; [/class] [class=loadpage] width:900px; height:60vh; background:black; opacity:0.8; position:absolute; align-self:flex-start; [/class] [class=greeting] width:350px; height:50px; margin:auto; margin-top:20vh; font-family:Gothic A1, regular; font-size:3em; color:#99f3ff; text-align:center; [/class] [class=enter] width:75px; font-family:Unica One, display; font-size;0.5em; color:white; text-align:center; border:1px solid #99f3ff; padding:.3em; cursor:pointer; margin:auto; margin-top:10px; transition:all .3s ease-in; animation:{post_id}flash 3s linear infinite; [/class] [class name=enter state=hover] letter-spacing:0.1em; [/class] [animation=flash] [keyframe=0]opacity:0.2;[/keyframe] [keyframe=25]opacity:0.6;[/keyframe] [keyframe=50]opacity:0.3;[/keyframe] [keyframe=75]opacity:0.7;[/keyframe] [keyframe=100]opacity:0.2;[/keyframe] [/animation] [class=slider] width:270px; height:100%; clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%); background:white; opacity:0.6; padding:1em; align-self:flex-start; display:flex; flex-direction:column; justify-content:space-evenly; animation-name:{post_id}slideright; animation-duration:1.2s; animation-timing-function:ease-out; animation-delay:0s; animation-direction:normal; [/class] [animation=slideright] [keyframe=0]transform:translateX(-100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=centerimage] clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%); width:230px; height:100%; background-size:100%; background-position:center; background-repeat:no-repeat; opacity:0.5; [/class] [class=contentwrap] width:369px; height:101%; background:white; clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%); opacity:0.9; [/class] [class=slidein] animation:{post_id}slideleft 1.2s ease-in-out 1; [/class] [animation=slideleft] [keyframe=0]transform:translateX(100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=Tabs] width:210px; padding:0.5em; border:1px solid #bbb; font-family:Unica One; font-size:1em; text-align:center; color:#222; text-shadow:1px 1px 0px #99f3ff; letter-spacing:.6em; transition:all 0.3s linear; cursor:pointer; [/class] [class name=Tabs state=hover] letter-spacing:0.8em; [/class] [class=scrollbox] width:338px; height:90%; overflow-y:scroll; padding:.8em; margin-left:15px; [/class] [class=text] font-family:Karla, regular; font-size:0.8em; color:black; display:inline-block; margin-left: 5px; [/class] [class=title] display:inline-block; font-family:Unica One, display; font-size:0.8em; color:black; text-shadow:1px 1px 0px #99f3ff; [/class] [script class=enter on=click] fadeOut 800 loadpage show slider addClass slidein contentwrap show contentwrap show centerimage [/script] [script class=tab01 on=click] fadeIn 500 page01 hide page02 hide page03 hide page04 [/script] [script class=none] hide contentwrap hide slider hide centerimage [/script] [script class=tab02 on=click] fadeIn 500 page02 hide page01 hide page03 hide page04 [/script] [script class=tab03 on=click] fadeIn 500 page03 hide page01 hide page02 hide page04 [/script] [script class=tab04 on=click] fadeIn 500 page04 hide page01 hide page02 hide page03 [/script]
[div class=background][div class=slider][div class="Tabs tab01"]basic[/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][div class="Tabs tab04"]other[/div][/div][div class=centerimage][/div][div class=contentwrap][div class="scrollbox page01"][div class=title]requisite[/div]
[div class=title]name[/div][div class=text] something here[/div]
[div class=title]aliases[/div][div class=text] something here[/div]
[div class=title]pronoun[/div][div class=text] something here[/div]
[div class=title]age[/div][div class=text] something here[/div]
[div class=title]gender[/div][div class=text] something here[/div]
[div class=title]race[/div][div class=text] something here[/div]
[div class=title]occupation[/div][div class=text] something here[/div]

[div class=title]appearance[/div]
[div class=title]height[/div][div class=text] something here[/div]
[div class=title]weight[/div][div class=text] something here[/div]
[div class=title]hairstyle[/div][div class=text] something here[/div]
[div class=title]eye colour[/div][div class=text] something here[/div]
[div class=title]outfits[/div][div class=text] something here[/div]
[div class=title]description[/div][div class=text] something here[/div]

[div class=title]stats[/div]
[div class=title]intelligence[/div][div class=text] [/div]
[div class=title]strength[/div][div class=text] [/div]
[div class=title]dexterity[/div][div class=text] [/div][/div][div class="scrollbox page02"][div class=title]likes[/div][div class=text] something here[/div]
[div class=title]dislikes[/div][div class=text] something here[/div]
[div class=title]quirks/habits[/div][div class=text] something here[/div]

[div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper vel lorem sed interdum. Pellentesque bibendum, est nec congue fermentum, risus magna sollicitudin quam, sed vestibulum lacus tortor pellentesque urna. Cras ultrices facilisis tellus nec tristique. Duis nec hendrerit leo, sed mollis orci. Etiam sed ligula nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ante lectus, tincidunt in semper id, consectetur vel ex. Nam eu pulvinar magna. Morbi viverra orci odio, vel feugiat ligula commodo a. Cras interdum tortor vel iaculis imperdiet. Quisque pharetra efficitur justo vel consequat. Proin porttitor nisl iaculis sagittis volutpat. Integer ut augue nisi. Sed rutrum consectetur libero, a viverra dui tincidunt eu. Pellentesque vitae libero non mauris tempus luctus vel in lectus. Sed vehicula vestibulum neque sit amet tincidunt.

Quisque dignissim nunc a erat accumsan, in molestie ligula ultricies. Duis ullamcorper risus massa, a facilisis purus gravida id. Aliquam et neque arcu. Suspendisse quis leo metus. Nam gravida tincidunt lorem, vitae mollis mauris condimentum ac. Etiam sed scelerisque quam, et dapibus neque. Maecenas luctus libero sit amet tincidunt accumsan. Ut in arcu leo. Duis in urna lectus. Suspendisse nec nisi odio. Fusce aliquam orci velit, eget vulputate lectus consectetur vel. Sed interdum vulputate purus placerat vestibulum. Phasellus tristique rhoncus tellus, sed vehicula nunc luctus eget. Ut arcu mauris, feugiat quis ullamcorper in, bibendum sed enim. Donec et sagittis neque.[/div][/div][div class="scrollbox page03"][div class=title]relationships[/div][div class=text] something here[/div]
[div class=title]other[/div][div class=text] something here[/div]
[div class=title]biography[/div][div class=text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui mauris, a semper lacus dictum sit amet. Ut blandit, quam eu convallis interdum, tortor justo accumsan risus, ut tincidunt lorem sem quis dolor. Ut semper cursus libero vitae dapibus. Donec ut orci sit amet mauris posuere venenatis at non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mauris magna. In porttitor, leo non commodo tincidunt, ipsum turpis lacinia nunc, dictum luctus velit orci eget neque. Aliquam mattis sodales dui nec auctor. Integer ultrices erat vitae ultricies tincidunt. Pellentesque quis ipsum dapibus, tempor enim nec, auctor lacus.

Proin aliquam arcu non dignissim faucibus. Etiam tristique convallis viverra. Phasellus nec massa a velit posuere vulputate in nec nisi. Ut faucibus turpis non lacus mattis ultrices. Quisque maximus, massa quis sodales rutrum, metus ex dignissim nisl, porta laoreet eros augue eget enim. Donec sollicitudin felis ac ex mattis, sed rhoncus ligula cursus. In mauris risus, blandit ac ante ac, venenatis varius augue. Aenean varius leo id metus varius, a aliquet dui viverra. Vestibulum volutpat urna quis felis tincidunt gravida. Sed posuere ullamcorper ante, a tempus lorem pellentesque eu.[/div]
[div class=title]other[/div][div class=text] something here[/div][/div][div class="scrollbox page04"][div class=title]trivia[/div][div class=text] something here[/div]
[div class=title]faceclaim[/div][div class=text] something here[/div]
[div class=title]theme[/div][div class=text] something here[/div]
[div class=title]extra[/div][div class=text] something here[/div]
[div class=text]more text[/div][/div][/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div][/div]

code by RI.a

Spoiler: code

[nobr]
[class=background]
width:900px;
height:60vh;
background:url('https://i.imgur.com/tV41r9H.jpg') no-repeat;
background-size:100%;
overflow:hidden;
display:flex;
flex-wrap:wrap;
margin:auto;center;
[/class]

[class=loadpage]
width:900px;
height:60vh;
background:black;
opacity:0.8;
position:absolute;
align-self:flex-start;
[/class]

[class=greeting]
width:350px;
height:50px;
margin:auto;
margin-top:20vh;
font-family:Gothic A1, regular;
font-size:3em;
color:#99f3ff;
text-align:center;
[/class]

[class=enter]
width:75px;
font-family:Unica One, display;
font-size;0.5em;
color:white;
text-align:center;
border:1px solid #99f3ff;
padding:.3em;
cursor:pointer;
margin:auto;
margin-top:10px;
transition:all .3s ease-in;
animation:{post_id}flash 3s linear infinite;
[/class]

[class name=enter state=hover]
letter-spacing:0.1em;
[/class]

[animation=flash]
[keyframe=0]opacity:0.2;[/keyframe]
[keyframe=25]opacity:0.6;[/keyframe]
[keyframe=50]opacity:0.3;[/keyframe]
[keyframe=75]opacity:0.7;[/keyframe]
[keyframe=100]opacity:0.2;[/keyframe]
[/animation]

[class=slider]
width:270px;
height:100%;
clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%);
background:white;
opacity:0.6;
padding:1em;
align-self:flex-start;
display:flex;
flex-direction:column;
justify-content:space-evenly;
animation-name:{post_id}slideright;
animation-duration:1.2s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-direction:normal;
[/class]

[animation=slideright]
[keyframe=0]transform:translateX(-100%);[/keyframe]
[keyframe=100]transform:translateX(0);[/keyframe]
[/animation]

[class=centerimage]
clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%);
width:230px;
height:100%;
background-size:100%;
background-position:center;
background-repeat:no-repeat;
opacity:0.5;
[/class]

[comment]add image url to "background:url('http...');" then add this to above class to put an image in the center of the code.[/comment]

[class=contentwrap]
width:369px;
height:101%;
background:white;
clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%);
opacity:0.9;
[/class]

[class=slidein]
animation:{post_id}slideleft 1.2s ease-in-out 1;
[/class]

[animation=slideleft]
[keyframe=0]transform:translateX(100%);[/keyframe]
[keyframe=100]transform:translateX(0);[/keyframe]
[/animation]

[class=Tabs]
width:210px;
padding:0.5em;
border:1px solid #bbb;
font-family:Unica One;
font-size:1em;
text-align:center;
color:#222;
text-shadow:1px 1px 0px #99f3ff;
letter-spacing:.6em;
transition:all 0.3s linear;
cursor:pointer;
[/class]

[class name=Tabs state=hover]
letter-spacing:0.8em;
[/class]

[class=scrollbox]
width:338px;
height:90%;
overflow-y:scroll;
padding:.8em;
margin-left:15px;
[/class]

[class=text]
font-family:Karla, regular;
font-size:0.8em;
color:black;
display:inline-block;
margin-left: 5px;
[/class]

[class=title]
display:inline-block;
font-family:Unica One, display;
font-size:0.8em;
color:black;
text-shadow:1px 1px 0px #99f3ff;
[/class]

[script class=enter on=click]
fadeOut 800 loadpage
show slider
addClass slidein contentwrap
show contentwrap
show centerimage
[/script]

[script class=tab01 on=click]
fadeIn 500 page01
hide page02
hide page03
hide page04
[/script]

[script class=none]
hide contentwrap
hide slider
hide centerimage
[/script]

[script class=tab02 on=click]
fadeIn 500 page02
hide page01
hide page03
hide page04
[/script]

[script class=tab03 on=click]
fadeIn 500 page03
hide page01
hide page02
hide page04
[/script]

[script class=tab04 on=click]
fadeIn 500 page04
hide page01
hide page02
hide page03
[/script]
[/nobr]
[div class=background][div class=slider][div class="Tabs tab01"][font=Unica One]basic[/font][/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][div class="Tabs tab04"]other[/div][/div][div class=centerimage][/div][div class=contentwrap][div class="scrollbox page01"][div class=title]requisite[/div]
[div class=title]name[/div][div class=text] [font=Karla]something here[/font][/div]
[div class=title]aliases[/div][div class=text] something here[/div]
[div class=title]pronoun[/div][div class=text] something here[/div]
[div class=title]age[/div][div class=text] something here[/div]
[div class=title]gender[/div][div class=text] something here[/div]
[div class=title]race[/div][div class=text] something here[/div]
[div class=title]occupation[/div][div class=text] something here[/div]

[div class=title]appearance[/div]
[div class=title]height[/div][div class=text] something here[/div]
[div class=title]weight[/div][div class=text] something here[/div]
[div class=title]hairstyle[/div][div class=text] something here[/div]
[div class=title]eye colour[/div][div class=text] something here[/div]
[div class=title]outfits[/div][div class=text] something here[/div]
[div class=title]description[/div][div class=text] something here[/div]

[div class=title]stats[/div]
[div class=title]intelligence[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div]
[div class=title]strength[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div]
[div class=title]dexterity[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div][/div][div class="scrollbox page02"][div class=title]likes[/div][div class=text] something here[/div]
[div class=title]dislikes[/div][div class=text] something here[/div]
[div class=title]quirks/habits[/div][div class=text] something here[/div]

[div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper vel lorem sed interdum. Pellentesque bibendum, est nec congue fermentum, risus magna sollicitudin quam, sed vestibulum lacus tortor pellentesque urna. Cras ultrices facilisis tellus nec tristique. Duis nec hendrerit leo, sed mollis orci. Etiam sed ligula nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ante lectus, tincidunt in semper id, consectetur vel ex. Nam eu pulvinar magna. Morbi viverra orci odio, vel feugiat ligula commodo a. Cras interdum tortor vel iaculis imperdiet. Quisque pharetra efficitur justo vel consequat. Proin porttitor nisl iaculis sagittis volutpat. Integer ut augue nisi. Sed rutrum consectetur libero, a viverra dui tincidunt eu. Pellentesque vitae libero non mauris tempus luctus vel in lectus. Sed vehicula vestibulum neque sit amet tincidunt.

Quisque dignissim nunc a erat accumsan, in molestie ligula ultricies. Duis ullamcorper risus massa, a facilisis purus gravida id. Aliquam et neque arcu. Suspendisse quis leo metus. Nam gravida tincidunt lorem, vitae mollis mauris condimentum ac. Etiam sed scelerisque quam, et dapibus neque. Maecenas luctus libero sit amet tincidunt accumsan. Ut in arcu leo. Duis in urna lectus. Suspendisse nec nisi odio. Fusce aliquam orci velit, eget vulputate lectus consectetur vel. Sed interdum vulputate purus placerat vestibulum. Phasellus tristique rhoncus tellus, sed vehicula nunc luctus eget. Ut arcu mauris, feugiat quis ullamcorper in, bibendum sed enim. Donec et sagittis neque.[/div][/div][div class="scrollbox page03"][div class=title]relationships[/div][div class=text] something here[/div]
[div class=title]other[/div][div class=text] something here[/div]
[div class=title]biography[/div][div class=text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui mauris, a semper lacus dictum sit amet. Ut blandit, quam eu convallis interdum, tortor justo accumsan risus, ut tincidunt lorem sem quis dolor. Ut semper cursus libero vitae dapibus. Donec ut orci sit amet mauris posuere venenatis at non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mauris magna. In porttitor, leo non commodo tincidunt, ipsum turpis lacinia nunc, dictum luctus velit orci eget neque. Aliquam mattis sodales dui nec auctor. Integer ultrices erat vitae ultricies tincidunt. Pellentesque quis ipsum dapibus, tempor enim nec, auctor lacus.

Proin aliquam arcu non dignissim faucibus. Etiam tristique convallis viverra. Phasellus nec massa a velit posuere vulputate in nec nisi. Ut faucibus turpis non lacus mattis ultrices. Quisque maximus, massa quis sodales rutrum, metus ex dignissim nisl, porta laoreet eros augue eget enim. Donec sollicitudin felis ac ex mattis, sed rhoncus ligula cursus. In mauris risus, blandit ac ante ac, venenatis varius augue. Aenean varius leo id metus varius, a aliquet dui viverra. Vestibulum volutpat urna quis felis tincidunt gravida. Sed posuere ullamcorper ante, a tempus lorem pellentesque eu.[/div]
[div class=title]other[/div][div class=text] something here[/div][/div][div class="scrollbox page04"][div class=title]trivia[/div][div class=text] something here[/div]
[div class=title]faceclaim[/div][div class=text] something here[/div]
[div class=title]theme[/div][div class=text] something here[/div]
[div class=title]extra[/div][div class=text] something here[/div]
[div class=text]more text[/div][/div][/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div][/div][div=width:900px;margin:auto;center;font:Karla;font-size:0.5em;opacity:0.6;letter-spacing:0.3em;]code by RI.a[/div]

 

[Bored-Tigecko]

TheSe are REALLY GOOD.

I'm blown away by that last one.
Legit just... wow.
It's like opening a mini character Creator in a game.
Just
Incredible.
Keep it up!

 

[RI.a]

TheSe are REALLY GOOD.

I'm blown away by that last one.
Legit just... wow.
It's like opening a mini character Creator in a game.
Just
Incredible.
Keep it up!

Aww thank you so much!!
Hope to fix the script when I'm free so it becomes use-able hahaha

 

[amva]

Just wanted to say that I am an ABSOLUTE fan of your codes and that I adore your profile pic and title asdfghjklñ

 

[RI.a]

Just wanted to say that I am an ABSOLUTE fan of your codes and that I adore your profile pic and title asdfghjklñ

Ahdkienxkahfia thank you so much!

 

[Rexcaliburr]

Your work is just absolutely stunning! I'll be using the first one if you don't mind!

 

[RI.a]

Your work is just absolutely stunning! I'll be using the first one if you don't mind!

Thank you! And yes, go ahead ^^

 

[Berries]

You're my newest favorite coder, these are legendary and I will be using at least one of them in the very near future. Thanks a ton for these.

 

[nvsc123]

Just gotta say, your codes look so slick and neat. I'm so in love!

 

[RI.a]

You're my newest favorite coder, these are legendary and I will be using at least one of them in the very near future. Thanks a ton for these.

Just gotta say, your codes look so slick and neat. I'm so in love!

Thank you very much! Always very encouraging to see positive comments!

 

[Uxie]

what exactly is going wrong with the scripts? ill give a shot at trying to help

 

[RI.a]

what exactly is going wrong with the scripts? ill give a shot at trying to help

Bless you kind soul
I was planning on looking at it again sometime during this weekend. I'll send you a pm!