Frostbound
Run toward the sun
Hello There, Guest!
or Register
Free to Use Tables
07-20-2020, 03:32 PM
  Reply  | 
#1
You may use this thread to create or find free-to-use tables for your posts. Please do not exceed 700px in width. Tables must be either created entirely by you or from an open-source resource with proper credits. We ask that all tables be readable.

07-20-2020, 03:39 PM
  Reply  | 
#2
name or quote here

Bacon ipsum dolor amet pork belly ball tip meatloaf tri-tip. Ground round andouille alcatra, beef tongue pork strip steak porchetta swine filet mignon. Cow tail meatloaf drumstick short ribs pork loin ham meatball pork chop brisket. Pork buffalo biltong, shoulder tenderloin ham strip steak tri-tip cow jowl meatloaf drumstick bacon. Tongue pig drumstick kevin, ham hock sirloin salami prosciutto meatball. Cupim chicken pancetta, ham hock short ribs ground round andouille burgdoggen sausage drumstick. “Character speaking. Pig andouille strip steak, landjaeger alcatra tenderloin boudin beef tail burgdoggen swine.” Jowl pig chicken turducken capicola porchetta. Shank bresaola doner andouille short loin chicken boudin sausage.

Biltong meatball short ribs venison beef, filet mignon cow shankle short loin ball tip tail alcatra. Kevin sirloin shank, cupim tenderloin tail beef bacon. Familiar speaking. Chuck picanha alcatra ham hock buffalo salami. Tail ground round corned beef pastrami burgdoggen doner andouille chicken bresaola pork beef ribs sirloin. T-bone brisket doner bacon. Spare ribs ham hock chuck, short ribs corned beef ground round flank chicken swine prosciutto t-bone picanha kielbasa jerky. Short loin short ribs tongue ball tip t-bone cow. Landjaeger flank strip steak leberkas t-bone, shank frankfurter picanha ham cupim chislic meatloaf swine pork loin sausage. Brisket doner prosciutto sirloin, buffalo chislic salami short ribs tongue shank short loin. Kevin shoulder frankfurter, doner ribeye pork belly strip steak turkey tongue jowl beef. Beef pork belly rump chuck turducken tenderloin, filet mignon turkey flank kielbasa.

Code by Dusk


Feel free to change colors, add a background, do anything!! c:


Code:
<div style="margin: 0 auto; width: 500px; background: #2d3538; padding: 10px; box-sizing: border-box!important;"><div style="width: 100%; padding: 40px; box-sizing: border-box!important; background: #2d3538; -webkit-font-smoothing: antialiased; text-align: justify; font-size: 11px; line-height: 17px; color: #6b787c; font-family: Times; border: 1px solid #4c565f; padding: 60px;">
<span style="font-family: 'Cormorant Garamond'; font-size: 30px; text-transform: lowercase; font-style: italic; font-weight: bold;">name or quote here</span>
<p>Bacon ipsum dolor amet pork belly ball tip meatloaf tri-tip. Ground round andouille alcatra, beef tongue pork strip steak porchetta swine filet mignon. Cow tail meatloaf drumstick short ribs pork loin ham meatball pork chop brisket. Pork buffalo biltong, shoulder tenderloin ham strip steak tri-tip cow jowl meatloaf drumstick bacon. Tongue pig drumstick kevin, ham hock sirloin salami prosciutto meatball. Cupim chicken pancetta, ham hock short ribs ground round andouille burgdoggen sausage drumstick. <font style="color: #aec0c5;">“Character speaking. Pig andouille strip steak, landjaeger alcatra tenderloin boudin beef tail burgdoggen swine.”</font> Jowl pig chicken turducken capicola porchetta. Shank bresaola doner andouille short loin chicken boudin sausage.</p>
<p>Biltong meatball short ribs venison beef, filet mignon cow shankle short loin ball tip tail alcatra. Kevin sirloin shank, cupim tenderloin tail beef bacon. <font style="color: #93a2a7;">Familiar speaking. Chuck picanha alcatra ham hock buffalo salami.</font> Tail ground round corned beef pastrami burgdoggen doner andouille chicken bresaola pork beef ribs sirloin. T-bone brisket doner bacon. Spare ribs ham hock chuck, short ribs corned beef ground round flank chicken swine prosciutto t-bone picanha kielbasa jerky. Short loin short ribs tongue ball tip t-bone cow. Landjaeger flank strip steak leberkas t-bone, shank frankfurter picanha ham cupim chislic meatloaf swine pork loin sausage. Brisket doner prosciutto sirloin, buffalo chislic salami short ribs tongue shank short loin. Kevin shoulder frankfurter, doner ribeye pork belly strip steak turkey tongue jowl beef. Beef pork belly rump chuck turducken tenderloin, filet mignon turkey flank kielbasa.</p>
</div></div>
<center style="font-family: 'Open Sans'; font-size: 7px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;">Code by Dusk</center>

