├── README.md ├── .gitignore ├── stylesheets ├── sass │ ├── _partials │ │ ├── _generic.scss │ │ ├── _text.scss │ │ ├── _layout.scss │ │ └── _parallax.scss │ ├── _mixins │ │ └── _mixins.scss │ └── main.scss └── css │ ├── main.css.map │ └── main.css ├── images ├── banner-face.jpg ├── challenges.jpg ├── empowerhack.jpg ├── resources.jpg ├── volunteering.jpg ├── previous-event.jpg └── 1459035491_arrow-down-01.svg ├── LICENSE ├── index.html └── hack-pack.html /README.md: -------------------------------------------------------------------------------- 1 | # HerStory-Website -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | 3 | .sass-cache/* 4 | *.scssc -------------------------------------------------------------------------------- /stylesheets/sass/_partials/_generic.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: $body-bg; 3 | } -------------------------------------------------------------------------------- /images/banner-face.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/empowerhack/HerStory-Website/HEAD/images/banner-face.jpg -------------------------------------------------------------------------------- /images/challenges.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/empowerhack/HerStory-Website/HEAD/images/challenges.jpg -------------------------------------------------------------------------------- /images/empowerhack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/empowerhack/HerStory-Website/HEAD/images/empowerhack.jpg -------------------------------------------------------------------------------- /images/resources.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/empowerhack/HerStory-Website/HEAD/images/resources.jpg -------------------------------------------------------------------------------- /images/volunteering.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/empowerhack/HerStory-Website/HEAD/images/volunteering.jpg -------------------------------------------------------------------------------- /images/previous-event.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/empowerhack/HerStory-Website/HEAD/images/previous-event.jpg -------------------------------------------------------------------------------- /stylesheets/sass/_mixins/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin vertical-align($percent) { 2 | position: relative; 3 | top: $percent; 4 | -webkit-transform: translateY(-$percent); 5 | -ms-transform: translateY(-$percent); 6 | transform: translateY(-$percent); 7 | } -------------------------------------------------------------------------------- /stylesheets/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Droid+Sans|Oswald:400,300); 2 | 3 | $header-font: 'Oswald', sans-serif; 4 | $body-font: 'Droid Sans', sans-serif; 5 | 6 | // COLOURS 7 | $banner-font-color: #fff; 8 | $body-bg: #EDE8ED; 9 | $heading-color: #9585A3; 10 | 11 | $empowerhack-pink: #ef0063; 12 | $brand-dark: #002B1F; 13 | 14 | // SIZES 15 | $banner-height: 90vh; 16 | 17 | 18 | 19 | @import "_mixins/_mixins"; 20 | 21 | @import 22 | "_partials/_layout", 23 | "_partials/_generic", 24 | "_partials/_text", 25 | "_partials/_parallax"; 26 | -------------------------------------------------------------------------------- /stylesheets/sass/_partials/_text.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: $body-font; 3 | font-size: 16px; 4 | } 5 | 6 | h1, h2, h3, h4, h5 { 7 | text-align: center; 8 | font-family: $header-font; 9 | margin: 50px 0; 10 | } 11 | 12 | .intro { 13 | font-size: 1.2em; 14 | } 15 | 16 | span.smaller { 17 | display: block; 18 | font-size: .3em; 19 | font-weight: 200; 20 | margin: 15px 0; 21 | color: #fff; 22 | } 23 | 24 | #banner { 25 | h1 { 26 | font-size: 10em; 27 | color: $empowerhack-pink; 28 | font-weight: 400; 29 | } 30 | } 31 | 32 | .icon { 33 | text-align: center; 34 | h3 { 35 | margin-top: 25px; 36 | } 37 | i { 38 | font-size: 3em; 39 | } 40 | } -------------------------------------------------------------------------------- /images/1459035491_arrow-down-01.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /stylesheets/sass/_partials/_layout.scss: -------------------------------------------------------------------------------- 1 | .no-padding { 2 | padding: 0; 3 | } 4 | 5 | .position { 6 | display: block; 7 | float: none; 8 | 9 | &.central { 10 | margin-left: auto; 11 | margin-right: auto; 12 | } 13 | } 14 | 15 | .section { 16 | overflow: hidden; 17 | padding: 30px 0; 18 | 19 | &.first { 20 | margin-top: $banner-height; 21 | } 22 | 23 | h2 { 24 | text-align: center; 25 | } 26 | 27 | img { 28 | height: 100%; 29 | width: 100%; 30 | overflow: hidden; 31 | } 32 | } 33 | 34 | .boxes { 35 | display: flex; 36 | 37 | @media (max-width: 768px) { 38 | display: block; 39 | } 40 | 41 | .box { 42 | text-align: center; 43 | padding: 30px; 44 | } 45 | } 46 | 47 | .text-overlay { 48 | position: relative; 49 | 50 | h3 { 51 | position: absolute; 52 | top: 40%; 53 | left: 30%; 54 | color: #fff; 55 | text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); 56 | } 57 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Empower Hack 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /stylesheets/sass/_partials/_parallax.scss: -------------------------------------------------------------------------------- 1 | .parallax { 2 | perspective: 1px; 3 | height: 100vh; 4 | overflow-x: hidden; 5 | overflow-y: auto; 6 | -webkit-perspective: 1px; 7 | transform-style: preserve-3d; 8 | 9 | } 10 | 11 | .slide { 12 | position: relative; 13 | padding: 10vh 10%; 14 | min-height: 100vh; 15 | width: 100vw; 16 | box-sizing: border-box; 17 | transform-style: inherit; 18 | box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.7); 19 | color: #fff; 20 | text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); 21 | 22 | &:before { 23 | content: ""; 24 | position: absolute; 25 | top: 0; 26 | bottom: 0; 27 | left: 0; 28 | right: 0; 29 | } 30 | 31 | &.title .left { 32 | margin-left: 0; 33 | margin-right: auto; 34 | } 35 | 36 | &.title .right { 37 | margin-left: auto; 38 | margin-right: 0; 39 | } 40 | } 41 | 42 | .slide, .slide:before { 43 | background: 50% 50% / cover; 44 | } 45 | 46 | .title { 47 | width: 80%; 48 | margin: 0 auto; 49 | padding: 2%; 50 | border-radius: 5px; 51 | background: rgba(240,230,220, .7); 52 | box-shadow: 0 0 8px rgba(0, 0, 0, .7); 53 | color: #000; 54 | text-shadow: none; 55 | overflow: auto; 56 | } 57 | 58 | #banner { 59 | background-size: cover; 60 | background-image: url("../../images/banner-face.jpg"); 61 | background-attachment: fixed; 62 | text-align: center; 63 | color: $banner-font-color; 64 | text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); 65 | } 66 | 67 | #empowerhack:before { 68 | background-image: url("../../images/empowerhack.jpg"); 69 | transform: translateZ(-1px) scale(2); 70 | z-index: -1; 71 | background-size: cover; 72 | } 73 | 74 | #challenges { 75 | background-image: url('../../images/challenges.jpg'); 76 | background-attachment: fixed; 77 | } 78 | 79 | #resources:before { 80 | background-image: url('../../images/resources.jpg'); 81 | transform: translateZ(-1px) scale(2); 82 | z-index: -1; 83 | } 84 | 85 | #future { 86 | background-image: url('../../images/volunteering.jpg'); 87 | background-attachment: fixed; 88 | } -------------------------------------------------------------------------------- /stylesheets/css/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../sass/main.scss","../sass/_partials/_layout.scss","../sass/_partials/_generic.scss","../sass/_partials/_text.scss","../sass/_partials/_parallax.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Her Story 9 | 10 | 11 | 12 | 13 | 14 |
15 | 21 | 22 |
23 |

