diff --git a/README.md b/README.md index 8311232f..8ff105c0 100644 --- 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 +

View Creating Columns Lab on Learn.co and start learning to code for free.

diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..62478203 --- /dev/null +++ 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 new file mode 100644 index 00000000..12b650dc Binary files /dev/null and b/images/augustus_gloop.jpg differ diff --git a/images/bay_of_pigs.jpg b/images/bay_of_pigs.jpg new file mode 100644 index 00000000..f53481e0 Binary files /dev/null and b/images/bay_of_pigs.jpg differ diff --git a/images/cherub.jpg b/images/cherub.jpg new file mode 100644 index 00000000..7ec54b88 Binary files /dev/null and b/images/cherub.jpg differ diff --git a/images/galaxy_note.jpg b/images/galaxy_note.jpg new file mode 100644 index 00000000..47fcc33a Binary files /dev/null and b/images/galaxy_note.jpg differ diff --git a/images/leggo_my_eggo.jpg b/images/leggo_my_eggo.jpg new file mode 100644 index 00000000..b67d81df Binary files /dev/null and b/images/leggo_my_eggo.jpg differ diff --git a/images/mudblood.jpg b/images/mudblood.jpg new file mode 100644 index 00000000..6d28ba6b Binary files /dev/null and b/images/mudblood.jpg differ diff --git a/images/piggy_smalls.jpg b/images/piggy_smalls.jpg new file mode 100644 index 00000000..409e7f9f Binary files /dev/null and b/images/piggy_smalls.jpg differ diff --git a/images/porkchop.jpg b/images/porkchop.jpg new file mode 100644 index 00000000..f21e2509 Binary files /dev/null and b/images/porkchop.jpg differ diff --git a/images/rainbowdash.jpg b/images/rainbowdash.jpg new file mode 100644 index 00000000..01d55597 Binary files /dev/null and b/images/rainbowdash.jpg differ diff --git a/images/sobriety.jpg b/images/sobriety.jpg new file mode 100644 index 00000000..8dde1730 Binary files /dev/null and b/images/sobriety.jpg differ diff --git a/images/the_prosciutto_concern.jpg b/images/the_prosciutto_concern.jpg new file mode 100644 index 00000000..5716d672 Binary files /dev/null and b/images/the_prosciutto_concern.jpg differ diff --git a/images/trouble.jpg b/images/trouble.jpg new file mode 100644 index 00000000..b33f146f Binary files /dev/null and b/images/trouble.jpg differ diff --git a/images/truffleshuffle.jpg b/images/truffleshuffle.jpg new file mode 100644 index 00000000..e846949e Binary files /dev/null and b/images/truffleshuffle.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..7717ba48 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + Exceptional Realty Group - Luxury Homes - About + + + + + +

My Hog Bank

+ + +

Those hogs, whom I amiably regard

+
+ +
+ + + +
+ +
+ + +
+ +
+ +
+ +
+ + +

Those hogs, towards whom I am indifferent

+
+ +
+ + +
+ +
+ +
+ +
+ + + +
+ +
+ + +

That hog, upon whom I glower dubiously

+
+ +
+ +
+ +
+
+ +
+
+
+ + + +