diff --git a/bgi.png b/bgi.png
new file mode 100644
index 0000000..4212c30
Binary files /dev/null and b/bgi.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..15a46a8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="bgimage">
+      <img src="bgi.png" alt="" />
+      <!--覆盖层-->
+      <div class="cover">
+        <div style="width: 450px; margin-right: 70px; margin-bottom:80px;">
+          <div class="text" style="font-weight: 700">
+            Welcome to Paint Quote System
+          </div>
+          <div class="text">————————————————</div>
+          <div class="text" style="white-space: initial; font-size: 17px">
+            Consequat adipisicing ea do labore irrure adipisicing occaecat
+            cupidatat excepteur duis mo
+          </div>
+        </div>
+        <div style="width: 150px;"></div>
+        <div class="sign-up">
+          <h1>Sign Up</h1>
+          <p>Enter details to create your account</p>
+          <div class="input-group">
+            <label for="name">Your name</label>
+            <input type="text" id="name" placeholder="Enter your name" />
+          </div>
+          <div class="input-group">
+            <label for="phone">Phone number</label>
+            <input
+              type="text"
+              id="phone"
+              placeholder="Enter your phone number"
+            />
+          </div>
+          <div class="input-group">
+            <label for="dulux">Dulux account</label>
+            <input
+              type="text"
+              id="dulux"
+              placeholder="Enter your Dulux account"
+            />
+          </div>
+          <div class="btn-group">
+            <button>Sign up</button>
+          </div>
+          <div id="sign-in">
+            <p>
+              Already have an account?<a href="">Sign in</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c849529
--- /dev/null
+++ b/style.css
@@ -0,0 +1,127 @@
+html,
+body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.bgimage {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+}
+
+.bgimage img {
+  width: 100%;
+  display: block;
+  height: 100%
+}
+
+.cover {
+  font-family: "Inter", sans-serif;
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.text {
+  color: rgb(9, 64, 90);
+  font-size: 25px;
+}
+
+.sign-up {
+  width: 50%;
+  background-color: rgba(255, 255, 255, 0.877);
+  height: 470px;
+  width: 550px;
+  margin-right: 100px;
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+  color: #4c4c4c;
+  text-align: center;
+  margin-bottom: 5px;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.sign-up p {
+  color: #7e7e7e;
+  text-align: center;
+  margin-top: auto;
+  margin-bottom: 25px;
+  font-size: 15px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.input-group label {
+  margin-bottom: 6px;
+  font-size: 17px;
+  align-self: flex-start;
+  margin-left: 7.5%;
+  color: #7e7e7e;
+}
+
+.input-group input {
+  height: 40px;
+  width: 80%;
+  padding: 0 12px;
+  font-size: 15px;
+  border: 2px solid #dfdede;
+  border-radius: 6px;
+  outline: none;
+  margin-bottom: 20px;
+}
+
+.btn-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-group button {
+  width: 85.5%;
+  display: block;
+  margin: 0 auto;
+  height: 45px;
+  background: rgb(27, 106, 175);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+.btn-group button:hover {
+  background-color: rgb(11, 83, 137);
+}
+
+#sign-in {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 20px;
+}
+#sign-in p {
+  margin: 0;
+  color: #7e7e7e;
+}
+
+#sign-in a {
+  color: rgb(100, 117, 225);
+  text-decoration-line: none;
+}
\ No newline at end of file
