Ada-C4 · dezshino · Oct 28, 2015 · Oct 28, 2015 · Oct 29, 2015 · Oct 29, 2015
diff --git a/.DS_Store b/.DS_Store
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: bundle exec rackup -p  $PORT
diff --git a/README.md b/README.md
@@ -18,8 +18,7 @@ The requirements for this wave are:
     - Feel free to use some of the static HTML pages made for the previous exercise
   - At least **one** of the static pages must include at least **two** images
 
-<!--
-## Wave 2: Use CSS to apply style and struture to our website
+## Wave 2: Use CSS to apply style and structure to our website
 
 The requirements for this wave are:
 - Add `class` and/or `id` attributes to your html tags where appropriate
@@ -32,6 +31,7 @@ The requirements for this wave are:
   - Style your headings (`<h1>`, `<h2>`, etc.) so they are visually distinct.
   - don't use `<br>` tags to separate content; apply `margin` and `padding` where appropriate to space out content.
 
+<!--
 ## Wave 3: DRY up your markup by utilizing layouts and ERB
 
 The requirements for this wave are:

diff --git a/my-site.rb b/my-site.rb
@@ -3,22 +3,32 @@
 class MySite < Sinatra::Base
 
   get "/" do
+    @title = "Desiree Poland"
     erb :index
   end
 
   get "/index.html" do
+    @title = "Desiree Poland"
     erb :index
   end
 
-  get "/soon.html" do
-    erb :soon
-  end
-
   get "/projects.html" do
+    @title = "Projects"
     erb :projects
   end
 
   get "/about.html" do
+    @title = "About Desiree"
     erb :about
   end
+
+  get "/soon.html" do
+    @title = "Coming Soon"
+    erb :soon
+  end
+
+  get "/contact.html" do
+    @title = "Contact Me"
+    erb :contact
+  end
 end
