Redo everything to look like stickers

rachelmyers · Feb 23, 2016 · 71213af · 71213af
1 parent 227c5a0
commit 71213af
Show file tree

Hide file tree

Showing 16 changed files with 662 additions and 235 deletions.
diff --git a/community.html b/community.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Rachel Myers</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="talks.css">
+    <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
+    <link rel="icon" type="image/png" href="images/starfish.png">
+  </head>
+
+  <body>
+
+    <header>
+      <h1> Community </h1>
+    </header>
+
+    <div class="railsbridge">
+      <div class="text-left">
+        <a name="railsbridge"><h2>RailsBridge</h2></a>
+        <p><a href="http://www.railsbridge.org/">RailsBridge</a> is an organization that teaches marginalized groups Ruby, Rails, and Frontend development.</p>
+        <p>The RailBridge community and workshops were a huge help to me when I started programming, and I started teaching as soon as I was able. I'm currently on the RailsBridge Board of Directors and volunteer regularly at workshops in San Francisco.</p>
+        <p>If you'd like to get involved, check out <a href="https://www.bridgetroll.org/">Bridge Troll</a> for a workshop near you, start an issue in our <a href="https://github.com/railsbridge/organizing/issues">Organizing Repo</a>, or help us maintain the <a href="https://github.com/railsbridge/docs/blob/master/CONTRIBUTING.md">curriculum</a>! Also, checkout <a href="http://www.clojurebridge.org/">ClojureBridge</a> and <a href="https://github.com/mobilebridge">MobileBridge</a>.</p>
+      </div>
+    </div>
+
+    <footer>
+      <p>I used <a href="http://www.fiftythree.com/paper">Paper by 53</a> for the drawings. &#9825;</p>
+    </footer>
+  </body>
+</html>
diff --git a/images/community-sticker.png b/images/community-sticker.png
diff --git a/images/email-sticker.png b/images/email-sticker.png
diff --git a/images/github-sticker.png b/images/github-sticker.png
diff --git a/images/hell-no-hearts-sticker.png b/images/hell-no-hearts-sticker.png
diff --git a/images/projects-sticker.png b/images/projects-sticker.png
diff --git a/images/rachelmyers-sticker.png b/images/rachelmyers-sticker.png
diff --git a/images/rachelmyers-stout-sticker.png b/images/rachelmyers-stout-sticker.png
diff --git a/images/talks-sticker.png b/images/talks-sticker.png
diff --git a/images/twitter-sticker.png b/images/twitter-sticker.png
diff --git a/index.html b/index.html
diff --git a/old-style.css b/old-style.css
@@ -0,0 +1,152 @@
+body {
+  background-color: #F3F3F3;
+  font: 20px/25px 'inconsolata';
+  margin: 0;
+}
+
+a {
+  text-decoration:none;
+  color: #066;
+}
+
+a:hover {
+  color: #777;
+}
+
+h1, h2, h3 {
+  font: 75px 'Lobster Two', 'inconsolata';
+  margin: 0;
+  color: #555;
+}
+
+
+h3 {
+  font: 20px/10px 'inconsolata';
+  color: #555;
+}
+
+header {
+  min-height: 300px;
+  padding: 100px 0 100px 75px;
+  border-bottom: 5px solid #555;
+  background: url(images/starmonkey.png) no-repeat;
+  background-position: bottom 50px right;
+}
+
+header ul li {
+  list-style: none;
+}
+
+header h1 {
+  font-size: 150px;
+  line-height: 175px;
+  margin: 0;
+}
+
+section {
+  margin: 20px 0 0 60px;
+  width: 600px;
+}
+
+q{
+  display: block;
+  margin: 30px;
+  font: 30px/35px 'Lobster Two', cursive;
+  color: #555;
+}
+
+.extra-special{
+  color: #F55D71;
+}
+
+.text-right {
+  padding: 3% 6% 3% 55%;
+}
+
+.text-left {
+  padding: 3% 55% 3% 6%;
+}
+
+.text-left, .text-right{
+  border-bottom: 5px solid #555;
+}
+
+.passion-projects {
+  background:url(images/starfish.png) fixed no-repeat;
+  background-position: left;
+}
+
+.src2013 {
+  background:url(images/tree.png) fixed no-repeat;
+  background-position: right 100px center;
+}
+
+.fluent2013 {
+  background:url(images/yak.png) fixed no-repeat;
+  background-position: left center;
+}
+
+.fluent2013 h2, .fluent2013 a, .fluent2013 h3{
+  color: #DB6C27;
+}
+ .fluent2013 p {
+  color: #F0A06E;
+}
+
+.soa .disaster {
+  color: #E83143;
+}
+
+
+.velocity2013 {
+  background:url(images/buried-ostrich.png) fixed no-repeat;
+  background-position: right 100px center;
+}
+
+.wicked2013 {
+  background:url(images/dino.png) fixed no-repeat;
+  background-position: left 175px center;
+}
+
+.railsgirls-milan {
+  background:url(images/boot.png) fixed no-repeat;
+  background-position: right 100px center;
+}
+
+.fluent2014 {
+  background:url(images/robot.png) fixed no-repeat;
+  background-position: left 200px center;
+}
+
+.codemania2014 {
+  background:url(images/car.png) fixed no-repeat;
+  background-position: right 50px center;
+}
+
+.frontendops2014 {
+  background:url(images/robot.png) fixed no-repeat;
+  background-position: left 200px center;
+}
+
+.soa {
+  background:url(images/robot-wires.png) fixed no-repeat;
+  background-position: left 50px center;
+}
+
+.railsbridge {
+  background:url(images/ruby.png) fixed no-repeat;
+  background-position: right 200px center;
+}
+
+footer {
+  max-width: 500px;
+  margin: 40px auto 0 auto;
+  height: 145px;
+  background: url(images/banana.png) no-repeat;
+}
+
+footer p{
+  position: absolute;
+  margin-top: 105px;
+  margin-left: 250px;
+}
diff --git a/old_index.html b/old_index.html
diff --git a/style.css b/style.css
@@ -1,5 +1,5 @@
 body {
-  background-color: #F3F3F3;
+  background-color: #EFEFEF;
   font: 20px/25px 'inconsolata';
   margin: 0;
 }
