Skip to content

Commit 3dec307

Browse files
ashmanmodeashmanmode
committed
shubham project
1 parent bac0594 commit 3dec307

File tree

1 file changed

+307
-0
lines changed

1 file changed

+307
-0
lines changed

‎shubham.html

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
<!DOCTYPE html>
2+
<html >
3+
<head>
4+
<meta charset="UTF-8">
5+
6+
<style>
7+
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
8+
9+
@prim: #53e3a6;
10+
11+
*{
12+
box-sizing: border-box;
13+
margin: 0;
14+
padding: 0;
15+
16+
font-weight: 300;
17+
}
18+
19+
body{
20+
font-family: 'Source Sans Pro', sans-serif;
21+
color: white;
22+
font-weight: 300;
23+
24+
::-webkit-input-placeholder { /* WebKit browsers */
25+
font-family: 'Source Sans Pro', sans-serif;
26+
color: white;
27+
font-weight: 300;
28+
}
29+
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
30+
font-family: 'Source Sans Pro', sans-serif;
31+
color: white;
32+
opacity: 1;
33+
font-weight: 300;
34+
}
35+
::-moz-placeholder { /* Mozilla Firefox 19+ */
36+
font-family: 'Source Sans Pro', sans-serif;
37+
color: white;
38+
opacity: 1;
39+
font-weight: 300;
40+
}
41+
:-ms-input-placeholder { /* Internet Explorer 10+ */
42+
font-family: 'Source Sans Pro', sans-serif;
43+
color: white;
44+
font-weight: 300;
45+
}
46+
}
47+
48+
.wrapper{
49+
background: #50a3a2;
50+
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
51+
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
52+
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
53+
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
54+
55+
position: absolute;
56+
top: 50%;
57+
left: 0;
58+
width: 100%;
59+
height: 400px;
60+
margin-top: -200px;
61+
overflow: hidden;
62+
63+
&.form-success{
64+
.container{
65+
h1{
66+
transform: translateY(85px);
67+
}
68+
}
69+
}
70+
}
71+
72+
.container{
73+
max-width: 600px;
74+
margin: 0 auto;
75+
padding: 80px 0;
76+
height: 400px;
77+
text-align: center;
78+
79+
h1{
80+
font-size: 40px;
81+
transition-duration: 1s;
82+
transition-timing-function: ease-in-put;
83+
font-weight: 200;
84+
}
85+
}
86+
87+
form{
88+
padding: 20px 0;
89+
position: relative;
90+
z-index: 2;
91+
92+
input{
93+
display: block;
94+
appearance: none;
95+
outline: 0;
96+
border: 1px solid fade(white, 40%);
97+
background-color: fade(white, 20%);
98+
width: 250px;
99+
100+
border-radius: 3px;
101+
padding: 10px 15px;
102+
margin: 0 auto 10px auto;
103+
display: block;
104+
text-align: center;
105+
font-size: 18px;
106+
107+
color: white;
108+
109+
transition-duration: 0.25s;
110+
font-weight: 300;
111+
112+
&:hover{
113+
background-color: fade(white, 40%);
114+
}
115+
116+
&:focus{
117+
background-color: white;
118+
width: 300px;
119+
120+
color: @prim;
121+
}
122+
}
123+
124+
button{
125+
appearance: none;
126+
outline: 0;
127+
background-color: white;
128+
border: 0;
129+
padding: 10px 15px;
130+
color: @prim;
131+
border-radius: 3px;
132+
width: 250px;
133+
cursor: pointer;
134+
font-size: 18px;
135+
transition-duration: 0.25s;
136+
137+
&:hover{
138+
background-color: rgb(245, 247, 249);
139+
}
140+
}
141+
}
142+
143+
.bg-bubbles{
144+
position: absolute;
145+
top: 0;
146+
left: 0;
147+
width: 100%;
148+
height: 100%;
149+
150+
z-index: 1;
151+
152+
li{
153+
position: absolute;
154+
list-style: none;
155+
display: block;
156+
width: 40px;
157+
height: 40px;
158+
background-color: fade(white, 15%);
159+
bottom: -160px;
160+
161+
-webkit-animation: square 25s infinite;
162+
animation: square 25s infinite;
163+
164+
-webkit-transition-timing-function: linear;
165+
transition-timing-function: linear;
166+
167+
&:nth-child(1){
168+
left: 10%;
169+
}
170+
171+
&:nth-child(2){
172+
left: 20%;
173+
174+
width: 80px;
175+
height: 80px;
176+
177+
animation-delay: 2s;
178+
animation-duration: 17s;
179+
}
180+
181+
&:nth-child(3){
182+
left: 25%;
183+
animation-delay: 4s;
184+
}
185+
186+
&:nth-child(4){
187+
left: 40%;
188+
width: 60px;
189+
height: 60px;
190+
191+
animation-duration: 22s;
192+
193+
background-color: fade(white, 25%);
194+
}
195+
196+
&:nth-child(5){
197+
left: 70%;
198+
}
199+
200+
&:nth-child(6){
201+
left: 80%;
202+
width: 120px;
203+
height: 120px;
204+
205+
animation-delay: 3s;
206+
background-color: fade(white, 20%);
207+
}
208+
209+
&:nth-child(7){
210+
left: 32%;
211+
width: 160px;
212+
height: 160px;
213+
214+
animation-delay: 7s;
215+
}
216+
217+
&:nth-child(8){
218+
left: 55%;
219+
width: 20px;
220+
height: 20px;
221+
222+
animation-delay: 15s;
223+
animation-duration: 40s;
224+
}
225+
226+
&:nth-child(9){
227+
left: 25%;
228+
width: 10px;
229+
height: 10px;
230+
231+
animation-delay: 2s;
232+
animation-duration: 40s;
233+
background-color: fade(white, 30%);
234+
}
235+
236+
&:nth-child(10){
237+
left: 90%;
238+
width: 160px;
239+
height: 160px;
240+
241+
animation-delay: 11s;
242+
}
243+
}
244+
}
245+
246+
@-webkit-keyframes square {
247+
0% { transform: translateY(0); }
248+
100% { transform: translateY(-700px) rotate(600deg); }
249+
}
250+
@keyframes square {
251+
0% { transform: translateY(0); }
252+
100% { transform: translateY(-700px) rotate(600deg); }
253+
}
254+
</style>
255+
</head>
256+
257+
<body>
258+
259+
<div class="wrapper">
260+
<div class="container">
261+
262+
<h2> Welcome To New SMS based Meter Billing System </h2>
263+
<p> If you already have the SMS based Meter, then you can register here with the meter mobile no.
264+
You can anytime chech the billing amount by loging in with this mobile no. and the password</p>
265+
266+
<form class="form" method="post" action="https://script.google.com/macros/s/AKfycbxf6Vfce7iblpnyYORIJK5Aa3IsqwP1yd8Ojb8nx_25A9LP_HGC/exec">
267+
To Register :
268+
<input type="hidden" name="type" value="register" />
269+
<input type="text" name = "mobile" placeholder="Mobile No." required>
270+
<input type="text" name = "email" placeholder="Email ID" required>
271+
<input type="password" name = "password" placeholder="Password" required>
272+
<button type="submit" name = "login" id="login-button">Register</button>
273+
</form>
274+
275+
<form class="form" method="post" action="https://script.google.com/macros/s/AKfycbxf6Vfce7iblpnyYORIJK5Aa3IsqwP1yd8Ojb8nx_25A9LP_HGC/exec">
276+
To Login :
277+
<input type="hidden" name="type" value="login" />
278+
<input type="text" name = "mobile" placeholder="Mobile No." required>
279+
<input type="password" name = "password" placeholder="Password" required>
280+
<button type="submit" name = "login" id="login-button">Login</button>
281+
</form>
282+
283+
</div>
284+
285+
<ul class="bg-bubbles">
286+
<li></li>
287+
<li></li>
288+
<li></li>
289+
<li></li>
290+
<li></li>
291+
<li></li>
292+
<li></li>
293+
<li></li>
294+
<li></li>
295+
<li></li>
296+
</ul>
297+
</div>
298+
<script>
299+
$("#login-button").click(function(event){
300+
event.preventDefault();
301+
302+
$('form').fadeOut(500);
303+
$('.wrapper').addClass('form-success');
304+
});
305+
</script>
306+
</body>
307+
</html>

0 commit comments

Comments
 (0)