Styling + Content

empowerhack · Apr 10, 2016 · e64506b · e64506b
1 parent a046c35
commit e64506b
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 22 deletions.
diff --git a/css/jquery.accordion.css b/css/jquery.accordion.css
@@ -18,13 +18,13 @@
 }
 
 [data-control] {
-    border-top: 1px solid #eee;
+    border-top: 1px solid #fdfdfd;
     padding: 10px;
     padding-left: 35px;
 }
 
 [data-content] > * {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #fdfdfd;
     padding: 10px;
 }
 
@@ -42,7 +42,7 @@
     content: "";
     position: absolute;
     right: 10px;
-    top: 30px;
+    top: 20px;
     font-size: 25px;
     font-weight: 200;
     color: #444;

diff --git a/css/main.css b/css/main.css
@@ -16,6 +16,11 @@ html {
     line-height: 1.4;
 }
 
+* {
+    font-family: Roboto;
+    color: #555;
+}
+
 @import url(https://fonts.googleapis.com/css?family=Dosis:400,500);
 
 /*
@@ -121,37 +126,43 @@ textarea {
     color: #FF4C14;
 }
 
-.yellow-green {
-
+.pink {
+    color: #FD2D52;
 }
 
-.yellow-green {
-
+h1.pageTitle {
+    font-family: 'Dosis', sans-serif;
+    font-size: 3em;
+    margin: 10px;
+    color: #fff;
 }
 
-.yellow-green {
-
+.pageHeadingText {
+    padding: 60px 20px 60px 20px;
 }
 
-h1.pageTitle {
-    font-family: 'Dosis', sans-serif;
-    padding: 80px 0px 50px 20px;
-    font-size: 3em;
+.subHeading {
+    background-color: rgba(40, 40, 40, 0.87);
+    font-size: 1em;
+    color: #fff;
+    display: inline;
+    margin: 10px;
+    padding: 10px;
 }
 
 header {
-    background-image: url(http://placekitten.com/900/200);
+    background-image: url('../img/healthstarter.jpg');
     /*min-height: 200px;*/
     position: relative;
+
 }
 
 .site-desc {
-    background-color: rgba(40, 40, 40, 0.7);
-    color: rgba(255, 255, 255, 0.87);
-    position: absolute;
-    bottom: 0px;
+    background-color: #E3FFFF;
+    color: #ddd;
     width: 100%;
     margin: 0px;
+    padding: 0px;
 }
 
 .site-desc p {
@@ -174,8 +185,12 @@ body {
 }
 */
 
+h2 {
+    margin: 0.5em;
+}
+
 .accordion.open [data-control] {
-    background-color: #FF4C14;
+    background-color: #FD2D52;
     -webkit-transition: background-color 0.5s; /* Safari */
     transition: background-color 0.5s;
 }
@@ -186,6 +201,22 @@ body {
     transition: color 0.5s;
 }
 
+.quiz-CTA {
+    background-color: pink;
+    padding: 30px 0px;
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+    text-decoration: none;
+    color: #fff;
+    font-size: 2em;
+}
+
+footer {
+    text-align: center;
+    font-size: 0.8em;
+}
+
 
 
 

diff --git a/images/up.png b/images/up.png
diff --git a/img/healthstarter.jpg b/img/healthstarter.jpg
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
         <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
         <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
         <link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 
 
     </head>
@@ -30,7 +31,10 @@
 
             <header>
 
-                <h1 class="pageTitle yellow-green"> Health Starter</h1>
+                <div class="pageHeadingText">
+                    <h1 class="pageTitle"> Health Starter</h1>
+                    <h2 class="subHeading"> Terre des Hommes</h2>
+                </div>
 
                 <div class="site-desc">
                     <p> An online learning tool helping aid workers hit the ground running with quickly absorbable health and childcare knowledge. </p>
@@ -44,7 +48,7 @@ <h1> 1. Baby Health Care </h1>
                 </div>
                 <div data-accordion-group id="multiple">
                     <div class="accordion" data-accordion>
-                        <div data-control> <h2>1.1 Change nappy</h2> </div>
+                        <div data-control> <h2>1.1 Nappy Changing</h2> </div>
                         <div data-content>
                             <div>
                                 <ol>
@@ -396,11 +400,16 @@ <h4> Thank you for caring </h4>
 
                 </div>
             </div>
+            <div class="quiz">
+                <a href="#" class="quiz-CTA">
+                    Take the Quiz &#8594;
+                </a>
+            </div>
         </div>
 
         <footer>
 
-            <p> This was developed at EmpowerHack LDN for ... by ... </p>
+            <p> This was developed at EmpowerHack LDN for Terre des hommes by Camille, Nora, Ashley and Eleanor </p>
         </footer>
 
         <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->