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
| <style>
body, div, h1,h2, form, fieldset, footer,p {
margin: 0; padding: 0; border: 0; outline: none;
}
body {
color: #7c7873;
font-family: 'YanoneKaffeesatzRegular';
background-color: #D7D7D7;
}
p {text-shadow:0 1px 0 #fff;}
#wrap {width:530px; margin:20px auto 0; }
h1 {margin-bottom:20px; text-align:center;font-size:48px; text-shadow:0 1px 0 #ede8d9; }
#form_wrap { overflow:hidden; height:446px; position:relative; top:0px;
-webkit-transition: all 1s ease-in-out .3s;
-moz-transition: all 1s ease-in-out .3s;
-o-transition: all 1s ease-in-out .3s;
transition: all 1s ease-in-out .3s;}
#form_wrap:before {content:"";
position:absolute;
bottom:128px;left:0px;
background:url('https://uipv4.zywvvd.com:33030/HexoFiles/images/before.png');
width:530px;height: 316px;}
#form_wrap:after {content:"";position:absolute;
bottom:0px;left:0;
background:url('https://uipv4.zywvvd.com:33030/HexoFiles/images/after.png');
width:530px;height: 260px; }
#form_wrap.hide:after, #form_wrap.hide:before {display:none; }
#form_wrap:hover {height:806px;top:-30px;}
form {background:#f7f2ec url('https://uipv4.zywvvd.com:33030/HexoFiles/images/letter_bg.png');
position:relative;top:200px;overflow:hidden;
height:200px;width:400px;margin:0px auto;padding:20px;
border: 1px solid #fff;
border-radius: 3px;
-moz-border-radius: 3px; -webkit-border-radius: 3px;
box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-webkit-transition: all 1s ease-in-out .3s;
-moz-transition: all 1s ease-in-out .3s;
-o-transition: all 1s ease-in-out .3s;
transition: all 1s ease-in-out .3s;}
#form_wrap:hover form {height:530px;}
label {
margin: 11px 20px 0 0;
font-size: 16px; color: #b3aba1;
text-transform: uppercase;
text-shadow: 0px 1px 0px #fff;
}
#form_wrap input[type=submit] {
position:relative;font-family: 'YanoneKaffeesatzRegular';
font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;
width:100%; text-align:center;opacity:0;
background:none;
cursor: pointer;
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
-webkit-transition: opacity .6s ease-in-out 0s;
-moz-transition: opacity .6s ease-in-out 0s;
-o-transition: opacity .6s ease-in-out 0s;
transition: opacity .6s ease-in-out 0s;
}
#form_wrap:hover input[type=submit] {z-index:1;opacity:1;
-webkit-transition: opacity .5s ease-in-out 1.3s;
-moz-transition: opacity .5s ease-in-out 1.3s;
-o-transition: opacity .5s ease-in-out 1.3s;
transition: opacity .5s ease-in-out 1.3s;}
#form_wrap:hover input:hover[type=submit] {color:#435c70;}
.top-banner {
background-color: #555;
}
</style>
<div style="margin-top: -10px">
<div id="wrap">
<div id='form_wrap'>
<form>
<img src='https://uipv4.zywvvd.com:33030/HexoFiles/images/violet.jpg' height=245px/>
<p >Hello ,</p>
<label for="email"> </label>
If there's anything you want to say, please send a comment as it would be much appreciated
</div>
</div>
</div>
<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>
|
