diff --git a/images/user-picture.png b/images/user-picture.png new file mode 100644 index 0000000..ecaaeda Binary files /dev/null and b/images/user-picture.png differ diff --git a/pages/login.html b/pages/login.html new file mode 100644 index 0000000..766925e --- /dev/null +++ b/pages/login.html @@ -0,0 +1,50 @@ + + + + + + + Document + + +
+
+ +
+
+ +
+
+ + + + +
+
+ +
+
+ Forget Password? +
+
+
+
+ + diff --git a/pages/signup.html b/pages/signup.html new file mode 100644 index 0000000..4d4c43d --- /dev/null +++ b/pages/signup.html @@ -0,0 +1,62 @@ + + + + + + + Document + + +
+
+ +
+
+ +
+
+ +
+
+ + + + +
+
+ + + + +
+
+
+ +
+
+
+ + diff --git a/styles/login.css b/styles/login.css new file mode 100644 index 0000000..258376e --- /dev/null +++ b/styles/login.css @@ -0,0 +1,145 @@ +body{ + margin:0; + padding: 0; + font-family: sans-serif; + background-color: #DAFFFB; +} + +.main{ + width: 100%; + height: 100vh; + background-color: #DAFFFB; + display: flex; + justify-content: center; + align-items: center; +} + +.container{ + width: 30%; + height: 60%; + background-color: #fff; + border-radius: 20px; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + justify-content: left; + align-items: center; + overflow: hidden; +} + +.login_container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: #176B87; +} + +.login_container span{ + font-size: 30px; + font-weight: 600; + color: #DAFFFB; + padding: 1rem; +} + +.login_container img{ + margin-top: 1.5rem; + width: 20%; + transition: transform 0.9s ease-in-out; + border-radius: 50%; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + background-color: #DAFFFB; +} + +input{ + width: 80%; + height: 50px; + outline: none; + border: 1px solid #DAFFFB; + border-radius: 5px; + padding: 0 1rem; + font-size: 1rem; + margin: 1rem 0; + transition: all 0.3s ease-in-out; +} + +.group { + display: flex; + line-height: 30px; + align-items: center; + position: relative; + max-width: 200px; +} + +.input { + width: 100%; + height: 45px; + line-height: 30px; + padding: 0 5rem; + padding-left: 3rem; + border: 2px solid transparent; + border-radius: 10px; + outline: none; + background-color: #f8fafc; + color: #0d0c22; + transition: .5s ease; +} + +.input::placeholder { + color: #94a3b8; +} + +.input:focus, input:hover { + outline: none; + border-color: rgba(129, 140, 248); + background-color: #fff; + box-shadow: 0 0 0 5px rgb(129 140 248 / 30%); +} + +.icon { + position: absolute; + left: 1rem; + fill: none; + width: 1rem; + height: 1rem; +} + +.input_container{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-direction: column; +} + +button{ + width: 5rem; + height: 2rem; + border: none; + outline: none; + border-radius: 5px; + background-color: #176B87; + color: #DAFFFB; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease-in-out; +} + +button:hover{ + background-color: #DAFFFB; + color: #176B87; +} + +.login_btn{ + margin: 1rem 0 0 0; +} + +.forget_link{ + font-size: 0.8rem; + color: #176B87; + text-decoration: none; + padding-top: 1rem; +} \ No newline at end of file diff --git a/styles/signup.css b/styles/signup.css new file mode 100644 index 0000000..4dbd0cc --- /dev/null +++ b/styles/signup.css @@ -0,0 +1,144 @@ +body{ + margin:0; + padding: 0; + font-family: sans-serif; + background-color: #DAFFFB; +} + +.main{ + width: 100%; + height: 100vh; + background-color: #DAFFFB; + display: flex; + justify-content: center; + align-items: center; +} + +.container{ + width: 32%; + height: 82%; + background-color: #fff; + border-radius: 20px; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + justify-content: left; + align-items: center; + overflow: hidden; +} + +.signup_container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: #176B87; +} + +.signup_container span{ + font-size: 30px; + font-weight: 600; + color: #DAFFFB; + padding: 1rem; +} + +.signup_container img{ + margin-top: 1.5rem; + width: 20%; + transition: transform 0.9s ease-in-out; + border-radius: 50%; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + background-color: #DAFFFB; +} + +input{ + width: 90%; + height: 50px; + outline: none; + border: 1px solid #DAFFFB; + border-radius: 5px; + padding: 0 1rem; + font-size: 1rem; + margin: 1rem 0; + transition: all 0.3s ease-in-out; +} + +.group { + display: flex; + line-height: 30px; + align-items: center; + position: relative; + max-width: 400px; +} + +.input { + width: 100%; + height: 45px; + line-height: 30px; + padding: 0 2rem; + padding-left: 3rem; + border: 2px solid transparent; + border-radius: 10px; + outline: none; + background-color: #f8fafc; + color: #0d0c22; + transition: .5s ease; +} + +.input::placeholder { + color: #94a3b8; +} + +.input:focus, input:hover { + outline: none; + border-color: rgba(129, 140, 248); + background-color: #fff; + box-shadow: 0 0 0 5px rgb(129 140 248 / 30%); +} + +.icon { + position: absolute; + left: 1rem; + fill: none; + width: 1rem; + height: 1rem; +} + +.input_container{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + flex-direction: column; +} + +button{ + width: 5rem; + height: 2rem; + border: none; + outline: none; + border-radius: 5px; + background-color: #176B87; + color: #DAFFFB; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease-in-out; +} + +button:hover{ + background-color: #DAFFFB; + color: #176B87; +} + +.signup_btn{ + margin: 1rem 0 0 0; +} + +.forget_link{ + font-size: 0.8rem; + color: #176B87; + text-decoration: none; +} \ No newline at end of file