[comment][font=Karla][font=Rubik]attempt 2819 to make me and rev bbcoders of the month
inspired by [MEDIA=pastebin]cwNNm26t[/MEDIA][/font][/font]

[/comment][border=0;
padding:0;
display:block;
font-smoothing:antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
position:relative;
white-space:nowrap;
box-sizing:border-box;
width:100%;
height:auto;
text-align:justify;
overflow:hidden;
line-height:0px;
padding-top:60px;
padding-bottom:60px;
font-size:0px;
color: black;

/*   ------   colours   ------   */
background:#eaeaea;
--left: #f3f3f3;
--right:#fafafa;
--bannertop: white;
--note:#E4DAD1;
--sticky1:rgba(209, 228, 227, 0.8);
--sticky2: rgba(89, 89, 89, 0.8);
--sticky3:rgba(209, 228, 227, 0.9);

/*   ------  fonts and colours   ------   */
--font: Rubik;
--mainfont: Karla;
--headerfontcolor: #5e5e5e;

/*   ------   images   ------   */
--profilepic: URL(https://i.pinimg.com/564x/d4/54/8a/d4548a7819ab9f358bb1ac6d375dc274.jpg)  center/cover no-repeat ;
--mood: URL(https://media1.giphy.com/media/mh90WH2cCgmOI/giphy-downsized.gif) center/cover no-repeat;
--location: URL(https://deadline.com/wp-content/uploads/2020/04/shutterstock_editorial_10545335a.jpg?w=681&h=383&crop=1) center/cover no-repeat;
--outfit:URL(https://i.pinimg.com/564x/ac/70/fa/ac70fadc7ae1e201cfd89ff9fa01f20d.jpg) center/cover no-repeat;

--bg1: URL(https://www.rpnation.com/gallery/untitled-52-png.45182/full) center/cover no-repeat;
--bg2: URL(https://www.rpnation.com/gallery/untitled-5-png.45181/full) center/cover no-repeat;

/*   ------   cursor   ------   */
cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;]

[border=0; padding:0; max-width:700px; min-width:300px;width:100%; height:fit-content; margin:auto; display:flex; flex-flow: row wrap; justify-content:space-between;box-sizing:border-box; overflow:hidden;position:relative;border-radius:10px;box-shadow:0px 0px 5px 1px rgba(193, 193, 193, 0.1);align-items:stretch; flex-grow:1;]

/*   ------   left side   ------   */
[border=0; padding:0; max-width:350px;  width:100%; background:var(--left); height:450px; overflow:hidden;]
[border=0; padding:0; width:100%; height:45px;  overflow:hidden]
[border=0; padding:0;  max-width:350px; width:100%; height:45px; background:var(--bannertop); position:absolute; margin-top:0px; z-index:2; pointer-events:none; ]

/*   ------   tabs   ------   */
[border=0; padding:0; width:100%; margin-top:15px; font-size:12px; text-align:center; letter-spacing:18px; color: var(--headerfontcolor)][fa]fal fa-home[/fa] [fa]fal fa-pen[/fa] [fa]fal fa-image-polaroid[/fa][/border][/border]

[border=0; padding:0; width:220px; margin:auto; margin-top:10px;][tabs]

/*   ------   first tab   ------   */
[tab=.][border=0; padding:0; position:absolute; max-width:350px; width:100%; height:405px; margin-top:-18px; margin-left:-90px; background:var(--bg1)]
[border=0; padding:0; width:180px; height:200px; transform:rotate(-5deg); margin-top:40px; margin-left:50px; border-radius:5px; box-shadow:0px 0px 5px 1px rgba(193, 193, 193, 0.1);background:var(--profilepic)]
[border=0; padding:0; width:20px; height:120px; background:var(--sticky1); margin-top:30px; margin-left:-10px;][/border]
[/border]
[border=0; padding:0; width:150px; height:150px; transform:rotate(5deg); margin-left:165px; margin-top:-20px; border-radius:5px;box-shadow:0px 0px 5px 1px rgba(193, 193, 193, 0.4); background:var(--note)]
[border=0; padding:0; width:70px; height:20px; margin-left:100px; transform:rotate(40deg); margin-top:5px; background:var(--sticky2);][/border]

/*   ------   sticky note letter   ------   */
[border=0; padding:5; width:140px; height:120px; box-sizing:border-box; font-size:8px; white-space:normal; line-height:12px; font-family:var(--font)]i will never go back into your arms. but can't stop thinking about  [font=Times New Roman][i][size=9px][b]you and me.[/b][/size][/i][/font] i will never go back into your arms. but can't stop thinking about the time [font=Times New Roman][i][size=9px][b]when we were us.[/b][/size][/i][/font]

[right][i][b]ho sunwoo[/b][/i][/right] [/border]
[/border]
[/border][/tab]

/*   ------   second tab   ------   */
[tab=.][border=0; padding:0; position:absolute; max-width:350px; width:100%; height:405px; margin-top:-18px; margin-left:-90px; background:var(--bg2) ]

/*   ------   mood   ------   */
[border=0; padding:0; width:200px; height:140px; margin-top:40px; margin-left:50px; border-radius:5px; box-shadow:0px 0px 5px 1px rgba(193, 193, 193, 0.1);background:var(--mood)]
[border=0; padding:0; width:20px; height:120px; background:var(--sticky3); margin-top:5px; margin-left:-10px;]
[border=0; padding:0; font-family:var(--font); font-size:8px; transform:rotate(-90deg); margin-top:100px; ][b]mood[/b] | oh man.[/border][/border]
[/border]

/*   ------   location   ------   */
[border=0; padding:0; width:200px; height:140px; margin-top:40px; margin-left:120px; border-radius:5px; box-shadow:0px 0px 5px 1px rgba(193, 193, 193, 0.1);background:var(--location);]
[border=0; padding:0; width:120px; height:20px; background:var(--sticky3); transform:rotate(5deg); margin-left:100px;]
[border=0; padding:0; font-family:var(--font); font-size:8px; padding-top:10px; padding-left:5px; box-sizing:border-box][b]location[/b] | movies[/border][/border]
[/border]


[/border][/tab]

/*   ------   third tabs   ------   */
[tab=.][border=0; padding:0; position:absolute; max-width:350px; width:100%; height:405px; margin-top:-18px; margin-left:-90px; background:var(--bg2) ]

/*   ------   outfit   ------   */
[border=0; padding:0; width:200px; height:180px; margin-top:40px; margin-left:120px; border-radius:5px; box-shadow:0px 0px 5px 1px rgba(193, 193, 193, 0.1);background:var(--outfit);]
[border=0; padding:0; width:120px; height:20px; background:var(--sticky3); transform:rotate(5deg); margin-left:100px;]
[border=0; padding:0; font-family:var(--font); font-size:8px; padding-top:10px; padding-left:5px; box-sizing:border-box][b]outfit of the day[/b][/border][/border]
[/border]

/*   ------   tags + mentions + other   ------   */
[border=0; padding:0; width:280px; height:120px; margin-top:30px; margin-left:50px; border-radius:5px; box-shadow:0px 0px 5px 1px rgba(193, 193, 193, 0.1); background:var(--note)]
[border=0; padding:0; width:20px; height:120px; background:var(--sticky3); margin-top:-5px; margin-left:-10px; transform:rotate(10deg);]
[border=0; padding:0; font-family:var(--font); font-size:8px; transform:rotate(-90deg); margin-top:100px; ][b]mentions + other[/b] [/border][/border]

[border=0; padding:0; width:230px; height:90px; margin-top:-100px; margin-left:30px;font-size:8px; white-space:normal; line-height:12px; font-family:var(--mainfont);overflow:hidden;][border=0px; padding:0px; height:calc(100% - 10px); width:200%; overflow-y:scroll;overflow-x:hidden;line-height:14px; font-size:10px; letter-spacing:0px;white-space:normal; font-family: var(--mainfont); margin-top:5px;][border=0; padding:0px;height:auto; padding-left:20px;width:49%; box-sizing:border-box;

/*   ------   tags + mentions + other scroll text starts here   ------   */ ][b]fun fact![/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut elementum augue. Vestibulum faucibus at ex sed rhoncus. Curabitur sagittis, lectus vitae tincidunt posuere, ipsum odio eleifend tortor, ut eleifend lacus orci sit amet nulla. Nulla nec lorem a mi malesuada iaculis. Praesent justo orci, imperdiet a libero eu, pretium elementum ex. 

[b]tag![/b]
answer here[/border][/border][/border]
[/border]
[/border][/tab][/tabs][/border]
[/border]
[/border]

/*   ------   right side   ------   */
[border=0; padding:0; max-width:350px;  width:100%;height:450px; overflow:hidden;background:var(--right)][border=0px; padding:0px; height:calc(100% - 10px); width:200%; overflow-y:scroll;overflow-x:hidden;line-height:14px; font-size:10px; letter-spacing:0px;white-space:normal; font-family: var(--mainfont); margin-top:5px;][border=0; padding:0px;height:auto; padding-left:20px;width:49%; box-sizing:border-box;

/*   ------  start of main text   ------   */ ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut elementum augue. Vestibulum faucibus at ex sed rhoncus. Curabitur sagittis, lectus vitae tincidunt posuere, ipsum odio eleifend tortor, ut eleifend lacus orci sit amet nulla. Nulla nec lorem a mi malesuada iaculis. Praesent justo orci, imperdiet a libero eu, pretium elementum ex. Sed in magna nec tellus faucibus ultrices vulputate at erat. Sed ultrices augue ut velit fringilla, volutpat finibus sapien blandit. Sed tincidunt lacus vel urna vulputate elementum.

Quisque vel finibus est. Vivamus a augue tortor. Phasellus sed diam porta, ullamcorper purus sed, tincidunt quam. Suspendisse aliquet ornare nunc, quis feugiat nulla gravida sit amet. Suspendisse tempor magna eu metus tempus bibendum. Nullam bibendum sagittis ipsum eu semper. Morbi vel massa a lectus pretium tempor ac at massa. Cras convallis turpis porta magna pharetra, id aliquet sapien maximus.

Quisque mollis pellentesque sem sit amet iaculis. Mauris sed orci varius, posuere turpis tempus, euismod nunc. Vivamus id facilisis risus. Donec scelerisque eget erat ac consectetur. Pellentesque vulputate volutpat nisl non tempus. Nam fermentum mattis ultricies. Proin molestie volutpat fringilla. Sed eu nulla eu quam consectetur fringilla vitae quis urna. Aliquam at mi et diam venenatis commodo eget vel massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sed dolor enim. In et leo et sem malesuada porttitor. Nam placerat venenatis lectus, a vulputate ex. Maecenas condimentum urna a lacinia imperdiet. Curabitur ac faucibus turpis.

Mauris eu consectetur elit. Nunc gravida condimentum quam non iaculis. Mauris eget lacus sit amet mi pharetra rutrum at et tortor. Curabitur fermentum nunc nibh, auctor fringilla libero imperdiet nec. Sed luctus mi sed laoreet feugiat. Sed feugiat maximus metus sit amet dignissim. Sed euismod ipsum turpis, vel accumsan odio eleifend eget. Nulla quis ante ornare, sagittis mi a, egestas orci. Phasellus tellus justo, molestie sit amet eleifend ut, consequat vitae est. In fringilla a purus eu mattis. Morbi volutpat a erat vitae dignissim. Aenean imperdiet ornare lorem, at commodo ante. Integer ut dolor vitae odio dictum fringilla nec id ex. Nunc blandit, ex sed euismod tristique, nulla turpis dictum risus, sed rhoncus est elit in turpis. Donec sit amet euismod ipsum. Curabitur pulvinar efficitur erat.


[/border][/border]
[/border]
[/border]
/*   ------   credit -- do not remove   ------   */
[border=0px; padding:0px; max-width:700px; min-width:300px;width:100%;margin:auto;white-space:normal; font-size:8px; line-height:8px; margin-top:3px; opacity:0.5;text-align:right; font-family:var(--mainfont); ]
© weldherwings.
[/border]

[/border]