From caf2a14296619ba5bac700c3a94918548eeee1a6 Mon Sep 17 00:00:00 2001 From: tas12 Date: Thu, 28 Apr 2016 23:24:23 +0100 Subject: [PATCH] add header image and text --- .gitignore | 1 + index.html | 30 +++++++++++++++++++--------- style.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++------ style.js | 39 ------------------------------------ 4 files changed, 74 insertions(+), 54 deletions(-) delete mode 100644 style.js diff --git a/.gitignore b/.gitignore index b7c200a..516b697 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ bootstrap +style.js diff --git a/index.html b/index.html index 54785f3..7a4da1c 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ Home - - + ! + @@ -19,7 +19,7 @@ - + -
+
-

Bootstrap Tutorial

-

Bootstrap is the most popular HTML, CSS, and JS framework for developing - responsive, mobile-first projects on the web.

+

Challenge Partners

+

A national network of local school partnerships that challenge each other to improve.

@@ -71,6 +70,19 @@

Bootstrap Tutorial

+
+ +
+
+ +
+
+ +

15th Floor,Tower Building, + 11 York Road,London SE1 7NX + E info@challengepartners.org + T 020 7803 4977

+
@@ -78,7 +90,7 @@

Bootstrap Tutorial

- - + + diff --git a/style.css b/style.css index 6e59759..03b3e36 100644 --- 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,10 +19,11 @@ body { nav div.container { min-height: 90px; + max-width: 1050px; } -#logo { - height: 280%; +#logo-header { + height: 290%; width: auto; } @@ -28,17 +31,60 @@ 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 deleted file mode 100644 index d1fea73..0000000 --- a/style.js +++ /dev/null @@ -1,39 +0,0 @@ -import React, {StyleSheet, Dimensions, PixelRatio} from "react-native"; -const {width, height, scale} = Dimensions.get("window"), - vw = width / 100, - vh = height / 100, - vmin = Math.min(vw, vh), - vmax = Math.max(vw, vh); - -export default StyleSheet.create({ - "body": { - "height": 100 * vh, - "paddingTop": 100 - }, - "navbar-default": { - "backgroundColor": "#90BE42" - }, - "navbar-default navbar-nav>li>a": { - "color": "white" - }, - "navbar-header": { - "minHeight": 90 - }, - "nav divcontainer": { - "minHeight": 90 - }, - "logo": { - "height": "280%", - "width": "auto" - }, - "nav ul": { - "fontSize": 1.4 - }, - "footer": { - "position": "absolute", - "bottom": 0, - "width": "100%", - "height": 60, - "backgroundColor": "#90BE42" - } -}); \ No newline at end of file