-
Notifications
You must be signed in to change notification settings - Fork 0
/
12_17_vote.html
118 lines (115 loc) · 6.95 KB
/
12_17_vote.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Carbon crackdown</title>
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet'>
<link rel="stylesheet" href="main.css">
<script src="js/vote.js"></script>
<style>
.vote_backdrop {height: 150px; width: 100%;}
.vote_image {background-size:contain; height: 100%; background-repeat: no-repeat;}
.vote_gradient {position:relative; top: -150px; width: 100%; text-align: right; height: 150px;}
.vote_text {display: inline-block; transform: translate(-100%, -50%); top: 50%; position: absolute; font-size: xx-large; padding-right: 10px; color: #FFFFFF;}
</style>
</head>
<body class="main_background">
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet'>
<link href="main.css" rel="stylesheet" type="text/css">
<header>
<h1 class="logo">
<p>
Carbon Crackdown
<a href="21_settings.html"><img src="assets/setting.png" alt="Girl in a jacket" width="50" height="50" style="float: right; margin: 20px"></a>
</p>
</h1>
<nav class="nav-bar">
<table>
<tr>
<th><a href="index.html">Home</a></th>
<th><a href="5_create_account.html">Create Account</a></th>
<th><a href="7_login.html">Login</a></th>
<th><a href="11_quiz.html">Calculate Your Own Carbon Footprint</a></th>
<th><a href="12_17_vote.html">Vote</a></th>
<th><a href="19_donate.html">Donate</a></th>
</tr>
</table>
</nav>
</header>
<div style="width: 80vw; left: 10vw; position: absolute; height: 98vh;">
<table style="width: 100%; height: 100%">
<tr>
<td style="width: 70%; height: 100%" rowspan="2">
<div style="width: 100%; height: 100%;">
<table style="width: 100%;">
<tr>
<td>
<div style="margin: 20px 20px 20px 0px; cursor: pointer" onclick="javascript:select(0)">
<div class="vote_backdrop" style="background-color: #FFFFFF;">
<div style="background-image:url(assets/EDF.png);" class="vote_image"></div>
<div id="option0" class="gra_horz_lgt-whit-drk-blue vote_gradient">
<span class="vote_text">Environmental Defence Fund</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="margin: 20px 20px 20px 0px; cursor: pointer" onclick="javascript:select(1)">
<div class="vote_backdrop" style="background-color: #FFFFFF;">
<div style="background-image:url(assets/350.org+logo.png);" class="vote_image"></div>
<div id="option1" class="gra_horz_lgt-whit-drk-blue vote_gradient">
<span class="vote_text">350.org</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="margin: 20px 20px 20px 0px; cursor: pointer" onclick="javascript:select(2)">
<div class="vote_backdrop" style="background-color: #FFFFFF;">
<div style="background-image:url(assets/Friends-of-the-Earth.png);" class="vote_image"></div>
<div id="option2" class="gra_horz_lgt-whit-drk-blue vote_gradient">
<span class="vote_text">Friends of the Eatrh</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="margin: 20px 20px 20px 0px; cursor: pointer" onclick="javascript:select(3)">
<div class="vote_backdrop" style="background-color: #FFFFFF;">
<div style="background-image:url(assets/NRDC\ logo.png);" class="vote_image"></div>
<div id="option3" class="gra_horz_lgt-whit-drk-blue vote_gradient">
<span class="vote_text">Natural Resources Defense Council</span>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td style="width: 30%; height: 80%">
<div style="width: 100%; height: 100%; left: 0px; position: relative; text-align: center; display: inline-block;" class="gra_vert_lgt-whit-lgt-blue">
<span style="display: inline-block; transform: translate(-50%, -50%); top: 50%; position: absolute; font-size: x-large; width: 90%;">
<h2>How it Works</h2>
<p>Every month the website's ad revenue will be donated to a conservation effort of your choosing</p>
</span>
</div>
</td>
</tr>
<tr>
<td style="width: 30%; height: 20%">
<div id="cast_button" style="width: 80%; height: 40%; left: 10%; position: relative; text-align: center; display: inline-block; cursor: pointer;" class="gra_radi_drk-grey-lgt-grey" onclick="javascript:option_not_selected()">
<span style="display: inline-block; transform: translate(-50%, -50%); top: 50%; position: absolute; font-size: xx-large;">Vote</span>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>