diff --git a/assets/shared.css b/assets/shared.css
new file mode 100644
index 0000000..d5e1d84
--- /dev/null
+++ b/assets/shared.css
@@ -0,0 +1,90 @@
+html {
+ box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+
+body {
+ align-items: center;
+ background-color: #f3f2f1;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+);
+ background-attachment: fixed;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ background-size: 900px 740px;
+
+ height: 100vh;
+}
+
+.Container {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+}
+
+.Tiles {
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ margin: 0;
+ width: 800px;
+ padding: 0;
+}
+
+.Tile {
+ background-color: white;
+ border-radius: 2px;
+ box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+ margin: 0 12px 12px 0;
+ opacity: 0.96;
+ transition: all 0.15s linear;
+}
+
+.Tile:not(.Tile--intro):hover {
+ box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+ opacity: 1;
+}
+
+.Tile-link {
+ align-items: center;
+ color: #323130;
+ display: flex;
+ flex-direction: column;
+ height: 148px;
+ justify-content: center;
+ padding: 20px;
+ text-decoration: none;
+ width: 148px;
+}
+
+.Tile-link i {
+ font-size: 32px;
+ margin-bottom: 12px;
+ color: #605e5c;
+}
+
+.Tile--intro {
+ max-width: 468px;
+ padding: 20px;
+ width: 100%;
+}
+
+.Tile--intro h1 {
+ font-size: 24px;
+ font-weight: 300;
+ margin: 8px 0;
+ padding: 0;
+}
+
+.Tile--intro p {
+ font-size: 14px;
+ margin: 0;
+}
+
+.Tile--intro a,
+.Tile--intro a:visited {
+ color: #0078d4;
+}
diff --git a/index.html b/index.html
index 1995ffe..c174c0b 100644
--- a/index.html
+++ b/index.html
@@ -3,98 +3,7 @@
-
+
diff --git a/step1-00/css-demo.css b/step1-00/css-demo.css
index d8f4ffb..db7481a 100644
--- a/step1-00/css-demo.css
+++ b/step1-00/css-demo.css
@@ -2,12 +2,21 @@
/* Targeting an HTML tag */
h1 {
+ /* Color name */
color: black;
- background: #ddd;
- border: 1px solid #ababab;
+
+ /* 6 digit hex */
+ background: #ababab;
+
+ /* Margin: property for each side */
margin-bottom: 15px;
margin-top: 15px;
+
+ /* Shorthand: Padding applies to all sides */
padding: 10px;
+
+ /* 3 digit hex and border shorthand */
+ border: 1px solid #ddd;
}
/* Overriding inherited styles */
@@ -27,11 +36,17 @@ span {
/* Direct decendant selector */
.tiles > div {
+ /* rgb colors */
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
+ /* Longhand goes clockwise from top
+ 10px - all
+ 10px 20px - top/bottom left/right
+ 10px 20px 15px - top left/right bottom
+ */
padding: 10px 20px 15px;
- margin-right: 20px;
+ margin: 10px 20px 10px 0;
}
/* Qualified selector */
@@ -51,18 +66,20 @@ a:hover {
/* Sibling selectors */
a ~ a {
+ /* Changing elements from inline to block */
display: block;
}
/* Positional Pseudo Selectors */
.tiles > div:last-child {
+ /* overrides margin-right but leaves other margins alone */
margin-right: 0;
}
-/* ID and selector lists */
-#contact-form label,
-#contact-form input {
- display: block;
+/* ID selector */
+#contact-form {
+ display: flex;
+ flex-direction: column;
}
/* Attribute selector */
diff --git a/step1-00/html-demo.html b/step1-00/html-demo.html
index c15b04d..40a1672 100644
--- a/step1-00/html-demo.html
+++ b/step1-00/html-demo.html
@@ -2,6 +2,7 @@
Intro to HTML
+