diff --git a/_includes/studentLife.html b/_includes/studentLife.html
index 1d98d2e..5b2a31f 100644
--- a/_includes/studentLife.html
+++ b/_includes/studentLife.html
@@ -1,6 +1,6 @@
 <div id="studentLifeText">
   <h1>engageCommunity();</h1>
-  
+
   <p>As an extension of learning our craft, NSS students are encouraged to participate in meetups, hackathons, technology conferences and other events outside the classroom that integrate us into the Nashville technology community at-large.</p>
 
   <p>Cohort 11 has taken that suggestion to heart.  We have volunteered at BarCamp, Music City Code and Republic Schools, attended Global Game Jam and joined Girl Geek Dinners, WomenGetIT, NashJS, Code for Nashville and Nashville PHP.</p>
@@ -8,6 +8,10 @@ <h1>engageCommunity();</h1>
   <p>.....and that is just the beginning!</p>
 </div>
 
+<div id="studentHexPics">
+<img src="/images/hex3.png" class="hexes" alt="preview photos of student life">
+</div>
+
 <div id="studentLifePics">
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!-- Indicators -->
diff --git a/_includes/students.html b/_includes/students.html
index 559140b..1573072 100644
--- a/_includes/students.html
+++ b/_includes/students.html
@@ -1,11 +1,13 @@
+<h1 id="classBanner">.ourClass:</h1>
 <div id="studentPics">
-  <h1>.ourClass:</h1>
 
   {% for post in site.posts %}
     {% if post.flipCard == "true" %}
     <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
       <div class="flipper">
-        <div class="front" style="background-image: url({{post.imgUrl}})">
+        <div class="front">
+          <img src="../images/person-example.jpg">
+        <!-- <div class="front" style="background-image: url({{post.imgUrl}})"> -->
         <!-- front content -->
         </div>
         <div class="back">
