vijayv · nsoldiac · Feb 5, 2016 · Feb 6, 2016 · Feb 12, 2016 · Feb 12, 2016
diff --git a/2_tools_of_the_trade/hw1.txt b/2_tools_of_the_trade/hw1.txt
@@ -0,0 +1 @@
+Test
diff --git a/CSS/CSS-in-class-grid-layout.html b/CSS/CSS-in-class-grid-layout.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Felines in a Grid</title>
+		<link rel="stylesheet" type="text/css" href="grid-style.css">
+	</head>
+
+	<body>
+		<header>
+			<h2 id="site-title">Felines in a Grid</h2>
+			<nav id="navigation"> 
+				<a class="nav-button" href="#">Home</a>
+				<a class="nav-button" href="#">Lifestyle</a>
+				<a class="nav-button" href="#">Exclusives</a>
+				<a class="nav-button" href="#last-cat">Bubbles</a>
+			</nav>
+		</header>
+
+		<div class="other-news-container">
+			<h3>In Other News</h3>
+			<div class="other-news-item">
+				<img src="http://2.bp.blogspot.com/-41v6n3Vaf5s/UeRN_XJ0keI/AAAAAAAAN2Y/YxIHhddGiaw/s1600/css.gif">
+			</div>
+			<div class="other-news-item">
+				<img src="http://cdn.meme.am/instances/59066896.jpg">
+			</div>
+			<div class="other-news-item">
+				<img src="http://img.pandawhale.com/55831-WHY-MUST-LIFE-BE-SO-HARD-Homer-3HZt.gif">
+			</div>
+		</div>
+
+		<div class="main-container">
+			<h3>Our Finest Felines</h3>
+			<div class="ib-grid-item">
+				<img alt="Steve" src="https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png" alt="Felix the cat">
+				<p>Steve</p>
+			</div>
+			<div class="ib-grid-item">
+				<img alt="Dr. Franklin" src="https://pbs.twimg.com/profile_images/447460759329460224/mt2UmwGG_400x400.jpeg">
+				<p>Dr. Franklin</p>
+			</div>
+			<div class="ib-grid-item">
+				<img  alt="Mr. Lickums" src="http://2.bp.blogspot.com/_ckBlasgNSzg/SkV9fcHlE6I/AAAAAAAAM6s/qoUNISk_YpQ/s400/Cat+Bowling.jpg">
+				<p>Mr. Lickums</p>
+			</div>
+			<div class="ib-grid-item">
+				<img alt="Roxanne" src="http://www.our-happy-cat.com/images/cat-drinking-from-tap.jpg">
+				<p>Roxanne</p>
+			</div>
+			<div class="ib-grid-item">
+				<img alt="Felix" src="http://www.portraits-online.com/uploads/1/3/5/2/13522906/2607694_orig.jpg">
+				<p>Felix</p>
+			</div>
+			<div class="ib-grid-item" id="last-cat">
+				<img alt="Bubbles" src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg">
+				<p>Bubbles</p>
+			</div>
+		</div>
+
+		<footer>
+			<a href="#navigation">Back to top</a>
+			<span> | &copy; Felines in a Grid 2016. All rights reserved.</span>
+		</footer>
+	</body>
+</html>
diff --git a/CSS/grid-style-completed.css b/CSS/grid-style-completed.css
@@ -0,0 +1,153 @@
+/*----------------- CSS RESET ------------------*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/*----------------- CSS RESET ------------------*/
+
+body {
+	font-size: 18px;
+}
+
+header, footer {
+	width: 100%;
+	background: #4d94ff;
+	color: #ffffff;
+	box-sizing: border-box;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+}
+
+header {
+	display: inline-block;
+}
+
+footer {
+/*	float: left;*/
+	margin-top: 2em;
+	clear: both;
+}
+
+nav {
+	width: 50%;
+	margin-left: 25%;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+	border: 1px solid #adadad;
+}
+
+h2 {
+	font-size: 1.5em;
+}
+
+h3 {
+	font-size: 1.33em;
+	font-weight: bold;
+	padding: 20px;
+}
+
+a {
+	text-decoration: none;
+}
+
+#site-title {
+	float: left;
+	width: 25%;
+	text-align: center;
+}
+
+.nav-button {
+	color: #ffffff;
+	display: inline-block;
+	background: none;
+	height: 100%;
+	width: 150px;
+	border-left: 1px solid #ffffff;
+	border-right: 1px solid #ffffff;
+	margin-left: -5px;
+}
+
+.nav-button:hover {
+	background: #80b3ff;
+}
+
+a.nav-button:visited {
+	color: #ffffff;
+}
+
+/*START HERE*/
+
+.other-news-container {
+	float: left;
+	width: 25%;
+	text-align: center;
+}
+
+.main-container {
+	float: left;
+	width: 75%;
+	text-align: center;
+}
+
+.ib-grid-item {
+	display: inline-block;
+	box-sizing: border-box;
+	width: 33%;
+	margin-bottom: 10%;
+}
+
+.ib-grid-item img {
+	max-width: 66.67%;
+	max-height: 66.67%;
+}
+
+.other-news-item {
+	box-sizing: border-box;
+	padding: 0 10%;
+	margin-bottom: 10%;
+}
diff --git a/CSS/grid-style.css b/CSS/grid-style.css
@@ -0,0 +1,159 @@
+/*----------------- CSS RESET ------------------*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/*----------------- CSS RESET ------------------*/
+
+body {
+	font-size: 18px;
+}
+
+header, footer {
+	width: 100%;
+	background: #4d94ff;
+	color: #ffffff;
+	box-sizing: border-box;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+}
+
+header {
+	display: inline-block;
+}
+
+footer {
+/*	float: left;*/
+	margin-top: 2em;
+	clear: both;
+}
+
+nav {
+	width: 50%;
+	margin-left: 25%;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+	border: 1px solid #adadad;
+}
+
+h2 {
+	font-size: 1.5em;
+}
+
+h3 {
+	font-size: 1.33em;
+	font-weight: bold;
+	padding: 20px;
+}
+
+a {
+	text-decoration: none;
+}
+
+#site-title {
+	float: left;
+	width: 25%;
+	text-align: center;
+}
+
+.nav-button {
+	color: #ffffff;
+	display: inline-block;
+	background: none;
+	height: 100%;
+	width: 150px;
+	border-left: 1px solid #ffffff;
+	border-right: 1px solid #ffffff;
+	margin-left: -5px;
+}
+
+.nav-button:hover {
+	background: #80b3ff;
+}
+
+a.nav-button:visited {
+	color: #ffffff;
+}
+
+/*START HERE*/
+
+.other-news-container {
+	float: left;
+	width: 25%;
+	text-align: center;
+	/*border: 1px dotted green;*/
+}
+
+.main-container {
+	width: 75%;
+	float: left;
+	text-align: center;
+}
+
+.ib-grid-item {
+	display: inline-block;
+	box-sizing: border-box;
+	width: 33%;
+	/*border: 1px dotted green;*/
+	margin-bottom: 10%;
+}
+
+.ib-grid-item img {
+	max-width: 66%;
+	max-height: 66%;
+}
+
+.other-news-item {
+	/*max-width: 66.6%;*/
+	/*max-height: 66.6%;*/
+	box-sizing: border-box;
+	padding: 0 10%;
+	margin-bottom: 10%;
+	/*border: 1px dotted green;*/
+}
+