Resource Myling's bbc playground

[Myling]

So I read couple bbc coding tutorials, got cocky and thought I could no make my own codes. Yeahh.. No. I'm a complete noob, but I'm determined to learn. This is more of my practising area than freebies section. I have done one code I will put there, but it may be too simple to use, however it's a little pretty. To give some idea: I barely know how to do boxes, no idea how to use fonts (I use fonts from Font meme) and I use lots of pics. I will put out my first code and eventually more, just in case someone wants to use them. At least I hope my code(s) will give someone some visual ideas and color schemes lmao.

 

[Myling]

Hii! This is my first code, I was happy with it, but not anymore. I resized and shaped the pics, there's nothing in the code that alters the pics. The font is from fontmeme. I didn't now how to center the pics like I wanted so there's some random text between them lmao. This is slightly cute imo. It's mobile friendly, but not really that great (because of the things I mentioned before). I don't really recommend using this. However I'm going to keep this one here so when I (hopefully) get better at this my newer codes can be compared to this one.​

.................

name ✿ age ✿ gender ✿ sexuality ✿ role ✿ occupation

✿ A P P E A R A N C E✿
height & weight ✿ description
build ✿ description
complexion ✿ description
hair ✿ description
eyes ✿ description
style ✿ description
other ✿ description

✿ P E R S O N A ✿
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

Et sollicitudin ac orci phasellus. Ultricies mi eget mauris pharetra et ultrices neque ornare. Est placerat in egestas erat imperdiet. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. In metus vulputate eu scelerisque felis imperdiet. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Est ultricies integer quis auctor elit. Lacus sed viverra tellus in. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Et malesuada fames ac turpis egestas. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Eget nunc lobortis mattis aliquam faucibus purus in.

✿ B I O G R A P H Y✿
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

Et sollicitudin ac orci phasellus. Ultricies mi eget mauris pharetra et ultrices neque ornare. Est placerat in egestas erat imperdiet. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. In metus vulputate eu scelerisque felis imperdiet. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Est ultricies integer quis auctor elit. Lacus sed viverra tellus in. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Et malesuada fames ac turpis egestas. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Eget nunc lobortis mattis aliquam faucibus purus in.

✿ M I S C E L L A N E O U S ✿
✿ description
✿ description
✿ description
✿ description
✿ description
✿ description
✿ description
✿ description
✿ description
✿ description

Spoiler: code

