Profile
I made these resources for my personal use, but they proved to be a rather useful beginner's guide to coding here on TH so I'm making them public. Feel free to reference, copy-paste, and build layouts off of these. No need to credit.
Most of these codes were written referencing the information found on w3schools.com, getbootstrap.com, cssreference.io, and the likes. These sites will always remain the better reference on HTML, so I definitely recommend checking 'em out if you're unsure how to do something!
Feel free to check out my other coding as well!
HTML styles
Font size
2rem
<span style="font-size:2rem">2rem</span>32px
<span style="font-size:32px">32px</span>18px
<span style="font-size:18px">18px</span>8px
<span style="font-size:8px">8px</span>smaller
<span style="font-size:smaller">smaller</span>larger
<span style="font-size:larger">larger</span>small
<span style="font-size:small">small</span>large
<span style="font-size:large">large</span>Font weight
lighter
<div style="font-weight:lighter">lighter</div>normal
<div style="font-weight:normal">normal</div>bold
<div style="font-weight:bold">bold</div>100
<div style="font-weight:100">100</div>200
<div style="font-weight:200">200</div>300
<div style="font-weight:300">300</div>400 = normal
<div style="font-weight:400">400</div>500
<div style="font-weight:500">500</div>600
<div style="font-weight:600">600</div>700 = bold
<div style="font-weight:700">700</div>800
<div style="font-weight:800">800</div>900
<div style="font-weight:900">900</div>Letter spacing
normal spacing
<div style="letter-spacing:normal">normal</div>0.5px of spacing
<div style="letter-spacing:0.5px">0.5px</div>1px of spacing
<div style="letter-spacing:1px">1px</div>2px of spacing
<div style="letter-spacing:2px">2px</div>3px of spacing
<div style="letter-spacing:3px">3px</div>3mm of spacing
<div style="letter-spacing:3mm">3mm</div>1rem of spacing
<div style="letter-spacing:1rem">1rem</div>Font family
this text is written in andale mono
<div style="font-family:andale mono">this text is written in andale mono</div>this text is written in arial
<div style="font-family:arial">this text is written in arial</div>this text is written in times new roman
<div style="font-family:times new roman">this text is written in times new roman</div>this text is written in arial black
<div style="font-family:arial black">this text is written in arial black</div>this text is written in calibri
<div style="font-family:calibri">this text is written in calibri</div>this text is written in comic sans ms
<div style="font-family:comic sans ms">this text is written in comic sans ms</div>this text is written in courier new
<div style="font-family:courier new">this text is written in courier new</div>this text is written in georgia
<div style="font-family:georgia">this text is written in georgia</div>this text is written in helvetica
<div style="font-family:helvetica">this text is written in helvetica</div>this text is written in impact
<div style="font-family:impact">this text is written in impact</div>this text is written in tahoma
<div style="font-family:tahoma">this text is written in tahoma</div>this text is written in terminal
<div style="font-family:terminal">this text is written in terminal</div>this text is written in trebuchet ms
<div style="font-family:trebuchet ms">this text is written in trebuchet ms</div>this text is written in palatino
<div style="font-family:palatino">this text is written in palatino</div>this text is written in garamond
<div style="font-family:garamond">this text is written in garamond</div>this text is written in bookman
<div style="font-family:bookman">this text is written in bookman</div>Text colour
These styles adjust the colour of your text and/or background. These colours will look the same on all screens, regardless of the user's theme. You can either use colour names (rather limited on TH, finding hex values tends to be less eye burning), hexcodes, rgb codes, hsl codes, or rgba codes. To find the values you need, use an art program's colour picker or this site.
purple text
<div style="color:purple">purple text</div>#AB2E2E text
<div style="color:#AB2E2E ">#AB2E2E text</div>rgb(255,160,122) text
<div style="color:rgb(255,160,122)">rgb(255,160,122) text</div>purple background, full div's area
<div style="background-color:purple">purple background</div>#AB2E2E background, full div's area
<div style="background-color:#AB2E2E ">#AB2E2E background, full div</div>rgb(255,160,122) background, full div's area
<div style="background-color:rgb(255,160,122)">rgb(255,160,122) background, full length</div><span class="p-1" style="background-color:purple">purple text</div><span class="p-1" style="background-color:#AB2E2E ">#AB2E2E background</div><span class="p-1" style="background-color:rgb(255,160,122)">rgb(255,160,122) background</div><span class="p-1" style="background-color:rgba(255,160,122,0.5)">rgb(255,160,122,0.5) background</div>Background image
specific image background
<div class="p-3" style="background-image:url();height:300px">text</div>Place image center. First value can be left, right, or center. Second value can be top, center, or bottom.
<div class="p-3" style="background-image:url();background-position:center center;height:300px">text</div>Background image is fixed and doesn't scroll along with the text
<div class="p-3" style="background-image:url();background-attachment:fixed;height:300px">text</div>Avoid that the image repeats itself. Image can be repeated vertically by replacing 'no-repeat' with 'repeat-y' and horizontally with 'repeat-x'.
<div class="p-3" style="background-image:url();background-position:center center;height:300px;background-repeat:no-repeat">bg-faded</div>image bg + card bg + text center
<div class="p-3 rounded text-center" style="background-image:url();background-attachment:fixed;"><div class="card border-0 p-3">text</div></div>image bg + transparent box bg + text center
<div class="p-3 rounded text-center" style="background-image:url();background-attachment:fixed;"><div class="p-3" style="background-color:rgba(23, 23, 23, 0.6);color:rgba(235, 235, 235, 1)">text</div></div>Carousels
Image carousel
<div id="carousel1" class="carousel slide mx-auto p-1" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
</div>
</div>Carousel with controls
<div id="carousel2" class="carousel slide mx-auto p-1" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Carousel with indicators and controls
<div id="carousel3" class="carousel slide mx-auto p-1" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel3" data-slide-to="0" class="active"></li>
<li data-target="#carousel3" data-slide-to="1"></li>
<li data-target="#carousel3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel3" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel3" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Carousel with textboxes
<div id="carousel4" class="carousel slide mx-auto p-1" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
<div class="carousel-caption d-none d-md-block">
<div class="p-1" style="background-color:rgba(250,250,250,0.5);color:rgb(0,0,0)"><p> <span style="font-size:3rem">Title</span>
<br>Caption text</p></div>
</div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
<div class="carousel-caption d-none d-md-block">
<div class="p-1" style="background-color:rgba(250,250,250,0.5);color:rgb(0,0,0)"><p> <span style="font-size:3rem">Title</span>
<br>Caption text</p></div>
</div>
</div>
<div class="carousel-item">
<div style="background-image:url();height:400px;background-position:center center;background-size:cover"></div>
<div class="carousel-caption d-none d-md-block">
<div class="p-1" style="background-color:rgba(250,250,250,0.5);color:rgb(0,0,0)"><p> <span style="font-size:3rem">Title</span>
<br>Caption text</p></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Corner rounding
<div class="card p-4 mb-3" style="border-radius:15px"></div><div class="card p-4 mb-2" style="
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;"></div>
<div class="card p-4 mb-3" style="
border-top-right-radius:0px;
border-top-left-radius:0px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;"></div><div class="card p-4 mb-3" style="
border-top-right-radius:0px;
border-top-left-radius:25px;
border-bottom-right-radius:25px;
border-bottom-left-radius:0px;"></div><div class="row no-gutters">
<div class="col-12 p-1">
<div class="card p-4" style="
border-top-right-radius:25px;
border-top-left-radius:25px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;"></div>
</div>
<div class="col-6 p-1">
<div class="card p-4 mb-3" style="
border-top-right-radius:0px;
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:25px;"></div>
</div>
<div class="col-6 p-1">
<div class="card p-4 mb-3" style="
border-top-right-radius:0px;
border-top-left-radius:0px;
border-bottom-right-radius:25px;
border-bottom-left-radius:0px;"></div>
</div>
</div>Recent Images
No images.