❉
...
...
...
❆
Contact Form Example
Contact Us!
* { margin: 0; padding: 0; } body { font-size: 62.5%; font-family: Helvetica, sans-serif; background: url(images/stripe.png) repeat; } p { font-size: 1.3em; margin-bottom: 15px; } #page-wrap { width: 660px; background: white; padding: 20px 50px 20px 50px; margin: 20px auto; min-height: 500px; height: auto !important; height: 500px; } #contact-area { width: 600px; margin-top: 25px; } #contact-area input, #contact-area textarea { padding: 5px; width: 471px; font-family: Helvetica, sans-serif; font-size: 1.4em; margin: 0px 0px 10px 0px; border: 2px solid #ccc; } #contact-area textarea { height: 90px; } #contact-area textarea:focus, #contact-area input:focus { border: 2px solid #900; } #contact-area input.submit-button { width: 100px; float: right; } label { float: left; text-align: right; margin-right: 15px; width: 100px; padding-top: 5px; font-size: 1.4em; }
@-webkit-keyframes fall {
0% {
opacity: 0.9;
top: 0
}
100% {
opacity: 0.2;
top: 100%
}
}
@-o-keyframes fall {
0% {
opacity: 0.9;
top: 0
}
100% {
opacity: 0.2;
top: 100%
}
}
@-ms-keyframes fall {
0% {
opacity: 0.9;
top: 0
}
100% {
opacity: 0.2;
top: 100%
}
}
@-moz-keyframes fall {
0% {
opacity: 0.9;
top: 0
}
100% {
opacity: 0.2;
top: 100%
}
}
@keyframes fall {
0% {
opacity: 0.9;
top: 0
}
100% {
opacity: 0.2;
top: 100%
}
}
@-webkit-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-o-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-ms-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-moz-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-webkit-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-o-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-ms-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-moz-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-webkit-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-o-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-ms-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-moz-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-webkit-keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-o-keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-ms-keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-moz-keyframes blow-medium-lerightft {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-webkit-keyframes sway-0 {
0% {
-webkit-transform: rotate(-5deg)
}
40% {
-webkit-transform: rotate(28deg)
}
100% {
-webkit-transform: rotate(3deg)
}
}
@-o-keyframes sway-0 {
0% {
-o-transform: rotate(-5deg)
}
40% {
-o-transform: rotate(28deg)
}
100% {
-o-transform: rotate(3deg)
}
}
@-ms-keyframes sway-0 {
0% {
-ms-transform: rotate(-5deg)
}
40% {
-ms-transform: rotate(28deg)
}
100% {
-ms-transform: rotate(3deg)
}
}
@-moz-keyframes sway-0 {
0% {
-moz-transform: rotate(-5deg)
}
40% {
-moz-transform: rotate(28deg)
}
100% {
-moz-transform: rotate(3deg)
}
}
@keyframes sway-0 {
0% {
transform: rotate(-5deg)
}
40% {
transform: rotate(28deg)
}
100% {
transform: rotate(3deg)
}
}
@-webkit-keyframes sway-1 {
0% {
-webkit-transform: rotate(10deg)
}
40% {
-webkit-transform: rotate(43deg)
}
100% {
-webkit-transform: rotate(15deg)
}
}
@-o-keyframes sway-1 {
0% {
-o-transform: rotate(10deg)
}
40% {
-o-transform: rotate(43deg)
}
100% {
-o-transform: rotate(15deg)
}
}
@-ms-keyframes sway-1 {
0% {
-ms-transform: rotate(10deg)
}
40% {
-ms-transform: rotate(43deg)
}
100% {
-ms-transform: rotate(15deg)
}
}
@-moz-keyframes sway-1 {
0% {
-moz-transform: rotate(10deg)
}
40% {
-moz-transform: rotate(43deg)
}
100% {
-moz-transform: rotate(15deg)
}
}
@keyframes sway-1 {
0% {
transform: rotate(10deg)
}
40% {
transform: rotate(43deg)
}
100% {
transform: rotate(15deg)
}
}
@-webkit-keyframes sway-2 {
0% {
-webkit-transform: rotate(15deg)
}
40% {
-webkit-transform: rotate(56deg)
}
100% {
-webkit-transform: rotate(22deg)
}
}
@-o-keyframes sway-2 {
0% {
-o-transform: rotate(15deg)
}
40% {
-o-transform: rotate(56deg)
}
100% {
-o-transform: rotate(22deg)
}
}
@-ms-keyframes sway-2 {
0% {
-ms-transform: rotate(15deg)
}
40% {
-ms-transform: rotate(56deg)
}
100% {
-ms-transform: rotate(22deg)
}
}
@-moz-keyframes sway-2 {
0% {
-moz-transform: rotate(15deg)
}
40% {
-moz-transform: rotate(56deg)
}
100% {
-moz-transform: rotate(22deg)
}
}
@keyframes sway-2 {
0% {
transform: rotate(15deg)
}
40% {
transform: rotate(56deg)
}
100% {
transform: rotate(22deg)
}
}
@-webkit-keyframes sway-3 {
0% {
-webkit-transform: rotate(25deg)
}
40% {
-webkit-transform: rotate(74deg)
}
100% {
-webkit-transform: rotate(37deg)
}
}
@-o-keyframes sway-3 {
0% {
-o-transform: rotate(25deg)
}
40% {
-o-transform: rotate(74deg)
}
100% {
-o-transform: rotate(37deg)
}
}
@-ms-keyframes sway-3 {
0% {
-ms-transform: rotate(25deg)
}
40% {
-ms-transform: rotate(74deg)
}
100% {
-ms-transform: rotate(37deg)
}
}
@-moz-keyframes sway-3 {
0% {
-moz-transform: rotate(25deg)
}
40% {
-moz-transform: rotate(74deg)
}
100% {
-moz-transform: rotate(37deg)
}
}
@keyframes sway-3 {
0% {
transform: rotate(25deg)
}
40% {
transform: rotate(74deg)
}
100% {
transform: rotate(37deg)
}
}
@-webkit-keyframes sway-4 {
0% {
-webkit-transform: rotate(40deg)
}
40% {
-webkit-transform: rotate(68deg)
}
100% {
-webkit-transform: rotate(25deg)
}
}
@-o-keyframes sway-4 {
0% {
-o-transform: rotate(40deg)
}
40% {
-o-transform: rotate(68deg)
}
100% {
-o-transform: rotate(25deg)
}
}
@-ms-keyframes sway-4 {
0% {
-ms-transform: rotate(40deg)
}
40% {
-ms-transform: rotate(68deg)
}
100% {
-ms-transform: rotate(25deg)
}
}
@-moz-keyframes sway-4 {
0% {
-moz-transform: rotate(40deg)
}
40% {
-moz-transform: rotate(68deg)
}
100% {
-moz-transform: rotate(25deg)
}
}
@keyframes sway-4 {
0% {
transform: rotate(40deg)
}
40% {
transform: rotate(68deg)
}
100% {
transform: rotate(25deg)
}
}
@-webkit-keyframes sway-5 {
0% {
-webkit-transform: rotate(50deg)
}
40% {
-webkit-transform: rotate(78deg)
}
100% {
-webkit-transform: rotate(40deg)
}
}
@-o-keyframes sway-5 {
0% {
-o-transform: rotate(50deg)
}
40% {
-o-transform: rotate(78deg)
}
100% {
-o-transform: rotate(40deg)
}
}
@-ms-keyframes sway-5 {
0% {
-ms-transform: rotate(50deg)
}
40% {
-ms-transform: rotate(78deg)
}
100% {
-ms-transform: rotate(40deg)
}
}
@-moz-keyframes sway-5 {
0% {
-moz-transform: rotate(50deg)
}
40% {
-moz-transform: rotate(78deg)
}
100% {
-moz-transform: rotate(40deg)
}
}
@keyframes sway-5 {
0% {
transform: rotate(50deg)
}
40% {
transform: rotate(78deg)
}
100% {
transform: rotate(40deg)
}
}
@-webkit-keyframes sway-6 {
0% {
-webkit-transform: rotate(65deg)
}
40% {
-webkit-transform: rotate(92deg)
}
100% {
-webkit-transform: rotate(58deg)
}
}
@-o-keyframes sway-6 {
0% {
-o-transform: rotate(65deg)
}
40% {
-o-transform: rotate(92deg)
}
100% {
-o-transform: rotate(58deg)
}
}
@-ms-keyframes sway-6 {
0% {
-ms-transform: rotate(65deg)
}
40% {
-ms-transform: rotate(92deg)
}
100% {
-ms-transform: rotate(58deg)
}
}
@-moz-keyframes sway-6 {
0% {
-moz-transform: rotate(65deg)
}
40% {
-moz-transform: rotate(92deg)
}
100% {
-moz-transform: rotate(58deg)
}
}
@keyframes sway-6 {
0% {
transform: rotate(65deg)
}
40% {
transform: rotate(92deg)
}
100% {
transform: rotate(58deg)
}
}
@-webkit-keyframes sway-7 {
0% {
-webkit-transform: rotate(72deg)
}
40% {
-webkit-transform: rotate(118deg)
}
100% {
-webkit-transform: rotate(68deg)
}
}
@-o-keyframes sway-7 {
0% {
-o-transform: rotate(72deg)
}
40% {
-o-transform: rotate(118deg)
}
100% {
-o-transform: rotate(68deg)
}
}
@-ms-keyframes sway-7 {
0% {
-ms-transform: rotate(72deg)
}
40% {
-ms-transform: rotate(118deg)
}
100% {
-ms-transform: rotate(68deg)
}
}
@-moz-keyframes sway-7 {
0% {
-moz-transform: rotate(72deg)
}
40% {
-moz-transform: rotate(118deg)
}
100% {
-moz-transform: rotate(68deg)
}
}
@keyframes sway-7 {
0% {
transform: rotate(72deg)
}
40% {
transform: rotate(118deg)
}
100% {
transform: rotate(68deg)
}
}
@-webkit-keyframes sway-8 {
0% {
-webkit-transform: rotate(94deg)
}
40% {
-webkit-transform: rotate(136deg)
}
100% {
-webkit-transform: rotate(82deg)
}
}
@-o-keyframes sway-8 {
0% {
-o-transform: rotate(94deg)
}
40% {
-o-transform: rotate(136deg)
}
100% {
-o-transform: rotate(82deg)
}
}
@-ms-keyframes sway-8 {
0% {
-ms-transform: rotate(94deg)
}
40% {
-ms-transform: rotate(136deg)
}
100% {
-ms-transform: rotate(82deg)
}
}
@-moz-keyframes sway-8 {
0% {
-moz-transform: rotate(94deg)
}
40% {
-moz-transform: rotate(136deg)
}
100% {
-moz-transform: rotate(82deg)
}
}
@keyframes sway-8 {
0% {
transform: rotate(94deg)
}
40% {
transform: rotate(136deg)
}
100% {
transform: rotate(82deg)
}
}
.sakura {
background: -webkit-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
background: -o-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
background: -ms-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
background: -moz-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
background: linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
-webkit-border-radius: 12px 1px;
-o-border-radius: 12px 1px;
-ms-border-radius: 12px 1px;
-moz-border-radius: 12px 1px;
border-radius: 12px 1px;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
position: absolute;
top: 0px;
left: 0px;
}
Contact Form Example
Contact Us!
게시물이 없습니다.