diff --git a/public/.DS_Store b/public/.DS_Store
diff --git a/public/css/site.css b/public/css/site.css
@@ -0,0 +1,108 @@
+body {
+	width: 960px;
+	background-color: #f7f9f9;
+	font-family: 'Raleway', Helvetica, sans-serif;
+	color: #11131b;
+	margin: 0 auto;
+	text-align: center
+}
+h1 {
+	font-size: 32px;
+	font-weight: bold;
+}
+.home h1{
+	margin-bottom: 0px;
+	font-size: 36px;
+}
+p {
+	font-size: 16px;
+	color: #11131b;
+	font-weight: normal;
+}
+img {
+	margin-top: 2em;
+	width: 275px;
+}
+	.soon img{
+		margin-top: 0;
+		width: 260px;
+		height: 240px;
+	}
+table{
+  margin: 3em auto;
+}
+tr {
+	height: 30px;
+	text-align: left;
+}
+hr {
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid;
+	border-color: #747070 ;
+	margin: 1em 0;
+	padding: 0;
+}
+nav {
+	padding: 30px 10px 15px;
+}
+.navlink {
+	padding: 0 50px;
+	display: inline;
+}
+a{
+	color: #199C8A;
+}
+a.navlink:link{
+	text-decoration: none;
+}
+a.navlink:visited{
+	text-decoration: none;
+}
+a.navlink:hover{
+	text-decoration: underline;
+}
+footer {
+	display: flex;
+	width: 100%;
+}
+	footer a {
+		color: #11131b;
+		text-decoration: none;
+	}
+	footer a:hover {
+		color: #11131b;
+		text-decoration: underline overline;
+	}
+.half-col{
+	width: 50%;
+	font-size: 14px;
+	background-color: #AEE8D8;
+}
+.half-col:first-child {
+	text-align: left;
+	height: 50%;
+}
+.half-col:last-child {
+	text-align: right;
+	font-weight: bold;
+}
+.home .social-media img{
+	margin: 0;
+	width: 32px;
+	height: 32px;
+}
+.contact .social-media img{
+	width: 75px;
+	height: 75px;
+	margin: 0 20px;
+}
+.social-media{
+	display: inline-block;
+ 	padding: 10px;
+ 	transition: all .2s ease-in-out;
+}
+.social-media:hover {
+ transform: rotate(360deg);
+}
diff --git a/public/email-128.png b/public/email-128.png
diff --git a/public/github-128.png b/public/github-128.png
diff --git a/public/linkedin-96.png b/public/linkedin-96.png
diff --git a/public/twitter-96.png b/public/twitter-96.png
diff --git a/views/.DS_Store b/views/.DS_Store
diff --git a/views/about.erb b/views/about.erb
@@ -1,19 +1,6 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>About Me</title>
-  </head>
-  <body>
-    <nav>
-      <a href="./index.html">Home</a>
-      <a href="./projects.html">Projects</a>
-      <a href="./about.html">About</a>
-      <a href="./soon.html">Coming Soon</a>
-    </nav>
-    <img src="fldez.jpg" width="275px" alt="desiree"/>
-    <h1>Aloha!</h1>
-    <p>My name is Desiree.</p>
-    <p>I'm currently a student at Ada Developers Academy in Seattle, WA.</p>
-
-  </body>
-</html>
+<img src="fldez.jpg" alt="desiree"/>
+<h1>Aloha!</h1>
+<% dob = Date.new(1991,1,14)%>
+<% age = ((Date.today - dob).to_i / 365.25).to_i %>
+<p>My name is Desiree. I am <%= age %> years old.</p>
+<p>I'm currently a student at Ada Developers Academy in Seattle, WA.</p>
diff --git a/views/contact.erb b/views/contact.erb
@@ -0,0 +1,9 @@
+<section class="contact">
+  <h1>Contact Me :</h1>
+  <div>
+    <a class="social-media" href="https://github.com/desireepoland"><img alt="follow me on github" src="github-128.png" border=0></a>
+    <a class="social-media" href="https://twitter.com/desireepoland"><img alt="follow me on twitter" src="twitter-96.png" border=0></a>
+    <a class="social-media" href="https://www.linkedin.com/in/desireepoland"><img alt="follow me on linkedin" src="linkedin-96.png" border=0></a>
+    <a class="social-media" href="mailto:[email protected]"><img alt="email me" src="email-128.png" border=0></a>
+  </div>
+</section>
diff --git a/views/index.erb b/views/index.erb
@@ -1,27 +1,10 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Home</title>
-  </head>
-
-  <body>
-    <nav>
-      <nav>
-        <a href="./index.html">Home</a>
-        <a href="./projects.html">Projects</a>
-        <a href="./about.html">About</a>
-        <a href="./soon.html">Coming Soon</a>
-      </nav>
-    </nav>
-
-    <div id="header">
-      <img src="oiaprofedit.png" width="275px" alt="desiree"/>
-      <h1>Hi, I'm Desiree!</h1>
-    </div>
-    <p>
-      Feel free to look around.
-    </p>
-
-  </body>
-
-</html>
+<section class="home">
+  <img src="oiaprofedit.png" alt="desiree"/>
+  <h1>Desiree Poland</h1>
+  <div>
+    <a class="social-media" href="https://github.com/desireepoland"><img alt="follow me on github" src="github-128.png" border=0></a>
+    <a class="social-media" href="https://twitter.com/desireepoland"><img alt="follow me on twitter" src="twitter-96.png" border=0></a>
+    <a class="social-media" href="https://www.linkedin.com/in/desireepoland"><img alt="follow me on linkedin" src="linkedin-96.png" border=0></a>
+    <a class="social-media" href="mailto:[email protected]"><img alt="email me" src="email-128.png" border=0></a>
+  </div>
+</section>
diff --git a/views/layout.erb b/views/layout.erb
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
+    <link href="http://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css">
+    <title><%= @title %></title>
+    <link href="css/site.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <div id="container">
+      <header>
+        <nav>
+          <a href="./index.html" class="navlink">Home</a>
+          <a href="./projects.html" class="navlink">Projects</a>
+          <a href="./about.html" class="navlink">About</a>
+          <a href="./soon.html" class="navlink">Coming Soon</a>
+        </nav>
+        <hr/>
+      </header>
+
+    <%= yield %>
+
+    <hr/>
+    <footer>
+      <p class="half-col">&copy; <%= Time.now.year %> Desiree Poland. All rights reserved.</p>
+      <p class="half-col"><a href="./contact.html">| Contact Me |</a></p>
+    </footer>
+  </div>
+  </body>
+</html>
diff --git a/views/projects.erb b/views/projects.erb
@@ -1,56 +1,40 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Ada Developer's Academy Projects</title>
-  </head>
+<h1>Projects</h1>
+<p>
+  Take a look at some of the projects I've been working on at Ada Developer's Academy!
+</p>
 
