magic man (uxie x dreamglow)

[border=transparent;
*biiig background;
--bg-1: #F0F0F0;
*main contents background;
--bg-2: #fff;
*suits colour;
--b1: #292F33;
--b2: #DD2E44;
*name & role colour;
--name: #fff;
*text colour;
--t-color: #000;

*images are categorised based on which tab theyre in -- tab 1 is aimg-1, tab 2 is b and so on;
--aimg-1: url('https://64.media.tumblr.com/98093a346f826485ac6900ff86a763ba/tumblr_poxxkyLxIv1wxhghd_1280.jpg');
--bimg-1: url('https://cdn.discordapp.com/attachments/763695220701134872/781021525376499723/PynrQaZfNtrUAAAAAElFTkSuQmCC.png');
--bimg-2: url('https://cdn.discordapp.com/attachments/763695220701134872/781021664640630784/werGsffvXqW3AAAAABJRU5ErkJggg.png');

height:fit-content; width:100%; padding:15px; padding-bottom:35px; box-sizing:border-box; position:relative; line-height:0; background: var(--bg-1);][border=transparent; height:480px; width:100%; max-width:345px; padding:0; background: var(--bg-2); margin:auto; border-radius:15px; position:relative; display:flex; align-items:flex-start; overflow:hidden;]

   [comment]----tabs cover----[/comment]
   [border=transparent; height:100%; width:100%; padding:8px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; background: var(--bg-2); pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center;]

      [comment]----row one----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; color: var(--b1);]
         [comment]----suit one----[/comment]
         [border=transparent; padding:0; height:fit-content; width:fit-content; padding:0; display:flex; flex-flow: column nowrap; align-items:center; flex-shrink:0;]
[comment]----suit number----[/comment]
[border=transparent; height:fit-content; width:fit-content; padding:0; font-size:35px; line-height:100%;][font=Frank Ruhl Libre][comment]
----* * * first initial here!----
[/comment]H[/font][/border]

[comment]----suit symbol----[/comment]
[border=transparent; height:fit-content; width:fit-content; padding:0; font-size:30px; line-height:100%;][comment]
----* * * suit symbol here (replace the icon in fa-icon with the icon you want!)----
[/comment][fa]fas fa-spade[/fa][/border]
         [/border]

         [border=transparent; height:auto; min-height:100%; flex-grow:1; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
      [/border]
      [comment]----row one end----[/comment]

      [comment]----row two----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:flex-end; color: var(--b2); margin-top:auto;]
         [comment]----suit one----[/comment]
         [border=transparent; padding:0; height:fit-content; width:fit-content; padding:0; display:flex; flex-flow: column nowrap; align-items:center; flex-shrink:0; transform:rotate(180deg);]
[comment]----suit number----[/comment]
[border=transparent; height:fit-content; width:fit-content; padding:0; font-size:35px; line-height:100%;][font=Frank Ruhl Libre][comment]
----* * * first initial here!----
[/comment]P[/font][/border]

[comment]----suit symbol----[/comment]
[border=transparent; height:fit-content; width:fit-content; padding:0; font-size:30px; line-height:100%;][comment]
----* * * suit symbol here (replace the icon in fa-icon with the icon you want!)----
[/comment][fa]fas fa-heart[/fa][/border]
         [/border]

         [border=transparent; height:auto; min-height:100%; flex-grow:1; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
      [/border]
      [comment]----row two end----[/comment]

   [/border]
   [comment]----tabs cover----[/comment]

   [comment]----tabs----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; overflow:hidden;][border=transparent; padding:0; margin:-110px 0 0 -30px; line-height:350px;][tabs]

      [comment]----tab one (image)----[/comment]
      [tab=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; justify-content:center; align-items:center; line-height:0;]

         [comment]----tab contents----[/comment]
         [border=transparent; height:80%; width:75%; padding:10px; border:4px solid var(--b1); box-sizing:border-box; background: var(--aimg-1); background-size:cover; display:flex; flex-flow: column nowrap; align-items:flex-start; justify-content:flex-end; pointer-events:auto;
/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]

[comment]----name----[/comment]
[border=transparent; height:fit-content; width:fit-content; max-width:80%; padding:0; color: var(--name); text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:100%; font-size:35px;][font=Heebo][comment]
----* * * name here-----
[/comment]namename name here[/font][/border]

[comment]----role----[/comment]
[border=transparent; height:fit-content; width:fit-content; max-width:55%; padding:0; color: var(--name); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-size:13px; margin-top:5px;][font=Frank Ruhl Libre][comment]
----* * * role here----
[/comment]this is a role[/font][/border]

         [/border]
         [comment]----tab contents end----[/comment]

      [/border][/tab]
      [comment]----tab one end----[/comment]


      [comment]----tab two (post)----[/comment]
      [tab=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; justify-content:center; align-items:center; line-height:0;]

         [comment]----tab contents----[/comment]
         [border=transparent; height:80%; width:75%; padding:10px; box-sizing:border-box; border:4px solid var(--b1); box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]
