timeline

thomasdavis · Apr 7, 2012 · 5d0e77f · 5d0e77f
1 parent a8847d1
commit 5d0e77f
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 33 deletions.
diff --git a/css/theme.css b/css/theme.css
@@ -1,42 +1,64 @@
+    body,#timeline .feature h3, #timeline .feature h4, #timeline .feature h5, #timeline .feature h6  {
+          font-family: Arial !important;
+      font-size: 14px;
+    }
+    body #timeline .feature p {
+      font-size: 10px;
+    }
+    #timeline .feature h3, #timeline .feature h4, #timeline .feature h5, #timeline .feature h6 {
+      font-size: 14px;
+    }
+    #timeline .feature .slider h2.date {
+      font-size: 12px;
+      color: #444;
+    }
+
 
-    body {
-      background: #ebebeb url("../img/bg.png");
+    .info {
+      background: #fff;
       font-family: Arial;
       font-size: 14px;
       padding: 0;
       margin: 0;
     }
-    h1 {
+    .info h1 {
 
       color: #222;
     }
-    h1, h2, h3 {
+   .info  h1, h2, h3 {
       padding: 0;
       margin: 0;
     }
-    h2 {
+   .info  h2 {
       color: #444;
     }
-    .container {
+    .ed-container {
 
       background: #fff;
       padding: 20px;
       margin: 0;
       margin: auto;
-      margin-top: 100px;
-      background: #fff url("../img/pid-unit-utama.jpg") top right no-repeat;
-      background-size: 68%;
-
-      border-top: 3px solid #333;
-      border-bottom: 3px solid #333;
+
+      width: 960px;
+
+    }
+    .timeline {
+      width: 640px;
+      float: left;
+      margin-left: 20px;
+      padding-bottom: 20px;
+    }
+    #timeline-embed {
+      height: 520px !important;
     }
     .contentarea {
-      border-right: 3px solid #ccc;
     }
-    .header {
+    .info header {
       margin-top: 30px;
     }
     .info {
+      float: left;
+      width: 300px;
       margin-top: 40px;
     }
     .info-list {
@@ -46,8 +68,8 @@
       padding: 0;
       margin-left: 45px;
       background: #fff;
-      padding: px;
-      width: 220px;
+      width: 170px;
+      margin-top: 20px;
     }
     .info-list li {
       padding: 0;
@@ -68,40 +90,40 @@
     .info-list li a:hover {
       color: #000;
     }
-    .icon {
+    .info .icon {
       width: 24px;
       height: 24px;
       display: inline-block;
       float: left;
       margin-right: 10px;
     }
-    .skype {
+   .info .skype {
       background: url("../img/skype.png");
     }
-    .twitter {
+   .info .twitter {
       background: url("../img/twitter.png");
     }
-    .email {
+  .info  .email {
       background: url("../img/email.png");
     }
-    .linkedin {
+  .info  .linkedin {
       background: url("../img/linkedin.png");
     }
-    .phone {
+ .info   .phone {
       background: url("../img/phone.png");
     }
-    .footer {
+  .info  .footer {
       margin-left: 40px;
     }
-    .aciem {
+  .info  .aciem {
       background: url("../img/aciem.png") no-repeat;
       width: 40px;
       height: 40px;
       margin: auto;
       float: left;
       background-size: 40px;
     }
-    .engineers { 
+   .info .engineers { 
       background: url("../img/engineers.png") no-repeat;
       float: left;
       width: 40px;
@@ -111,7 +133,7 @@
       margin-left: 10px;
     }
 
-    .uni { 
+  .info  .uni { 
       opacity: 0.9;
       border: 1px solid #fff;
       overflow: hidden;
@@ -125,13 +147,13 @@
       background-size: 28px;
 
     }
-    .footer {
+  .info  .footer {
       margin-top: 30px;
       text-align: center;
 
 
     }
-    .profile {
+  .info  .profile {
       float: left;
       margin-right: 10px;
       border: 2px solid #ebebeb;

diff --git a/index.html b/index.html
@@ -12,15 +12,17 @@
 
 <body>
 
-  <div class="container">
+  <div class="ed-container">
     <div class="contentarea">
-      <div class="header">
+
+      <div class="page">
+        <div class="info">
+                <div class="header">
         <div class="profile"></div>
         <h1>Edward Cortes</h1>
         <h2>Mechanical Engineer</h2>
       </div>
-      <div class="page">
-        <div class="info">
+      <div style="clear: both;"></div>
           <ul class="info-list">
             <li>
               <div class="icon email"></div>
@@ -43,7 +45,7 @@ <h2>Mechanical Engineer</h2>
               <a href="skype:ecortesjr?call">+61 4 3390 4626</a>
             </li>
           </ul>
-           <div class="footer">
+            <div class="footer">
         <a href="http://www.aciem.org/home/index.php"><div class="aciem">
 
         </div></a>
@@ -53,6 +55,22 @@ <h2>Mechanical Engineer</h2>
     <div style="clear: both;"></div>
 
       </div>
+          </div>
+          <div class="timeline">
+          <div id="timeline-embed"></div>
+<script type="text/javascript">
+    var config = {
+		width: 640,
+		height: 500,
+		source: 'https://docs.google.com/spreadsheet/pub?key=0AkQOyB-sVjqTdGdUOENsc1hoSU1HOWFSQy1qcmZqRnc&output=html'
+	}
+</script>
+<script type="text/javascript" src="http://veritetimeline.appspot.com/latest/timeline-embed.js"></script>
+          </div>
+
+          <div style="clear: both;"></div>
+
+
       </div>
     </div>