Gonna start adding some of the templates I use in here with explanations and what not for you all to fiddle with <3 part of coding is breaking things to figure out what they do ;) don't be afraid!
Below you'll see how you can go about changing each part and what each section sort of does! A lot of this is repeated and does the same thing, so just fiddle with it and see where you end up liking things!
This goes at the very top of the table. In this instance I have Libra Baskerville as the body fonts, Cinzel Decorative as the font i use for the character names! You can change these by picking new ones off of google fonts.
Width: Make it larger to make it wider, smaller to make it thinner.
Background: linear-gradient, makes the background a gradient. You can make this either linear or radial! When you're using an image, this part will change to a url in which you'll just pop the url link in there and change the background color beside it to match where the background fades! Fading the image you choose will have to be done in some sort of editing software, however, so keep that in mind!
Border-left, Border-right: borders for the full table. Can change to solid, double, dashed, etc.
Box-shadow: Shadow around the entire table.
Border-radius: Top left, top right, bottom left, bottom right. 0px is no curve, 300px is half circle curve.
Padding: this changes how much of an indent on the top/bottom/sides there are.
Text-Align: for the body text.
Font-family: usually I use Libra Baskerville!
Color: body font color.
Letter-Spacing: how far apart the letters are.
Line-height: how far apart the height between the letters are.
Width & Height: Usually i keep this a square for the circles, a rectangle for the half circles where the width is larger than the height.
Background:url: link to the gif/image depending which style you're looking for.
Top right no-repeat: Top aligns it to the top, right aligns it to the right (you can also change it to center or left), no-repeat makes it so the gif doesn't repeat.
Border-radius: 50% makes it a full circle.
Border: 5px is the thickness, solid is how it appears, #888 is the color of it.
Box-shadow: Shadow color. 25px is how far it fades out, you can make this bigger or smaller. #ddd is the color of the shadow.
Padding: Spacing above and below the quote.
Font family: libre baskerville
Text-align: center/left/right
Text-shadow: color and size of color.
Font-weight: font thickness.
Text-transform: Lowercase keeps everything lowercase, uppercase keeps it all uppercase as well, etc
Border-top/Border-bottom: Width and color.
Background-color: libre baskerville
Padding: Spacing above and below the quote.
Font family: libre baskerville
Text-align: center/left/right
Text-shadow: color and size of color
Below you'll see how you can go about changing each part and what each section sort of does! A lot of this is repeated and does the same thing, so just fiddle with it and see where you end up liking things!
Changing Fonts
Code:
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Cinzel+Decorative&display=swap" rel="stylesheet">This goes at the very top of the table. In this instance I have Libra Baskerville as the body fonts, Cinzel Decorative as the font i use for the character names! You can change these by picking new ones off of google fonts.
Full Background
Code:
<div style="width: 70%;box-sizing: border-box;margin: 0 auto;background: linear-gradient(#c9c9c9, #b3b3b3);border-left: double 5px #dddddd;border-right: double 5px #dddddd;box-shadow: 0px 0px 15px #000;border-radius: 300px 300px 75px 75px;padding: 50px 50px 40px 50px;text-align: justify;font-family:'Libre Baskerville', serif;color: #1a1a1a;font-size: 12px;letter-spacing: 1px;line-height: 15px;">Width: Make it larger to make it wider, smaller to make it thinner.
Background: linear-gradient, makes the background a gradient. You can make this either linear or radial! When you're using an image, this part will change to a url in which you'll just pop the url link in there and change the background color beside it to match where the background fades! Fading the image you choose will have to be done in some sort of editing software, however, so keep that in mind!
Border-left, Border-right: borders for the full table. Can change to solid, double, dashed, etc.
Box-shadow: Shadow around the entire table.
Border-radius: Top left, top right, bottom left, bottom right. 0px is no curve, 300px is half circle curve.
Padding: this changes how much of an indent on the top/bottom/sides there are.
Text-Align: for the body text.
Font-family: usually I use Libra Baskerville!
Color: body font color.
Letter-Spacing: how far apart the letters are.
Line-height: how far apart the height between the letters are.
Gif/Image Section
Code:
<div style="width: 250px;height: 250px;margin: 0 auto;background: url('https://i.imgur.com/qmD6NSr.png') top right no-repeat;border-radius: 50%;border: 5px solid #888;box-shadow: 0px 0px 25px 0px #dddddd;"></div>Width & Height: Usually i keep this a square for the circles, a rectangle for the half circles where the width is larger than the height.
Background:url: link to the gif/image depending which style you're looking for.
Top right no-repeat: Top aligns it to the top, right aligns it to the right (you can also change it to center or left), no-repeat makes it so the gif doesn't repeat.
Border-radius: 50% makes it a full circle.
Border: 5px is the thickness, solid is how it appears, #888 is the color of it.
Box-shadow: Shadow color. 25px is how far it fades out, you can make this bigger or smaller. #ddd is the color of the shadow.
Quote Sections
Code:
<div style="padding-left: 0px;padding-top: 5px;padding-bottom: 5px;font-family: 'Libre Baskerville', serif;font-size: 11px;text-align: center;color: #1a1a1a;text-shadow: 0px 0px 5px #c1c1c1;letter-spacing: 3px;font-weight: bold;text-transform: lowercase;line-height: 8px;"><i>this is me saying that i would set myself on fire</i></div>Padding: Spacing above and below the quote.
Font family: libre baskerville
Text-align: center/left/right
Text-shadow: color and size of color.
Font-weight: font thickness.
Text-transform: Lowercase keeps everything lowercase, uppercase keeps it all uppercase as well, etc
Text box background
Code:
<div style="border-top: solid 10px #dddddd;border-bottom: solid 10px #dddddd;background-color: #b3b3b3;border-radius: 25px 25px 25px 25px;box-shadow: 0px 0px 25px 0px #dddddd;"><div style="padding-top: 15px;padding-left: 35px;padding-right: 35px;padding-bottom: 15px;text-shadow: 0px 0px 5px #b3b3b3;">Border-top/Border-bottom: Width and color.
Background-color: libre baskerville
Padding: Spacing above and below the quote.
Font family: libre baskerville
Text-align: center/left/right
Text-shadow: color and size of color
