ETX Style Guide - Phases of the Moon

Lesson Styles

Download Lesson Styles

⇩ Download Light Theme CSS

The theme for the Phases of the Moon course starts with Smart Sparrow's Light Theme as the base.

Original Source

⇩ Download Phases of the Moon CSS

Any styling unique to this course is covered in the Phases of the Moon CSS.

Colors

Main colors found in this lesson

Inputs

hex: #e63e99

rgb: 230, 62, 153

Answer Container

hex: #ff57b2

rgb: 255, 87, 178

LuCIA Screen (faceColor03)

hex: #5AF8F8

rgb: 90, 248, 248

Near Black

hex: #222222

rgb: 34, 34, 34

In addition to the above, the ETX Color Palette is also utilized where needed.

Content Background

Background Laser Grid

Style

Container

width:300%;

max-width: 1300px;

height:100%;

min-height: 600px;

background-color:black;

overflow:hidden;

filter:blur(5px);

position:fixed;

left:50%;

top: 50%;

transform:translate(-50%,-50%);

perspective: 190px;

border:none;

opacity:.4;

z-index: -1000;

Container :before

content:"";

position:absolute;

background: linear-gradient(180deg, rgba(255,0,255,.2) 20%, rgba(0,0,0,0) 80%);

width: 100%;

height:100%;

z-index:100;

First and last children of container

width: 100%;

height:100%;

position:absolute;

transform: rotateX(45deg);

Style - First child of container

background-image: linear-gradient(

90deg,

#e75af8 3%,

rgba(0,0,0,0), 4%,

rgba(0,0,0,0), 48.5%,

#5af8f8 48.84%,

#5af8f8 50%,

#e75af8 50%,

#e75af8 52.33%,

rgba(0,0,0,0) 52.33%,

rgba(0,0,0,0) 98.84%,

#5af8f8 98.84%,

#5af8f8 100%

);

background-size: 204px 300px;

animation: laser-shift linear 360s infinite;

Style - Last child of container

background-image: linear-gradient(

0deg,

#e75af8 3%,

rgba(0,0,0,0), 3.5%,

rgba(0,0,0,0), 48.5%,

#5af8f8 49%,

#5af8f8 50%,

#e75af8 50.5%,

#e75af8 52%,

rgba(0,0,0,0) 52.5%,

rgba(0,0,0,0) 99%,

#5af8f8 99.5%,

#5af8f8 100%

);

background-size: 300px 204px;

Extra effects

grid-intro - used on title screen

animation: blurThis ease 5s;

animation-fill-mode: forwards;

