-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive.html
223 lines (207 loc) · 12.7 KB
/
responsive.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<title>Learn Bootstrap</title>
<!-- Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> -->
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div>
<!--HTML5 new semantic elements header, footer,section, nav , article,aside,figcaption,figure,footer,header,hgroup,mark,nav,section,time-->
<header>
<div class="navbar" id="main-nav">
<div class="navbar-inner">
<div class="container">
<a class="brand visible-phone" href="#">
<img height="24" id="favicon" src="img/bootstrap-mdo-sfmoma-03.jpg" width="24"> Neeraj
</a>
<a class="btn btn-navbar pull-right" data-target=".nav-collapse" data-toggle="collapse" id="menu_button">
Menu
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="/homepage">Home</a></li>
<li class="visible-phone"><a href="/Register">Register</a></li>
<li class="visible-phone"><a href="/SiteLogin" styleclass="last">Login</a></li>
<li><a href="/Neerajblog">News & Insights</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Support <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/FAQ">FAQ</a></li>
<li class="divider"></li>
<li><a href="tel:18004613056">Call (800) 461-3056</a></li>
<li><a href="mailto:[email protected]">Email Us</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
<div class="row">
<!-- Left content -->
<div class="span2 hidden-phone pagination-centered" style="border: 2px solid #d4d4d4;">
<hr/>
<div>
<h4>Take a Tour</h4>
<h5><em><b>Watch and learn how easy it is to...</b></em></h5>
</div>
<div class="text-left">
<ul>
<li>Give permission to share meter data</li>
<li>Shop and compare</li>
<li>Sign up for a new plan</li>
</ul>
</div>
<div>
<p>
Plus, learn how <span style="color:#3a87ad;"><a href="#">test test Electric Price Index</a></span> can help you decide which contract lengths are a good deal right now.
</p>
</div>
<hr/>
</div>
<!-- Left content ends here -->
<!-- Middle content -->
<div class="span6">
<h2 class="text-info">You have the freedom to choose low electric rates</h2>
<p class="lead">The dog days of summer are a great time to declare your independence from high electric rates. </p><p class="lead">On average, Neeraj customers report saving more than 20%*!</p>
<!-- Carousel needs to be built making use of the JSON data attached -->
<div class="pull-right span3" id="jsoncra" style="border: 1px solid red;">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner" >
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<ul>
<li><p class="lead">It's the <strong>FREE</strong> and <strong>EASY</strong> way to compare electric plans</p> </li>
<li><p class="lead">Many customer-rated providers and plans</p></li>
<li><p class="lead">Switch to a new, better plan in minutes - or register and we'll send you a reminder when it's time to switch </p></li>
</ul>
<a href="/shopplans" Class="btn btn-warning" id="search_plans_submit">Start Shopping!</a>
<div class="space-height"></div>
</div>
<!-- Middle content ends here -->
<!-- Right content -->
<div class="span3 pull-right">
<div style="border: 2px solid #d4d4d4;">
<div style="padding:10px;">
<h4> Register User</h4>
<form action="javascript:void(0);">
<div class="control-group">
<label class="control-label visible-desktop" for="first_name">First Name</label>
<div class="controls">
<input class="input-block-level" name="First Name" id="first_name" placeholder="First Name" value="" type="text" required="required" autofocus="autofocus"/>
</div>
</div>
<div class="control-group">
<label class="control-label visible-desktop" for="last_name">Last Name</label>
<div class="controls">
<input class="input-block-level" name="Last Name" id="last_name" placeholder="Last Name" value="" type="text" required="required"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">
Password<br/>
<small>At least 8 characters, at least one number, and at least one letter or symbol</small></label>
<div class="controls">
<input class="input-block-level" name="password" id="password" placeholder="abcdefg1" value="" type="password" required="required"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password2">Confirm Password</label>
<div class="controls">
<input class="input-block-level" name="Confirm Password" id="password2" placeholder="abcdefg1" value="" type="password" required="required"/>
</div>
</div>
<div class="control-group">
<label class="control-label visible-desktop" for="email">Email</label>
<div class="controls">
<input class="input-block-level" name="email" id="email" placeholder="[email protected]" value="" type="email" required="required"/>
</div>
</div>
<div class="control-group">
<label class="control-label visible-desktop" for="website">Website</label>
<div class="controls">
<input class="input-block-level" name="website" id="website" placeholder="www.test-somewhere.com" value="" type="text" required="required"/>
</div>
</div>
<div class="control-group">
<label class="control-label visible-desktop" for="business">Business Unit</label>
<div class="controls">
<input class="input-block-level" name="business" id="business" placeholder="test test" value="" type="text" required="required"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="register_submit" name="register_submit" class="btn btn-warning" data-loading-text="Creating Your Profile">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Right content ends here -->
<!-- .row -->
</div>
<footer>
<!-- <div class="footer"> -->
<div class="navbar" id="main-nav" style="margin-top:40px;">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<small>
<ul class="nav">
<li><a href="#">Privacy Policy</a></li>
<li class="muted">|</li>
<li><a href="#">Terms of Use</a></li>
<li class="muted">|</li>
<li><a href="#">Site Map</a></li>
<li class="muted">|</li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>@Copyright 2013 test test</p>
</small>
</div>
</div>
</div>
</div>
</footer>
<!-- .container -->
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.getJSON('image.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<div class="'+ key + '"><img src="'+ val + '" alt="First one"></div>');
});
$('.carousel-inner').html(items);
});
$('.carousel').carousel({
interval: 1000,
pause:"hover"
});
});
</script>
</html>