09-12-2020, 05:14 AM (This post was last modified: 09-12-2020, 06:47 PM by Aureate.)
  Reply  | 
#3

Hover table c:

Recommended to only change background image, just in case someone else in the same thread uses this table. If you do wanna edit the other stuff tho, it's good practice to rename the .class selectors eg. .overlaybox becomes .crocelloverlaybox, then wherever .overlaybox is called in the html it should be changed to the new name as well.


hover

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue id quam sed euismod. Etiam sed sem sit amet nibh dignissim tempor quis eget magna. Fusce porttitor sed nisi sit amet convallis. Phasellus eget laoreet mauris. Quisque ullamcorper diam et felis ultrices, ut egestas risus lobortis. Sed eget faucibus eros. Mauris magna leo, auctor et elit nec, condimentum aliquam nibh. Duis porttitor nec tellus sit amet fermentum. Proin consequat suscipit pulvinar. Vivamus et ante maximus diam vestibulum pharetra nec et nunc. Maecenas ornare ipsum quis tincidunt dapibus. Curabitur justo ligula, blandit eu eros et, rhoncus ullamcorper augue. Maecenas ut mattis libero, sit amet fermentum urna.

Cras in porttitor lorem. In eros orci, sodales sit amet orci vitae, vehicula volutpat quam. Morbi id sollicitudin urna. Pellentesque vehicula nunc ac hendrerit elementum. Pellentesque ac volutpat quam. Nam fermentum lorem volutpat metus lobortis, vitae convallis eros pretium. Fusce ligula ligula, laoreet eu gravida ac, vehicula sed elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce lorem ligula, ultricies non vehicula in, feugiat a orci. Phasellus a dui auctor, tristique sapien fermentum, commodo turpis. Phasellus lorem ex, elementum quis sapien eget, mollis commodo velit.

Aenean congue tincidunt felis at blandit. Vivamus tristique lorem mauris, id cursus turpis maximus nec. Mauris at consectetur risus. Sed faucibus facilisis purus. Aliquam ac urna quam. Etiam luctus odio pellentesque consequat pellentesque. Nam bibendum, turpis et tristique eleifend, velit dui tempor justo, vitae vestibulum enim tortor sed sem. Nunc nec risus eu nunc commodo porttitor vel non tortor. In hac habitasse platea dictumst. Vivamus maximus, elit pellentesque scelerisque tincidunt, dui magna porttitor arcu, ac porta erat magna lacinia quam. Mauris pulvinar leo in diam sagittis, in varius mauris auctor. Morbi id orci tristique, porta justo ut, commodo dolor. Nulla consectetur, mi et aliquam blandit, felis sapien efficitur nunc, efficitur lobortis lacus urna vel purus. Proin cursus felis non sem lobortis, a vulputate sem lacinia. Vestibulum ullamcorper, felis aliquam tincidunt accumsan, nibh dui condimentum sapien, ac egestas justo augue id leo.


@/'The Deities'
coded by aureate / image by elli. s


