bytehala / css-fem

Back to basics - Getting Started with CSS course from Frontend Masters

Getting Started with CSS

Plain CSS Practice from Frontend Masters course

References

Choices

Color Palette

From Adobe Color / Martin Ehrlich

/* Color Theme Swatches in Hex */
.Hyperframe-Interactive-Experience-1-hex { color: #CCF244; }
.Hyperframe-Interactive-Experience-2-hex { color: #818C2B; }
.Hyperframe-Interactive-Experience-3-hex { color: #52591D; }
.Hyperframe-Interactive-Experience-4-hex { color: #EDF250; }
.Hyperframe-Interactive-Experience-5-hex { color: #0D0D0D; }

/* Color Theme Swatches in RGBA */
.Hyperframe-Interactive-Experience-1-rgba { color: rgba(204, 242, 67, 1); }
.Hyperframe-Interactive-Experience-2-rgba { color: rgba(128, 140, 43, 1); }
.Hyperframe-Interactive-Experience-3-rgba { color: rgba(82, 89, 29, 1); }
.Hyperframe-Interactive-Experience-4-rgba { color: rgba(236, 242, 79, 1); }
.Hyperframe-Interactive-Experience-5-rgba { color: rgba(12, 12, 12, 1); }

/* Color Theme Swatches in HSLA */
.Hyperframe-Interactive-Experience-1-hsla { color: hsla(73, 87, 60, 1); }
.Hyperframe-Interactive-Experience-2-hsla { color: hsla(67, 52, 36, 1); }
.Hyperframe-Interactive-Experience-3-hsla { color: hsla(67, 50, 23, 1); }
.Hyperframe-Interactive-Experience-4-hsla { color: hsla(61, 86, 63, 1); }
.Hyperframe-Interactive-Experience-5-hsla { color: hsla(0, 0, 5, 1); }

Fonts

Generated by FontPair

• Domine
• Inter