• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help โœฑ ๐ก๐ž๐ฅ๐ฉ ๐ฐ๐ข๐ญ๐ก ๐š ๐œ๐จ๐๐ž ๐ฉ๐ฅ๐ฌ?

knotofjupiter

๐’‚๐’๐’ ๐’๐’‡ ๐’•๐’‰๐’Š๐’” ๐’Š๐’” ๐’•๐’†๐’Ž๐’‘๐’๐’“๐’‚๐’“๐’š
Roleplay Type(s)
would someone be able to advise me on how I can make this code a little bit easier to work with so I'm not fighting so much the alignment when putting in new items? I would appreciate it!

e.g. I'd like the title to be above the first/thinner container, not halfway through it ;w;






punch-wasted




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.

Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.

Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.



For example. For example. For example. For example. For example. For example. For example. For example. For example. For example.

For example. For example. For example. For example. For example. For example. For example. For example. For example. For example.


Code:
[comment]

===     ๐๐ž๐ฌ๐ข๐ ๐ง๐ž๐ ๐š๐ง๐ ๐œ๐จ๐๐ž๐ ๐›๐ฒ ๐ค๐ง๐จ๐ญ๐จ๐Ÿ๐ฃ๐ฎ๐ฉ๐ข๐ญ๐ž๐ซ!     ===
===     this isn't for public use, and I have no idea what I'm doing     ===
===     so if you end up copping this, I can't help you!     ===
===     ส•เธ‡โ€ข แดฅ โ€ขส”เธ‡     ===

/* ๐‹๐€๐‘๐†๐„๐‘ ๐‚๐Ž๐๐“๐€๐ˆ๐๐„๐‘ / ๐–๐Ž๐‘๐Š ๐’๐๐€๐‚๐„, make the overall work area bigger or smaller here */
[/comment]
[border= transparent; position: relative; margin: 0 auto; padding: 0; height: fit-content; width: 100%; max-width: 670px;]
[comment]

/* ๐‡๐„๐€๐ƒ๐„๐‘ ๐’๐๐€๐‚๐„ ๐€๐๐ƒ ๐“๐ˆ๐“๐‹๐„, top space and header font information
if there is too much space between the top of this space and the post, adjust the margin here!!! */
[/comment]
[border= transparent; position: relative; margin: 0 auto; width: 100%; max-width: 670px; height: 50px; padding: 10px; font-size: 50px; line-height: 100%; text-transform: uppercase; text-align: center;][comment]

/* ๐Œ๐€๐ˆ๐ ๐‡๐„๐€๐ƒ๐„๐‘ */ [/comment][font=Yeseva One]
punch-wasted
[/font][/border][comment]

