solution up just need to finish instruction portion

Sdcrouse · Jun 13, 2018 · 7e3373f · 7e3373f
1 parent bcc2cf1
commit 7e3373f
Show file tree

Hide file tree

Showing 16 changed files with 184 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,51 @@
-# Title
+# Creating Columns Lab
 
 ## Problem Statement
 
+Often times, websites will employ a 'column based' layout scheme to visually
+deliver content. While writing HTML and CSS for this kind of layout can be done
+in many different ways, following a few simple patterns can help us achieve
+clean code and a clean column-based representation of our websites.
+
+
 ## Objectives
+1. Practice writing and employing a column based CSS rule set
+
+
+## Introduction
+
+Using a 'before' and 'after' example, we will transform a page into a column
+based presentation. In doing so, we will practice our skills writing re-usable,
+rule-based, CSS. 
+
+Column based layouts have endless visual applications, and are handy for a wide
+variety of content; be it text, images, videos, etc. In our example, we will use
+images as tiles, and explore how a column layout enables us to quickly
+re-arrange them as we see fit.
+
+This lab is a great time to practice editing CSS directly in Chrome Inspector
+Tools. This allows us to change properties/values on the fly and see what they
+look like on screen before going back and editing the actual CSS file. 
+
+
+## Deliverables
+
+- Examine what we have rendering already by opening `index.html` in the browser
+- Create a column class in our CSS, 
+- Populate the classes with CSS properties that enable us to re-arrange our images as shown in the 'what we want' image below
+
+#### What We Have
+
+![](https://curriculum-content.s3.amazonaws.com/fewds-css/css-fundamentals-lab-incomplete.png)
+
+#### What We Want
 
-### Objective 1
+![](https://curriculum-content.s3.amazonaws.com/fewds-css/css-fundamentals-lab-complete.png)
 
-Content moving student to objective 1
 
-### Objective 2
+## Instructions
 
-Content moving student to objective 2
 
-#### Key Terms (if applicable)
 
-#### Resources (if applicable)
 
-### Conclusion
+<p data-visibility='hidden'>View <a href='https://learn.co/lessons/creating-columns-lab' title='Creating Columns Lab'>Creating Columns Lab</a> on Learn.co and start learning to code for free.</p>
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,71 @@
+body, html {
+  width: 100%;
+  height: 100%;
+  font-family: Apple Chancery, cursive;
+  margin: 0 auto;
+  display: block;
+  text-align: center;
+  background-color: #666;
+}
+
+.container, h1 {
+  width: 80%;
+  max-width: 600px;
+  min-width: 400px;
+  padding: 10px;
+  margin: 10px auto;
+}
+
+h4 {
+  width: fit-content;
+  display: inline-block;
+  padding: 5px;
+  margin: 20px 0 0 0;
+}
+
+img:hover {
+  transition-duration: 1s;
+  transform: scale(1.05);
+}
+
+.amiable {
+  border: 1px solid #22aa44;
+  box-shadow:  -1px 1px #22aa44, -2px 2px #22aa44, -3px 3px #22aa44, -4px 4px #22aa44, -5px 5px #22aa44;
+  background-color: #44cc66;
+}
+
+.indifferent {
+  border: 1px solid #aaaa00;
+  box-shadow:  -1px 1px #aaaa00, -2px 2px #aaaa00, -3px 3px #aaaa00, -4px 4px #aaaa00, -5px 5px #aaaa00;
+  background-color: #dddd22;
+}
+
+.dubious {
+  border: 1px solid #aa2222;
+  box-shadow: -1px 1px #aa2222, -2px 2px #aa2222, -3px 3px #aa2222, -4px 4px #aa2222, -5px 5px #aa2222;
+  background-color: #dd4444;
+}
+
+/* create your tile classes! we recommend .small .med .large */
+
+.small {
+  width: 100%;
+  height: 100%;
+}
+
+.med {
+  width: 201.5%;
+  height: 201.5%;
+}
+
+.large {
+  width: 303%;
+  height: 303%;
+}
+
+/* create a column class! make sure all of the divs within 'container's have a class of 'column' */
+
+.column {
+  width: 30%;
+  display: inline-block;
+}
diff --git a/images/augustus_gloop.jpg b/images/augustus_gloop.jpg
diff --git a/images/bay_of_pigs.jpg b/images/bay_of_pigs.jpg
diff --git a/images/cherub.jpg b/images/cherub.jpg
diff --git a/images/galaxy_note.jpg b/images/galaxy_note.jpg
diff --git a/images/leggo_my_eggo.jpg b/images/leggo_my_eggo.jpg
diff --git a/images/mudblood.jpg b/images/mudblood.jpg
diff --git a/images/piggy_smalls.jpg b/images/piggy_smalls.jpg
diff --git a/images/porkchop.jpg b/images/porkchop.jpg
diff --git a/images/rainbowdash.jpg b/images/rainbowdash.jpg
diff --git a/images/sobriety.jpg b/images/sobriety.jpg
diff --git a/images/the_prosciutto_concern.jpg b/images/the_prosciutto_concern.jpg
diff --git a/images/trouble.jpg b/images/trouble.jpg
diff --git a/images/truffleshuffle.jpg b/images/truffleshuffle.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <title>Exceptional Realty Group - Luxury Homes - About</title>
+    <link rel="stylesheet" href="./css/style.css">
+  </head>
+
+  <body>
+
+    <h1>My Hog Bank</h1>
+
+
+    <h4 class="amiable">Those hogs, whom I amiably regard</h4>
+    <div class="container amiable">
+
+      <div class="column">
+        <img class="small" src="./images/bay_of_pigs.jpg">
+        <img class="small" src="./images/augustus_gloop.jpg">
+        <img class="small" src="./images/cherub.jpg">
+      </div>
+
+      <div class="column">
+        <img class="med" src="./images/galaxy_note.jpg">
+        <img class="small" src="./images/leggo_my_eggo.jpg">
+      </div>
+
+      <div class="column">
+        <img class="small" src="./images/mudblood.jpg">
+      </div>
+
+    </div>
+
+
+    <h4 class="indifferent">Those hogs, towards whom I am indifferent</h4>
+    <div class="container indifferent">
+
+      <div class="column">
+        <img class="med" src="./images/porkchop.jpg">
+        <img class="small" src="./images/piggy_smalls.jpg">
+      </div>
+
+      <div class="column">
+        <img class="small" src="./images/rainbowdash.jpg">
+      </div>
+
+      <div class="column">
+        <img class="small" src="./images/sobriety.jpg">
+        <img class="small" src="./images/trouble.jpg">
+        <img class="small" src="./images/truffleshuffle.jpg">
+      </div>
+
+    </div>
+
+
+    <h4 class="dubious">That hog, upon whom I glower dubiously</h4>
+    <div class="container dubious">
+
+      <div class="column">
+        <img class="large" src="./images/the_prosciutto_concern.jpg">
+      </div>
+
+      <div class="column">
+      </div>
+
+      <div class="column">
+      </div>
+    </div>
+
+  </body>
+
+</html>