STYLE
Colours

Baby Blue
#69CFF9RGB(105,207,249)

Powder Blue
#B3DFDFRGB(179,223,223)

Maximum Green Yellow
#CBE948RGB(203,233,72)
Pistachio
#96C789RGB(150,199,137)

Peach
#FAC898RGB(250,200,152)

Bittersweet
#FF6961RGB(255,105,97)

White
#FFFFFFRGB(255,225,255)

Silver Chalice
#B0B0B1RGB(176,176,177)

Black
#0000RGB(0,0,0)
Body Text
White Background
Heading
Link1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!
HTML AND CSS Code
HTML CODE
CSS CODE
.container{
background-color: white;
color: black;
}
a:link {
color:black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #cbe948;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #b0b0b1;
background-color: transparent;
text-decoration: underline;
}
Silver Chalice Background
Heading
Link1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!
HTML AND CSS Code
HTML CODE
Heading
LinkLorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!
CSS CODE
.container{ background-image:linear-gradient(to bottom,white,#B0B0B1); color: black; } a:link { color:black; background-color: transparent; text-decoration: none; } a:hover { color: #69CFF9; background-color: transparent; text-decoration: none; }
Baby Blue Background
Heading
Link1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!
HTML AND CSS Code
HTML CODE
Heading
LinkLorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt nobis beatae, veritatis officia ut eius ipsum deserunt eaque cumque assumenda repellendus nisi ab id explicabo quibusdam illo expedita deleniti repudiandae!
CSS CODE
.container{ background-image:linear-gradient(to bottom,white,#69CFF9); color: black; } a:link { color:black; background-color: transparent; text-decoration: none; } a:hover { color: #96C789; background-color: transparent; text-decoration: none; }
Buttons Color
HTML AND CSS Code
HTML CODE
CSS CODE
.primaryButton{ background:radial-gradient(white,#69cff9); color: black; padding: 1rem 3rem; font-size: large; font-weight: bold; border: 1px solid #cbe948; border-radius: 0.5rem; box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25); } .primaryButton:hover{ background:radial-gradient(#96c789,#69cff9); color:black; } .primaryButton:active{ background:radial-gradient(white,#69cff9); color:#b0b0b1; } .secondaryButton{ background:radial-gradient(white,#96c789); color: black; padding: 1rem 3rem; font-size: large; font-weight: bold; border: 1px solid #cbe948; border-radius: 0.5rem; box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25); } .secondaryButton:hover{ background:radial-gradient(#69cff9,#96c789); color:black; } .secondaryButton:active{ background:radial-gradient(white,#96c789); color:#b0b0b1; } .warningButton{ background:radial-gradient(white,#fac898); color: black; padding: 1rem 3rem; font-size: large; font-weight: bold; border: 1px solid #cbe948; border-radius: 0.5rem; box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25); } .warningButton:hover{ background:radial-gradient(#ff6961,#fac898); color:black; } .warningButton:active{ background:radial-gradient(white,#fac898); color:#b0b0b1; } .dangerButton{ background:radial-gradient(white,#ff6961); color: black; padding: 1rem 3rem; font-size: large; font-weight: bold; border: 1px solid #cbe948; border-radius: 0.5rem; box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25); } .dangerButton:hover{ background:radial-gradient(#fac898,#ff6961); color:black; } .dangerButton:active{ background:radial-gradient(white,#ff6961); color:#b0b0b1; }