For the refugees

24 |
25 |
26 |

What

27 |

What are refugees

28 |

What are they going through

29 |
30 |
31 |

Who

32 |

Who is this app targeting/for

33 |
34 |
35 |

Why

36 |

Why this particular app

37 |

Why is this app special

38 |
39 |
40 |
41 | 42 |
43 |
44 | temporary image 45 |

EmpowerHack Background

46 |
47 |
48 |

Who are EmpowerHack?

49 |
50 |

What/Why/When

51 |

Answer any questions here about what the group is, who they are, why they exist and since when

52 |
53 |
54 |
55 | 56 |
57 |

Media

58 |

What can we achieve from getting media attention?

59 |

How can people help us achieve the attention we deserve?

60 |
61 | 62 |
63 |

Get Involved

64 |

What skills do we need?

65 |

How can people help the group or the app?

66 |

67 |

68 | 69 |
70 | temporary image 71 | temporary image 72 | temporary image 73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /stylesheets/css/main.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Droid+Sans|Oswald:400,300); 2 | .no-padding { 3 | padding: 0; } 4 | 5 | .position { 6 | display: block; 7 | float: none; } 8 | .position.central { 9 | margin-left: auto; 10 | margin-right: auto; } 11 | 12 | .section { 13 | overflow: hidden; 14 | padding: 30px 0; } 15 | .section.first { 16 | margin-top: 90vh; } 17 | .section h2 { 18 | text-align: center; } 19 | .section img { 20 | height: 100%; 21 | width: 100%; 22 | overflow: hidden; } 23 | 24 | .boxes { 25 | display: flex; } 26 | @media (max-width: 768px) { 27 | .boxes { 28 | display: block; } } 29 | .boxes .box { 30 | text-align: center; 31 | padding: 30px; } 32 | 33 | .text-overlay { 34 | position: relative; } 35 | .text-overlay h3 { 36 | position: absolute; 37 | top: 40%; 38 | left: 30%; 39 | color: #fff; 40 | text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); } 41 | 42 | body { 43 | background-color: #EDE8ED; } 44 | 45 | body { 46 | font-family: "Droid Sans", sans-serif; 47 | font-size: 16px; } 48 | 49 | h1, h2, h3, h4, h5 { 50 | text-align: center; 51 | font-family: "Oswald", sans-serif; 52 | margin: 50px 0; } 53 | 54 | .intro { 55 | font-size: 1.2em; } 56 | 57 | span.smaller { 58 | display: block; 59 | font-size: .3em; 60 | font-weight: 200; 61 | margin: 15px 0; 62 | color: #fff; } 63 | 64 | #banner h1 { 65 | font-size: 10em; 66 | color: #ef0063; 67 | font-weight: 400; } 68 | 69 | .icon { 70 | text-align: center; } 71 | .icon h3 { 72 | margin-top: 25px; } 73 | .icon i { 74 | font-size: 3em; } 75 | 76 | .parallax { 77 | perspective: 1px; 78 | height: 100vh; 79 | overflow-x: hidden; 80 | overflow-y: auto; 81 | -webkit-perspective: 1px; 82 | transform-style: preserve-3d; } 83 | 84 | .slide { 85 | position: relative; 86 | padding: 10vh 10%; 87 | min-height: 100vh; 88 | width: 100vw; 89 | box-sizing: border-box; 90 | transform-style: inherit; 91 | box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.7); 92 | color: #fff; 93 | text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); } 94 | .slide:before { 95 | content: ""; 96 | position: absolute; 97 | top: 0; 98 | bottom: 0; 99 | left: 0; 100 | right: 0; } 101 | .slide.title .left { 102 | margin-left: 0; 103 | margin-right: auto; } 104 | .slide.title .right { 105 | margin-left: auto; 106 | margin-right: 0; } 107 | 108 | .slide, .slide:before { 109 | background: 50% 50% / cover; } 110 | 111 | .title { 112 | width: 80%; 113 | margin: 0 auto; 114 | padding: 2%; 115 | border-radius: 5px; 116 | background: rgba(240, 230, 220, 0.7); 117 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); 118 | color: #000; 119 | text-shadow: none; 120 | overflow: auto; } 121 | 122 | #banner { 123 | background-size: cover; 124 | background-image: url("../../images/banner-face.jpg"); 125 | background-attachment: fixed; 126 | text-align: center; 127 | color: #fff; 128 | text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); } 129 | 130 | #empowerhack:before { 131 | background-image: url("../../images/empowerhack.jpg"); 132 | transform: translateZ(-1px) scale(2); 133 | z-index: -1; 134 | background-size: cover; } 135 | 136 | #challenges { 137 | background-image: url("../../images/challenges.jpg"); 138 | background-attachment: fixed; } 139 | 140 | #resources:before { 141 | background-image: url("../../images/resources.jpg"); 142 | transform: translateZ(-1px) scale(2); 143 | z-index: -1; } 144 | 145 | #future { 146 | background-image: url("../../images/volunteering.jpg"); 147 | background-attachment: fixed; } 148 | 149 | /*# sourceMappingURL=main.css.map */ 150 | -------------------------------------------------------------------------------- /hack-pack.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Her Story - Hack Pack 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 25 |
26 |

Empower Hack

27 | 28 |
29 |
30 |

What is Empowerhack?

31 |

EmpowerHack is a collective that brings creates sustainable design for women and girls in humanitarian contexts. Bridging the gap between technology, design, and NGOs to address key challenges, Empower Hack galvanises volunteers to create code that crosses borders.

32 |
33 |
34 |

Why are we tackling issues about refugees?

35 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

36 |
37 |
38 |
39 |
40 |

Why HerStory - why this app?

41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

42 |
43 |
44 |

Why not leave it to the other apps out there?

45 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

46 |
47 |
48 |
49 | 50 |
51 |
52 |

Challenges

53 | 54 |
55 |
56 | 57 |

Challenge #1

58 |
59 |

Lorem ipsum dolor sit amet

60 |
61 |
62 |

Challenge #2

63 |

Lorem ipsum dolor sit amet

64 |
65 | 72 |
73 |
74 |
75 |

Resources

76 |
    77 |
  • Current prototype
    • 78 |
  • User feedback
    • 79 |
  • Previous hackathon
    • 80 |
  • Successes from that hackathon and the growth since
    • 81 |
82 | 83 |

Where are we now

84 |
    85 |
  • Project objectives
    • 86 |
  • Leaflet which goes with the app for refugees
    • 87 |
  • Networking, connections, interviews,pitches
    • 88 |
  • Why we're at this point
    • 89 |
90 |
91 |
92 |

Future Plans

93 |
    94 |
  • Plans beyond the hackathon
    • 95 |
  • Volunteering opportunities with refugees
    • 96 |
  • What success will look like
    • 97 |
  • How you can and should continue with the project
    • 98 |
  • What it's actually like to volunteer with the group
    • 99 |
100 |
101 |
102 | 103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | --------------------------------------------------------------------------------