Code:
[style].bgbox { position: relative; width: 500px; height: auto; } .bgbox img { width: 500px; height: auto; } .overlay { position: absolute; transition: all 0.5s ease; opacity: 0; background-color: #e0ddce; } .bgbox:hover .overlay { opacity: 0.8; } .overlayBox { width: 80%; height: auto; top: 50px; left: 50px; bottom: 100px; background-color: #e0ddce; overflow: auto; padding: 15px; text-align: justify; font-family: verdana, arial; font-size: 11px; line-height: 18px; color: #757368; } .hov { font-family: palatino, serif; font-size: 12px; letter-spacing: 5px; font-style: bold; text-transform: uppercase; padding-bottom:1px; }[/style]

<center><div class="hov">hover</div>
<div class="bgbox">
<img src="IMAGE URL" class="image">
<div class="overlay overlayBox">
TEXT TEXT

<hr>
@
</div></div>
<div style="font-size: 8px; font-family: geneva, sans-serif; letter-spacing: 2px; padding-top: 3px; text-transform: lowercase;">coded by aureate  /  image by elli. s</div>
</center>

09-12-2020, 06:35 PM (This post was last modified: 09-14-2020, 05:38 AM by Aureate.)
  Reply  | 
#4
Parallax table 1 \o/

I've shoved all the CSS into the html so for this one you can edit freely without fear of messing up other tables, should this template be used by different people in the same thread.


Lafayette
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue id quam sed euismod. Etiam sed sem sit amet nibh dignissim tempor quis eget magna. Fusce porttitor sed nisi sit amet convallis. Phasellus eget laoreet mauris. Quisque ullamcorper diam et felis ultrices, ut egestas risus lobortis. Sed eget faucibus eros. Mauris magna leo, auctor et elit nec, condimentum aliquam nibh. Duis porttitor nec tellus sit amet fermentum. Proin consequat suscipit pulvinar. Vivamus et ante maximus diam vestibulum pharetra nec et nunc. Maecenas ornare ipsum quis tincidunt dapibus. Curabitur justo ligula, blandit eu eros et, rhoncus ullamcorper augue. Maecenas ut mattis libero, sit amet fermentum urna.

Cras in porttitor lorem. In eros orci, sodales sit amet orci vitae, vehicula volutpat quam. Morbi id sollicitudin urna. Pellentesque vehicula nunc ac hendrerit elementum. Pellentesque ac volutpat quam. Nam fermentum lorem volutpat metus lobortis, vitae convallis eros pretium. Fusce ligula ligula, laoreet eu gravida ac, vehicula sed elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce lorem ligula, ultricies non vehicula in, feugiat a orci. Phasellus a dui auctor, tristique sapien fermentum, commodo turpis. Phasellus lorem ex, elementum quis sapien eget, mollis commodo velit.

Aenean congue tincidunt felis at blandit. Vivamus tristique lorem mauris, id cursus turpis maximus nec. Mauris at consectetur risus. Sed faucibus facilisis purus. Aliquam ac urna quam. Etiam luctus odio pellentesque consequat pellentesque. Nam bibendum, turpis et tristique eleifend, velit dui tempor justo, vitae vestibulum enim tortor sed sem. Nunc nec risus eu nunc commodo porttitor vel non tortor. In hac habitasse platea dictumst. Vivamus maximus, elit pellentesque scelerisque tincidunt, dui magna porttitor arcu, ac porta erat magna lacinia quam. Mauris pulvinar leo in diam sagittis, in varius mauris auctor. Morbi id orci tristique, porta justo ut, commodo dolor. Nulla consectetur, mi et aliquam blandit, felis sapien efficitur nunc, efficitur lobortis lacus urna vel purus. Proin cursus felis non sem lobortis, a vulputate sem lacinia. Vestibulum ullamcorper, felis aliquam tincidunt accumsan, nibh dui condimentum sapien, ac egestas justo augue id leo.



@/'The Deities'
coded by aureate


Code:
<center><div style="background-image: url('IMG URL'); width: 500px; height: auto; background-attachment: fixed; background-position: 70% 50%; background-size: 100%;"><div style= "font-family: geneva, sans-serif; font-size: 35px; letter-spacing: 7px; color: #ffffff; text-align: center; padding-top: 85px; padding-bottom: 75px; text-transform: lowercase; text-shadow: 0px 0px 1px #363636; ">NAME</div>
<div style="width: 500px; height: auto; background-color: #ffffff; font-family: georgia, serif; font-size: 11px; line-height: 20px; color: #64646b; text-align: justify; overflow: auto; padding: 55px 40px 50px 40px;">
TEXT TEXT


<hr>
@
</div></div>
<div style="font-size: 8px; font-family: geneva, sans-serif; letter-spacing: 2px; padding-top: 3px; text-transform: lowercase;">coded by aureate</div>
</center>

09-12-2020, 06:43 PM (This post was last modified: 09-14-2020, 05:37 AM by Aureate.)
  Reply  | 
#5
Parallax table 2 \o/

Same as above - the font, color(s), spacing, background size and alignment, etc. may be freely edited. If anything breaks (on this or the other tables of mine) do let me know! They're all first iterations and have not been through the wringer enough to be foolproof.


Arcadia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue id quam sed euismod. Etiam sed sem sit amet nibh dignissim tempor quis eget magna. Fusce porttitor sed nisi sit amet convallis. Phasellus eget laoreet mauris. Quisque ullamcorper diam et felis ultrices, ut egestas risus lobortis. Sed eget faucibus eros. Mauris magna leo, auctor et elit nec, condimentum aliquam nibh. Duis porttitor nec tellus sit amet fermentum. Proin consequat suscipit pulvinar. Vivamus et ante maximus diam vestibulum pharetra nec et nunc. Maecenas ornare ipsum quis tincidunt dapibus. Curabitur justo ligula, blandit eu eros et, rhoncus ullamcorper augue. Maecenas ut mattis libero, sit amet fermentum urna.

Cras in porttitor lorem. In eros orci, sodales sit amet orci vitae, vehicula volutpat quam. Morbi id sollicitudin urna. Pellentesque vehicula nunc ac hendrerit elementum. Pellentesque ac volutpat quam. Nam fermentum lorem volutpat metus lobortis, vitae convallis eros pretium. Fusce ligula ligula, laoreet eu gravida ac, vehicula sed elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce lorem ligula, ultricies non vehicula in, feugiat a orci. Phasellus a dui auctor, tristique sapien fermentum, commodo turpis. Phasellus lorem ex, elementum quis sapien eget, mollis commodo velit.

Aenean congue tincidunt felis at blandit. Vivamus tristique lorem mauris, id cursus turpis maximus nec. Mauris at consectetur risus. Sed faucibus facilisis purus. Aliquam ac urna quam. Etiam luctus odio pellentesque consequat pellentesque. Nam bibendum, turpis et tristique eleifend, velit dui tempor justo, vitae vestibulum enim tortor sed sem. Nunc nec risus eu nunc commodo porttitor vel non tortor. In hac habitasse platea dictumst. Vivamus maximus, elit pellentesque scelerisque tincidunt, dui magna porttitor arcu, ac porta erat magna lacinia quam. Mauris pulvinar leo in diam sagittis, in varius mauris auctor. Morbi id orci tristique, porta justo ut, commodo dolor. Nulla consectetur, mi et aliquam blandit, felis sapien efficitur nunc, efficitur lobortis lacus urna vel purus. Proin cursus felis non sem lobortis, a vulputate sem lacinia. Vestibulum ullamcorper, felis aliquam tincidunt accumsan, nibh dui condimentum sapien, ac egestas justo augue id leo.



@/'The Deities'
— coded by aureate —


Code:
<center><div style="background-image: url('IMG URL'); width: 500px; height: auto; background-attachment: fixed; background-position: 70% 50%; background-size: 100%; padding: 0px 15px 26px 15px; "><div style= "font-family: geneva, sans-serif; font-size: 35px; letter-spacing: 6px; color: #ffffff; text-align: center; padding-top: 70px; padding-bottom: 60px; text-transform: lowercase; text-shadow: 0px 0px 1px #363636; ">NAME</div>
<div style="width: 470px; height: auto; background-color: #ffffff; font-family: georgia, serif; font-size: 11px; line-height: 20px; color: #64646b; text-align: justify; overflow: auto; padding: 50px 40px 45px 40px;">
TEXT TEXT


<hr>
@
</div></div>
<div style="font-size: 8px; font-family: geneva, sans-serif; letter-spacing: 2px; margin-top: -21px; color: #ffffff; text-transform: lowercase;">— coded by aureate —</div>
</center>

Forum Jump:

Doutaini: Elemental Wolf RPG

Site skinned by Dusk, banner by Sharaiza
Powered By MyBB, © 2002-2021 MyBB Group.