updated start page

3 files changed, 22 insertions, 15 deletions

diff --git a/assets/image/kids_using_xos.jpg b/assets/image/kids_using_xos.jpg
new file mode 100644
index 0000000..209c70e
--- /dev/null
+++ b/assets/image/kids_using_xos.jpg
diff --git a/css/intro.css b/css/intro.css
index f215d92..f8e2fd5 100644
--- a/css/intro.css
+++ b/css/intro.css
@@ -1,6 +1,6 @@
 body {
 padding-left:15%;
-width:60%;
+width:70%;
 }
 #header {
 background-color:transparent;
@@ -51,6 +51,7 @@ width:100%;
 display:inline;
 float:left;
 width:70%;
+margin-right: 2%;
 }
 #introText a {
 text-decoration:none;
@@ -59,19 +60,20 @@ text-decoration:none;
     font-size:larger;
     font-weight:bolder;
 }
-#monkeyHolder {
+#imgHolder {
 display:inline;
-float:right;
+float:left;
 width:20%;
+margin-top: 5%;
 }
 #demos {
 float:left;
 width:100%;
 }
 #demos .imgs {
-margin-left:auto;
-margin-right:auto;
-width:95%;
+margin-left:5%;
+margin-right:5%;
+width:100%;
 }
 #demos img {
 -moz-border-radius-bottomleft:5px;
@@ -83,9 +85,9 @@ width:95%;
 -webkit-border-top-left-radius:5px;
 -webkit-border-top-right-radius:5px;
 border:1px solid black;
-margin:10px;
-padding-left:10px;
-padding-right:10px;
+margin:5px;
+padding-left:5px;
+padding-right:5px;
 }
 #footer {
 float:left;
diff --git a/index.html b/index.html
index e33836a..ed38d91 100644
--- a/index.html
+++ b/index.html
@@ -40,11 +40,12 @@
       using openweb technologies. <br /><br />
       <a href="http://git.sugarlabs.org/projects/karma/repos/mainline/blobs/raw/5f93619d5dc78c6fbd9251064f95aa82a25eab70/js/karma.js">karma.js</a> is a javascript library for manipulating <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML 5</a> and <a href="http://wiki.svg.org/">SVG</a>.-->    
     </div>
-    <div id="monkeyHolder">
-      <img src="assets/image/happyChimp120x125.png" alt="image of chimp"></img>
+    <div id="imgHolder">
+      <img src="assets/image/kids_using_xos.jpg" alt="kids using computers"></img>
     </div>
   </div>
   <div id="demos">
+    <div><strong>Get Started with Karma</strong></div>
     <div>Try out the demos and see the <a href="http://karmaeducation.org/2009/12/14/an-introduction-to-karma-js/">tutorials</a></div>
     <div class="imgs">
       <a href="examples/adding_up_to_10_svg/index.html">
@@ -56,6 +57,10 @@
       <a href="examples/Conozco-Uruguay/index.html">
 	<img src="assets/image/screenConozco136x100.png" alt="Conozco a Uruguay" />
       </a>
+      <a href="examples/Math_Numeric_Puzzle_Solving/index.html">
+	<img src="assets/image/numeric_puzzle136x100.png" alt="" />
+      </a>
+
     </div>
     <div class="imgs">
       <a href="examples/English_Alphabet_Puzzle_Solving/index.html"><img src="assets/image/alphabet_identification136x100.png" alt="" />
@@ -63,6 +68,9 @@
  <a href="examples/English_Animal_Identification/index.html"><img src="assets/image/alphabet_puzzle136x100.png" alt="" />
       </a> <a href="examples/English_Direction_of_Arrows/index.html"><img src="assets/image/arrows136x100.png" alt="" />
       </a>
+      <a href="examples/Math_Money_Identification/index.html">
+	<img src="assets/image/money_identification136x100.png" alt="" />
+      </a>
     </div>
     <div class="imgs">
       <a href="examples/English_Color_Identification/index.html"><img src="assets/image/english_colors136x100.png" alt="" />
@@ -72,10 +80,7 @@
       </a>
     </div>
     <div class="imgs">
-      <a href="examples/Math_Money_Identification/index.html"><img src="assets/image/money_identification136x100.png" alt="" />
-      </a>
-      <a href="examples/Math_Numeric_Puzzle_Solving/index.html"><img src="assets/image/numeric_puzzle136x100.png" alt="" /></a>
-    </div>
+       </div>
   </div>
   <div id="footer">
   Karma.js is licensed under the