add header image and text

eleanorreem · Apr 28, 2016 · caf2a14 · caf2a14
1 parent c656270
commit caf2a14
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 bootstrap
+style.js
diff --git a/index.html b/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>Home</title>
-    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> !-->
-    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> !
+    <!-- <link rel="stylesheet" href="bootstrap/bootstrap.min.css"> -->
     <link rel="stylesheet" href="style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -19,7 +19,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="#"><img id="logo" src="http://challengepartners.org/images/logo.png"/></a>
+          <a class="navbar-brand" href="#"><img id="logo-header" src="assets/logo.png"/></a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
@@ -42,11 +42,10 @@
         </div><!--/.nav-collapse -->
       </div>
     </nav>
-    <div class="container">
+    <div class="container" id="home-image">
       <div class="jumbotron">
-        <h1>Bootstrap Tutorial</h1>
-        <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
-        responsive, mobile-first projects on the web.</p>
+        <h1>Challenge Partners</h1>
+        <h3>A national network of local school partnerships that challenge each other to improve.</h3>
       </div>
     </div>
     <div class="container">
@@ -71,14 +70,27 @@ <h1>Bootstrap Tutorial</h1>
 
     <footer class="footer">
       <div class="container">
+        <div class="col-md-3">
+          <img id="logo-footer" src="assets/logo.png"/>
+        </div>
+        <div class="col-md-6">
+
+        </div>
+        <div class="col-md-3">
+
+          <p>15th Floor,Tower Building,
+          11 York Road,London SE1 7NX
+          E [email protected]
+          T 020 7803 4977</p>
+        </div>
       </div>
     </footer>
 
 
 
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-  <script src="bootstrap/bootstrap.min.js"></script>
-  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->
+  <!-- <script src="bootstrap/bootstrap.min.js"></script> -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,8 +1,10 @@
 body {
   height: 100vh;
-  padding-top: 100px;
+  padding-top: 70px;
 }
 
+/* navbar */
+
 .navbar-default {
   background-color: #90BE42; /**/
 }
@@ -17,28 +19,72 @@ body {
 
 nav div.container {
   min-height: 90px;
+  max-width: 1050px;
 }
 
-#logo {
-  height: 280%;
+#logo-header {
+  height: 290%;
   width: auto;
 }
 
 nav ul {
   font-size: 1.4em;
 }
 
+/* end navbar */
+
+/* jumbotron */
+
+#home-image {
+  background-image: url("assets/home-image.jpg");
+}
+
+.jumbotron {
+  background-color: transparent;
+  color: white;
+}
+
+.jumbotron h3 {
+  text-shadow: 1px 1px grey;
+}
+
+/* end jumbotron */
+
+/* media queries */
+
 @media screen and (min-width: 768px) {
   #navbar ul {
-    margin-top: 35px;
+    margin-top: 3%;
+    float: right;
+  }
+  .jumbotron {
+    background-color: transparent;
+    color: white;
+    width: 70%;
   }
 }
 
+/* end media queries */
+
+/* footer */
+
 .footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
-  height: 60px;
-  background-color: #90BE42;
+  height: 200px;
+  background-color: #383937;
+  padding-top: 25px;
+}
+
+.footer p {
+  color: white;
 }
+
+#logo-footer {
+  height: 3.5em;
+  width: auto;
+}
+
+/* end footer */
diff --git a/style.js b/style.js