html and css

oscamaina · Feb 9, 2017 · c16ee0e · c16ee0e
1 parent 926b024
commit c16ee0e
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en"> 
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,">
+  <title>Login Form</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <center>
+  <div class="container">
+    <div class="login">
+      <h1>Sign in to proceed</h1>
+      <form method="post" action="">
+        <p><input type="text" name="login" value="" placeholder="Username"></p>
+        <p><input type="password" name="password" value="" placeholder="Password"></p>
+        <p class="rem">
+          <label>
+            <input type="checkbox" name="rem" id="rem">
+            Keep me signed in
+          </label>
+        </p>
+        <p class="submit"><input type="submit" name="commit" value="Login"></p>
+        <p> <a href="">Forgot your password?</a></p>
+      </form>
+    </div>
+    <p> <a href="">create account</a>.</p>
+  </div>
+</center>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,92 @@
+html, body {
+  font: 13px;
+  font-family: Arial, sans-serif
+  color: #404040;
+  background: #fff;
+  background-image: url("bg.png");
+  background-clip: border-box;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: auto;
+  background-color: rgb(255,255,255);
+  position: absolute;
+}
+h1 {
+	font-family: 'Open Sans', 
+	sans-serif; 
+	font-size:38px; 
+	color:#555557;
+}
+.container {
+  margin: 80px 300px auto;
+  width: 640px;
+  position: relative;
+  min-height: 100%;
+}
+#form1{
+	box-shadow: 0px 1px 1px 1px #c6c1c1;
+	background:#f7f7f7;
+}
+.login {
+  position: relative;
+  margin: 0 auto;
+  padding: 20px 20px 20px;
+  width: 310px;
+  background: white;
+  border-radius: 3px;
+  color: gray;
+
+}
+
+.login h1 {
+  margin: -20px -20px 21px;
+  line-height: 40px;
+  font-size: 15px;
+  font-weight: bold;
+  color: #555;
+  text-align: center;
+  text-shadow: 0 1px white;
+  background: #f3f3f3;
+  border-bottom: 1px solid #cfcfcf;
+  border-radius: 3px 3px 0 0;
+}
+.login p {
+  margin: 20px 0 0;
+}
+.login input[type=text], .login input[type=password] {
+  width: 278px;
+  height: 36px;
+  display: inline-block;
+  padding: 0 8px;
+  margin: 0;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-top: 1px solid #c0c0c0;
+  border-radius: 1px;
+  font-size: 15px;
+  color: #404040;
+}
+.login p.rem {
+  float: left;
+  line-height: 31px;
+}
+.login p.rem label {
+  font-size: 12px;
+  color: #777;
+  cursor: pointer;
+}
+.login p.rem input {
+  position: relative;
+  bottom: 1px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.login p.submit {
+	text-align: right;
+	float: center;
+	position: relative;
+}
+p a{ 
+	color:#498af2;
+	text-decoration:none; 
+}