[comment]----details (+ images)----[/comment]
[border=transparent; height:36%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]

   [comment]----images----[/comment]
   [border=transparent; height:100%; width:50%; padding:0; display:flex; flex-flow: row nowrap;]
      [border=transparent; height:100%; width:48%; padding:0; background: var(--bimg-1); background-size:cover; flex-shrink:0;
/*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
      [border=transparent; height:100%; width:48%; padding:0; background: var(--bimg-2); background-size:cover; flex-shrink:0; margin-left:auto;
/*edit the following to adjust the cropping of the image*/ background-position: 20% 50%;][/border]
   [/border]

   [comment]----* * details contents * *----[/comment]
   [border=transparent; height:auto; width:50%; padding:5px 0; display:flex; flex-flow: column nowrap;]

      [comment]----copy this whole thing to make a new tag!----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); margin:3px 0;]
         [border=transparent; height:fit-content; width:fit-content; padding:1px 3px; box-sizing:border-box; flex-shrink:0; border-bottom:2px solid var(--b2); font-size:12px; font-weight:bold; letter-spacing:0.5px; line-height:100%;][font=Rubik][comment]
----* * *tag title here!----
[/comment]mood[/font][/border]
         [border=transparent; height:fit-content; flex-grow:1; margin-left:10px; padding:0; box-sizing:border-box; font-size:12px; line-height:120%; text-align:justify;][font=Rubik][comment]
----* * *tag info here!----
[/comment]mood here[/font][/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make a new tag!----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); margin:3px 0;]
         [border=transparent; height:fit-content; width:fit-content; padding:1px 3px; box-sizing:border-box; flex-shrink:0; border-bottom:2px solid var(--b2); font-size:12px; font-weight:bold; letter-spacing:0.5px; line-height:100%;][font=Rubik][comment]
----* * *tag title here!----
[/comment]location[/font][/border]
         [border=transparent; height:fit-content; flex-grow:1; margin-left:10px; padding:0; box-sizing:border-box; font-size:12px; line-height:120%; text-align:justify;][font=Rubik][comment]
----* * *tag info here!----
[/comment]location here[/font][/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make a new tag!----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); margin:3px 0;]
         [border=transparent; height:fit-content; width:fit-content; padding:1px 3px; box-sizing:border-box; flex-shrink:0; border-bottom:2px solid var(--b2); font-size:12px; font-weight:bold; letter-spacing:0.5px; line-height:100%;][font=Rubik][comment]
----* * *tag title here!----
[/comment]outfit[/font][/border]
         [border=transparent; height:fit-content; flex-grow:1; margin-left:10px; padding:0; box-sizing:border-box; font-size:12px; line-height:120%; text-align:justify;][font=Rubik][comment]
----* * *tag info here!----
[/comment]outfit here[/font][/border]
      [/border]
      [comment]----copy me too!----[/comment]

      [comment]----copy this whole thing to make a new tag!----[/comment]
      [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; color: var(--t-color); margin:3px 0;]
         [border=transparent; height:fit-content; width:fit-content; padding:1px 3px; box-sizing:border-box; flex-shrink:0; border-bottom:2px solid var(--b2); font-size:12px; font-weight:bold; letter-spacing:0.5px; line-height:100%;][font=Rubik][comment]
----* * *tag title here!----
[/comment]tags[/font][/border]
         [border=transparent; height:fit-content; flex-grow:1; margin-left:10px; padding:0; box-sizing:border-box; font-size:12px; line-height:120%; text-align:justify;][font=Rubik][comment]
----* * *tag info here!----
[/comment]tags here[/font][/border]
      [/border]
      [comment]----copy me too!----[/comment]

   [/border]
   [comment]----details contents end----[/comment]

[/border][/border]
[comment]----details (+ images) end----[/comment]

[comment]----* * post contents * *----[/comment]
[border=transparent; height:61%; width:100%; padding:0; margin-top:auto; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Rubik][comment]
----* * * text starts here!----
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum dignissim leo id ornare. Maecenas ac feugiat sapien. Nullam eget ipsum vel lorem dictum bibendum. Sed id turpis vel tellus tincidunt feugiat. Phasellus a posuere nisi, id feugiat ante. Sed malesuada velit sit amet sollicitudin dictum. Aliquam non sapien a ipsum viverra ullamcorper eget id dolor. Praesent aliquam blandit mi nec tincidunt. Donec et massa magna. Proin leo eros, consequat nec lectus id, scelerisque interdum felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ullamcorper dui at enim auctor volutpat. Nulla a mi sed augue accumsan pellentesque at ut sapien. Vestibulum diam risus, semper dapibus ullamcorper vitae, sodales vitae mauris. Fusce et elit urna.

Mauris venenatis risus quis enim interdum, vitae accumsan nisi placerat. Donec in feugiat dui. Curabitur rhoncus nunc eu tincidunt aliquam. Aliquam elit nulla, congue eget nisi ut, auctor imperdiet ligula. Pellentesque a mi molestie, ullamcorper sem quis, tempus lectus. Sed viverra vulputate ex, a lacinia turpis commodo ac. Praesent efficitur orci non mi faucibus vestibulum. Nullam feugiat molestie suscipit. Duis vitae magna fermentum, facilisis elit eu, luctus ex. Morbi varius facilisis velit eget rhoncus. Vestibulum rhoncus iaculis neque, quis lobortis felis blandit a. Pellentesque vulputate tempus quam ac luctus. Curabitur tristique cursus justo, at lacinia tortor faucibus non. Curabitur vitae suscipit arcu. In ut ullamcorper lacus.
[/font][/border][/border][/border]
[comment]----post contents end----[/comment]
         [/border]
         [comment]----tab contents end----[/comment]

      [/border][/tab]
      [comment]----tab two end----[/comment]

   [/tabs][/border][/border]
   [comment]----tabs end----[/comment]

[/border][comment]----signature! (do not remove!)-----
[/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:25px; left:10px; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%; color: var(--t-color);][font=Open Sans]♡design by dreamglow, coded by uxie♡[/font][/bg][/border]