Ada-C7 · J-C-L · Mar 16, 2017 · Mar 17, 2017 · Mar 17, 2017 · Mar 17, 2017
diff --git a/assets/mice_pics/small_mouse_1.jpg b/assets/mice_pics/small_mouse_1.jpg
diff --git a/assets/mice_pics/small_mouse_2.gif b/assets/mice_pics/small_mouse_2.gif
diff --git a/assets/mice_pics/small_mouse_3.jpg b/assets/mice_pics/small_mouse_3.jpg
diff --git a/assets/mice_pics/small_mouse_4.jpg b/assets/mice_pics/small_mouse_4.jpg
diff --git a/assets/mice_pics/small_mouse_5.png b/assets/mice_pics/small_mouse_5.png
diff --git a/assets/mice_pics/small_mouse_6.png b/assets/mice_pics/small_mouse_6.png
diff --git a/index.html b/index.html
@@ -1,9 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 
+
   <head>
     <meta charset="UTF-8">
     <title>Meowspace</title>
+      <link href="styles/normalize.css" rel="stylesheet">
+      <link href="styles/main.css" rel="stylesheet">
+
   </head>
 
   <body>
@@ -19,11 +23,11 @@ <h2><a href="index.html"> Meowspace </a></h2>
     </header>
 
     <main>
-      <section>
+      <section class="main-title">
         <h1> Meowspace </h1>
       </section>
 
-      <section>
+      <section class="popular-posts">
         <h2> Popular Posts </h2>
 
         <article>
@@ -69,29 +73,35 @@ <h3> Defense against the Dark Arts </h3>
 
       </section>
 
-      <section>
-        <h2> Join the Club </h2>
-        <p>
-          Cats go for world domination chase red laser dot. Flop over. Play riveting piece on synthesizer keyboard poop in the plant pot for shove bum in owner's face like camera lens. With tail in the air i could pee on this if i had the energy hola te quiero yet claw drapes mewl for food at 4am.
-        </p>
+      <section class="join-club">
+        <div>
+          <h2> Join the Club </h2>
+          <p>
+            Cats go for world domination chase red laser dot. Flop over. Play riveting piece on synthesizer keyboard poop in the plant pot for shove bum in owner's face like camera lens. With tail in the air i could pee on this if i had the energy hola te quiero yet claw drapes mewl for food at 4am.
+          </p>
+      </div>
         <img alt="Cat playing with mouse on chair" src="assets/join_club.jpg">
       </section>
 
-      <section>
+      <section class="everybody">
         <h2> Everybody wants to be a cat! </h2>
       </section>
     </main>
     <footer>
-      <h4> &copy; 2016 </h4>
-      <p id="disclaimer">
-        Meowspace is not responsible for, and expressly disclaims all liability for, damages of any kind arising out of use, reference to, or reliance on any information contained within the site. While the information contained within the site is periodically updated, no guarantee is given that the information provided in this Web site is correct, complete, and up-to-date.
-      </p>
+      <section class="footer-for-background">
+      <div>
+        <h4> &copy; 2016 </h4>
+        <p id="disclaimer">
+          Meowspace is not responsible for, and expressly disclaims all liability for, damages of any kind arising out of use, reference to, or reliance on any information contained within the site. While the information contained within the site is periodically updated, no guarantee is given that the information provided in this Web site is correct, complete, and up-to-date.
+        </p>
+      </div>
       <nav>
         <ul>
           <li><a href="#about"> About </a></li>
           <li><a href="#contact"> Contact </a> </li>
         </ul>
       </nav>
+        </section>
     </footer>
   </body>
 </html>
diff --git a/styles/main.css b/styles/main.css
@@ -0,0 +1,185 @@
+@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
+
+* {
+  font-family: "Indie Flower";
+}
+
+a {
+  text-decoration: none;
+  color: #6b2e03;
+}
+
+header a {
+  color: #fdd2b4; /*salmon*/
+}
+
+a:visited{
+color: #43c07b; /*green*/
+  }
+
+a:hover {
+  color: #afb1b1;
+}
+a:hover::after {
+  content:"🐭"
+}
+
+header {
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  height: 5rem;
+  background-color: #6b2e03; /*brown*/
+}
+
+header h2 {
+  margin-left: 6%;
+  margin-top: 25px;
+  float:left;
+}
+
+header nav {
+  margin-right: 7%;
+  margin-top: 25px;
+  float:right;
+}
+
+header ul {
+  margin: 0 ;
+  list-style-type: none;
+}
+
+header li {
+  padding-right:15px;
+  display: inline-block;
+}
+
+main {
+  background-color: #fdd2b4; /*salmon*/
+  color: #6b2e03; /*brown*/
+  margin-top: 5rem;
+}
+
+.main-title {
+  background-image:url(http://inspirationseek.com/wp-content/uploads/2014/08/Orange-Maine-Coon-Cat-Photography.jpg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: #fdd2b4; /*salmon*/
+  font-size: 2.5em;
+  height:450px;
+  line-height: 350px;
+  text-align: center;
+  width: 100%;
+}
+
+/*following 2 rule sets together create fade in of main-title  on page load*/
+.main-title h1 {
+  -webkit-animation: fadein 4s;
+}
+
+@-webkit-keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.popular-posts {
+  color: #6b2e03; /*brown*/
+}
+
+.popular-posts h2 {
+  padding-top: 3%;
+  text-align: center;
+}
+
+.popular-posts article {
+  display:inline-block;
+  position: relative;
+  left:3%;
+  width: 23%;
+  height: 333px;
+  margin: 3% 2%;
+  border: 2px solid #6b2e03;
+  border-radius: 15%;
+  text-align: center;
+  padding: 2%;
+  vertical-align: top;
+}
+
+.popular-posts h3::after {
+  width:100%;
+  content:""
+  border-bottom: 1px solid black;
+}
+
+.popular-posts a {
+  border: 1px solid #6b2e03;
+  border-radius: 15%;
+  padding: 2% 4%;
+  position: absolute;
+  right:20%;
+  width: 50%;
+  bottom: 10%;
+}
+
+.join-club {
+  height:200px;
+  padding: 4% 0;
+  border-top: 2px solid #6b2e03;
+  width:100%;
+}
+
+.join-club div {
+  float:left;
+  max-width: 40%;
+  padding-left: 7%;
+  text-align: center;
+}
+
+.join-club img {
+  float:right;
+  max-width: 40%;
+  padding-right: 7%;
+  padding-bottom: 5%;
+}
+
+.everybody {
+  background-image:url(../assets/everybody.jpg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  clear:both;
+  color: #fdd2b4; /*salmon*/
+  font-size: 2em;
+  height:350px;
+  line-height: 100px;
+  text-align: center;
+  width: 100%;
+}
+
+.footer-for-background {
+  background-color: #fdd2b4; /*salmon*/
+  height:200px;
+}
+
+footer div {
+  display: inline-block;
+  float:left;
+  padding-left: 10%;
+  padding-top: 30px;
+  width:45%
+}
+
+footer h4, footer, p {
+  display: inline;
+}
+
+footer nav {
+  float:right;
+  margin-right: 20%;
+  margin-top: 30px;
+}
+
+footer ul{
+  margin: 0;
+}