SEA-Design-Dev · KateFleming · Nov 5, 2014
diff --git a/README copy.md b/README copy.md
@@ -0,0 +1,38 @@
+##Refactor
+##Refactor another teams assignment
+
+
+###We shortened the css file from 100 lines to 76 lines.
+
+These are the changes:
+
+####Naming:
+
+ * Add "-" to compound names for easy reading
+  e.g. titleBar to title-bar
+
+####Short-handed:
+ Margin, border, border-radius.e.g.
+```css
+margin-left: auto;
+margin-right: auto;
+```
+```css
+margin: 0 auto;
+```
+
+####Deleted unessary specifications on positions. e.g.
+```css
+.profile-text {
+   -  position: absolute;
+   -  bottom: 0px;}
+
+    ```
+####Deleted unnessary tag. e.g.
+
+    <div></div>
+
+
+####Deleted z-index.
+
+The css originally had one class *headerimg* set to z-index 1 and *titleBar* at z-index 2. We deleted the z-index setting for headerimg and changed the other to z-index 1.
diff --git a/alpaca.css b/alpaca.css
@@ -0,0 +1,82 @@
+body {
+  font-family: sans-serif;
+  background-color: #dcd6c0;
+}
+.page-content {
+  width: 960px;
+  margin: 0 auto;
+  overflow:auto;
+}
+.title-bar {
+  background-color: #524D70;
+  opacity: .75;
+  height: 90px;
+  z-index: 1;
+  position: absolute;
+  top: 330px;
+  width: 100%;
+  color: #fffdee;
+  text-align: center;
+}
+header img {
+  position: relative;
+  display: block;
+  margin: 0 auto;
+  border-radius:0 0 5px 5px;
+}
+.profiles {
+  height: 360px;
+  width: 120px;
+  clear: none;
+  float: left;
+}
+.profile {
+  width: 310px;
+  margin-top: 10px;
+  position: relative;
+  background-color: #afb673;
+  border-radius: 5px;
+}
+.profile:hover {
+  background-color: #9d8d5a;
+}
+.profile-image {
+  display:block;
+  margin:auto;
+  padding: 10px;
+}
+.profile-text {
+  font-size: 13pt;
+  text-align: left;
+  padding: 5px;
+}
+.profile-text h3 {
+  margin: 0px;
+  text-align: center;
+}
+.profile-text p {
+  margin: 0;
+  padding: 5px 0 3px 0;
+}
+main {
+  float: right;
+  background-color: #cabb94;
+  height: 906px;
+  width: 640px;
+  margin-top: 10px;
+  text-align: center;
+  border-radius: 5px;
+}
+.more-info {
+  padding:0 55px;
+  font-size: 14pt;
+}
+footer {
+  height: 230px;
+  width: 960px;
+  background-color: #524D70;
+  border-radius: 5px;
+  color: #fffdee;
+  padding: 2px;
+  margin:15px auto;
+}
diff --git a/alpaca_images/IMG_1892.JPG b/alpaca_images/IMG_1892.JPG
diff --git a/alpaca_images/Ms.suri-alpaca15.jpg b/alpaca_images/Ms.suri-alpaca15.jpg
diff --git a/alpaca_images/Mystery-Billy face 4-6.jpg b/alpaca_images/Mystery-Billy face 4-6.jpg
diff --git a/alpaca_images/Nicola.jpg b/alpaca_images/Nicola.jpg
diff --git a/alpaca_images/betty1.jpg b/alpaca_images/betty1.jpg
diff --git a/alpaca_images/domino.jpg b/alpaca_images/domino.jpg
diff --git a/alpaca_images/foto-alpaca-kiss2.jpg b/alpaca_images/foto-alpaca-kiss2.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sweet Suris</title>
+    <link type="text/css" rel="stylesheet" href="normalize.css" />
+    <link rel="stylesheet" type="text/css" href="alpaca.css" />
+  </head>
+  <body>
+    <header>
+      <img
+        src="alpaca_images/foto-alpaca-kiss2.jpg"
+        alt="Two alpacas nose to nose">
+      <div class="title-bar">
+        <h1>Salubrius Sweet Suris</h1>
+      </div>
+    </header>
+<!--'main' as an element didn't work with my css(?)-->
+    <div class="page-content">
+<!--profile module-->
+      <aside class="profiles">
+        <div class="profile" id="nicola">
+            <img class="profile-image" src="alpaca_images/Nicola.jpg">
+          <div class="profile-text">
+            <h3>Nicola</h3>
+            <p>Imagine a french opera singer strutting her stuff along Parisian boulevards. That&rsquo;s Nicola. She sets the trends but can&rsquo;t be bothered with what others are up to. Until she has something to share, that is. Those lungs aren&rsquo;t just for the stage.</p>
+          </div>
+        </div>
+<!--//end profile module-->
+        <div class="profile" id="betty">
+          <img class="profile-image" src="alpaca_images/betty1.jpg">
+        <div class="profile-text">
+          <h3>Betty</h3>
+          <p>Sometimes chided for being gullible, Betty is the most trusting of our alpaca trio.  She has a gentle touch and is friendly toward visiting dogs, cats, and humans.  Betty would love to meet you and take a treat from your hand.</p>
+        </div>
+        </div>
+        <div class="profile" id="domino">
+            <img class="profile-image" src="alpaca_images/domino.jpg">
+          <div class="profile-text">
+            <h3>Domino</h3>
+            <p>Like the first domino in a row, this lady will knock you down if you get in her way.  She&rsquo;s quick on her feet and will make you work if you want to get close.  Domino has a good poker face and, if you&rsquo;re not careful, she might get you with her superb spitting technique.</p>
+          </div>
+        </div>
+      </aside>
+      <main>
+        <article class="more-info">
+          <h2>About the Farm</h2>
+          <p>Owned by Todd Galloway and Lee Kudrna since 2009, Sweet Suris began as a sanctuary for a smattering of cats and dogs. Since then Lee and Todd have adopted several critters including the three ladies featured here.</p>
+          <p><b>Contact information</b></p>
+          <p><em>Find our farm at</em> <br> 3033 NW 3rd Avenue <br> Fruitland, Idaho 83619<br><br> Phone: (208) 452-2345</p>
+        <div class="faq">
+          <h2>FAQs</h2>
+          <p>Sample question 1</p>
+          <p>Sample question 2</p>
+          <p>Sample question 3</p>
+        </div>
+        </article>
+      </main>
+    </div>
+    <footer>
+      <p>.....Sample Footer Content.....</p>
+    </footer>
+  </body>
+</html>