Penambahan css

884642b5 · Dwinowo Muhammad · 3d363f6c · 884642b5 · 884642b5
Commit 884642b5 authored Mar 22, 2022 by Dwinowo Muhammad
Hide whitespace changes
Inline Side-by-side

Showing with 81 additions and 8 deletions

Latihan3.jsp src/main/webapp/Latihan3.jsp +18 -8

styles.css src/main/webapp/styles.css +63 -0

No files found.
--- a/src/main/webapp/Latihan3.jsp
+++ b/src/main/webapp/Latihan3.jsp
 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
-    pageEncoding="ISO-8859-1"%>
+	pageEncoding="ISO-8859-1"%>
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="ISO-8859-1">
 <title>Latihan3</title>
+<link rel="stylesheet" href="styles.css">
 </head>
 <body>
-<form action="Latihan3" method="post">
-  <label for="fname">Username:</label><br>
-  <input type="text" id="username" name="username"><br>
-  <label for="lname">Password:</label><br>
-  <input type="password" id="password" name="password"><br><br>
-  <input type="submit" value="Submit">
-</form> 
+
+	<div id="wrapper">
+		<div class="main-content">
+			<div class="header">
+				<form action="Latihan3" method="post">
+					<label for="fname">Username:</label><br> <input type="text"
+						placeholder="username" class="input-1" id="username"
+						name="username"><br> <label for="lname">Password:</label><br>
+					<input type="password" placeholder="password" class="input-2"
+						id="password" name="password"><br> <br> 
+					<input class="btn" type="submit" value="Submit">
+				</form>
+			</div>
+		</div>
+	</div>
+
 </body>
 </html>
\ No newline at end of file
--- a/src/main/webapp/styles.css
+++ b/src/main/webapp/styles.css
+@charset "ISO-8859-1";
+
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+body {
+  background-color: #eee;
+}
+
+#wrapper {
+  width: 500px;
+  height: 50%;
+  overflow: hidden;
+  border: 0px solid #000;
+  margin: 50px auto;
+  padding: 10px;
+}
+
+.main-content {
+  width: 250px;
+  height: 40%;
+  margin: 10px auto;
+  background-color: #fff;
+  border: 2px solid #e6e6e6;
+  padding: 40px 50px;
+}
+
+.header {
+  border: 0px solid #000;
+  margin-bottom: 5px;
+}
+
+
+.input-1,
+.input-2 {
+  width: 100%;
+  margin-bottom: 5px;
+  padding: 8px 12px;
+  border: 1px solid #dbdbdb;
+  box-sizing: border-box;
+  border-radius: 3px;
+}
+
+.btn {
+  width: 100%;
+  background-color: #3897f0;
+  border: 1px solid #3897f0;
+  padding: 5px 12px;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+
+
+
+
+
+
+