Sirensong Loading

Colors

theme #181821
var(--myblack)
theme3/-c #46425e
var(--darkgrey)
theme4 #f9dbff
var(--pink)
theme5 #b8b3cc
var(--paleperi)
theme6 #bdabad
var(--tan)
theme7 #25a799
var(--teal)
theme8 #f54337
var(--fire)
theme9 #be91be
var(--mauve)
theme10 #1b8aac
var(--turqoise)
theme11 #ebf8ff
var(--barelyblue)
theme-custom #574f7d
var(--eggplant)
theme-custom2 #95adbe
var(--graysage)
theme-custom3 #f1d4d4
var(--putty)
theme-custom4 #dff0ea
var(--palesage)
theme-custom5 #d5bbc7
var(--pinkputty)
theme-primary #fef5ff
var(--paleviolet)
theme-head-c #000244
var(--darknavy)
theme-link-act-c #0b89d3
var(--brightblue)
theme-success #60a899
var(--brightsage)
colorAccent #e54747
var(--redaccent)
colorPrimary #847087
var(--graypink)
colorTertiary #7c0059
var(--fuscia)
colorQuat #a4a0b1
var(--grayputty)
var(--bluegrey): #536573
color-linky #47c2d6
var(--colorlinky)
#35909e
var(--colorlinkydarken)
var(--darkslate): #535166
np #f8f4f9
var(--np)
np2 #dde4ef
var(--np2)
#fbfaff
var(--inputbg)
npopacity rgba(250, 247, 251, 0.2)
var(--npopacity)

Gradients shown on bg-dark

lsgrad
lsgrad1
lsgrad2
whitefaderound2
gradwm
graddm
whitefaderound
whitefade
fadeitout
fadeitinout
fadeitin
fadetowhite
divgrad
grady
gradyflip
lsgradround
shown on bg-white:
limegrad
roseanna
keengrad

Typography

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

.edinbedinburgh edinburgh (700) | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00 \ 

.comfortaa7 comfortaa COMFORTAA| AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-= 123456789.00

.mrsb mrsblackfort-pro MRS BLACKFORT | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00

.tornac tornac & Caps:TORNAC | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00

.poiret poiret-one POIRET | AaBbCcDdEe FfGgHhIiJj KkLlMmNnOo PpQqRrSsTt UuVvWwXxYyZz !@#%^&*()_+?"~-=123456789.00


.lsbodyemph .lsbodyemph1 .lsbodyemph2 .lsbodyemph3 .bodyemph4 .bodyemph5 text-white .lsbodyemphy .quicklinks .gradicon fa2x .amp .lsh1 .lsh1b .lsh1m .lsh1t .lsh2 .lsh2b .lsbody .lsbodycw .smalltitle .fancy highlighted py-10" p class="asterisk" .lsbemph1bg

Buttons

Links

Default form elements

Invisible labels

Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

Notes and form errors
This is a standard note
This is a success message
This is an error message.

Paragraphs, font-sizing, etc...

p class="fs"

p class="fs-md"

p class="fs-lg"

p class="fs-lg2"

This uses class="m1" to make the first letter >>>mrsb. Appar­ently we had reach­ed a great height in the atmos­phere, for the sky was a dead black, and the stars had ceased to twinkle...

Here's class="firstcap" to make the first letter >>>font:300 150%/0.5 "Comfortaa". Appar­ently we had reach­ed a great height in the atmos­phere, for the sky was a dead black, and the stars had ceased to twinkle...

This uses class="t1" to make the first letter >>>tornac. Appar­ently we had reach­ed a great height in the atmos­phere, for the sky was a dead black, and the stars had ceased to twinkle...

this is p class="answer". ..Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle...

This one uses paragraph-sm Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle...

This paragraph uses class="fs-lg" Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle...

This paragraph uses class="ls-l text-justify" Our sleeveless wetties have deep-cut arm holes to prevent chafing, while our longsleeve suits are designed for maximum comfort when your arms are raised...

      	<p class="lsprettyitem">      		<span class="h3 lsprettyheadline">span h3 lsprettyheadline</span><br>      		p class="lsprettyitem" span Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>      	<p class="lsprettyitem">      		<span class="h3 lsprettyheadline">span h3 lsprettyheadline</span><br>      		p class="lsprettyitem"Veritatis, distinctio ad corporis, laboriosam unde provident, architecto tlaborum consequuntur neque.</p>      