/* ๐“๐€๐๐’ ๐‚๐Ž๐๐“๐€๐ˆ๐๐„๐‘, make adjusts to its looks here */
[/comment]
[border= transparent; position: relative: margin: 0 auto;  width: 100%; max-width: 650px; height: 30px; padding: 10px; font-size: 12; line-height: auto; text-transform: uppercase; background-image: linear-gradient(50deg, #936052, #e5d2cb);]
[/border][comment]

===    ๐๐€๐†๐„ ๐Ž๐๐„     ===
[/comment]
[border= transparent;
position: relative;
margin: 0 auto;
padding: 0 25px 0 25px;
max-width: 650px;
height: fit-content;
border-radius: 2px;
background-image: linear-gradient(50deg, #936052, #e5d2cb);
font-size: 12px;
line-height: 16px;
text-align: justify;][font=Karla]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.
 
Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.
 
Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.

[row]
[border= transparent; position: relative; margin: 0 0 0 -7px; padding: 0;][column=span4]
For example. For example. For example. For example. For example. For example. For example. For example. For example. For example.
[/column][/border]
[border= transparent; position: relative; margin: 0 -11px; 0 0; padding: 0;][column=span4]
For example. For example. For example. For example. For example. For example. For example. For example. For example. For example.
[/column][/border][/row][/font][row][border= transparent; position: relative; margin: 0 -11px; 0 0; padding: 0;][/border]
[/row][/border][/border][/comment]
 
Last edited:
update: I was able to move the title up away from that first bar, and I'm doing fine for now. BUT still stands if anyone would like to give any input for improving the code
 
I think it's pretty good! A few notes:
  • If you'd like your containers to retain their dimensions even with padding, you can use box-sizing: border-box
  • Not a coding issue, but I personally feel there are accessibility issues because your font and gradient at points are both very light. I'd make the gradient fade out just a little darker
  • The margin you used on the columns swallows the first few letters on mobile. Rather than columns I personally recommend using flex-box in a parent container and make it so the children can wrap on mobile. Example parent div:
    Code:
    width: 100%; display: flex; flex-flow: row wrap; justify-content: space-evenly;
    and for the child divs:
    Code:
    flex: 1 0 200px
 
I think it's pretty good! A few notes:
  • If you'd like your containers to retain their dimensions even with padding, you can use box-sizing: border-box
  • Not a coding issue, but I personally feel there are accessibility issues because your font and gradient at points are both very light. I'd make the gradient fade out just a little darker
  • The margin you used on the columns swallows the first few letters on mobile. Rather than columns I personally recommend using flex-box in a parent container and make it so the children can wrap on mobile. Example parent div:
    Code:
    width: 100%; display: flex; flex-flow: row wrap; justify-content: space-evenly;
    and for the child divs:
    Code:
    flex: 1 0 200px
thank you! and I'll keep that in mind when I start working on how it looks aesthetically. for the flex-box, does that work for border boxes or is it DIV?

also, since you seem to be a wizard, maybe you could riddle me this: how can I make the container grow with the amount of text instead of it cutting off? I'd rather not have a hidden scroll if I can help it.


Code:
[comment]

===     ๐๐ž๐ฌ๐ข๐ ๐ง๐ž๐ ๐š๐ง๐ ๐œ๐จ๐๐ž๐ ๐›๐ฒ ๐ค๐ง๐จ๐ญ๐จ๐Ÿ๐ฃ๐ฎ๐ฉ๐ข๐ญ๐ž๐ซ!     ===
===     this isn't for public use, and I have no idea what I'm doing     ===
===     so if you end up copping this, I can't help you!     ===
===     ส•เธ‡โ€ข แดฅ โ€ขส”เธ‡     ===

/* ๐‹๐€๐‘๐†๐„๐‘ ๐‚๐Ž๐๐“๐€๐ˆ๐๐„๐‘ / ๐–๐Ž๐‘๐Š ๐’๐๐€๐‚๐„, make the overall work area bigger or smaller here */
[/comment]
[border= transparent; position: relative; margin: auto; padding: 0; height: 100%; min-height: 600px; width: 100%; max-width: 670px;]
[comment]

/* ๐‡๐„๐€๐ƒ๐„๐‘ ๐’๐๐€๐‚๐„ ๐€๐๐ƒ ๐“๐ˆ๐“๐‹๐„, top space and header font information
if there is too much space between the top of this space and the post, adjust the margin here!!! */
[/comment]
[border= transparent; position: absolute; box-sizing: border-box; margin: -100px 0 0 0; width: 100%; max-width: 670px; height: 100%; padding: 10px; font-size: 50px; line-height: 100%; text-transform: uppercase; text-align: center;][comment]

/* ๐Œ๐€๐ˆ๐ ๐‡๐„๐€๐ƒ๐„๐‘ */ [/comment][font=Yeseva One]
punch-wasted
[/font][/border][comment]

/* ๐“๐€๐๐’ ๐‚๐Ž๐๐“๐€๐ˆ๐๐„๐‘, make adjusts to its looks here */
[/comment]
[border= transparent; position: relative; padding: 0; height: 100%; min-height: 600px; width: 100%; min-width: 640px; background-image: linear-gradient(220deg, #efe5e3, #705c59); border-radius: 2px; line-height: 0;][comment]

/* ๐‡๐ˆ๐ƒ๐ƒ๐„๐ ๐“๐€๐๐’, scale to the 'pretty tabs' down below */
[/comment]
[border= transparent; height: 42px; width: 100%; padding: 0; overflow: hidden; background: green;]
[tabs][comment]

/* ๐…๐ˆ๐‘๐’๐“ ๐๐€๐†๐„, change page's tab title via its correlating title in 'pretty tabs' down below */
[/comment]
[tab=introduction][border=transparent; position: absolute; box-sizing: border-box; height: calc(100% - 70px); width: 630px; padding: 30px; background: #fdf6f5; border-radius: 2px; color: #000000; font-size: 13px; line-height: 16px; text-align; justify;][font=Karla][comment]

/* ๐…๐ˆ๐‘๐’๐“ ๐๐€๐†๐„ ๐ˆ๐๐…๐Ž ๐‡๐„๐‘๐„ */
[/comment]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.
 
Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.
 
Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.
 
Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.
 
Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.
[/font][/border][/tab][comment]

/* ๐’๐„๐‚๐Ž๐๐ƒ ๐๐€๐†๐„, change page's tab title via its correlating title in 'pretty tabs' down below */
[/comment]
[tab=a][border=transparent; pointer-events: none; position: absolute; box-sizing: border-box; height: calc(100% - 70px); width: 630px; padding: 30px;
background: #fdf6f5; border-radius: 2px;
color: #000000; font-size: 13px; line-height: 16px; text-align; justify;][font=Karla]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.
 
Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.
 
Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.
[/font][/border][/tab]

      [tab=a]you can't see this content because of the overflow:hidden![/tab]
   [/tabs][/border][comment]

/* ๐๐‘๐„๐“๐“๐˜ ๐“๐€๐๐’, change the titles of tabs here and fudge their position around via their individual padding
I recommend changing the background opacity while editing for readability by changing the background color to 'background:COLOR; opacity: 0.8;' */
[/comment]
[border=transparent; pointer-events: none; position: absolute; box-sizing: border-box; top: 0; left: 0; height: 42px; width: 100%; padding: 0; background: blue; opacity:0.8;]
      [border=transparent; width: auto; padding: 10px 0 0 40px; float: left; color: #fff; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:14px;]introduction[/border]
      [border=transparent; width: auto; padding: 10px 0 0 20px; float: left; color: #fff; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:14px;]wow[/border]
   [/border]
[/border]
[/border]





punch-wasted




  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.

    Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.

    Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.

    Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.

    Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.


introduction

wow



 
It should work with flex, yeah.

Not a wizard, but a toast dragon. Abracadabra.

You mean like this? If you want the gradient div to change with it too, you'd have to put it into the tab itself as a wrapper for the actual text container.









punch-wasted




  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.

    Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.

    Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt.

    Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.

    Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.


introduction

wow



 

Users who are viewing this thread

Back
Top