About

Basics

Established: June 1st 2018
Type: Personal, archival, experimental
Complexity: Novice
Language: English, some japanese

Hi! I have No Friggen' Clue what I'm doing! But! I'm having fun doing it!

While my account was created in 2018, I never started using it until July 2026, after spending a month playing with artfight's profile design html.

Site Map

• Main Section
  The parts of the website that look like a certain platypus.
  • Info You are here! An all in one page detailing the website (basic information, resoures used, style guide, and the map you're reading) and the webmaster.
    bc i can not be bothered to make a bunch of pages :peace:
  • Animanga
  • Grooves
  • Talkies
  • Guestbook
• By the Blue Moon
  A faux wikia for a dream farm sim of mine.
  Due to it being a wikia, I will not be listing the pages :peace:
• Blue Fairy
  A dream webcomic of mine.
• Fandom Junk
  Stuff based off other stuff
  • Postlude Phantasma II A Gintama fanwork that is made to resemble an rpg.
    Pretty much an all in one page

Resources

General

• W3Schools for most everything
• FontAwesome for most icons
• Saturn/Honeybee icons for a few icons fontawesome didn't have
• in lists

Technical

• Using and Styling the Dialog Element by Geoff Graham on CSS Tricks for popup dialog modals
• AnimatiSS for CSS animations

Misc.

• Scripted for bits and bobs
• Theme Hunter to look at codes and weep

Style Guide

A comprehensive listing of all possible styles and elements on my site.

Palette

Because I'm limiting myself to a spefifc palette, some backgrounds use the color-mix function.

Code: background-color:color-mix(in lab, #00838B 80%, #01A95C));

Additionally, I'm using CYM as an attempt to make the effcts of an ink bleed. It's used on the text-shadow and box-shadow functions.

Fonts

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Integer et placerat sem. Donec molestie tristique lorem id interdum. Morbi sit amet dui cursus, placerat nisi condimentum, tristique tellus. Maecenas rhoncus ut nibh eu faucibus. Aenean id lectus auctor, pellentesque diam eleifend, elementum magna.

Bold text. Important text. Italic text. Emphasized text. Marked text. Smaller text. Deleted text. Inserted text. _{Subscript text.} ^{Superscript text.} Link text,

• List item 1
• List item 2
• List item 3
  • Nested item 1
  • Nested item 2

1. List item 1
2. List item 2
3. List item 3
   1. Nested item 1
   2. Nested item 2

This is a code block. It holds code or anything else I decide to put in it. Ut placerat, quam tincidunt placerat gravida, mi felis bibendum risus, sed elementum est felis vel justo. Curabitur fringilla sapien in mi venenatis vulputate. Nulla at magna a lectus consequat facilisis. Aliquam vitae ullamcorper nibh. Aliquam erat volutpat. Integer molestie massa vestibulum diam imperdiet, vitae tincidunt nisl sodales.

This is a code block within a pre tag.
It acts a little bit differently and is meant for multiple
lines of code. All the code breaks within it must be
represented by newlines.

Here is an editable textarea that already has some text in it. Donec sagittis velit sed placerat laoreet. Quisque luctus odio sapien, at mattis ligula eleifend eget.

This is a blockquote area

Name	Number	Address
Name 1	Number 1	Address 1
Name 2	Number 2	Address 2
Name 3	Number 3	Address 3

This is a collapsable details element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus odio ex, ornare sollicitudin purus posuere at. Sed purus ante, blandit eget fermentum id, interdum id nisi. Mauris porttitor in augue et posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

This is a fieldset element

Duis nec semper elit. Donec fermentum vel nisi in vulputate. Mauris ullamcorper dolor massa, eget mattis elit volutpat vitae. Nam maximus dolor non ligula porttitor vestibulum. Proin at augue ornare, dictum dui vitae, euismod nisi. Ut aliquet nibh metus, ut consectetur sapien faucibus id.

---

Press Me!