diff --git a/bag.jpg b/bag.jpg
new file mode 100644
index 0000000..c27e1fc
Binary files /dev/null and b/bag.jpg differ
diff --git a/styl.css b/styl.css
new file mode 100644
index 0000000..9c81ea2
--- /dev/null
+++ b/styl.css
@@ -0,0 +1,76 @@
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-image: url(bag.jpg);
+ background-size: cover;
+ color: white;
+}
+
+/* Bordered form */
+
+/* Full-width inputs */
+input[type="text"],
+input[type="password"] {
+ width: 100%;
+ padding: 12px 20px;
+ margin: 8px 0;
+ display: inline-block;
+ box-sizing: border-box;
+}
+
+/* Set a style for all buttons */
+button {
+ background-color: #350000;
+ color: white;
+ padding: 14px 20px;
+ margin: 8px 0;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+}
+
+/* Add a hover effect for buttons */
+button:hover {
+ opacity: 0.8;
+}
+
+/* Extra style for the cancel button (red) */
+.cancelbtn {
+ width: auto;
+ padding: 10px 18px;
+ background-color: #f44336;
+}
+
+/* Center the avatar image inside this container */
+.imgcontainer {
+ text-align: center;
+ margin: 24px 0 12px 0;
+}
+
+/* Avatar image */
+img.avatar {
+ width: 45%;
+}
+
+/* Add padding to containers */
+.container {
+ padding: 16px;
+}
+
+/* The "Forgot password" text */
+span.psw {
+ float: right;
+ padding-top: 16px;
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+ span.psw {
+ display: block;
+ float: none;
+ }
+ .cancelbtn {
+ width: 100%;
+ }
+}
diff --git a/two.html b/two.html
new file mode 100644
index 0000000..bf2f680
--- /dev/null
+++ b/two.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+ CafeSerenityBites
+
+
+
+
+
+
+