@keyframes blurThis{

0%{
filter:blur(2px);

opacity:1;
}

100%{
filter:blur(6px);
opacity:1;

}

grid-dim - used on first screen after title

animation: gridDim ease 5s;

@keyframes gridDim{

0% { opacity:1; }

100%{ opacity:.4; }

}

Content Container

Style 1 - General Container

Used for general instruction.

border-radius: 5px; background-color:#222222;box-shadow: 0 0 10px rgba(255,255,255,.5);

Style 2 - Lucia Container

Used for LuCIA and her speech.

border-radius: 5px;background-color:#222222;box-shadow: 0 0 10px #5af8f8;

Style 3 - Lucia Container

Used as LuCIA's "screens".

border-radius: 5px;background-color:#222222;box-shadow: 0 0 10px #5af8f8;
border-radius: 5px; background-color:#5af8f8;
box-shadow: 0 0 10px #5af8f8;

Style 3

border-radius: 5px;box-shadow: 0 0 10px #ff57b2;

Typography

Download Fonts

Roboto Slab

⇩ Download from Google Fonts

Base font for this lesson

Press Start 2P

⇩ Download from Google Fonts

Pixel font most often used within LuCIA

Poppins Black

⇩ Download from Google Fonts

Used only in Logo (Phases).

Engagement

⇩ Download from Google Fonts

Used only in Logo (Moon).

Paragraph

Style

font-family:RobotoSlab;
font-size: 16px;
color:#d6d6d6;

Instruction

Style

font-family:RobotoSlab;
font-size: 16px;
color:#0dc0fe;

Title Screen Logo

title01 h1:nth-of-type(1) span
First <h1> within containing element (title01)

display: block;
position: relative;
left: 0;
top: 0;
font-size: 128px;
font-family: PoppinsBlack, Impact, Charcoal, sans-serif;
font-weight: bold;
background: linear-gradient(to bottom, #00f2ff 0%, #e2fbff 50%, #0a343f 51%, #0094f7 100%);
background-blend-mode: multiply;
background-size: 10px 150px;
background-repeat: repeat;
line-height: 1;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
padding: 0;
text-transform: uppercase;

title01 h1:nth-of-type(1) span:before

background: none;
content: "PHASES";
position: absolute;
left: 0;
top: 0;
z-index: 2;

title01 h1:nth-of-type(1) span:after

background: none;
content: "PHASES";
position: absolute;
left: 0;
top: 0;
z-index: -2;
text-shadow: 1px -1px 0 rgba(255, 255, 255, 0.5), 3px 1px 3px rgba(255, 0, 255, 0.85), -3px -2px 3px rgba(0, 0, 255, 0.85), 1px -2px 0 rgba(255, 255, 255, 0.8);

title01 h1:nth-of-type(2) span
Second <h1> within containing element

text-transform: uppercase;
position: relative;
left: 0;
top: -5px;
font-size: 34px;
color: #ff00ff;

title01 h1:nth-of-type(3)
Third <h1> within containing element

position: relative;
right: -150px;
top: -135px;
transform: rotateZ(-15deg);
width: auto;
display: inline-block;

title01 h1:nth-of-type(3) span

color: #ff00ff;
font-size: 210px;
font-family: Engagement, Brush Script MT, Brush Script Std, cursive;
text-shadow: 5px 5px 20px rgba(255, 0, 255, .6), 5px 5px 0px #000;

Alert Message

Style

font-family: PressStart2P, Courier, serif;
text-align: center;
color: #333333;

"/////////"

font-size:11px;

"ALERT"

font-size:28px;

Style - Pulsing

animation: pulsing 2s linear infinite;

@keyframes pulsing{
0% { opacity:1; }
50%{ opacity:.4; }
100%{ opacity:1; }
}

Buttons

Navigation Button

Style

Button

color: #000000;
background-color: #e63e99;
height: 40px;
border: 0;
border-radius: 2px;
padding: 0 20px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: color .3s ease, background .3s ease,box-shadow .3s ease;

hover, active, focus

background-color: rgba(205, 37, 128, 1);
border: 0;
outline: 0;

hover, active, focus

background-color: rgba(205, 37, 128, 1);

focus

box-shadow: inset 0 0 0 4px rgba(235, 67, 158, 1);

Start Button

Style

Button

width: 217px;
height: 55px;
padding: 0 20px;
background-color: rgba(0, 0, 0, 0.8);
cursor: pointer;
border: solid 1px white;
color: #f2f2f2;
font-family: PressStart2P, Courier, serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;

Pulsing

animation: pulsing 2s linear infinite;

@keyframes pulsing{
0% { opacity:1; }
50%{ opacity:.4; }
100%{ opacity:1; }
}

Input

Single Line, Multiline Text

Style

Input/Textarea

color: rgb(235, 235, 235);
font-family: "Roboto Mono", sans-serif !important;
font-size: 16px;
background-color: rgb(0, 0, 0) !important;
border: 1px solid #e63e99 !important;
border-radius: 5px !important;
min-height: 35px;
width: 100% !important;
padding: 5px 8px !important;
flex-grow: 1;
flex-shrink: 0;
transition: border 0.3s ease 0s;
appearance: none;

focus

border: 1px solid #e63e99 !important;
outline: 0;
box-shadow: 0 0 10px #e63e99;

MCQ

Style

Empty Radio Button

width: 20px;

height: 20px;

background-color: white;

box-shadow: inset 0 0 0 2px #5AF8F8;

border-radius:100%;

Filled Radio Button

background-color: #5AF8F8;

/* dot */

width: 6px;

height: 6px;

background-color: white;

Empty Checkbox

width: 20px;

height: 20px;

background-color: white;

box-shadow: inset 0 0 0 2px #5AF8F8;

border-radius:3px;

Filled Checkbox

background-color: #5AF8F8;

/* check */

width: 6px;

height: 11px;

border-color: white;

border-width:2px;

MCQ Horizontal Image Select

Inherits the style from the standard MCQ plus the following:

Style

Container for Image and Radio Button, <div>

display: block;
position: static !important;
width: auto !important;
margin: 0;
padding: 0px;
overflow: hidden;
left: 18px;

Image Container, <p>

width: 100%;

height: 123px;

Image, <img>

width: 100%;

height: 123px;

Empty Radio Button

top: 100%;

left: 50%;

transform: translate(-50%, 12px);

Components

Fill in the Blank

Style

Background

background-color: #352638;

Misc.

Arrows

Style

/*arrow basics*/

.arrow{
display:inline-block;
background:rgba(0,0,0,0.6);
width:75px !important;
height:75px !important;
position:absolute;
}

/*arrow stem*/

.arrow p{
margin:0;
padding:0;
box-sizing:border-box;
height:100%;
position:relative;
border:solid 8px transparent;
top:0;
}
.arrow.horizontal,.arrow.vertical {
width:50px !important;
height:50px !important;
}
.arrow.horizontal p{
background:white;
border:none;
height:4px;
width:calc(100% - 20px) !important;
margin:8px auto;
}
.arrow.vertical p{
background:white;
border:none;
height: calc(100% - 30px);
width:4px !important;
margin:11px auto;
}
.arrow.curvetop p{
border-top:solid 4px white;
border-radius:100%;
}
.arrow.curvebottom p{
border-bottom:solid 4px white;
border-radius:100%;
}

/*arrowheads*/

.arrow span{
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom: 10px solid white;
position: absolute;
visibility: visible !important;
color: white !important;
}
.arrow.horizontal.right span{
transform:rotate(90deg);
top:0%;
left: calc(100% - 10px);
}
.arrow.horizontal.left span{
transform:rotate(-90deg);
top:0%;
right: calc(100% - 10px);
}
.arrow.vertical.up span{
transform:rotate(0deg);
top:0%;
left:50%;
transform:translateX(-50%);
}
.arrow.vertical.down span{
transform:rotate(180deg) translateX(50%);
bottom:10%;
left:50%;
}
.arrow.curvetop.right span{
transform:rotate(140deg);
top:5%;
right:7.5%;
}
.arrow.curvetop.left span{
transform:rotate(-140deg);
top:5%;
left:7.5%;
}
.arrow.curvebottom.right span{
transform:rotate(35deg);
bottom:5%;
right:7.5%;
}
.arrow.curvebottom.left span{
transform:rotate(-40deg);
bottom:5%;
left:7.5%;
}

Page updated

Report abuse