diff --git a/css/style.css b/css/style.css index a4702c3..86ab004 100755 --- a/css/style.css +++ b/css/style.css @@ -4,27 +4,37 @@ html { body { margin: 0px; - background-color: #a0a0a0; + background: url(../img/body_background.png); font-family: Helvetica, Arial, sans-serif; font-size: 13px; } -input { - background: #fff; +#wrapper { + width: 380px; + margin: auto; + margin-top: 150px; +} - font-family: Helvetica, Arial, sans-serif; - font-size: 13px; +#box { + background-color: #fff; + width: 100%; - padding: 2px 2px; + border: 1px solid #ccc; +} + +#header { + background-color: #E6E8FA; + background: url(../img/header_background.png); + border-bottom: 1px solid #ccc; + text-align: center; + padding: 10px; + margin-bottom: 10px; +} + +#generate { width: 325px; - border: 2px; - border-color: #b8b8b8 #e2e2e2 #e2e2e2 #b8b8b8; - border-style: solid; -} - -input.focus { - background: #ebfdd7; + margin: auto; } label { @@ -35,10 +45,28 @@ label { font-weight: bold; } -#wrapper { - width: 380px; - margin: auto; - margin-top: 200px; +input { + background: #fff; + + font-family: Helvetica, Arial, sans-serif; + font-size: 13px; + + padding: 5px; + width: 315px; + border: 1px; + border-color: #b8b8b8 #e2e2e2 #e2e2e2 #b8b8b8; + border-style: solid; } -# \ No newline at end of file +input:focus { + background: #FFE4E1; + outline: 0; +} + +button { + width: 100%; +} + +.form_row { + margin-bottom: 10px; +} \ No newline at end of file diff --git a/img/body_background.png b/img/body_background.png new file mode 100755 index 0000000..dd32c42 Binary files /dev/null and b/img/body_background.png differ diff --git a/img/header_background.png b/img/header_background.png new file mode 100755 index 0000000..4b9e3fa Binary files /dev/null and b/img/header_background.png differ diff --git a/index.php b/index.php index 8f3f8f7..b679372 100755 --- a/index.php +++ b/index.php @@ -13,18 +13,31 @@
-
-
-
- - +
+ +
+ +
+ + +
+
+ + +
+ +
+ +
+ + +
+ +
-
- - -
- - +
@@ -34,6 +47,8 @@ head.ready(function() { $('input').corner('round 4px'); + $('button').corner('round 4px'); + $('#box').corner('round bottom'); });