span h3 lsprettyheadline
p class="lsprettyitem" span Lorem ipsum dolor sit amet, consectetur adipisicing elit.

span h3 lsprettyheadline
p class="lsprettyitem"Veritatis, distinctio ad corporis, laboriosam unde provident, architecto tlaborum consequuntur neque.

h5 lsprettyitem2 pl-30" style="font-size: 26px;"

#rte paragraphs, lists

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpe

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

  • this ul is in an rte div
  • isn't it
  • pretty?

various styles and lists


  • this ul
  • is class:
  • list-unstyled

  • this ul is class: rte
  • isn't it
  • pretty?
  1. this ol
  2. is class:
  3. alpha

  1. this ol
  2. is class:
  3. numbr

  • this ul
  • is class:
  • asterisk

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.The author of the quote

More stuff...

<div class="gradient-block">
<div class="gradient-blocky">
<div class="neu">
<div class="neu2">
<div class="neu3">
<div class="waterheart">
<div class="seethis"> (note that it has it's own centered positioning built-in)
.mcard
.mround
div class="wave-ocean" (with 3 svg waves...)

Here is a 200px high div class="ripped". (It's only fancy once screen gets large.)

div class="wborder"
div class="seascape" div class="seamask"
div class="fillerbg"
div class="water-animated" div class="watermask"

Neumorphic css!

<div class="neu pseudo-hover">
class="np-element np-hover np-circle-xxl np-shadow-border-circle-push mb-3 mr-3 softsqueeze"

Basic Element

Integrates an element with base neumorphism design
np-element

Trying out the .np-text-shadow class here on default text and #d1b5b5 bg

Trying out the np-d-text-shadow on dark bg with white text

Shadows

Integrates an element with diferent shadows
    Example:    <div class="np-element np-hover np-square-xxl np-shadow-double"></div>    <div class="np-element np-hover np-square-xxl np-shadow"></div>    <div class="np-element np-hover-inverse np-square-xxl np-shadow-inverse"></div>    <div class="np-element np-hover np-square-xxl np-shadow-border-square"></div>    <div class="np-element np-hover np-square-xxl np-shadow-border-square-push"></div>    <div class="np-element np-hover np-circle-xxl np-shadow-border-circle"></div>    <div class="np-element np-hover np-circle-xxl np-shadow-border-circle-push"></div>    

Lists

  • List element
  • List element
  • List element
  • List element
  • List element
    	Example:    	<ul class="np-list">    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    		<li class="np-list-element">List element</li>    	</ul>    

Hovers

Integrates an hover neumorphism shadow effect

Hover
    	Example:    	<div class="np-element np-hover"></div>    
Hover inverse

Integrates an inverse hover neumorphism shadow effect

Hover inverse
    	Example:    	<div class="np-element np-shadow-inverse np-hover-inverse"></div>    

Buttons

    	Example:    	<button class="np-btn">+</button>    	<button class="np-btn np-square-sm">+</button>    	<button class="np-btn np-circle-sm">+</button>    

Dividers

    	Example:    	<div class="np-divider"></div>    	<div class="np-divider-fat"></div>    

Shapes

Squares
Circles
    	Example:    	Sizes: sm - md - lg - xl - xxl    	<button class="np-element np-hover np-square-$size"></button>    	<button class="np-element np-hover np-circle-$size"></button>    

Forms

      <form class="np-form-group py-15 mb-15">    			<label class="np-text-accent" for="np-form-element1">Label for np-form-group > np-form-element input</label>    			<input id="np-form-element1" type="text" class="np-form-element" value="Value" placeholder="Placeholder">    		    			<label for="np-option-select">Label</label>    			<select name="np-option-select" id="np-option-select" class="np-form-element">    				<option value="1">Value</option>    				<option value="1">Value</option>    				<option value="1">Value</option>    				<option value="1">Value</option>    				<option value="1">Value</option>    			</select>    		</form>    
Pre-loader