| welcome |
the dark ages ( mobile-friendly ! )
- Thread starter VALEN T.
- Start date
but let's see what i can do for you 
1 | sinking ambitions
VALEN T.
Member
- mobile-friendly (or at least iphone-friendly)
- keep credit
- don't be shy to ask any questions :>
- hidden scroll
- edit in bbcode editor (not rich text)
Code:
[COMMENT]
--------the 4 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border=0;
--border-colour: #76BBAD;
--pic-1: url(https://66.media.tumblr.com/7cb96c24b0350783f1b1449aa2851eca/tumblr_oulhvaFPTU1rh8q2po1_500.gif) 63% 50%;
--pic-2: url(https://66.media.tumblr.com/b7c0ec602581700108d4bb8ceb8da9f4/tumblr_oulhvaFPTU1rh8q2po2_500.gif) 63% 50%;
--pic-3: url(https://66.media.tumblr.com/e5979d8db4d7c7865074dd4ffa3e8ecc/tumblr_oulhvaFPTU1rh8q2po3_500.gif) 63% 50%;
box-sizing: border-box; padding: 0;][border= /*top container*/ 0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; margin-bottom: 10px; font-size: 11px; line-height: 15px;][border= /*PIC 1*/ 0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: var(--pic-1); background-size: cover; margin-right: 10px;][/border][border=/*text box 1*/ 3px solid var(--border-colour); box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][COMMENT]
-----------add quote 1/3 here & replace the colours w whatever you like + the cs details start after the quote-----------
[/COMMENT][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]playing [color=#76BBAD][B]games[/B][/color] from the start[/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]
[B][color=#76BBAD]name[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]age[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]gender[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]title[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]sexuality[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]you can add[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]however many of these you want to.[/right][COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/border][/border][/border][/border][border= /*middle container*/0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; margin-bottom: 10px; font-size: 11px; line-height: 14px;][border= /*text box 2*/ 3px solid var(--border-colour); box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][COMMENT]
-----------add quote 2/3 here & replace the colours w whatever you like + the cs details start after the quote-----------
[/COMMENT][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]sinking your nails in my [color=#76BBAD][B]heart[/B][/color][/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]
[B][color=#76BBAD]vices[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]virtues[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]virtues[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer three.[/right]
[B][color=#76BBAD]trivia[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]feel free to add[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]however many.
of these.
you want.[/right][COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/border][/border][/border][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: var(--pic-2); background-size: cover; margin-left: 10px;][/border][/border][border= /*bottom container*/0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; font-size: 11px; line-height: 14px;][border= /*PIC 3*/ 0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: var(--pic-3); background-size: cover; margin-right: 10px;][/border][border= /*text box 3*/ 3px solid var(--border-colour); box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][COMMENT]
-----------add quote 3/3 here & replace the colours w whatever you like + the cs details start after the quote-----------
[/COMMENT][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]you bring out the [color=#76BBAD][B]worst[/B][/color] in me[/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]
[B][color=#76BBAD]history[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]theme songs[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]you can[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]add.
however many of these.
you want.[/right][COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; margin: auto; max-width: 500px;][border=0; box-sizing: border-box; padding: 0; text-align: center; width: 37%; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10342754]code[/url] by valen t.[/border][/border][/border]
Last edited:
2 | psychedelic addict
VALEN T.
Member
- mobile-friendly
- keep credits
- don't be afraid to ask any questions :>
- hidden-scroll in both of the text boxes !
mina el hammani
code by valen t.
Code:
[COMMENT]
--------the 7 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border=0;
--pic-1: url(https://66.media.tumblr.com/149bc970bdeb0a49c607cf70978c99ef/tumblr_p8kdd1pXN81vgokhlo8_250.jpg) 50% 50%;
--pic-2: url(https://66.media.tumblr.com/ae442d03914e7639854bb6f616f1ae65/tumblr_p8kdd1pXN81vgokhlo4_250.jpg) 50% 50%;
--pic-3: url(https://66.media.tumblr.com/9eff790b71db082a90361cc197193b95/tumblr_p8kdd1pXN81vgokhlo6_250.jpg) 50% 50%;
--top-bottom-border-colour: #733D93;
--text-n-pics-bg-colour: #CBB5D6;
--name-colour: #531D73;
--rp-details-text-colour: #D2C0DC;
box-sizing: border-box; padding: 0;][border= /*PIC + NAME CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 0 0; background: var(--text-n-pics-bg-colour); max-width: 370px; margin: auto; border-top: 15px solid var(--top-bottom-border-colour);][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; max-width: 320px; height: 100px; margin: auto; display: flex;][border= /*PIC 1*/ 0; box-sizing: border-box; padding: 0; flex: 1; margin-right: 5px; background: var(--pic-1); background-size: cover;][/border][border=/*PIC 2*/ 0; box-sizing: border-box; padding: 0; flex: 1; margin-right: 5px; background: var(--pic-2); background-size: cover;][/border][border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--pic-3); background-size: cover;][/border][/border][border=/*NAME*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 320px; margin: auto; text-align: center; text-transform: uppercase; font-size: 12px; line-height: 10px; font-weight: bold; color: var(--name-colour); cursor: default;][font=Times New Roman][COMMENT]
-----------add yc's name here-----------
[/COMMENT]mina el hammani[COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/font][/border][/border][border= /*DETAILS CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 370px; margin: auto; height: 60px; background: var(--top-bottom-border-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 200%; overflow: auto;][border= /*DETAIL TEXT*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 11px; line-height: 13px; cursor: default; text-align: center; color: var(--rp-details-text-colour);][font=Times New Roman][COMMENT]
-----------add rp details here-----------
[/COMMENT][B]Location:[/B] answer
[B]Interaction:[/B] answer
[b]Mood:[/b] answer
this scrolls just in case the text overflows[COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/font][/border][/border][/border][border= /*TEXT CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 370px; height: 330px; margin: auto; background: var(--text-n-pics-bg-colour); border-bottom: 15px solid var(--top-bottom-border-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*POST TEXT*/ 0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; font-size: 12px; line-height: 16px; text-align: justify; color: var(--name-colour);][font=Times New Roman][COMMENT]
-----------add your ic post here-----------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.
Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/font][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343150]code[/url] by valen t.[/border][/border]
Last edited:
3 | winter cocoa
VALEN T.
Member
- mobile-friendly
- keep credits
- don't be afraid to ask any questions :>
- these are sm easier to make oml
- hidden scroll in both of the text boxes !
code by valen t.
Code:
[COMMENT]
--------the 6 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border= /*CONTAINER*/ 0;
--code-bg: black;
--top-bottom-border-colour: #A8A29D;
--top-pic: url(https://66.media.tumblr.com/c42c09edae52ed0fbb698d16992b5ff4/2c75b763092794d3-43/s1280x1920/98b1d9b332c1ef97dc4201f1332432a141df21c1.jpg) 100% 100%;
--bottom-pic: url(https://66.media.tumblr.com/a6b38d6dc1170f9d0ac485c813b075fa/2c75b763092794d3-f4/s400x600/7477e4e2186c4ae12d7f62a1882e14b6d79016ff.jpg) 0 75%;
--right-2-containers-bg: #50463C;
--text-colour: #C1BDB9;
box-sizing: border-box; padding: 0; max-width: 450px; margin: auto; height: 300px; background: var(--code-bg); display: flex; border-top: 10px solid var(--top-bottom-border-colour); border-bottom: 10px solid var(--top-bottom-border-colour);][border=/*pic container*/ 0; box-sizing: border-box; padding: 10px 5px 10px 10px; height: 100%; width: 32%; display: flex; flex-direction: column;][border=/*TOP PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-pic); background-size: cover; margin-bottom: 10px;][/border][border=/*BOTTOM PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-pic); background-size: cover;][/border][/border][border=/*details + text container*/ 0; box-sizing: border-box; padding: 10px 10px 10px 5px; width: 68%; display: flex; flex-direction: column;][border=/*DETAILS CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: 100%; height: 70px; background: var(--right-2-containers-bg); margin-bottom: 10px; overflow: hidden;][border=/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=/*DETAIL TEXT*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; text-align: center; cursor: default; color: var(--text-colour); font-size: 11px; line-height: 15px;][font=Times New Roman][COMMENT]
----------add your rp details here----------
[/COMMENT]MOOD
[i]location[/i]
[b]❛[/b] interaction [b]❜[/b]
this scrolls too btw just in case the text overflows[COMMENT]
----------don't type anything past this comment----------
[/COMMENT][/font][/border][/border][/border][border= /*TEXT BOX*/ 0; box-sizing: border-box; flex: 1; background: var(--right-2-containers-bg); overflow: hidden; padding: 10px 0 10px 0;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=/*POST TEXT*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; text-align: justify; cursor: default; color: var(--text-colour); font-size: 11px; line-height: 15px;][font=Times New Roman][COMMENT]
----------add yc's name & your ic post here----------
[/COMMENT][center]✦ [b]NAME HERE[/b] ✦[/center]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.
Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[COMMENT]
----------don't type anything after this comment----------
[/COMMENT][/font][/border][/border][/border][/border][/border][border=/*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px; cursor: default;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343264]code[/url] by valen t.[/border]
Last edited:
4 | sundress
VALEN T.
Member
- mobile-friendly
- keep credits
- don't be afraid to ask any questions :>
- ok ok last one for today...maybe idk
- hidden scroll
code by valen t.
Code:
[COMMENT]
--------the 8 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border=0;
--bg-pic: url(https://i.pinimg.com/564x/66/9d/53/669d53e92c87ec02c2edf87b6dbcad90.jpg) 50% 50%;
--top-gradient-colour: #608F20;
--ycs-name-colour: white;
--left-pic: url(https://66.media.tumblr.com/ad2588bcc0da0e4627351765d5729807/tumblr_nd5pyq9N371rz2bopo3_250.gif) 30% 50%;
--right-pic: url(https://66.media.tumblr.com/4277f13efe76b2cc5471fd3807870b93/tumblr_nd5pyq9N371rz2bopo4_250.gif) 30% 50%;
--smol-quote-bg-colour: rgba(48, 71, 16, 0.5);
--quote-text-colour: white;
--ic-post-text-colour: black;
background: var(--bg-pic); background-size: cover; box-sizing: border-box; margin: auto; position: relative; max-width: 350px; height: 430px; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;][border= /*GRADIENT BACKGROUND*/ 0; background: linear-gradient(to bottom, var(--top-gradient-colour), rgba(255, 255, 255, 0.85)); box-sizing: border-box; position: relative; height: 100%; width: calc(100% - 40px); padding: 0 20px 20px 20px; display: flex; flex-direction: column; align-items: center; overflow: hidden;][border=/*YC'S NAME*/ 0; box-sizing: border-box; position: relative; text-align: center; font-size: 20px; line-height: 15px; color: var(--ycs-name-colour); cursor: default; font-weight: bold; padding: 20px 0 22px 0; text-transform: uppercase;][font=Times New Roman][COMMENT]
------------add yc's name here------------
[/COMMENT]taylor swift[COMMENT]
------------don't type anything after this comment------------
[/COMMENT][/font][/border][border= /*flex*/0; width: 100%; box-sizing: border-box; padding: 0; display: flex; justify-content: space-between; margin-bottom: 18px; height: 110px;][border=/*LEFT PIC*/ 0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background: var(--left-pic); background-size: cover;][/border][border=/*RIGHT PIC*/ 0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background: var(--right-pic); background-size: cover;][/border][/border][border=/*SMALL QUOTE*/ 0; background: var(--smol-quote-bg-colour); box-sizing: border-box; max-width; 100%; display: inline-block; font-size: 9px; text-align: center; color: var(--quote-text-colour); padding: 4.5px 11px 5px 11px; font-weight: bold; font-style: oblique; margin-bottom: 14px; letter-spacing: 0.07em;][COMMENT]
------------add a short quote here------------
[/COMMENT]your quiet afternoon crush[COMMENT]
------------don't type anything after this comment------------
[/COMMENT][/border][border=/*hidden scroll*/ 0; flex: 1; box-sizing: border-box; padding: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*TEXT BOX*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: var(--ic-post-text-colour); font-size: 11px; text-align: justify; cursor: default; line-height: 15px;][COMMENT]
------------add your ic post here------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.[COMMENT]
------------don't type anything after this comment------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; margin: auto; max-width: 350px; text-align: center; font-size: 7px; padding: 9px 0 0 0; cursor: default;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343661]code[/url] by valen t.[/border]
Last edited:
5 | $100 champagne
VALEN T.
Member
- mobile-friendly
- keep credit
- don't be afraid to ask any questions :>
- so i finally figured out flex boxes + hidden scroll in bbcode pls i'm so happy (': so ya know, this code has hidden scrolling
- a LOT less janky imo at least
snazzy quote here
code by valen t.
name
Code:
[COMMENT]
--------the 4 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border= /*holder*/ 0;
--left-bg-pic: url(https://i.pinimg.com/564x/14/b7/bc/14b7bcef7e4d362fca8798910f8519ee.jpg) 48% 30% no-repeat;
--yc-pic: url(https://66.media.tumblr.com/6de2d4180e6e90e59e4212099269a0df/672d32ec90425ef0-ff/s400x600/b23c966b6e896dfa3507dbf29f13fce1c61df3c9.gifv) 50% 50%;
--quote-n-name-colour: #FE9B63;
--quote-shadow-colour: #331E1A;
box-sizing: border-box; margin: auto; max-width: 420px; height: 320px; display: flex; padding: 0; position: relative; margin-bottom: 21px;][border=/*BACKGROUND PIC*/ 0; background: var(--left-bg-pic); background-size: 330%; flex: 6; height: 100%; box-sizing: border-box; padding: 21px 20px 21px 20px; position: relative; display: flex; flex-direction: column; align-items: center;][border= /*YC'S PIC*/ white 2px solid; background: var(--yc-pic); background-size: cover; width: calc(100% - 6px); height: 97px; box-sizing: border-box; position: relative; margin-bottom: 13px;][/border][border=/*QUOTE*/ 0; color: var(--quote-n-name-colour); font-size: 13px; text-transform: uppercase; text-align: center; line-height: 15px; font-weight: bold; padding: 0; text-shadow: 2px 1px var(--quote-shadow-colour); box-sizing: border-box; position: relative; width: 100%; flex: 1;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;][COMMENT]
----------------add a snazzy quote here----------------
[/COMMENT]snazzy quote here[COMMENT]
----------------don't type anything after this comment----------------
[/COMMENT][/border][/border][border= /*credit*/ transparent; width: 100%; box-sizing: border-box; padding: 0 0 0 0; line-height: 11px; margin: auto; text-align: center; font-size: 7px; position: absolute; left: 0; bottom: -20px;][URL='https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10347982']code[/URL] by valen t.[/border][/border][border= /*right*/ 0; flex: 15; box-sizing: border-box; padding: 0; position: relative;][border= /*flex*/ 0; width: 100%; height: 100%; display: flex; padding: 0; box-sizing: border-box; flex-direction: column; position: relative;][border= /*YC'S NAME*/ 0; height: auto; width: 100%; line-height: 85%; padding: 0; text-transform: uppercase; text-align: center; font-size: 130%; font-weight: bold; color: var(--quote-n-name-colour); box-sizing: border-box; position: relative; margin-bottom: 5px;][COMMENT]
----------------add yc's name here----------------
[/COMMENT]name[COMMENT]
----------------don't type anything after this comment----------------
[/COMMENT][/border][border=/*text box */ 0; flex: 1; box-sizing: border-box; padding: 0; font-size: 10px; line-height: 14px; text-align: justify; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; width: 200%; height: 100%; padding: 0; overflow: auto;][border= /*TEXT*/ 0; box-sizing: border-box; width: 50%; padding: 0 0 0 10px;][COMMENT]
----------------type in your ic post starting from here----------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[/border][/border][/border][/border][/border][/border]
Last edited:
VALEN T.
Member
sskshdjdk thank you !!! they’re alright imo but hopefully i’ll improve w practice
+ i’m sure urs were super pretty as well ! it isn’t that difficult on here you could give it a go too and everyone’s super friendly n will readily help u out if u need it
killer.queen
chaotic warrior princess
is there a way to make it one singular photo instead of the two? :3
VALEN T.
Member
totally !
so i removed the “right picture” and renamed the leftover one just “picture” + changed its width to 100%
Code:
[border=
/*bg pic*/
0; background: url(https://i.pinimg.com/564x/66/9d/53/669d53e92c87ec02c2edf87b6dbcad90.jpg); background-size: cover; background-position: 50% 50%; box-sizing: border-box; margin: auto; position: relative; max-width: 350px; height: 430px; padding: 0 20px 0 20px;][border=
/*gradient bg*/
0; background: linear-gradient(to bottom, #608F20, rgba(255, 255, 255, 0.8)); box-sizing: border-box; position: relative; height: 430px; width: 100%; padding: 0 20px 20px 20px; display: flex; flex-direction: column; align-items: center;][border=
/*name*/
0; box-sizing: border-box; position: relative; text-align: center; font-size: 20px; line-height: 15px; color: white; cursor: default; font-weight: bold; padding: 20px 0 20px 0; text-transform: uppercase;][font=Times New Roman]taylor swift[/font][/border][border=
/*flex*/
0; width: 100%; box-sizing: border-box; padding: 0; display: flex; justify-content: space-between; margin-bottom: 20px;][border=
/*picture*/
0; box-sizing: border-box; height: 120px; width: 100%; background:url(https://66.media.tumblr.com/4277f13efe76b2cc5471fd3807870b93/tumblr_nd5pyq9N371rz2bopo4_250.gif); background-size: cover; background-position: 50% 15%;][/border][/border][border=
/*quote*/
0; background: rgba(48, 71, 16, 0.5); box-sizing: border-box; max-width; 100%; display: inline-block; font-size: 10px; text-align: center; color: white; padding: 5px 15px 5px 15px; font-weight: bold; font-style: oblique; margin-bottom: 20px;]your quiet afternoon crush[/border][border=
/*text box*/
0; flex: 1; box-sizing: border-box; padding: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; color: #172D1F; font-size: 11px; text-align: justify; cursor: default; line-height: 17px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.[/border][/border][/border][/border][/border][border=
/*credit*/
0; box-sizing: border-box; margin: auto; max-width: 350px; text-align: center; font-size: 7px; padding: 1px 0 0 0; cursor: default;]code by [url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343661]fudgecakez[/url][/border]tysfm
i’m so so glad u like it !!!
SpectrumCrow
Member
oooh i love your codes! Ill have to use these ^^
VintageBlues
downtown queen
Love, love these! That last one works perfectly for a character I'm creating. Thank youuuu!
6 | strawberry dusk
VALEN T.
Member
- mobile-friendly
- keep credits
- don't be afraid to ask any questions :>
- hidden scrolls !
- cheers if u saw the og hopekook version of this code, i edited it bc i like this version better uwu
Code:
[COMMENT]
-----------the 11 variable tags (the ones starting with "--" are meant to be filled in with your own colours + links; i'd suggest keeping the "background-colour" light, and the "heading-background" even lighter; "ycs-name-text-colour" is the background colour for the box the cs details are in-----------
[/COMMENT][border=0;
--first-circle-picture: url(https://i.pinimg.com/564x/59/b1/cb/59b1cb0077bd984b0851cc4f7e6900b4.jpg) 50% 50%;
--second-circle-picture: url(https://i.pinimg.com/564x/18/b7/08/18b7082bef1b3f9f9ce3121918bd771a.jpg) 50% 100%;
--third-circle-picture: url(https://i.pinimg.com/564x/f8/81/71/f88171436342bc55010ca6d953e8cae9.jpg) 0 0;
--fourth-circle-picture: url(https://i.pinimg.com/564x/68/e9/60/68e9607e9c971c8a825e40528a57aab4.jpg) 50% 50%;
--fifth-circle-picture: url(https://i.pinimg.com/564x/d1/fe/06/d1fe06cd7a0482c31b8628b86d14661d.jpg) 50% 50%;
--sixth-circle-picture: url(https://i.pinimg.com/564x/21/b0/0c/21b00cb2e4dc7f1dd23fd943dd7846cc.jpg) 50% 50%;
--ycs-name-text-colour: #C0958B;
--ycs-first-square-picture: url(https://i.pinimg.com/564x/5d/86/12/5d8612db59075e25e5c811d96170d57a.jpg) 50% 0;
--ycs-second-square-picture: url(https://i.pinimg.com/564x/20/3b/e0/203be05811a5d41641127c1cd874fce4.jpg) 0 25%;
--background-colour: #E0D2C5;
--heading-background: #EFE8E2;
box-sizing: border-box; padding: 0; width: 100%; height: auto; position: relative;][border= /*pics + name container 1*/ 0; box-sizing: border-box; padding: 0; max-width: 400px; margin: auto; display: flex; justify-content: space-around; align-items: flex-end; position: relative; z-index: 2; margin-bottom: 3px;][border=0; box-sizing: border-box; padding: 0; width: 130px; display: flex; align-items: flex-end;][border= /*FIRST PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--first-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*SECOND PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--second-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*THIRD PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--third-circle-picture); background-size: cover; border-radius: 100%;][/border][/border][border= /*FIRST NAME*/0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: var(--ycs-name-text-colour); font-weight: 500; text-transform: lowercase; text-align: right; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; top: 19px;][COMMENT]
-----------ADD YC'S FIRST NAME HERE-----------
[/COMMENT][font=Pinyon Script]given[/font][/border][/border][border=
/*QUOTE 1*/ 0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: var(--background-colour); border-radius: 7px; margin: auto; position: relative; z-index: 1; color: #160307; font-size: 11px; line-height: 14px; text-align: right; font-style: oblique; letter-spacing: 0.05em; margin-bottom: 4px; overflow: hidden; text-transform: lowercase;][COMMENT]
-----------ADD THE TOP QUOTE HERE-----------
[/COMMENT]i hear your voice on the phone[/border][border=
/*pic + text container*/ 0; box-sizing: border-box; padding: 5px; max-width: 400px; height: 150px; margin: auto; position: relative; background: var(--background-colour); border-radius: 7px; display: flex; margin-bottom: 4px; overflow: hidden;][border= /*PIC 1*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: var(--ycs-first-square-picture); background-size: cover; margin-right: 5px;][/border][border= /*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: var(--ycs-name-text-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*the actual text*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: #160307; font-size: 11px; line-height: 14px;][COMMENT]
-----------YOU CAN TYPE IN YC'S CS STARTING FROM HERE-----------
-----the "heading" tag if for main headings like "basics", "persona", "history", etc-----
[/COMMENT][border= /*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; font-style: normal;]basics[/border][/border] [b][i]FULLNAME.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]NICKNAME.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]AGE.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]D.O.B.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ZODIAC.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]GENDER.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PRONOUNS.[/i][/b][i][/i]
[right][i]answer.[/i][/right]
[b][i]FACE CLAIM.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]HEIGHT.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]BODY MODS.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]SEXUALITY.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ROMANTIC ORIENTATION.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]P.O.B.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ACADEMIC LEVEL.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]OCCUPATION.[/i][/b]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; margin-top: 7px; font-style: normal;]misc[/border][/border] [b][i]LIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]DISLIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]PETS.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]TRIVIA FACTS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]THEME SONGS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right][COMMENT]
-----------DON'T TYPE ANYTHING PAST THIS COMMENT-----------
[/COMMENT][/border][/border][/border][/border][border= /*pic + text container 2*/ 0; box-sizing: border-box; padding: 5px; max-width: 400px; height: 150px; margin: auto; position: relative; background: var(--background-colour); border-radius: 7px; display: flex; margin-bottom: 4px;][border= /*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: var(--ycs-name-text-colour); overflow: hidden; margin-right: 5px;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*the actual text*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: #160307; font-size: 11px; line-height: 14px;][COMMENT]
-----------YOU CAN TYPE IN YC'S CS STARTING FROM HERE-----------
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; font-style: normal;]personality[/border][/border] [b][i]POSITIVE TRAITS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]NEGATIVE TRAITS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; margin-top: 7px; font-style: normal;]relevant history[/border][/border] [right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; line-height: 14px; margin-top: 7px; font-style: normal;]significant relationships[/border][/border] [b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right][COMMENT]
-----------DON'T TYPE ANYTHING PAST THIS COMMENT-----------
[/COMMENT][/border][/border][/border][border= /*PIC 2*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: var(--ycs-second-square-picture); background-size: 110%;][/border][/border][border= /*QUOTE 2*/ 0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: var(--background-colour); border-radius: 7px; margin: auto; position: relative; color: #160307; font-size: 11px; line-height: 14px; text-align: left; font-style: oblique; letter-spacing: 0.05em; margin-bottom: 3px; overflow: hidden; z-index: 1; text-transform: lowercase;][COMMENT]
-----------ADD THE BOTTOM QUOTE HERE-----------
[/COMMENT]could you tell me what's real?[/border][border=
/*pics + name container 2*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; max-width: 400px; margin: auto; display: flex; align-items: flex-start; justify-content: space-around; position: relative; z-index: 2;][border= /*LAST NAME*/ 0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: var(--ycs-name-text-colour); font-weight: 500; text-transform: lowercase; text-align: left; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; margin-top: -16px;][COMMENT]
-----------ADD YC'S LAST NAME HERE-----------
[/COMMENT][font=Pinyon Script]family[/font][/border][border=
0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; width: 130px;][border=0; box-sizing: border-box; padding: 0; display: flex;][border= /*FOURTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--fourth-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*FIFTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--fifth-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*SIXTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--sixth-circle-picture); background-size: cover; border-radius: 100%;][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 13px 0 0 0; font-size: 7px; text-align: center; line-height: 8px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10382423]code[/url] by valen t.[/border][/border][/border][/border]
Last edited:
7 | linen n pearls
VALEN T.
Member
- mobile-friendly
- keep credits
- don't be afraid to ask any questions :>
- hidden-scroll (in the portrait pic too !)
- 3 tabs (tap bw the 3 little circles in the landscape pic)
- i made like 3 colour palettes for this n the went this one in particular bc holy fuck chungha c’mon + i love neutrals so much
- is this cheating ? i had a bbcode+ version of this n made it a bbcode-only one uwu
code by valen t.
Code:
[COMMENT]
———the 11 variable tags (the ones starting with "--" are meant to be filled in with your own links + colours; i'd suggest having the "heading-text-colour" darker than the "cs-background-colour"; for the "quote-background-colour" only fill in your rgb value in place of the first 3 numbers, don't mess with that "0.2"———
[/COMMENT][border= /*CONTAINER*/ 0;
--vertical-ycs-picture: url(https://i.pinimg.com/564x/b4/fd/96/b4fd969df36c6202a69ad04eae0ae69f.jpg) 50% 50%;
--background-colour: #DDD7D1;
--quote-background-colour: rgba(113, 90, 79, 0.2);
--horizontal-top-pic: url(https://i.pinimg.com/564x/8f/c6/4b/8fc64b25d8afed85f372c1cacfac1ba1.jpg) 50% 10%;
--button-1-colour: #8A6E61;
--button-2-colour: #7F726B;
--button-3-colour: #797573;
--cs-background-colour: #B4907F;
--heading-background-colour: #EAE6E2;
--heading-text-colour: #715A4F;
--small-icon-top-right: url(https://i.pinimg.com/originals/b4/75/50/b4755092f378cc1a06ae2e5e0c5ad397.png) 50% 50% no-repeat;
box-sizing: border-box; padding: 10px; position: relative; background: var(--background-colour); margin: auto; max-width: 430px; height: 360px;][border=0; box-sizing: border-box; padding: 0; position: relative; height: 100%; width: 100%; z-index: 1;][border= /*VERTICAL PIC*/ 0; box-sizing: border-box; padding: 0; position: absolute; bottom: 0; right: 0; height: 290px; width: 127px; background: var(--vertical-ycs-picture); background-size: cover; z-index: 4; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 290px; width: 200%; overflow: auto;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; height: 290px; position: relative; margin-top: 290px; width: 127px; background: var(--quote-background-colour); display: flex; justify-content: center; align-items: center; text-align: center; font-variant: small-caps; color: white; font-size: 13px; font-weight: bold; letter-spacing: 0.07em;][COMMENT]
———ADD THE QUOTE THAT SCROLLS ON YCS PIC HERE———
[/COMMENT]tell me something nice ‘bout your favourite girl[/border][/border][/border][border=
/*tabs + text box container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: calc(100% - 50px); height: 100%; display: flex; justify-content: center; z-index: 2;][border= /*HORIZONTAL PIC*/ 0; box-sizing: border-box; padding: 0; position: absolute; background: var(--horizontal-top-pic); background-size: cover; top: 0; left: 0; height: 100px; width: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-1-colour); margin-right: 37px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-2-colour); margin-right: 37px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-3-colour);][/border][/border][border= /*tabs*/ 0; box-sizing: border-box; padding: 38px 0 0 0; width: 209px; color: white; text-align: justify; font-size: 11px; line-height: 14px;][tabs][tab=.][border= /*PAGE 1*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); position: absolute; left: 0; bottom: 0; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border= /*TAB 1 TEXT*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 50%;][COMMENT]
———CONTENT INSIDE TAB 1 STARTS FROM HERE———
—the "heading" tag is for major headings like "basics", "persona", "history", etc—
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold;]basics[/border][/border] [b][i]NAME.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]NICKNAME(S).[/i][/b]
[right][i]answer.[/i][/right]
[b][i]AGE.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]D.O.B.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ZODIAC.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]GENDER.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PRONOUNS.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]SEXUALITY.[/i][/b][i][/i]
[right][i]answer.[/i][/right]
[b][i]ROMANTIC ORIENTATION.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]P.O.B[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ACADEMIC LEVEL.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]OCCUPATION.[/i][/b]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]visage[/border][/border] [b][i]FACE CLAIM.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]HEIGHT.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]BODY MODS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]BIRTHMARK(S).[/i][/b]
[right][i]answer.[/i][/right]
[b][i]SCAR(S).[/i][/b]
[right][i]answer.[/i][/right]
[b][i]IDENTIFIER.[/i][/b]
[right][i]e.g. jewellery, hair colour, etc.[/i][/right][COMMENT]
———DON'T TYPE ANYTHING PAST THIS COMMENT———
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*PAGE 2*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); position: absolute; left: 0; bottom: 0; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border= /*TAB 2 TEXT*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 50%;] [COMMENT]
———CONTENT INSIDE TAB 2 STARTS FROM HERE———
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]personality[/border][/border] [b][i]VIRTUES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]VICES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]FEARS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]misc[/border][/border] [b][i]LIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]DISLIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]HEALTH CONDITIONS.[/i][/b]
[right][i]e.g. terminal illness.[/i][/right]
[right][i]mental health issues.[/i][/right]
[right][i]etc.[/i][/right]
[b][i]TRIVIA FACTS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]HEADCANONS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]THEME SONGS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right][COMMENT]
———DON'T TYPE ANYTHING PAST THIS COMMENT———
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*PAGE 3*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); position: absolute; left: 0; bottom: 0; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border= /*TAB 3 TEXT*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 50%;][COMMENT]
———CONTENT INSIDE TAB 3 STARTS FROM HERE———
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]history[/border][/border] [right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]significant relationships[/border][/border] [b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right][COMMENT]
———DON'T TYPE ANYTHING PAST THIS COMMENT———
[/COMMENT][/border][/border][/border][/tab][/tabs][/border][/border][border= /*SMALL ICON*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; right: 0; height: 40px; width: 40px; background: var(--small-icon-top-right); background-size: 100%;][/border][border= /*there was a part of the tabs visible so i hid it w this*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 10px; width: 100%; left: 0; top: 100px; background: var(--background-colour); z-index: 3;][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; font-size: 7px; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-—-mobile-friendly-no-bbcode.471463/#post-10392668]code[/url] by valen t.[/border]
Last edited:
Shadow Alpha
Senior Member
Your codes gave me hope because these are the first ones I've seen with built in image dimension restrictions, thank you
VALEN T.
Member
you're very very welcome luv
i'm just glad you've (maybe ? 
) found what you were looking for in my codes xx
8 | closer than friends
VALEN T.
Member
- mobile-friendly or at least, iphone-friendly
- keep credits
- don't be afraid to ask any questions :>
- hidden scrolls
- 4 tabs (circles)
- honestly idek what wish u were gay was but i like billie
- this code looks ugly to me; not the visual we see but the actual code, the t e x t yknow ?? idk sdkhsks
- x
code by valen t.
Code:
[COMMENT]
--------the 9 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border= /*container*/ 0;
--ycs-big-picture: url(https://i.pinimg.com/originals/63/0a/b6/630ab678255f061d0f0163d5521fb39c.jpg) 50% 50%;
--main-accent-colour: #C7C3B9;
--button-2-colour: #A9816E;
--button-3-colour: #73604F;
--button-4-colour: #B3A396;
--text-background-colour: #232322;
--tab-2-picture: url(https://i.pinimg.com/originals/96/d1/f5/96d1f541cd32e6e197ea2e3b9ace589c.png) 100% 57%;
--tab-3-picture: url(https://i.pinimg.com/564x/46/f2/12/46f212085fea7472c6002e152c248a61.jpg) 50% 40%;
--tab-4-picture: url(https://i.pinimg.com/564x/77/c4/95/77c495badd027bf0d7c962eaddef675e.jpg) 50% 20%;
box-sizing: border-box; padding: 0; max-width: 620px; min-height: 370px; position: relative; margin: auto; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-wrap: wrap; cursor: default;][border= /*left container*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 320px; height: 370px; position: relative; overflow: hidden; margin-bottom: 10px;][border= /*YC'S PICTURE*/ 20px solid var(--main-accent-colour); box-sizing: border-box; padding: 0; width: 100%; background: var(--ycs-big-picture); background-size: cover; position: relative; height: 370px; overflow: hidden; z-index: 2; color: var(--main-accent-colour);][border= /*lyric pt 1*/ 0; box-sizing: border-box; padding: 0 6px 1px 0; position: absolute; text-transform: uppercase; top: -3px; left: -3px; font-weight: bold; font-style: oblique; z-index: 3; font-size: 30px; line-height: 24px;][COMMENT]
----------------FIRST HALF OF YOUR LYRIC/QUOTE OR YC'S GIVEN NAME GOES HERE----------------
--------the one on top of yc's picture--------
[/COMMENT]fallen[/border][border=
/*lyric pt 2*/ 0; box-sizing: border-box; padding: 0 6px 1px 0; position: absolute; text-transform: uppercase; bottom: -2px; left: -3px; font-weight: bold; font-style: oblique; z-index: 3; font-size: 30px; line-height: 24px;][COMMENT]
----------------SECOND HALF OF YOUR LYRIC/QUOTE OR YC'S SURNAME GOES HERE----------------
[/COMMENT]for a lie[/border][/border][/border][border=
/*right*/ 0; box-sizing: border-box; padding: 20px 0 0 0; width: 300px; position: relative; height: 370px; margin-bottom: 10px; background: var(--text-background-colour); overflow: hidden;][border= /*button container*/ 0; box-sizing: border-box; padding: 22px 0 17px 15px; width: 100%; position: absolute; height: 146px; left: 0; top: 0; opacity: 1; pointer-events: none; background: var(--text-background-colour); display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--main-accent-colour);][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-2-colour);][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-3-colour);][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-4-colour);][/border][/border][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 90px; margin-left: -20px; color: var(--main-accent-colour);][tabs][tab=.][border= /*tab 1*/ 0; box-sizing: border-box; padding: 0 20px 20px 17px; background: var(--text-background-colour); position: absolute; left: 0; bottom: 0; width: 100%; height: 224px; display: flex; align-items: center;][border= /*line*/ 0; box-sizing: border-box; padding: 0; width: 2px; height: 100%; position: relative; background: var(--main-accent-colour); margin-left: 7px; margin-right: 15px;][/border][border= /*quote container*/ 0; box-sizing: border-box; padding: 0; flex: 1; text-align: left; text-transform: uppercase; letter-spacing: 0.05em;][border= /*big word*/ 0; box-sizing: border-box; padding: 0 0 13px 5px; font-size: 45px; line-height: 33px;][COMMENT]
----------------ADD THE FIRST WORD OF YOUR QUOTE HERE----------------
--------btw this is 1st tab--------
[/COMMENT][font=Times New Roman]if[/font][/border][border=
/*rest of quote*/ 0; box-sizing: border-box; padding: 0; font-style: oblique; font-size: 9px; line-height: 15px;][COMMENT]
----------------TYPE IN THE REST OF YOUR QUOTE HERE----------------
[/COMMENT]i love you
was a promise
would you break it
if you're honest[/border][/border][/border][/tab][tab=.][border=
/*pic 2*/ 5px solid var(--button-2-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-2-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 2*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]
----------------THIS IS WHERE YOU CAN START TYPING IN YOUR CS----------------
--------this is the basics' page--------
----the "title" tag is for the headings like "name" "nickname" "age" etc, while the "answer" tag is where you type in your answers----
[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]name:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie eilish pirate baird o'connell[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]nickname:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie, avocado[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]age:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]18[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]d.o.b:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]18 december[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]zodiac:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]sagittarius[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]gender:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]female[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]pronouns:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]she/her[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]sexuality:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]romantic orientation:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]face claim:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie eilish[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]body mods:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]dyed hair, possible tattoo(s), ear piercings[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]build:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]height:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]5'3"[/border][COMMENT]
----------------DON'T TYPE ANYTHING PAST THIS COMMENT----------------
[/COMMENT][/border][/border][/tab][tab=.][border= /*pic 3*/ 5px solid var(--button-3-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-3-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 3*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]
----------------YOU CAN START TYPING YOUR CS IN FROM HERE----------------
--------this is the personality tab--------
[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]likes:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]cautious, kind, committed, crime, button, finger, trigger, trigger, finger[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]dislikes:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]sitting, alone, mouth, gum, driveway, friends, car, bodies[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]hobbies:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]watching; some time; staring; oceans eyes; burning cities; napalm skies; fifteen flares; ocean eyes; ocean eyes
pretend; miss; pretend; care; kiss; shame; pretend; miss me; pretend; care; kiss; shame[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]quirks:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]lips; teeth; tongue; heart; eight beats; him
thought; found; way; thought; found; way; never; go away; guess; gotta; stay[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]skills:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]call; back; get; minute; talk; know; forget; time; number; blocked
should've; known; alone; show; blood; bleed; blood; owe[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]positive traits:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]alone, alone, sense, steal, soul, hide, treasure chest[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]negative traits:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]told, worry, lie, honey, hurry, inside, remember, close, stars, give, love, ours[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]trivia facts:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]baby; don't; feel; good; six; words; understood; never; go; five; words; say; laugh; nothing; wrong; four; days; felt; long; three; crowd; two; us; one; slipped
true; tell; lied to; crying; like you; hell; never; type; someone; right through[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]headcanons:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]white shirt; red; bloody nose; sleeping; tippy toes; creeping; no one; criminal; bruises; knees; thank you; please; want; wanting; soul; cynical
standing; killing; commit; crime; peter's; vacation; invitation; animals; evidence; pearly gates; picket fence; inside; friends; invite them[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]theme songs:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]don't; know; good for you; learned; lose; afford; tore; shirt; bleeding; nothing; stops; leaving
want; run; wondering; what; know; scared; care; fall asleep;go[/border][COMMENT]
----------------DON'T TYPE ANYTHING PAST THIS COMMENT----------------
[/COMMENT][/border][/border][/tab][tab=.][border= /*pic 4*/ 5px solid var(--button-4-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-4-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 4*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]
----------------YOU CAN START TYPING YOUR CS IN FROM HERE----------------
--------this is the history tab--------
[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]history:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]don't be that way fall apart twice a day i just wish you could feel what you say show, never tell but i know you too well got a mood that you wish you could sell if teardrops could be bottled there'd be swimming pools filled by models told "a tight dress is what makes you a whore" if "i love you" was a promise would you break it, if you're honest? tell the mirror what you know she's heard before i don't wanna be you, anymore hand, hands getting cold losing feeling is getting old was i made from a broken mold? hurt, i can't shake we've made every mistake only you know the way that i break if teardrops could be bottled there'd[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]relationships:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 6px 0 10px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;][font=Times New Roman][size=13px]mother:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]my boy's being sus', he was shady enough, but now he's just a shadow my boy loves his friends like i love my split ends, and by that i mean he cuts 'em off (what?!) my boy my boy my boy don't love me like he promised my boy my boy my boy he ain't a man, and sure as hell ain't honest my boy's being sus' and he don't know how to cuss he just sounds like he's tryna be his father (who are you?) my boy's an ugly crier but he's such a pretty liar and by that i mean he said he'd "change" my boy my boy my boy don't love me like he promised my boy my boy my boy he ain't a man and sure as hell ain't honest my boy, my boy, my friends, i love my split ends (alright dude, go trip over a knife) my boy my[/border]
[font=Times New Roman][size=13px]father:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]what is it about them? i must be missing something they just keep doing nothing too intoxicated to be scared better off without them they're nothing but unstable bring ashtrays to the table and that's about the only thing they share i'm in their second hand smoke still just drinking canned coke i don't need a xanny to feel better on designated drives home only one who's not stoned don't give me a xanny now or ever waking up at sundown they're late to every party nobody's ever sorry too inebriated now to dance morning as they come down (come down) their pretty heads are hurting (hurting) they're awfully bad at learning (learning) make the same mistakes, blame circumstance i'm in their second hand smoke still just drinking canned coke i don't need a xanny to feel[/border]
[font=Times New Roman][size=13px]sibling:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]in the end, when they're all gone when the world is silent and the days are long just you and i, we'll be alive we made it on our own 'cause everybody makes it 'till they don't and everybody wants to think they won't 'cause everybody makes it 'till they don't and everybody seems to think they won't, they won't, they won't, they won't baby, i'm still alive but my heart is beating slow baby, tell me i gotta know are you okay? you seem too far gone infected, standing there all alone 'cause everybody makes it 'till they don't and everybody wants to think they[/border][COMMENT]
--------i feel the need to add this to avoid confusion: this is where the tags for the "relationships" part ends--------
--------if you wanna add more relationships, simply copy the "specified" tag and write the relationship name on top (i.e. "sister" + "specified")--------
[/COMMENT][/border][COMMENT]
--------if you want to add any more "titles" you can do this before this comment--------
----------------DON'T TYPE ANYTHING *AFTER* THIS COMMENT----------------
[/COMMENT][/border][/border][/tab][/tabs][/border][/border][/border][border= /*credits*/ 0; box-sizing: border-box; padding: 0; width: 100%; font-size: 7px; position: relative; width: 100%; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10429403]code[/url] by valen t.[/border]
Last edited:
9 | kingdom keys
VALEN T.
Member
- mobile-friendly
- keep credits
- don't be afraid to ask any questions :>
- hidden scroll in the main text boxes for both versions
- note: there's also hidden scroll in the extra rp details (e.g. mood, outfit, location, interactions) box of the ic code just in case the text overflows
- 4 tabs (circles) in both versions from which you can access the different cs sections (e.g. basics, visage, persona, history) and the extra ic rp details (e.g. mood, outfit, location, interactions) respectively
- wheeeeee a two-in-one post today bc i felt inspired and had time i could've used to reply to my rps instead but nope
ily guys i'm so sry - taylor swift is the feminist icon and lgbtq+ ally this world needs, she can never do anything wrong and i stand by that ):< i love her sm guys i can't- *crys*
Code:
[COMMENT]
-------the 8 variable values (the ones starting with "--" are meant to be filled in with your links + colours; for me, the "quote colour" is the brown/gold, and the "other colour" is the black-------
[/COMMENT][border= /*whole container*/ 0;
--quote-colour: #D4AD98;
--other-colour: #171B16;
--background-colour: #F0F0F1;
--tab-1-picture: url(https://64.media.tumblr.com/eff377cc7669e41af8b32ccbfb453c78/tumblr_phyywn6nUe1xxmeipo5_1280.jpg) 0 0;
--tab-2-picture: url(https://64.media.tumblr.com/8723364c4289a4b485ef96c0ba237271/tumblr_phyywn6nUe1xxmeipo7_1280.jpg) 60% 0 no-repeat;
--tab-3-picture: url(https://64.media.tumblr.com/acbeb4a43722ca383565eddeb3b527ac/tumblr_phyywn6nUe1xxmeipo1_1280.jpg) 50% 100%;
--tab-4-picture: url(https://64.media.tumblr.com/41bd9782f01e06804e2ee418df24763f/tumblr_phyywn6nUe1xxmeipo6_1280.jpg) 35% 80% no-repeat;
--text-colour: #BA9785;
box-sizing: border-box; padding: 40px 0 40px 0; max-width: 400px; height: auto; display: flex; background: var(--background-colour); flex-direction: column; align-items: center; justify-content: center; margin: auto;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 5px; width: calc(100% - 80px); font-size: 9px; text-align: center; background: var(--quote-colour); font-weight: bold; letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); margin-bottom: 11px; position: relative; color: var(--other-colour); text-transform: uppercase;][COMMENT]
--------------A TITLE FOR YC--------------
[/COMMENT]heartbreak queen[/border][border=
/*bottom*/ 0; box-sizing: border-box; padding: 4px 0 0 0; width: calc(100% - 80px); height: 420px; background: transparent; position: relative; overflow: auto; display: flex; overflow: hidden; font-size: 11px; color: var(--text-colour); text-align: justify;][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: auto; background: transparent; margin-left: -35px;][tabs][tab=.][border= /*tab 1*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 1*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-1-picture); background-size: cover; border-radius: 100%; z-index: 3;][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 1st "basics" tab-------
-------ctrl c + v the "heading" tag if you want to add more stuff in your cs-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]name[/border]Taylor Swift
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]nickname[/border]Tater Tot
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]age[/border]30
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]d.o.b.[/border]13[sup]th[/sup]December
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]zodiac[/border]Sagittarius
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]gender[/border]Female
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]pronouns[/border]She/Her
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]sexuality[/border]???
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]romantic orientation[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]academic level[/border]High school graduate
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]occupation[/border]Singer-songwriter[COMMENT]
--------------TAB 1 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*tab 2*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-2-picture); background-size: 110%; border-radius: 100%; z-index: 3; filter: hue-rotate(-10deg);][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 2nd "appearance" tab-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]face claim[/border]Taylor Swift
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]height[/border]5'10"
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]weight[/border]56 kg
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]build[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: v; display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]piercings[/border]Standard lobe
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]tattoos[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]body mods[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]hair[/border]Ash blonde
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]eyes[/border]Electric blue with a black tint
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]attire[/border]Classy[COMMENT]
--------------TAB 2 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab]=[tab=.][border= /*tab 3*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 3*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-3-picture); background-size: 110%; border-radius: 100%; z-index: 3; filter: brightness(90%);][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 3rd "personality" tab-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]positive traits[/border]We're all bored; we're all so tired of everything; we wait for trains that just aren't coming; we show off our different scarlet letters; trust me, mine is better
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]negative traits[/border]We're so young but we're on the road to ruin; we play dumb but we know exactly what we're doing; we cry tears of mascara in the bathroom; honey, life is just a classroom
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]quirks[/border]'Cause, baby, I could build a castle out of all the bricks they threw at me, and every day is like a battle but every night with us is like a dream
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]hobbies[/border]Baby, we're the new romantics; come on, come along with me; heart break is the national anthem; we sing it proudly; we are too busy dancing, so get knocked off our feet; baby, we're the new romantics; the best people in life are free
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]skills[/border]We're all here; the lights and boys are blinding; we hang back; it's all in the timing; it's poker; he can't see it in my face, but I'm about to play my Ace
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]likes[/border]We need love, but all we want is danger; we team up then switch sides like a record changer; the rumors are terrible and cruel, but, honey most of them are true
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]dislikes[/border]'Cause, baby, I could build a castle out of all the bricks they threw at me, and every day is like a battle, but every night with us is like a dream[COMMENT]
--------------TAB 3 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*tab 4*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 4*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-4-picture); background-size: 130%; border-radius: 100%; z-index: 3;][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 4th "history" tab-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]trivia[/border]Knew he was a killer first time that I saw him; wondered how many girls he had loved and left haunted; but if he's a ghost, then I can be a phantom, holdin' him for ransom; some boys are tryin' too hard, he don't try at all though; younger than my exes, but he act like such a man, so I see nothing better, I keep him forever like a vendetta
I see how this is gon' go; touch me and you'll never be alone; island breeze and lights down low; no one has to know
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]headcanons[/border]In the middle of the night, in my dreams, you should see the things we do, baby; in the middle of the night, in my dreams, I know I'm gonna be with you, so I take my time; are you ready for it?
Knew I was a robber first time that he saw me stealing hearts and running off and never sayin' sorry; but if I'm a thief, then he can join the heist, and we'll move to an island, and he can be my jailer, Burton to this Taylor; every love I've known in comparison is a failure; I forget their names now, I'm so very tame now; never be the same now
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]history[/border]Don't blame me, love made me crazy; if it doesn't, you ain't doin' it right; Lord, save me, my drug is my baby; I'd be usin' for the rest of my life
I've been breakin' hearts a long time, and toyin' with them older guysl just playthings for me to use; something happened for the first time, in the darkest little paradise; shakin, pacin', I just need you
For you, I would cross the line; I would waste my time, I would lose my mind; they say she's gone too far this time
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]significant relationships[/border]
[B]Andrea Swift:[/B] I would be complex; I would be cool; they'd say I played the field before I found someone to commit to, and that would be okay for me to do; every conquest I had made would make me more of a boss to you
[B]Scott Swift:[/B] I'd be a fearless leader; I'd be an alpha type; when everyone believes ya, what's that like?
[B]Austin Swift:[/B] I'm so sick of running as fast as I can, wondering if I'd get there quicker; if I was a man; and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man[COMMENT]
--------------TAB 4 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab][/tabs][/border][border= /*button container*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; position: absolute; top: 4px; left: 0; height: 111px; width: 35px; background: var(--background-colour); transparent; opacity: 1; pointer-events: none; display: flex; flex-direction: column; z-index: 2;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; align-self: flex-end; margin-bottom: 8px;][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; margin-bottom: 10px;][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-bottom: 8px;][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; align-self: flex-end;][/border][/border][border= /*pics border*/ 0; box-sizing: border-box; padding: 0; height: 119px; width: 119px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-left: -30px; margin-right: 15px; margin-top: -4px;][/border][border= /*quote box*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; height: 111px; flex: 1; position: relative;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 2px 0 0; height: 100%; width: 100%; display: flex; text-align: right; justify-content: flex-end; align-items: center; font-weight: bold; font-size: 19px; font-style: oblique; line-height: 21px; letter-spacing: 0.02em;][COMMENT]
--------------ADD A QUOTE/LYRIC HERE--------------
[/COMMENT][font=UnifrakturMaguntia]honey, i rose up from the dead (i do it all the time)[/font][/border][/border][border=
/*cover*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 10px; opacity: 0.5px; background: var(--background-colour); left: 0; top: 130px; position: absolute; z-index: 1;][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10440573]code[/url] by valen t.[/border]
Code:
[COMMENT]
------the 5 variable values (starting with "--") are meant to be filled in with your own links + colours; for me, the "quote-colour" is the brown/gold, while the "other-colour" is the black-------
[/COMMENT][border= /*whole container*/ 0;
--quote-colour: #D4AD98;
--other-colour: #171B16;
--ycs-picture: url(https://64.media.tumblr.com/eff377cc7669e41af8b32ccbfb453c78/tumblr_phyywn6nUe1xxmeipo5_1280.jpg) 0 0;
--background-colour: #F0F0F1;
--text-colour: #BA9785;
box-sizing: border-box; padding: 40px 0 40px 0; max-width: 400px; height: auto; display: flex; background: var(--background-colour); flex-direction: column; align-items: center; justify-content: center; margin: auto; overflow: hidden;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 5px; width: calc(100% - 80px); font-size: 9px; text-align: center; background: var(--quote-colour); font-weight: bold; letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); margin-bottom: 11px; position: relative; color: var(--other-colour); text-transform: uppercase;][COMMENT]
--------------A TITLE FOR YC--------------
[/COMMENT]heartbreak queen[/border][border=
/*bottom*/ 0; box-sizing: border-box; padding: 4px 0 0 0; width: calc(100% - 80px); height: 420px; background: transparent; position: relative; overflow: auto; display: flex; overflow: hidden;][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: auto; background: transparent; margin-left: -35px;][tabs][tab=.][border= /*mood*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S MOOD--------------
[/COMMENT][B]MOOD:[/B] You are somebody that I don't know but you're takin' shots at me like it's Patrón and I'm just like, damn, it's 7 AM[/border][/border][/border][/tab][tab=.][border=
/*outfit*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S OUTFIT--------------
[/COMMENT][B]OUTFIT:[/B] [URL='https://www.youtube.com/watch?v=Dkk9gvTmCXY']You Need To Calm Down[/URL][/border][/border][/border][/tab][tab=.][border=
/*location*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S LOCATION--------------
[/COMMENT][B]LOCATION:[/B] Say it in the street, that's a knock-out but you say it in a Tweet, that's a cop-out and I'm just like, "Hey, are you okay?"[/border][/border][/border][/tab][tab=.][border=
/*interactions*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S INTERACTIONS--------------
[/COMMENT][B]INTERACTIONS:[/B] And I ain't tryna mess with your self-expression but I've learned a lesson that stressin' and obsessin' 'bout somebody else is no fun and snakes and stones never broke my bones[/border][/border][/border][/tab][/tabs][/border][border=
/*button container*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; position: absolute; top: 4px; left: 0; height: 111px; width: 35px; background: var(--background-colour); transparent; opacity: 1; pointer-events: none; display: flex; flex-direction: column; z-index: 2;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; align-self: flex-end; margin-bottom: 8px;][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; margin-bottom: 10px;][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-bottom: 8px;][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; align-self: flex-end;][/border][/border][border=/*YC'S PIC*/ 4px solid var(--quote-colour); box-sizing: border-box; padding: 0; height: 119px; width: 119px; background: var(--ycs-picture); background-size: cover; position: relative; border-radius: 100%; margin-left: -30px; margin-right: 15px; margin-top: -4px;][/border][border= /*quote box*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; height: 111px; flex: 1; position: relative;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 2px 0 0; height: 100%; width: 100%; display: flex; text-align: right; justify-content: flex-end; align-items: center; font-weight: bold; font-size: 19px; font-style: oblique; line-height: 21px; letter-spacing: 0.02em; color: var(--text-colour);][COMMENT]
--------------ADD A QUOTE/LYRIC HERE--------------
[/COMMENT][font=UnifrakturMaguntia]honey, i rose up from the dead (i do it all the time)[/font][/border][/border][border=
/*cover*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 10px; opacity: 0.5px; background: var(--background-colour); left: 0; top: 130px; position: absolute; z-index: 1;][/border][border= /*TEXT*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 250px; position: absolute; bottom: 38px; left: 0; background: var(--background-colour); z-index: 2; overflow: auto;][border=0; box-sizing; border-box; padding: 0; width: 50%; font-size: 11px; text-align: justify; color: var(--text-colour);][COMMENT]
--------------YOU CAN START TYPING IN YOUR POST FROM HERE--------------
[/COMMENT]I would be complex; I would be cool; they'd say I played the field before I found someone to commit to and that would be okay for me to do; every conquest I had made would make me more of a boss to you
I'd be a fearless leader; I'd be an alpha type; when everyone believes ya, what's that like?
I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man, and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man; I'd be the man; I'd be the man
They'd say I hustled; put in the work; they wouldn't shake their heads and question how much of this I deserve; what I was wearing, if I was rude, could all be separated from my good ideas and power moves; and they would toast to me, oh, let the players play; I'd be just like Leo, in Saint-Tropez
I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man, and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man; I'd be the man; I'd be the man
What's it like to brag about raking in dollars and getting bitches and models? And it's all good if you're bad, and it's okay if you're mad
If I was out flashin' my dollas, I'd be a bitch, not a baller; they'd paint me out to be bad so it's okay that I'm mad; I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man (you know that); and I'm so sick of them coming at me again (coming at me again) 'cause if I was a man (if I was man) then I'd be the man (then I'd be the man)
I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man (hey)
And I'm so sick of them coming at me again (coming at me again) 'cause if I was a man (if I was man) then I'd be the man; I'd be the man; I'd be the man (oh); I'd be the man (yeah); I'd be the man (I'd be the man)[COMMENT]
--------------DON'T TYPE ANYTHING PAST THIS COMMENT--------------
[/COMMENT][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10440573]code[/url] by valen t.[/border]
Last edited:
Folly-Derrezzed
Heaven restores you in life.
These look amazing!...how do they work?
VALEN T.
Member
ilysm thank you
also i'm sorry
like...how the tabs in these work, how to personlise/edit them, or how i coded these in the first place ?
Folly-Derrezzed
Heaven restores you in life.
I mean, how do i copy and paste them? Is it the code itself and put whatever in there or is it the decor i copy(if i can use these).
VALEN T.
Member
of course, luv, feel free to use them !
+ i’ve left a spoiler at the bottom of each post with the complete code that you can copy & paste into ur private workshop and fiddle around with :>
there’s also some helpful comments i’ve left here and there in the code, but if anything’s confusing/isn’t working, you can always pm me and i’ll help you to the best of my abilities
10 | "page number?"
VALEN T.
Member
- mobile-friendly
- keep credits
- don't be afraid to ask any questions :>
- hidden scrolls in the main text box as well as the 4 accordions
- speaking of: there are 4 hidden accordions and you get a cookie if you find them (hint: they're on the left !)
- i have NO previous experience with accordions like i even fucking spelt it "accordian" and cried for 2 minutes str8 when it didnt work like im srsly so dumb
- credits to
Uxie
bc i used a code of theirs to learn 
- pic credits to @cosyfaerie on insta
code by valen t.
Code:
[COMMENT]
-------------the 10 variable tags (the ones starting with "--" are meant to be filled in with your own colours + links-------------
[/COMMENT][border=0;
--name-n-quote-bg-colour: #5A493C;
--1-accordion-pic: url(https://64.media.tumblr.com/4f3cf242add10423885700b0dad97f8a/c05d4efdddf9c80b-0f/s1280x1920/14c02ad385862f4ee1efc2eacba18b9dafc1dd27.jpg) 50% 50%;
--1-accordion-bg-colour: #957161;
--2-accordion-pic: url(https://64.media.tumblr.com/452e3a9f14d69b7a96f67ff6aea3afd0/c05d4efdddf9c80b-1f/s1280x1920/4b75b0513df9f5cb01698ec4759b8af847096a57.jpg) 50% 20%;
--2-accordion-bg-colour: #86827B;
--3-accordion-pic: url(https://64.media.tumblr.com/d2300dfcf025e63946412de33d7c3ae5/c05d4efdddf9c80b-bc/s1280x1920/f587f78ad26233d461d754ec75444cac785594da.jpg) 50% 50%;
--3-accordion-bg-colour: #96999A;
--4-accordion-pic: url(https://64.media.tumblr.com/db7e40c405ca81346d930f35e8feb8ad/c05d4efdddf9c80b-ab/s1280x1920/c829119e49ee9b7c0224d633f3a4b573fee4daef.jpg) 50% 50%;
--4-accordion-bg-colour: #998674;
--text-colour: white;
box-sizing: border-box; padding: 0;][border= /*container*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; margin: auto; height: 460px; max-width: 500px; overflow: hidden;][border= /*left*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 2; position: relative; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 6;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--1-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 1st accordion's deets here-------------
[/COMMENT][B]MOOD:[/B] Donec posuere nisl tortor
[B]OUTFIT:[/B] Donec aliquam vestibulum ex
[B]LOCATION:[/B] Vivamus quis aliquet est[COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 1*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 118px; width: calc(100% + 3px); background: var(--1-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 5;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--2-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 2nd accordion's deets here-------------
[/COMMENT][B]INTERACTIONS:[/B] Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum
[B]MENTIONS:[/B] Donec cursus justo eu aliquet venenatis. Integer consequat[COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: var(--2-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 4;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--3-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 3rd accordion's deets here-------------
[/COMMENT][B]TAGS:[/B]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER][COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 116.75px; width: calc(100% + 3px); background: var(--3-accordion-pic); background-size: cover; top: -123px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 3;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--4-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 4th accordion's deets here-------------
[/COMMENT][B][plain]TL;DR:[/plain][/B] Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis[COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 4*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: var(--4-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][/border][border=/*right*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 5; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; position: relative; display: flex; flex-direction: column;][border= /*NAME*/ 0; box-sizing: border-box; padding: 0 10px 1px 10px; width: 100%; background: var(--name-n-quote-bg-colour); text-align: center; font-weight: bold; text-transform: uppercase; font-size: 26px; color: var(--text-colour); font-style: oblique; line-height: 26px; position: relative; margin-bottom: 10px;][COMMENT]
-------------type in yc's name here-------------
[/COMMENT]asiya[COMMENT]
-------------don't type anything after this comment-------------
[/COMMENT][/border][border=/*text*/ 0; box-sizing: border-box; padding: 0; width: 200%; position: relative; flex: 1; overflow: auto;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 0 0 10px; width: 50%; position: relative; text-align: justify; font-size: 11px; line-height: 15px;][COMMENT]
-------------start typing in your ic post from here-------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.
Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.
Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.[COMMENT]
-------------don't type anything after this comment-------------
[/COMMENT][/border][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 10px; width: 100%; height: 115px; background: var(--name-n-quote-bg-colour); position: relative; margin-top: 10px; font-weight: bold; color: var(--text-colour); text-transform: uppercase; text-align: right; display: flex; justify-content: flex-end; align-items: center; font-style: oblique; font-size: 14px; line-height: 14px;][COMMENT]
-------------add a quote/lyric here-------------
[/COMMENT]it may be quite simple but now that it's done
I hope you don't mind
That I put down in words
How wonderful life is while you're in the world[COMMENT]
-------------don't type anything after this comment-------------
[/COMMENT][/border][/border][/border][/border][border=/*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; max-width: 500px; margin: auto; position: relative; display: flex;][border=0; box-sizing: border-box; padding: 0; flex: 2;][/border][border=0; box-sizing: border-box; padding: 0; flex: 5; font-size: 7px; line-height: 11px; text-align: center;][URL='https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10452145']code[/URL] by valen t.[/border][/border][/border]
Last edited: