Skip to content
Snippets Groups Projects
Commit 73f61579 authored by Brandon Rodriguez's avatar Brandon Rodriguez
Browse files

Finish ch03-pr02

parent a16b3bdd
Branches
No related merge requests found
File added
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Not a Real CRM</title> <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> </head>
<body> <body>
<header> <header>
......
/* 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 */
{
"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
/* 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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment