-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtumblr.html
276 lines (236 loc) · 12.6 KB
/
tumblr.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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html>
<head>
<title>Log in | Tumblr</title>
<link href="./tumblr.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
}
body {
background-position: center;
background-image: url('./giphy.gif');
background-repeat: no-repeat;
background-color: lightgrey;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: 100%;
overflow: auto;
min-width: 540px;
background-size: cover;
min-height: 600px;
}
.mainbody h1{
font-size: 70px;
}
.mainbody{
width: 100%;
text-align: center;
height: 300px;
top: 10px;
padding-top: 10% ;
color: white;
}
#tombol {
width: 172px;
background-color: #529ECC;
color: white;
margin: 4px;
padding: 0px;
box-shadow: #529ECC;
border: none;
}
input{
width: 172px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
margin: 4px;
padding: 0px;
box-shadow: #529ECC;
border: none;
}
nav img{
width: 27px;
height: 27px;
margin-top: 15px;
margin-left: 15px;
border-radius: 3px solid black;
}
nav{
width: 100%;
box-sizing: border-box;
height: 60px;
background-color:
float: left;
display: flex;
}
nav input{
background-color: transparent;
color: white;
font-style: italic;
border: none;
border-radius: 20px;
}
input: tar{
background-color: white;
}
.searchbox {
width: 220px;
margin-left: 20px;
margin-top:10px;
margin-bottom: 10px;
display: flex;
height: 35px;
border-radius: 10px;
opacity: 100%;
}
.searchbox img{
margin: 8px 5px;
width: 20px;
height: 20px;
}
.searchbox form{
margin-top: 5px;
border-radius: 10px;
}
.dot{
left: 40px;
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-70px)
}
.dot1, .dot2, .dot3, .dot4, .dot5{
border-radius: 50%;
box-shadow: inset 0 0 0 3px #fff;
cursor: pointer;
height: 16px;
margin-bottom: 10px;
opacity: .4;
position: relative;
width: 16px;
box-sizing: border-box;
color:
}
.dot1, .dot2, .dot3, .dot4, .dot5:hover{
border-radius: 50%;
box-shadow: inset 0 0 0 3px #fff;
cursor: pointer;
height: 16px;
margin-bottom: 10px;
opacity: .4;
position: relative;
width: 16px;
box-sizing: border-box;
color: white;
}
#cont_foot{
position: absolute;
bottom: 0;
width: 100%;
}
footer{
display: flex;
color: white;
width: 100%;
box-sizing: border-box;
justify-content: space-around;
position: absolute;
bottom: 20px;
}
#kotak1{
float: left;
transform: translatex(-50%)
}
#kotak1 h6{
margin-left: 30px;
float: left;
font-size: 20px;
}
#kotak2{
float: right;
transform: translateX(70%)
}
#underfooter{
width: 100%;
text-align: center;
background-color: #529ECC;
color: white;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
bottom: 0;
}
</style>
<script>
function submitFunction()
{
var x=document.forms["myform"]["username"].value;
var y=document.forms["login"]["password"].value;
if(x==null||x=""||y=null||y="")
{
alert("both fields can't be empty.");
}
else(
if(x=="webi")
{
if(y="12345")
{
alert("login sucessful")
}
}
else{
alert("Password do not match")
}
)
else(
alert("User doesn't exist")
)
}
</script>
</head>
<body>
<nav>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADhCAMAAADmr0l2AAAAclBMVEUxQ1j///83SF0kOVCXnaaPlp8QLUciN08pPVOlqrFzfIkVL0morbS8wMUdNU0ZMksHKUWdo6vS1dhrdYL29/fFyc0LKkZ+hpE9TWBZZXTN0NTi5OawtbuIj5np6+x6go5KWGpibXtQXW1td4QAHz+3u8Fszs89AAADN0lEQVR4nO3dgW6qMBSAYRGFTpSiU3RT79TN93/Fe5dlN5BR6dCkPSf/9wT9wwGEzToaKzcCAAAAAAAAAAAAAACKFF3S0Kt6nOxP0mGup3Dc1Zc85aHX9SjmrDwwnSoPzA/KA+1KeWC1Vh646+zTE2iOygPLhfJAxymoJtBcuvvUBOZz5YFV5ydtPYHmxdGnJdA6rqFqAlNXn5LAdKk8MHPcBLUEphNnn45A6+5TEWi7H3XVBJrTjT4NgdVed6B13yJUBLo/pGkJdN8CVQRmN09A+YFV97tCNYHVa1+f7MD+4yc60OR955/swPLSc/0UHlh1/zFJS2A59jj9vgIL4xY6wyWtnzzzkmTxPnO6xFmYVkevs6/fIcLxNbacPCgvSebxBZqL8/2gjsBy88C+KAMfeQAJDIBAAgkMi0ACCQyLQAIJDItAAluBEX6nIs8aPjzejR4/MqcI+9pu/fvIt2n0FTcQSGDkCCQwcgQSGDkCCYwcgQRGjkACI0cggZEjkMDIEUhg5AgkMHIEEhg5AgmMHIEERo5AAiPnEzjRHij0S8pffAIXZehV3sGxb3HLvgi9yjuYbX9gUode5R0cW2u3vcf5XXI/3Zujt20kz2jtEZiMQ6/yDoXPfiSvVehlDldefQ7h1IZe52Cpz2U0SY4/r6TGCrn2eAUmV9u83ZvU1rPVm4jC3k25vs1PlS3zvCxtZs/Lz62gNiIGN7+9LV7TerU4zK+L1f/djrPQi/fi2OHeh5AZ9d0Z6CcZM2rehh9CGR9xXHvce5Axo6njZxg8yJjRew6hjBk1s8GBWxEz6rXDYTchM+r1VNhNSGA++DqzFfJOsRq6V9erkEPo+OE6D1ICR6OB9wopMzoyAz90i5nRnv3g3eS89za7QVN6lDKjny8ifJ/um1ZiZvSf6tbPMjhcRf3xqTj/dkznwt6ZmuJXB3H9LON5osnu/D/VLDMZTxNtpjh57TnzZ2pFnX5NNp30XFDXi3Ml5/7QIc12E+dT4v5wrkuJw9mW2vplsli1L6v7zfLZFrn8ui8mLYssG788z7bbt9n5lNeFVRPXEP3G7wAAAAAAAAAAAAAAAAAA+Bgr9xcwZzqaFIrAgwAAAABJRU5ErkJggg==">
<div class="searchbox">
<img src="data:image/jpeg;base64,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">
<form>
<input type="text" name="searchontumblr" value="Search on tumblr...">
</form>
</div>
</nav>
<div class="mainbody">
<br>
<h1><strong>tumbl.</strong></h1>
<h5>BAN</h5>
<br><br>
<form name="myform" onsubmit="submitfunction()">
<input type="text" name="username"><br>
<input type="password" name="password"><br>
<input id="tombol" type="submit" value="submit">
</form>
<div class="dot">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<div class="dot5"></div>
</div>
</div>
<div id="cont_foot">
<footer>
<div id="kotak1">
<h6>Terms</h6>
<h6>Privacy</h6>
<h6>Jobs</h6>
<h6>Support</h6>
</div>
<div id="kotak2">
<h6 >posted by : san</h6>
</div>
</footer>
<div id="underfooter">
<h4>What is Tumblr?</h4>
</div>
</div>
</body>
</html>