@@ -13,24 +13,9 @@ a:hover {
   color: #777;
 }
 
-h1, h2, h3 {
-  font: 75px 'Lobster Two', 'inconsolata';
-  margin: 0;
-  color: #555;
-}
-
-
-h3 {
-  font: 20px/10px 'inconsolata';
-  color: #555;
-}
-
 header {
   min-height: 300px;
-  padding: 100px 0 100px 75px;
-  border-bottom: 5px solid #555;
-  background: url(images/starmonkey.png) no-repeat;
-  background-position: bottom 50px right;
+  padding: 50px 0 100px 75px;
 }
 
 header ul li {
@@ -43,110 +28,16 @@ header h1 {
   margin: 0;
 }
 
-section {
-  margin: 20px 0 0 60px;
-  width: 600px;
-}
-
-q{
-  display: block;
-  margin: 30px;
-  font: 30px/35px 'Lobster Two', cursive;
-  color: #555;
-}
-
-.extra-special{
-  color: #F55D71;
-}
-
-.text-right {
-  padding: 3% 6% 3% 55%;
-}
-
-.text-left {
-  padding: 3% 55% 3% 6%;
-}
-
-.text-left, .text-right{
-  border-bottom: 5px solid #555;
-}
-
-.passion-projects {
-  background:url(images/starfish.png) fixed no-repeat;
-  background-position: left;
-}
-
-.src2013 {
-  background:url(images/tree.png) fixed no-repeat;
-  background-position: right 100px center;
-}
-
-.fluent2013 {
-  background:url(images/yak.png) fixed no-repeat;
-  background-position: left center;
-}
-
-.fluent2013 h2, .fluent2013 a, .fluent2013 h3{
-  color: #DB6C27;
-}
- .fluent2013 p {
-  color: #F0A06E;
-}
-
-.soa .disaster {
-  color: #E83143;
-}
-
-
-.velocity2013 {
-  background:url(images/buried-ostrich.png) fixed no-repeat;
-  background-position: right 100px center;
-}
-
-.wicked2013 {
-  background:url(images/dino.png) fixed no-repeat;
-  background-position: left 175px center;
-}
-
-.railsgirls-milan {
-  background:url(images/boot.png) fixed no-repeat;
-  background-position: right 100px center;
-}
-
-.fluent2014 {
-  background:url(images/robot.png) fixed no-repeat;
-  background-position: left 200px center;
-}
-
-.codemania2014 {
-  background:url(images/car.png) fixed no-repeat;
-  background-position: right 50px center;
-}
-
-.frontendops2014 {
-  background:url(images/robot.png) fixed no-repeat;
-  background-position: left 200px center;
-}
-
-.soa {
-  background:url(images/robot-wires.png) fixed no-repeat;
-  background-position: left 50px center;
-}
+/* Sticker images */
 
-.railsbridge {
-  background:url(images/ruby.png) fixed no-repeat;
-  background-position: right 200px center;
+.rachelmyers-sticker {
+  width: 90%;
 }
 
-footer {
-  max-width: 500px;
-  margin: 40px auto 0 auto;
-  height: 145px;
-  background: url(images/banana.png) no-repeat;
+.link-sticker {
+  width: 55%
 }
 
-footer p{
-  position: absolute;
-  margin-top: 105px;
-  margin-left: 250px;
+.footer-sticker {
+  width: 100%
 }