Colors
Light Tones
-
Light Mint
hsl(140, 85%, 85%)
-
Sky Blue
hsl(200, 85%, 85%)
-
Light Violet Blue
hsl(230, 85%, 85%)
-
Light Magenta
hsl(290, 85%, 85%)
-
Light Coral
hsl(350, 85%, 85%)
-
Light Orange
hsl(20, 85%, 85%)
Medium Tones
-
Mint Green
hsl(140, 90%, 60%)
-
Light Blue
hsl(200, 90%, 60%)
-
Violet Blue
hsl(230, 90%, 60%)
-
Magenta Purple
hsl(290, 90%, 60%)
-
Coral Pink
hsl(350, 90%, 60%)
-
Orange
hsl(20, 90%, 60%)
Dark Tones
-
Dark Green
hsl(140, 90%, 15%)
-
Dark Blue
hsl(200, 90%, 15%)
-
Navy Blue
hsl(230, 90%, 15%)
-
Dark Magenta
hsl(290, 90%, 15%)
-
Red Wine
hsl(350, 90%, 15%)
-
Dark Brown
hsl(20, 90%, 15%)
Fonts
-
Poppins
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
-
Work Sans
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
-
Playfair Display
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
-
Playfair Display SC
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
-
Festive
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
-
Ephesis
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
-
Others
Montserrat
Montserrat Alternates
Roboto
Andada Pro
Text Styles
-
h1: Main Page Heading
- Font-family: "Andada Pro", sans-serif
- Font-size: 40px
- Font-weight: 700
- Line-height: 2em
-
h2: Subheading
- Font-family: "Work Sans"
- Font-size: 30px
- Font-weight: 500
- Line-height: 2em
-
h3: Subheading
- Font-family: "Work Sans"
- Font-size: 24px
- Font-weight: 500
- Line-height: 2em
-
Standard Style
- Font-family: "Poppins"
- Font-size: 20px
- Font-weight: 400
- Line-height: 1.8em
Table Styles
| A | B | |
|---|---|---|
| 1 | A1 | B1 |
| 2 | A2 | B2 |
| 3 | A3 | B3 |
table {
width: 80%;
min-width: 350px;
margin: 1.5rem 2.5rem 2.5rem;
}
th,
tr,
td {
text-align: center;
vertical-align: middle;
padding: 0.25rem 0.75rem;
border: 0.5px solid hsl(230, 40%, 55%);
}
th {
background-color: hsl(230, 85%, 85%);
font-family: "Work Sans";
font-size: 1.5rem;
font-weight: 500;
line-height: 2em;
}
td {
font-size: 1rem;
line-height: 1.8em;
}
File System Structure
index.html
filename.html
README.md
LICENSE.md
resources
scripts
main.js
styles
reset.css
style.css
images
image1.png
image2.png
videos
video1.mp4
audios