Skip to content

Commit

Permalink
Form, gradient, progress bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@eleanorharding
eleanorharding committed Apr 11, 2016
1 parent 5d3fa0d commit 5e5afe2
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 11 deletions.
32 changes: 31 additions & 1 deletion css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,12 +142,36 @@ textarea {
box-shadow: 0px 0px 5px #ddd;
background-color: #fff;
margin-bottom: 50px;

}

/*iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}*/

.accordion-container {
/*padding: 0px 20px;*/
}

.gradient {
height: 40px;
position: fixed;
bottom: 19px;
background-color: #fff;
z-index: 0;
display: block;
width: 100%;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}


.yellow-green {
color: #E0F13E;
Expand Down Expand Up @@ -230,7 +254,6 @@ header {

.accordion.open {
border-bottom: 3px solid #eee;
padding-bottom: 20px;
}

.warning ul {
Expand Down Expand Up @@ -353,6 +376,13 @@ footer {
margin-bottom: 50px;
}

div.form-container {
background-color: #eee;
padding-top: 30px;
margin-top: 20px;
padding-bottom: 20px;
}




Expand Down
Binary file added img/gradient.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 68 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
Expand Down Expand Up @@ -86,6 +87,44 @@ <h3> Observe: </h3>
(Multiple Languages)
</a>
</div>

<div class="form-container">
<form class="pure-form pure-form-aligned">
<fieldset>


<div class="pure-control-group">
<label for="foo">Add your knowledge or ask a question</label>
<textarea class="pure-input-1-2" placeholder="Add your knowledge or ask a question"></textarea>
</div>

<div class="pure-control-group">
<label for="name">Name</label>
<input id="name" type="text" placeholder="Username">
</div>

<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>

<div class="pure-controls">
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
This is a Content Suggestion
</label>

<label for="option-three" class="pure-radio">
<input id="option-three" type="radio" name="optionsRadios" value="option2">
This is a Question
</label>
<br/>

<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="accordion" data-accordion>
Expand Down Expand Up @@ -377,9 +416,12 @@ <h4> Thank you for caring </h4>

<footer>

<p> This was developed at EmpowerHack LDN for Terre des hommes by Camille, Nora, Ashley and Eleanor </p>
<p> This was developed at <a href="http://empowerhack.io/" >EmpowerHackLDN</a> for <a href="http://www.terredeshommes.org/">Terre des hommes</a> by Camille, Nora, Ashley and Eleanor </p>
</footer>

<div class="gradient">
.
</div>

<div class="progressBar">
<p class="progresstext"> &nbsp; &nbsp; Progress:</p>
Expand All @@ -388,6 +430,7 @@ <h4> Thank you for caring </h4>
</div>
</div>


<!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Expand Down Expand Up @@ -416,18 +459,31 @@ <h4> Thank you for caring </h4>

});

$("button").click(function(){
alert("Work in progress - Watch this space");
});

$(".quiz-CTA").click(function(){
alert("Work in progress - Watch this space");
});




$("h2").click(function(){
progress += 7;
progress += 9;
// alert(progress+"%");
// $('.progress').css("width:", progress+"%");
$('.progress').width(progress+"%");

if (progress > 50 ) {
$('.quiz-CTA').css("background-color", "#FD2D52");
}
});

if (progress > 95 ) {
$('.progress').css("background-color", "#39b54a");
}
});

// $.(".section-title").click(function(){
// alert("lsjdhf");
Expand Down Expand Up @@ -465,12 +521,14 @@ <h4> Thank you for caring </h4>


<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-29692679-3', 'auto');
ga('send', 'pageview');

</script>
</body>
</html>

0 comments on commit 5e5afe2

Please sign in to comment.