[bg=transparent; max-width: 600px; margin: auto; background: #f4f4f4; padding: 20px; font-size: 12px; cursor: url(https://64.media.tumblr.com/tumblr_m2uldcKBSq1qfamg6.gif), auto!important;][row][center][img]https://fontmeme.com/permalink/210426/9ed3b1a3af6c0841ffcc5c2cce40e6f4.png[/img]

[img]https://i.imgur.com/Vm00EeD.png[/img][color=white].................[/color][img]https://i.imgur.com/ywucfEW.png[/img][/center]

[bg=transparent; background: #22AABF; color: #22AABF; padding: 10px;][scroll=30px][color=#fff][b][i]name[/i][/b] ✿ [b][i]age[/i][/b] ✿ [b][i]gender[/i][/b] ✿ [b][i]sexuality[/i][/b] ✿ [b][i]role[/i][/b] ✿ [b][i]occupation[/i][/b][/color][/scroll][/bg]
[scroll=400px][color=#22AABF][b][i]✿ A P P E A R A N C E✿
height & weight[/i][/b] ✿[/color] description
[color=#22AABF][b][i]build[/i][/b] ✿[/color] description
[color=#22AABF][b][i]complexion[/i][/b] ✿[/color] description
[color=#22AABF][b][i]hair[/i][/b] ✿[/color] description
[color=#22AABF][b][i]eyes[/i][/b] ✿[/color] description
[color=#22AABF][b][i]style[/i][/b] ✿[/color] description
[color=#22AABF][b][i]other[/i][/b] ✿[/color] description

[color=#22AABF][b][i]✿ P E R S O N A ✿[/i][/b][/color]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

Et sollicitudin ac orci phasellus. Ultricies mi eget mauris pharetra et ultrices neque ornare. Est placerat in egestas erat imperdiet. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. In metus vulputate eu scelerisque felis imperdiet. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Est ultricies integer quis auctor elit. Lacus sed viverra tellus in. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Et malesuada fames ac turpis egestas. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Eget nunc lobortis mattis aliquam faucibus purus in.

[color=#22AABF][b][i]✿ B I O G R A P H Y✿[/i][/b][/color]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

Et sollicitudin ac orci phasellus. Ultricies mi eget mauris pharetra et ultrices neque ornare. Est placerat in egestas erat imperdiet. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. In metus vulputate eu scelerisque felis imperdiet. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Est ultricies integer quis auctor elit. Lacus sed viverra tellus in. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Et malesuada fames ac turpis egestas. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Eget nunc lobortis mattis aliquam faucibus purus in.

[color=#22AABF][b][i]✿ M I S C E L L  A N E O U S ✿[/i][/b]
✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description
[color=#22AABF]✿[/color] description[/scroll][/bg][/row]

 

[Myling]

Hii! So this one is a simple IC code, it should be mobile friendly too. This is maybe my 4th code, tried many different things before this. I wasn't happy enough with the others so I'm not going to put them here. Anyways I'm little proud of this one, even though it's very simple. However it's my best one so far, and I tried lots of new stuff with it like using fonts and symbols and putting images the better way (before I just used to do this[*img][/*img])​

BAZZI BATUL - The Brave One

status location outfit tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

coded by Myling

Spoiler: code

[bg=transparent; max-width: 400px; margin: auto; background: #6DC7A0; padding: 20px; font-size: 12px; cursor: url(https://64.media.tumblr.com/tumblr_lqg4ywaaPK1qlzq96.png), auto!important;][row][size=300][font=Impact][color=#FFFFFF]BAZZI BATUL[/color][/font][/size]    [size=6][font=nunito][color=#345E4C][i] - The Brave One[/i][/color][/font][/size]

[bg=transparent; background: url(https://img.wattpad.com/ff77108eee5caf8aa0cad2c55a271c003555b3bf/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f544b6d58704c4930724f693441413d3d2d34342e3136326637613836303764616361356531323737323339303736362e6a7067?s=fit&w=720&h=720); background-size: cover; height: 350px; background-position: 80% 50%; border: 5px solid #fff;][/bg]
[bg=transparent; background: #345E4C; color: #345E4C; padding: 10px;][scroll=30px][color=#fff][fa]fas fa-heartbeat[/fa] status [fa]fas fa-map-marker-alt[/fa] location [fa]fas fa-tshirt[/fa] outfit [fa]far fa-address-book[/fa] tags[/color][/scroll][/bg]
[bg=transparent; background: #FFFFFF; color: #FFFFFF; padding: 10px;][scroll=300px][color=#54997B]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.[/color][/scroll][/bg][/bg][bg=transparent; font-size: 11px; color: #aaa; text-align: center;]coded by Myling[/bg]

 

[Myling]

Hii! So I'm back with another IC code. It should be mobile friendly as well. I wanted to create an aggressively cute code, and I think I succeed. It was supposed to be a CS code but during the process it ended up looking more like a IC code, so I made it into one. I'm still figuring how to columns work, haven't quite grasped the use of them yet. This code has something wrong with it: if you try to make the max width smaller, the images and boxes will get top of each other. However if you don't mess with that using this code should be fine lmao. Oh, the FC is @ goldenbih on ig.

[box=30px]Character Name

status location outfit tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

​

​

coded by Myling

Spoiler: code

[bg=; max-width: 820px; margin: auto; background: url(https://thumbs.dreamstime.com/b/seamless-kawaii-child-pattern-cute-doodles-51104926.jpg); padding: 20px; font-size: 12px; cursor: url(https://64.media.tumblr.com/tumblr_luazhmoRCu1qmvaoo.png), auto!important;]
[Row][Column=span1]
[/Column]
[Column=span1][bg=transparent; background: url(https://img.wattpad.com/cec8a5717a2743de3e16fdfa9a822a80f1fa9035/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f704754335735714f616c346b68413d3d2d3732353939333432322e313539396562633266383835376663643639353136383138383139332e6a7067?s=fit&w=720&h=720); background-size: cover; width: 265px; height: 265px; background-position: 50% 50%; border: 5px solid #FF82B0;][/bg]
[bg=transparent; background: url(https://i.pinimg.com/originals/d6/d4/a6/d6d4a687acc581a591e1d57d501bfc5f.jpg); background-size: cover; width: 265px; height: 265px; background-position: 50% 50%; border: 5px solid #FF82B0;][/bg]
[/Column]
[Column=span2]
 
[/Column][Column=span3][bg=transparent; background: #FF82B0; color: #FF82B0; padding: 10px; width: 275px; height: 50px;][box=30px][size=6][font=Lobster][color=#fff]Character Name[/color][/font][/size][/bg][center]
[bg=transparent; background: #FF82B0; color: #FF82B0; padding: 10px; width: 265px; height: 30px; border: 5px solid #FF82B0;][scroll=30px][color=#FFFFFF][fa]fas fa-heartbeat[/fa] status [fa]fas fa-map-marker-alt[/fa] location [fa]fas fa-tshirt[/fa] outfit [fa]far fa-address-book[/fa] tags [/color][/scroll][/bg]
[bg=transparent; background: #FFFFFF; color: #FFFFFF; padding: 10px; width: 265px; height: 412px; border: 5px solid #FF82B0;][scroll=400px][color=#D1306B][bg=transparent; background: url(http://pa1.narvii.com/6659/8815baac766bd246893e92d9698c69244132bfa3_00.gif); background-size: cover; width: 210px; height: 100px; background-position: 90% 60%; border: 0px;][/bg]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.[/color]

[bg=transparent; background: url(http://pa1.narvii.com/6659/8815baac766bd246893e92d9698c69244132bfa3_00.gif); background-size: cover; width: 210px; height: 100px; background-position: 90% 60%; border: 0px;][/bg][/scroll][/bg][/column]

[/Row][/center][/bg]
[bg=transparent; font-size: 11px; color: #aaa; text-align: center;]coded by Myling[/bg]

 

[Myling]

Hii! So this one is a simple CS code, it's mobile friendly but not mobile pretty. (Everything works on mobile, expect if you write too much text on the name box, it won't show all the text.) I prefer doing IC codes, in my opinion those are easier to make look good and still be mobile friendly. I'm just not very good at designing good looking CS codes. This one I mostly did in order to practice using columns. Idk about this. It's not bad but not that great either.

[box=30px]Caylee Cowen - The curious one[/box]

Appearance
Height & Weight -info
Build -info
Complexion -info
Hair -info
Eyes -info
Other -info

Name -info Age -info Gender -info
Sexuality -info Role -info

Persona -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat.

History -Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

Likes -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies.

Dislikes -Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut.

coded by Myling

Spoiler: code

[bg=transparent; max-width: 700px; margin: auto; background: url(https://www.wallpapertip.com/wmimgs/38-380944_rut-plaid-wallpaper-pale-yellow-and-white-plaid.jpg); padding: 20px; font-size: 12px; cursor: url(https://64.media.tumblr.com/tumblr_m2ulys1nZu1qfamg6.gif), auto!important;][Row]
[bg=transparent; background: #efd55c; color: #efd55c; padding: 10px; width: 640px;][box=30px][size=6][color=#fff][font=Freckle Face]Caylee Cowen[/font] - The curious one[/color][/size][/box][/bg]

[Column=span1]
[bg=transparent; background: url(https://i.pinimg.com/564x/4a/83/79/4a837984a1dfc5bef0a9ba5a8e6caaa2.jpg); background-size: cover; width: 282px; height: 465px; background-position: 50% 50%; border: 0px;][/bg]


[bg=transparent; background: #efd55c; color: #efd55c; padding: 10px; width: 282px; height: 145px;][scroll=130px][size=4][color=#FFFFFF][font=Nunito]
Appearance
Height & Weight -info
Build -info
Complexion -info
Hair -info
Eyes -info
Other -info[/scroll][/font][/color][/size][/bg][/Column][Column=span3]
  

[/Column][Column=span2]
[bg=transparent; background: #efd55c; color: #efd55c; padding: 10px; width: 275px; height: 50px;][scroll=30px][size=3][color=#FFFFFF][font=Nunito]Name -info  Age -info  Gender -info
Sexuality -info  Role -info
[/font][/color][/size][/scroll][/bg]


[bg=transparent; background: #FFFFFF; color: #FFFFFF; padding: 10px; width: 265px; height: 325px; border: 5px solid #efd55c;][scroll=324px][color=#efd55c]Persona -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. 

History -Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.[/color][/scroll][/bg]


[bg=transparent; background: #FFFFFF; color: #FFFFFF; padding: 10px; width: 265px; height: 130px; border: 5px solid #efd55c;][scroll=129px][color=#efd55c]Likes -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. 

Dislikes -Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut.[/color][/scroll][/bg]
[/Column][/Row][/bg][Row][bg=transparent; font-size: 11px; color: #aaa; text-align: center;]coded by Myling[/bg]

 

[Myling]

Hi, again! Feels like I'm spamming codes here every given moment. Anyways.. Tried doing an SC code again and I think this is a lot better than the earlier one. I also feel like I'm learning how to use columns. This is mobile friendly too, all the text can be read and images show properly. However it's hella ugly on mobile. On computer screen, tho, it looks pretty nice. I've been lately into putting a pagttern instead of background color. Tried to refuse doing it this time, made a compromise with myself and settled to this subtle gradient. The FC is @ keeahwah on IG.

Role -Character Name

— BASICS.
Name: info
Nicknames: info
Age: info
Sexuality: info
Gender: info
Role: info

— PERSONA.
Vices: trait, trait, trait, trait, trait
Virtues: trait, trait, trait, trait, trait

General Personality:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

— HISTORY.
Background:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

Extra:
- info
- info
- info
- info

— APPEARANCE.
Height & weight: info
Complexion: info
Hair: info
Eyes: info
Clothing Style: info
Body Modifications: info
Distinguishing Features: info
Faceclaim: info

coded by Myling

Spoiler: code

[bg=transparent; max-width: 870px; margin: auto; background: url(https://www.xmple.com/wallpaper/linear-grey-purple-gradient-1920x1080-c2-dda0dd-708090-a-165-f-14.svg); padding: 20px; font-size: 12px; cursor: url(https://64.media.tumblr.com/cdea79ba5d7f2e2da3ccb7e04706e76a/tumblr_inline_mfn7vkr5gX1qid2nw.png), auto!important;]
[Row]
[Column=span2][border=5px solid #8052A3; box-sizing: border-box; border-radius: 100%; margin: auto; width: 145px; height: 145px; background: url(https://i.pinimg.com/564x/bc/5a/80/bc5a8015762a310df05de5e5828e3ef0.jpg); background-size: cover; background-position: 50% 50%;][/border]
[border=5px solid #8052A3; box-sizing: border-box; border-radius: 100%; margin: auto; width: 145px; height: 145px; background: url(https://i.pinimg.com/564x/87/89/92/87899209d23d612615e2c0291f8f03e6.jpg); background-size: cover; background-position: 50% 50%;][/border]
[border=5px solid #8052A3; box-sizing: border-box; border-radius: 100%; margin: auto; width: 145px; height: 145px; background: url(https://i.pinimg.com/564x/37/b5/77/37b577e7f6d96e4aefa410c0a8a38e54.jpg); background-size: cover; background-position: 50% 50%;][/border]
[/Column][Column=span3][bg=transparent; background: #8052A3; color: #ba3c71; padding: 10px; width: 273px; height: 40px;][size=6][color=#fff][font=Anton]Role[/font] [font=Nunito] -Character Name[/font][/color][/size][/bg]

[bg=transparent; background: #FFFFFF; color: #FFFFFF; padding: 10px; width: 265px; height: 364px; border: 5px solid #8052A3;][scroll=362px][color=#8052A3][b]— BASICS.
Name:[/b] info
[b]Nicknames:[/b] info
[b]Age:[/b] info
[b]Sexuality:[/b] info
[b]Gender:[/b] info
[b]Role:[/b] info

[b]— PERSONA.
Vices:[/b] trait, trait, trait, trait, trait
[b]Virtues:[/b] trait, trait, trait, trait, trait

[b]General Personality:[/b] 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

[b]— HISTORY.
Background:[/b] 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

[b]Extra:[/b]
- info
- info
- info
- info
[/color][/scroll][/bg]
[/Column][Column=span2]
[border=5px solid #8052A3; box-sizing: border-box; border-radius: 100%; margin: auto; width: 275px; height: 275px; background: url(https://i.pinimg.com/564x/02/6c/47/026c4793ba4bd4f2953ca0e815231d28.jpg); background-size: cover; background-position: 50% 50%;][/border]
[bg=transparent; background: #8052A3; color: #8052A3; padding: 10px; width: 245px; height: 160px;][scroll=150px][color=#fff][b]— APPEARANCE.
Height & weight:[/b] info
[b]Complexion:[/b] info
[b]Hair:[/b] info
[b]Eyes:[/b] info
[b]Clothing Style:[/b] info
[b]Body Modifications:[/b] info
[b]Distinguishing Features:[/b] info
[b]Faceclaim:[/b] info[/color][/scroll][/bg]
[/Column]
[/Row]

[/bg][bg=transparent; font-size: 11px; color: #fff; text-align: center;]coded by Myling[/bg]

 

[Myling]

Hii! I've been practicing using columns and designing CS codes. I thought I had mastered the use of columns, but doing this code proved otherwise. I really struggled with this one. I had difficulties lining everything like I wanted. This is the end result and my feelings are mixed. It's kinda nice, but lacks something. This also my first code that isn't mobile friendly, which is kind of a bummer.

Sora Choi

— APPEARANCE.
Height & weight: info
Complexion: info
Hair: info
Eyes: info
Clothing Style: info
Body Modifications: info
Distinguishing Features: info
Faceclaim: info

— PERSONA.
Vices: trait, trait, trait, trait, trait
Virtues: trait, trait, trait, trait, trait

General Personality:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

— HISTORY.
Background:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

Extra:
- info
- info
- info
- info

— BASICS.
Name: info
Age: info
Gender: info
Sexuality: info
Role: info

coded by Myling

Spoiler: code

[bg=0px; cursor: url(https://cur.cursors-4u.net/cursors/images2/cur192.gif), auto!important; padding: 0px; overflow: hidden; max-width: 980px; max-height: 680px; margin: auto; background: #000;][border=0px; height: 280px; position: relative; background: url(https://i.pinimg.com/originals/0e/69/cf/0e69cfeffe3556ad6779ea463db44b12.jpg); background-size: cover; background-position: 50% 65%; -webkit-clip-path: polygon(0 0, 100% 0, 100% 63%, 0 80%);][/border][border=0px; height: 210px; position: relative; top: -300px;  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);][/border][border=0px; padding: 0px 20px 0px 20px; position: relative; top: -460px; box-sizing: border-box;][row][column=span2][bg=transparent; background: #FFF; color: #FFF; padding: 10px; width: 200px; height: 30px;][size=6][font=Goblin One][color=#9C0000]Sora Choi[/color][/font][/size][/bg][bg=transparent; background: url(https://i.pinimg.com/564x/cc/2e/35/cc2e352550ba32120919ba57795d6f29.jpg); background-size: cover; width: 200px; height: 320px; background-position: 50% 50%; border: 0px;][/bg][bg=transparent; background: #9C0000; color: #9C0000; padding: 10px; width: 200px; height: 190px;][scroll=180px][color=#fff]— APPEARANCE.
Height & weight: info
Complexion: info
Hair: info
Eyes: info
Clothing Style: info
Body Modifications: info
Distinguishing Features: info
Faceclaim: info[/color][/scroll][/bg][/column][column=span3][bg=transparent; background: #FFFFFF; color: #FFFFFF; padding: 10px; width: 435px; height: 348px; border: 0px;][scroll=336px][color=#9C0000]— PERSONA.
Vices: trait, trait, trait, trait, trait
Virtues: trait, trait, trait, trait, trait

General Personality: 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

— HISTORY.
Background: 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent semper feugiat. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Et odio pellentesque diam volutpat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Id donec ultrices tincidunt arcu non sodales neque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. At risus viverra adipiscing at in tellus integer feugiat. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Pellentesque habitant morbi tristique senectus et netus et malesuada. Donec ultrices tincidunt arcu non sodales neque sodales ut. Rhoncus est pellentesque elit ullamcorper. Faucibus purus in massa tempor. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra orci sagittis eu volutpat odio facilisis mauris. Quisque non tellus orci ac auctor augue mauris augue neque. Nec sagittis aliquam malesuada bibendum arcu vitae elementum

Extra:
- info
- info
- info
- info[/color][/scroll][/bg][bg=transparent; background: url(https://i.imgur.com/F1pKRGs.png); background-size: cover; width: 435px; height: 190px; background-position: 50% 50%; border: 0px;][/bg][/column][column=span1]
[/column][column=span2][bg=transparent; background: #9C0000; color: #9C0000; padding: 10px; width: 232px; height: 160px;][scroll=145px][color=#fff]— BASICS.
Name: info
Age: info
Gender: info
Sexuality: info
Role: info[/color][/scroll][/bg][bg=transparent; background: url(https://i.pinimg.com/564x/bb/c4/41/bbc441da075c806c94b72dc890beaabb.jpg); background-size: cover; width: 232px; height: 378px; background-position: 50% 50%; border: 0px;][/bg][/column][/row][/border][/bg][bg=transparent; font-size: 11px; color: #aaa; text-align: center;]coded by Myling[/bg]