diff --git a/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/chapter03-project02.scssc b/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/chapter03-project02.scssc
new file mode 100644
index 0000000000000000000000000000000000000000..df74c2c7fa3bd8135615f7e29fb916eb9a840683
Binary files /dev/null and b/chapter03/.sass-cache/01363d946bf787a990a37bfafc7390c7b38c4af2/chapter03-project02.scssc differ
diff --git a/chapter03/chapter03-project02.html b/chapter03/chapter03-project02.html
index cf271942e124bc1ebcdfd9649acbba7d1698669f..df7e188214c79a4293c92aa69ea3b261cad28b3b 100644
--- a/chapter03/chapter03-project02.html
+++ b/chapter03/chapter03-project02.html
@@ -4,6 +4,8 @@
<meta charset="utf-8">
<title>Not a Real CRM</title>
+ <link rel= "stylesheet" type="text/css" href= "css/reset.css" />
+ <link rel= "stylesheet" type="text/css" href= "css/chapter03-project02.css" />
</head>
<body>
<header>
diff --git a/chapter03/css/chapter03-project02.css b/chapter03/css/chapter03-project02.css
new file mode 100644
index 0000000000000000000000000000000000000000..4e6f9d3cfec3d8d0b569db3cfd3dc1ae3ecfcb45
--- /dev/null
+++ b/chapter03/css/chapter03-project02.css
@@ -0,0 +1,105 @@
+/* CSS for chapter03-project01 */
+/* Declare variables. */
+/* Actual CSS. Organization simplified due to simplicity of project. */
+a[href^="mailto"] {
+ background: url(../images/email.png) no-repeat 0 3px;
+ padding-left: 1em; }
+
+a[href^="tel"] {
+ background: url(../images/call.png) no-repeat 0 3px;
+ padding-left: 1em; }
+
+body {
+ background-color: #dae1e8;
+ background-image: url("../images/background-pattern.png"); }
+
+body a {
+ color: #42a3c6; }
+
+header li {
+ margin-right: 1em;
+ list-style-type: none; }
+header #mainMenu {
+ background-color: #283649; }
+header #mainMenu ul {
+ display: flex;
+ justify-content: flex-end;
+ padding-right: 5em; }
+header h1 {
+ padding-left: 5em;
+ background: repeating-linear-gradient(-55deg, #001c3c, #001c3c 6px, #283649 8px, #001c3c 1px);
+ background-color: #001c3c; }
+header #secondaryMenu {
+ background-color: #dae1e8; }
+header #secondaryMenu ul {
+ display: flex;
+ justify-content: center;
+ padding-top: 0.2em;
+ padding-right: 20em;
+ padding-bottom: 0.2em; }
+
+#mainContact {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+ background-color: #ffffff; }
+
+#mainContact li {
+ list-style-type: none; }
+#mainContact div {
+ display: flex;
+ flex-direction: column;
+ align-items: center; }
+#mainContact div img {
+ max-width: 100px;
+ padding: 0.3em;
+ border: solid 1px #b8b8b8; }
+#mainContact section {
+ margin-top: 1em;
+ border: solid 1px #001c3c; }
+#mainContact section h3 {
+ padding: 0.3em;
+ font-size: 1.2em;
+ color: #ffffff;
+ background: repeating-linear-gradient(-55deg, #001c3c, #001c3c 6px, #283649 8px, #001c3c 1px);
+ background-color: #001c3c;
+ border: solid 1px #001c3c; }
+#mainContact section p {
+ margin-top: 0.5em; }
+#mainContact section p em {
+ color: #b8b8b8; }
+#mainContact section .actions {
+ background-color: #001c3c; }
+#mainContact section .actions ul {
+ display: flex;
+ justify-content: flex-start;
+ width: 100%;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em; }
+#mainContact section .actions li {
+ margin-left: 0.5em;
+ font-size: 0.9em; }
+#mainContact section .actions .actionEdit {
+ padding: 0.2em;
+ padding-left: 1em;
+ background: url(../images/edit.png) no-repeat 0 3px;
+ background-color: #dae1e8;
+ border-radius: 0.25em; }
+#mainContact section .actions .actionFlag {
+ padding: 0.2em;
+ padding-left: 1em;
+ background: url(../images/flag.png) no-repeat 0 3px;
+ background-color: #dae1e8;
+ border-radius: 0.25em; }
+
+footer {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+ padding: 0.4em;
+ color: #ffffff;
+ background-color: #001c3c; }
+
+/*# sourceMappingURL=chapter03-project02.css.map */
diff --git a/chapter03/css/chapter03-project02.css.map b/chapter03/css/chapter03-project02.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..b7ee7b69eafe81cba0e09e06e71bc5204e45f011
--- /dev/null
+++ b/chapter03/css/chapter03-project02.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AACA,iCAAiC;AAEjC,wBAAwB;AAYxB,uEAAuE;AAEvE,iBAAkB;EACd,UAAU,EAAE,wCAAwC;EACpD,YAAY,EAAE,GAAG;;AAGrB,cAAe;EACX,UAAU,EAAE,uCAAuC;EACnD,YAAY,EAAE,GAAG;;AAGrB,IAAK;EACD,gBAAgB,EAtBF,OAAO;EAuBrB,gBAAgB,EAAE,uCAAuC;;AAKzD,MAAE;EACE,KAAK,EAtBK,OAAO;;AA4BrB,SAAG;EACC,YAAY,EAAE,GAAG;EACjB,eAAe,EAAE,IAAI;AAGzB,gBAAU;EACN,gBAAgB,EAvCP,OAAO;AA4ChB,mBAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EAEzB,aAAa,EAAE,GAAG;AAI1B,SAAG;EACC,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,iFAMX;EACD,gBAAgB,EA3DP,OAAO;AA8DpB,qBAAe;EACX,gBAAgB,EApEN,OAAO;AAyEjB,wBAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EAEvB,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,cAAc,EAAE,KAAK;;AAKjC,YAAa;EACT,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,KAAK;EAChB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EAEjB,gBAAgB,EA3FN,OAAO;;AAgGjB,eAAG;EACC,eAAe,EAAE,IAAI;AAGzB,gBAAI;EACA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;AAKnB,oBAAI;EACA,SAAS,EAAE,KAAK;EAChB,OAAO,EAAE,KAAK;EAEd,MAAM,EAAE,iBAAqB;AAIrC,oBAAQ;EACJ,UAAU,EAAE,GAAG;EAEf,MAAM,EAAE,iBAAyB;AAKjC,uBAAG;EACC,OAAO,EAAE,KAAK;EAEd,SAAS,EAAE,KAAK;EAChB,KAAK,EAhIH,OAAO;EAkIT,UAAU,EAAE,iFAMX;EACD,gBAAgB,EAnIX,OAAO;EAoIZ,MAAM,EAAE,iBAAyB;AAGrC,sBAAE;EACE,UAAU,EAAE,KAAK;AAKjB,yBAAG;EACC,KAAK,EAlJR,OAAO;AAsJZ,6BAAS;EACL,gBAAgB,EAnJX,OAAO;AAwJZ,gCAAG;EACC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,UAAU;EAE3B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,KAAK;AAGxB,gCAAG;EACC,WAAW,EAAE,KAAK;EAElB,SAAS,EAAE,KAAK;AAGpB,yCAAY;EACR,OAAO,EAAE,KAAK;EACd,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,uCAAuC;EACnD,gBAAgB,EAjLd,OAAO;EAkLT,aAAa,EAAE,MAAM;AAGzB,yCAAY;EACR,OAAO,EAAE,KAAK;EACd,YAAY,EAAE,GAAG;EAEjB,UAAU,EAAE,uCAAuC;EACnD,gBAAgB,EA1Ld,OAAO;EA2LT,aAAa,EAAE,MAAM;;AAMrC,MAAO;EACH,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,KAAK;EAChB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,KAAK;EAEd,KAAK,EAzMK,OAAO;EA2MjB,gBAAgB,EArMH,OAAO",
+"sources": ["sass/chapter03-project02.scss"],
+"names": [],
+"file": "chapter03-project02.css"
+}
\ No newline at end of file
diff --git a/chapter03/css/sass/chapter03-project02.scss b/chapter03/css/sass/chapter03-project02.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ca34957121337f960aa5f49f0674d5ecc6bb61ae
--- /dev/null
+++ b/chapter03/css/sass/chapter03-project02.scss
@@ -0,0 +1,210 @@
+
+/* CSS for chapter03-project01 */
+
+/* Declare variables. */
+
+$color-white: #ffffff;
+$color-greyLight: #dae1e8;
+$color-grey: #b8b8b8;
+$color-greyDark: #283649;
+
+$color-blue: #002d4d;
+$color-blueDark: #001c3c;
+
+$color-hyperlink: #42a3c6;
+
+/* Actual CSS. Organization simplified due to simplicity of project. */
+
+a[href^="mailto"] {
+ background: url(../images/email.png) no-repeat 0 3px;
+ padding-left: 1em;
+}
+
+a[href^="tel"] {
+ background: url(../images/call.png) no-repeat 0 3px;
+ padding-left: 1em;
+}
+
+body {
+ background-color: $color-greyLight;
+ background-image: url("../images/background-pattern.png");
+}
+
+body {
+
+ a {
+ color: $color-hyperlink;
+ }
+}
+
+header {
+
+ li {
+ margin-right: 1em;
+ list-style-type: none;
+ }
+
+ #mainMenu {
+ background-color: $color-greyDark;
+ }
+
+ #mainMenu {
+
+ ul {
+ display: flex;
+ justify-content: flex-end;
+
+ padding-right: 5em;
+ }
+ }
+
+ h1 {
+ padding-left: 5em;
+
+ background: repeating-linear-gradient(
+ -55deg,
+ $color-blueDark,
+ $color-blueDark 6px,
+ $color-greyDark 8px,
+ $color-blueDark 1px
+ );
+ background-color: $color-blueDark;
+ }
+
+ #secondaryMenu {
+ background-color: $color-greyLight;
+ }
+
+ #secondaryMenu {
+
+ ul {
+ display: flex;
+ justify-content: center;
+
+ padding-top: 0.2em;
+ padding-right: 20em;
+ padding-bottom: 0.2em;
+ }
+ }
+}
+
+#mainContact {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+
+ background-color: $color-white;
+}
+
+#mainContact {
+
+ li {
+ list-style-type: none;
+ }
+
+ div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ div {
+
+ img {
+ max-width: 100px;
+ padding: 0.3em;
+
+ border: solid 1px $color-grey;
+ }
+ }
+
+ section {
+ margin-top: 1em;
+
+ border: solid 1px $color-blueDark;
+ }
+
+ section {
+
+ h3 {
+ padding: 0.3em;
+
+ font-size: 1.2em;
+ color: $color-white;
+
+ background: repeating-linear-gradient(
+ -55deg,
+ $color-blueDark,
+ $color-blueDark 6px,
+ $color-greyDark 8px,
+ $color-blueDark 1px
+ );
+ background-color: $color-blueDark;
+ border: solid 1px $color-blueDark;
+ }
+
+ p {
+ margin-top: 0.5em;
+ }
+
+ p {
+
+ em {
+ color: $color-grey;
+ }
+ }
+
+ .actions {
+ background-color: $color-blueDark;
+ }
+
+ .actions {
+
+ ul {
+ display: flex;
+ justify-content: flex-start;
+
+ width: 100%;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ }
+
+ li {
+ margin-left: 0.5em;
+
+ font-size: 0.9em;
+ }
+
+ .actionEdit {
+ padding: 0.2em;
+ padding-left: 1em;
+
+ background: url(../images/edit.png) no-repeat 0 3px;
+ background-color: $color-greyLight;
+ border-radius: 0.25em;
+ }
+
+ .actionFlag {
+ padding: 0.2em;
+ padding-left: 1em;
+
+ background: url(../images/flag.png) no-repeat 0 3px;
+ background-color: $color-greyLight;
+ border-radius: 0.25em;
+ }
+ }
+ }
+}
+
+footer {
+ margin: 1em;
+ max-width: 700px;
+ margin-right: auto;
+ margin-left: auto;
+ padding: 0.4em;
+
+ color: $color-white;
+
+ background-color: $color-blueDark;
+}