@@ -18,4 +20,4 @@ <h2>{{post.firstName}} {{post.lastName}}</h2>
     </div>
     {% endif %}
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..4492d72
Binary files /dev/null and b/favicon.ico differ
diff --git a/images/bluetint2.jpg b/images/bluetint2.jpg
new file mode 100644
index 0000000..5b6d320
Binary files /dev/null and b/images/bluetint2.jpg differ
diff --git a/images/hex3.png b/images/hex3.png
new file mode 100644
index 0000000..84c0cba
Binary files /dev/null and b/images/hex3.png differ
diff --git a/images/person-example.jpg b/images/person-example.jpg
new file mode 100644
index 0000000..17ab6b8
Binary files /dev/null and b/images/person-example.jpg differ
diff --git a/styles/style.scss b/styles/style.scss
index 3dccd32..e5e2663 100644
--- a/styles/style.scss
+++ b/styles/style.scss
@@ -11,6 +11,7 @@ h1 {
 	font-family: monospace;
 	font-weight: normal;
 	margin-top: 0;
+  font-size: 1.8em;
 }
 
 .accent {
diff --git a/styles/style2.scss b/styles/style2.scss
index dc25581..dd31b30 100644
--- a/styles/style2.scss
+++ b/styles/style2.scss
@@ -1,6 +1,14 @@
 ---
 # Front matter comment to ensure Jekyll properly reads file.
 ---
+
+$NSS-lightest: #d9eaf2;
+$NSS-light: #b4d4e4;
+$NSS-medium: #68a9ca;
+$NSS-dark: #2d637f;
+$NSS-darker: #214a5e;
+$NSS-darkest: #142c39;
+
 body {
 	margin: 0;
 	padding: 0;
@@ -11,6 +19,7 @@ h1 {
 	font-family: monospace;
 	font-weight: normal;
 	margin-top: 0;
+  font-size: 1.8em;
 }
 
 .accent {
@@ -32,20 +41,30 @@ h1 {
 
 #videoHeader .headline {
 	position: absolute;
-	top: 30px;
-	left: 30px;
+	top: 20px;
 	color: #fff;
 	font-family: monospace;
-	font-size: 2.2em;
+	font-size: 1.2em;
+	line-height: 0.9em;
+	width: 280px;
+	margin: 0 auto;
+	left: 50%;
+}
+
+#pageHead {
+	text-align: center;
+	position: relative;
+	left: -50%;
+	vertical-align: top;
 }
 
 .blinking-cursor {
   font-weight: 100;
   display: inline;
-  font-size: 48px;
+  font-size: 28px;
   color: #fff;
   position: relative;
-  bottom: -8px;
+  bottom: -5px;
   -webkit-animation: 1s blink step-end infinite;
   -moz-animation: 1s blink step-end infinite;
   -ms-animation: 1s blink step-end infinite;
@@ -103,7 +122,7 @@ h1 {
 
 #introText {
 	padding: 20px;
-	background-color: #d5f1ff;
+	background-color: $NSS-lightest;
 	font-family: Helvetica, Tahoma, sans-serif;
 }
 
@@ -167,66 +186,55 @@ h1 {
 
 /* CSS for individual student profile pics */
 
+#classBanner {
+  background: $NSS-darker; /* Old browsers */
+  background: -moz-linear-gradient(top, $NSS-darker 0%, $NSS-darkest 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, $NSS-darker 0%,$NSS-darkest 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, $NSS-darker 0%,$NSS-darkest 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$NSS-darker', endColorstr='$NSS-darkest',GradientType=0 ); /* IE6-9 */
+  color: #fff;
+  text-shadow: 0 1px 3px $NSS-darkest;
+  padding: 15px 20px;
+  margin: 0;
+}
+
 #studentPics {
-	background-color: #2d637f;
+	background-color: $NSS-dark;
 	padding: 20px;
 	color: #fff;
 	box-shadow: 0 2px 4px #000;
 }
 
-.front.joshua {
-	background-image: url("card-demo-pic.jpg");
-}
-
-.front.sketch {
-	background-image: url("sketch.jpg");
-}
-
-.front.glasses {
-	background-image: url("glasses.jpg");
-}
-
-.front.james {
-	background-image: url("james.jpg");
-}
-
-.front.guitar {
-	background-image: url("guitar.jpg");
-}
-
-.front.paint {
-	background-image: url("paint.jpg");
-}
-
 /* entire individual container, keeps perspective */
 .flip-container {
 	perspective: 1000;
 	display: inline-block;
-	margin: 0 5px 10px;
+	margin: 10px 0;
 }
 	/* flip the pane when hovered */
 	.flip-container:hover .flipper, .flip-container.hover .flipper {
-		transform: rotateY(180deg);
+		// transform: rotateY(180deg);
 	}
 
 .flip-container, .front, .back {
-	width: 215px;
-	height: 300px;
+	// width: 215px;
+  width: 100%;
+	height: auto;
 }
 
 /* flip speed goes here */
 .flipper {
-	transition: 0.6s;
-	transform-style: preserve-3d;
+	// transition: 0.6s;
+	// transform-style: preserve-3d;
 
-	position: relative;
+	// position: relative;
 }
 
 /* hide back of pane during swap */
 .front, .back {
 	backface-visibility: hidden;
 
-	position: absolute;
+	// position: absolute;
 	top: 0;
 	left: 0;
 }
@@ -238,10 +246,15 @@ h1 {
 	transform: rotateY(0deg);
 }
 
+.front img {
+  width: 100%;
+}
+
 /* back, initially hidden pane */
 .back {
-	transform: rotateY(180deg);
+	// transform: rotateY(180deg);
 	background-color: #fff;
+  display: none;
 }
 
 .back {
@@ -267,23 +280,38 @@ h1 {
 #studentLifeText {
 	padding: 20px 20px 40px;
 	color: #fff;
-	background-image: url("/images/bluetint.jpg");
+	background-image: url("/images/bluetint2.jpg");
 	background-size: cover;
 	font-family: Helvetica, Tahoma, sans-serif;
-	height: 680px;
+	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.6);
 }
 
 #studentLifeText p {
-	width: 75%;
 	text-shadow: 2px 0px 4px rgba(0,0,0,0.6);
 }
 
+.hexes {
+  width: 100%;
+  position: relative;
+  top: -50px;
+}
+
+
+/* CSS for hex pic area */
+
+#studentHexPics {
+  padding: 20px 20px 0;
+  background-color: $NSS-lightest;
+  text-align: center;
+  margin-bottom: -50px;
+}
+
 
 /* CSS for pics/carousel area */
 
 #studentLifePics {
 	padding: 20px;
-	background-color: #d5f1ff;
+	background-color: $NSS-lightest;
 	text-align: center;
 }
 
@@ -295,8 +323,66 @@ h1 {
 /* CSS for page footer */
 
 footer {
-	background-color: #777f60;
+	background: $NSS-dark; /* Old browsers */
+  background: -moz-linear-gradient(top, $NSS-dark 0%, $NSS-darker 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, $NSS-dark 0%,$NSS-darker 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, $NSS-dark 0%,$NSS-darker 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$NSS-dark', endColorstr='$NSS-darker',GradientType=0 ); /* IE6-9 */
 	color: #fff;
+  text-shadow: 0 1px 3px $NSS-darker;
 	text-align: center;
-	padding: 10px 0;
+	padding: 15px 0;
+
+  p {
+    margin: 0;
+  }
+}
+
+
+/******************************
+MEDIA QUERIES
+******************************/
+
+@media (min-width: 400px) {
+
+	#videoHeader .headline {
+		font-size: 1.4em;
+		line-height: 1.0em;
+		width: 325px;
+	}
+
+	.blinking-cursor {
+	  font-size: 30px;
+	}
+
+}
+
+@media (min-width: 480px) {
+
+	#videoHeader .headline {
+		font-size: 1.8em;
+		width: 420px;
+		top: 25px;
+	}
+
+	.blinking-cursor {
+	  font-size: 40px;
+	  bottom: -7px;
+	}
+
 }
+
+@media (min-width: 600px) {
+
+	#videoHeader .headline {
+		font-size: 1.7em;
+		width: 100%;
+	}
+
+}
+
+
+
+
+
+