Ada-C6 · mimyal · Sep 16, 2016 · Sep 17, 2016 · Sep 19, 2016 · Sep 19, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,37 @@
+/Assets/.DS_Store
+*.gem
+*.rbc
+/.config
+/coverage/
+/specs/coverage
+/InstalledFiles
+/pkg/
+/spec/reports/
+/test/tmp/
+/test/version_tmp/
+/tmp/
+
+## Specific to RubyMotion:
+.dat*
+.repl_history
+build/
+
+## Documentation cache and generated files:
+/.yardoc/
+/_yardoc/
+/doc/
+/rdoc/
+
+## Environment normalisation:
+/.bundle/
+/vendor/bundle
+/lib/bundler/man/
+
+# for a library or gem, you might want to ignore these files since the code is
+# intended to run in multiple environments; otherwise, check them in:
+# Gemfile.lock
+# .ruby-version
+# .ruby-gemset
+
+# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
+.rvmrc
diff --git a/Assets/commuter.jpg b/Assets/commuter.jpg
diff --git a/Assets/facebook-wrap.png b/Assets/facebook-wrap.png
diff --git a/Assets/linkedin.png b/Assets/linkedin.png
diff --git a/Assets/slottskogen.jpg b/Assets/slottskogen.jpg
diff --git a/Assets/twitter-wrap.png b/Assets/twitter-wrap.png
diff --git a/Styles/index.css b/Styles/index.css
@@ -0,0 +1,39 @@
+#A, #M {
+  display: inline;
+
+  font-size: 5em;
+  font-family: 'Courgette', cursive;
+
+}
+
+div.monogram {
+  border: 4px solid black;
+  border-radius: 50%;
+  margin: 5% auto auto auto;
+  padding: 5%;
+  height: 8em;
+  width: 8em;
+
+  background-color: #4A95BD;
+}
+
+li.bubble:nth-of-type(1) {
+  background-color: transparent;
+  border: none;
+  padding: 0em 1em 0em 0em;
+
+  position: absolute;
+  top: 21vmin;
+}
+
+li.bubble:nth-of-type(2) {
+  background-color: yellow;
+}
+
+li.bubble:nth-of-type(3) {
+  background-color: red;
+}
+
+li.bubble:nth-of-type(4) {
+  background-color: green;
+}
diff --git a/Styles/secondary-pages.css b/Styles/secondary-pages.css
@@ -0,0 +1,51 @@
+section.featured {
+  float:left;
+  position: relative;
+}
+
+section.current {
+  clear: left;
+  float: left;
+}
+
+section.previous {
+  clear: right;
+  float: right;
+  width: 25%;
+  position: absolute;
+}
+
+section.contact-me {
+  clear: right;
+  float: right;
+  width: 25%;
+  position: absolute;
+}
+
+section.contact-me ul {
+  list-style-type: none;
+}
+
+section.contact-me div img {
+  width: 100%;
+}
+
+li.bubble {
+  float: right;
+
+  position: absolute;
+  top: -10vmin;
+  right: 2em;
+}
+
+ul.portfolio li.bubble {
+  background-color: yellow;
+}
+
+ul.code-journal li.bubble {
+  background-color: red;
+}
+
+ul.about-me li.bubble {
+  background-color: green;
+}
diff --git a/Styles/styles.css b/Styles/styles.css
@@ -0,0 +1,112 @@
+/*Colors #E44424 #BD4A5B #DFDCE3  #4ABDAC #F7B733 #FC4A1A -- #67BCDB*/
+body {
+    /*background-image: url("Assets/slottskogen.jpg");*/
+    background-color: #67BCDB;
+    /*background-attachment: fixed;*/
+}
+
+header {
+  padding-left: 2em;
+  background-color: #67BCDB;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+header nav h1, h2 {
+  text-align: left;
+}
+
+main {
+  padding: 10px;
+  position: relative;
+  font-family: 'Acme', sans-serif;
+  height: 40vmin;
+}
+
+main.portfolio {
+  height: 65vmin;
+}
+
+.bubble {
+  display: inline-block;
+  border: 3px solid black;
+  border-radius: 50%;
+  margin: auto;
+  padding: 4%;
+  height: 2.1em;
+  width: 2.1em;
+  background-color: #F7B733;
+}
+
+.bubble:hover {
+  background-color: #FC4A1A;
+}
+
+.bubble a:visited {
+  color: #DFDCE3;
+}
+
+
+.bubble a {
+  margin: -1em;
+  text-decoration: none;
+}
+
+.bubble:hover ul li.bubble:hover {
+  background-color: #FC4A1A;
+}
+
+a:active {
+  color: black;
+}
+
+footer {
+  position: relative;
+}
+
+footer nav ul {
+  padding-left: 0;
+  margin: 5.5em auto auto auto;
+  border-bottom: 4px solid black;
+  list-style-type: none;
+
+}
+
+footer ul li h4 {
+  position: absolute;
+  top: 7.4vmin;
+  width: 99%;
+}
+
+section {
+  display: inline;
+  border: 2px solid black;
+  margin: 0 1em 1em 1em;
+  width: 65%;
+}
+
+section h2 {
+  margin: 0 0 0 0;
+  width: 100%;
+}
+
+section h3, p {
+  padding: 0 1em 0 1em;
+}
+
+ul.line-of-photos {
+  clear: both;
+  margin-left: 1em;
+  list-style-type: none;
+}
+
+.line-of-photos li img {
+  float: left;
+  width: 12vmax;
+}
+
+.contact-me ul li a img {
+  width: 15%;
+  float: left;
+  padding-bottom: 1em;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Portfolio</title>
+    <link rel="stylesheet" href="Styles/styles.css">
+    <link rel="stylesheet" href="Styles/secondary-pages.css">
+    <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1>Alma Maizels: About Me</h1>
+      </nav>
+    </header>
+
+    <main>
+      <section class="featured">
+        <h2>Background</h2>
+        <p>
+          Where I come from
+        </p>
+        <p>
+          Stuff I want to develop
+        </p>
+      </section>
+      <section class="current">
+        <h2>Interests</h2>
+        <p>
+          I have cats and kids and a house.
+        </p>
+        <p>
+          I also have games, reading and the world
+        </p>
+      </section>
+      <section class="contact-me">
+        <h2>Contact me</h2>
+        <div class="">
+          <img src="Assets/commuter.jpg" alt="Commuter" />
+        </div>
+        <ul>
+          <li><a href="https://twitter.com/ay_maiz"><img src="Assets/twitter-wrap.png" alt="Twitter" /></a></li>
+          <li><a href="https://www.linkedin.com/in/amaiz"><img src="Assets/linkedin.png" alt="LinkedIn" /></a></li>
+        </ul>
+      </section>
+
+    </main>
+
+    <footer>
+      <nav>
+        <ul class="about-me">
+          <li>&copy;2016</li>
+          <li class="bubble"><a href="index.html">Home</a></li>
+        </ul>
+      </nav>
+    </footer>
+  </body>
+</html>
diff --git a/code-journal.html b/code-journal.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Portfolio</title>
+    <link rel="stylesheet" href="Styles/styles.css">
+    <link rel="stylesheet" href="Styles/secondary-pages.css">
+    <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1>Reflections: Technology</h1>
+      </nav>
+    </header>
+
+    <main>
+      <section class="featured">
+        <h2>Featured Cool Tech</h2>
+        <p>
+          Some new cool tech I want to learn more about here, beginner's info.
+        </p>
+        <p>
+          Some new cool tech I want to learn more about here, beginner's info.
+        </p>
+      </section>
+      <section class="current">
+        <h2>This week at Ada</h2>
+        <p>
+          Resources to the current subject at Ada Academy.
+        </p>
+        <p>
+          Stuff I am thinking about this week.
+        </p>
+      </section>
+      <section class="previous">
+        <h2>Previous reflections</h2>
+        <div class="">
+          <h3>Ada Week 4</h3>
+          <p>
+            What I wrote about a previous week at Ada.
+          </p>
+        </div>
+        <div class="">
+          <h3>Ada Week 3</h3>
+          <p>
+            What I wrote about a previous week at Ada.
+          </p>
+        </div>
+        <div class="">
+          <h3>Ada Week 2</h3>
+          <p>
+            What I wrote about a previous week at Ada.
+          </p>
+        </div>
+      </section>
+
+    </main>
+
+    <footer>
+      <nav>
+        <ul class="code-journal">
+          <li>&copy;2016</li>
+          <li class="bubble"><a href="index.html">Home</a></li>
+        </ul>
+      </nav>
+      <!-- <h4>&copy;2016</h4> -->
+    </footer>
+  </body>
+</html>