WebGuyJeff Styles 🕸️

That's a Cool Theme

If you can make a theme look cool in two colours, it must be the bomb. Let's build a whole theme here ready to use for any project. By adjusting base variables, we can style the theme for any purpose.

Card Title


Card Subtitle

This is the card body. Here is the main chunk of content that summarises the card subject.

Card Title


Card Subtitle

This is the card body. Here is the main chunk of content that summarises the card subject.

Card Title


Card Subtitle

This is the card body. Here is the main chunk of content that summarises the card subject.

H1 Heading

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H3 Heading

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

H4 Heading

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

H5 Heading

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

H6 Heading

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Text link

button link

List

Unordered list

  • Orange
  • Apple
  • Rhubarb
  • Rasberry
  • Blueberry
  • Cherry

Ordered list

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth

Definition list

Kick
808
Snare
909
Maine
Augusta
California
Sacremento
Oregon
Salem
New York
Albany
Ascender
The part of certain lowercase letters that extends above the x-height of a font.
Font
Traditionally, a complete set of characters for one typeface at one particular type size. Often used more loosely as a synonym for "typeface".
Golden Section
The ideal proportion according to the ancient Greeks. It is visualized as the division of a line into two unequal segments in such a way that the ratio of the smaller segment to the larger segment is equal to the ratio of the larger to the whole. It is usually defined as 21:34, that is, 21/34 and 34/(21+34) both equal approximately 0.618. A rectangle whose sides are of this proportion is called a "golden rectangle". Golden rectangles can be found in the proportions of the Parthenon and many medieval manuscripts.

Form and Input

Legend Example
80 %

Buttons

An Example Article

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a GREAT pull quote.

- Author

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Horizontal Rule


  • Address
  • Abbr
  • Bold
  • Code
  • Deleted text
  • Definition
  • Emphasis
  • Italic
  • Inserted text
  • Keyboard Input
  • Mark
  • Quote
  • Strikethrough
  • Sample output from a computer program
  • One size smaller text
  • Span
  • Strong
  • Subscript
  • Superscript
  • Underline
  • Variable

Preformatted Text

Use 'code' for inline code that can wrap and 'pre''code' for block code that must not wrap. 'samp' is for sample output, so I would avoid using it to represent sample code (which the reader is to input). This is what Stack Overflow does. LINK

<code>User input.
<samp>Computer output.
<pre>Any preformatted text.

Code that musn't wrap.

Tag: <pre><code>

sudo apt update
sudo apt install python3-pip
sudo apt install python3-venv
sudo apt list --installed | grep python3

Inline code that can wrap.

Tag: <code>

* */1 * * * tail -500 /home/$(whoami)/.errors > /home/$(whoami)/.errors

Output that musn't wrap.

Tag: <pre><samp>

libunistring2/stable,now 0.9.10-4 amd64 [installed]
libuno-cppu3/stable,stable-security,now 1:7.0.4-4+deb11u1 amd64 [installed,automatic]
libuno-cppuhelpergcc3-3/stable,stable-security,now 1:7.0.4-4+deb11u1 amd64 [installed,automatic]
libuno-purpenvhelpergcc3-3/stable,stable-security,now 1:7.0.4-4+deb11u1 amd64 [installed,automatic]
libuno-sal3/stable,stable-security,now 1:7.0.4-4+deb11u1 amd64 [installed,automatic]
libuno-salhelpergcc3-3/stable,stable-security,now 1:7.0.4-4+deb11u1 amd64 [installed,automatic]
libunoloader-java/stable,stable-security,now 1:7.0.4-4+deb11u1 all [installed,automatic]

Inline output that can wrap.

Tag: <samp>

WARNING: apt does not have a stable CLI interface. Use with caution in scripts.

User input.

Tag: <kbd>

Highlight the CLI text and press Ctrl + Shift + C to copy.

Other Typography

'small' is for things like copyright info
Content that isn't accurate or relevant anymore.
Generic span wrapper
HTML is an abbreviation of How to meet ladies

This is inline text with subscript and superscript elements.

f(x) = a0 + a1x + a2x2, where a2 ≠ 0

Figure

Figure Example
Apes need friends too. Hosted by gratisography.com

Table

This is a caption for a table
IDNameDateAddress
#999-32acFirst Name13 May, 2013999 Spruce Lane, Somewhere, CA 94101
#888-32ddSample Name17 May, 1984999 Spruce Lane, Somewhere, CA 94101
Totals160023001890