-  <body>
-    <nav>
-      <a href="./index.html">Home</a>
-      <a href="./projects.html">Projects</a>
-      <a href="./about.html">About</a>
-      <a href="./soon.html">Coming Soon</a>
-    </nav>
-    <h1>Projects</h1>
-    <p>
-      Take a look at some of the projects I've been working on at Ada Developer's Academy!
-    </p>
+<table>
+  <thead>
+    <tr>
+      <th>Project:</th>
+      <th>Description:</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><a href="https://gist.github.com/desireepoland/c37bd92926f9f3a702ca">Random Menu Generator</a></td>
+      <td>Generates a random menu of food</td>
+    </tr>
+    <tr>
+      <td><a href="https://gist.github.com/desireepoland/0cecbc137edeee738f43">Calculator</a></td>
+      <td>Allows users to perform simple arithmetic in the terminal</td>
+    </tr>
+    <tr>
+      <td><a href="https://gist.github.com/desireepoland/ad90eb002cfec84f631b">Solar System</a></td>
+      <td>Creates a planetary system</td>
+    </tr>
+    <tr>
+      <td><a href="https://github.com/desireepoland/Word-Guess/tree/erg+dfcp/master">Word Guess</a></td>
+      <td>A version of the hangman game using ASCII art</td>
+    </tr>
+    <tr>
+      <td><a href="https://github.com/desireepoland/BankAccounts/tree/dfcp/master">Bank Accounts</a></td>
+      <td>Models a banking system, using classes for different Account types</td>
+    </tr>
+    <tr>
+      <td><a href=https://github.com/desireepoland/FarMar/tree/dfcp/master>FarMar</a></td>
+      <td>Application to look up various data about farmers markets</td>
+    </tr>
 
-    <table text-align: center>
-      <thead>
-        <tr>
-          <th>Project</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><a href="https://gist.github.com/desireepoland/c37bd92926f9f3a702ca">Random Menu Generator</a></td>
-          <td>Generates a random menu of food</td>
-        </tr>
-        <tr>
-          <td><a href="https://gist.github.com/desireepoland/0cecbc137edeee738f43">Calculator</a></td>
-          <td>Allows users to perform simple arithmetic in the terminal</td>
-        </tr>
-        <tr>
-          <td><a href="https://gist.github.com/desireepoland/ad90eb002cfec84f631b">Solar System</a></td>
-          <td>Creates a planetary system</td>
-        </tr>
-        <tr>
-          <td><a href="https://github.com/desireepoland/Word-Guess/tree/erg+dfcp/master">Word Guess</a></td>
-          <td>A version of the hangman game using ASCII art</td>
-        </tr>
-        <tr>
-          <td><a href="https://github.com/desireepoland/BankAccounts/tree/dfcp/master">Bank Accounts</a></td>
-          <td>Models a banking system, using classes for different Account types</td>
-        </tr>
-        <tr>
-          <td><a href=https://github.com/desireepoland/FarMar/tree/dfcp/master>FarMar</a></td>
-          <td>Application to look up various data about farmers markets</td>
-        </tr>
-
-      </tbody>
-    </table>
-
-  </body>
-</html>
+  </tbody>
+</table>
diff --git a/views/soon.erb b/views/soon.erb
@@ -1,20 +1,9 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>About Me</title>
-  </head>
-  <body>
-    <nav>
-      <a href="./index.html">Home</a>
-      <a href="./projects.html">Projects</a>
-      <a href="./about.html">About</a>
-      <a href="./soon.html">Coming Soon</a>
-    </nav>
-    <h1> Coming Soon...</h1>
-    <img src="sooncat.jpg" width="275px" alt="soon cat"/>
-    <img src="soonhorse.jpg" width="275px" alt="soon horse"/>
-    <img src="sooncow.jpg" width="275px" alt="soon cow"/>
-    <img src="soonishsloth.jpg" width="275px" alt="soonish sloth"/>
-
-  </body>
-</html>
+<h1> Coming Soon...</h1>
+<div class="soon">
+  <img src="sooncat.jpg" alt="soon cat"/>
+  <img src="soonhorse.jpg" alt="soon horse"/>
+</div>
+<div class="soon">
+  <img src="sooncow.jpg" alt="soon cow"/>
+  <img src="soonishsloth.jpg" alt="soonish sloth"/>
+</div>