descholar-ceo · descholar-ceo · Jan 17, 2020 · Jan 17, 2020
diff --git a/UI/css/announceit-styles.css b/UI/css/announceit-styles.css
@@ -2,7 +2,7 @@
 :root{
 --white-color: rgb(228, 226, 229);
 --dark-color: rgb(5, 5, 5);
---dark-color-transparent: rgba(5, 5, 5, 0.479);
+--dark-color-transparent: rgba(5, 5, 5, 0.664);
 }
 
 body{
@@ -21,7 +21,9 @@ body{
 
 .container{
     display: flex;
+    flex-direction: row;
 }
+
 a{
     text-decoration: none;
     color: var(--white-color);
@@ -41,6 +43,44 @@ a{
     font-weight: bolder;
 }
 
+.forms-container{
+    background: var(--dark-color-transparent);
+    padding: 40%;
+    width: 50%;
+    margin: auto;
+    margin-top: 10%;
+    height: 30%;
+    margin-left: 60%;
+    border-radius: 10px;
+}
+input{
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #fff;
+    background: transparent;
+    font-size: 16px;
+    font-weight: bolder;
+    padding: 10px 0;
+    outline: none;
+    color: #fff;
+    margin-bottom: 40px;
+}
+button{
+    border: none;
+    color: var(--white-color);
+    line-height: 40px;
+    margin-bottom: 25px;
+    outline: none;
+}
+
+.hand-cursor{
+cursor: pointer;
+}
+
+.entrance-pages{
+    background: url('../img/signin-signup-bg.webp');
+    background-size: cover;
+}
 /* backgrounds */
 .bg-dark{
     background-color: var(--dark-color);
@@ -98,6 +138,9 @@ a{
 .text-30{
     font-size: 30px;
 }
+.text-15{
+    font-size: 15px;
+}
 
 /*navbar*/
 .nav{
@@ -114,7 +157,9 @@ a{
 .text-center{
     text-align: center;
 }
-
+.position-right{
+    margin-left: auto;
+}
 /* borders */
 .white-bordered-1{
     border: 1px solid var(--white-color);

diff --git a/UI/html/signin.html b/UI/html/signin.html
@@ -4,11 +4,69 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Signin page</title>
+    <link rel="stylesheet" href="../css/announceit-styles.css">
+    <title>Signin</title>
 </head>
 <body>
-    <div>
-        <h1>hello world</h1>
+    <div class="entrance-pages">
+        <nav class="container bg-dark padding-10">
+            <div class="brand text-30">
+            <a href="/">
+                <span class="announce-brand">Announce</span>
+                <span class="it-brand">IT</span>
+            </a>
+            </div>
+            <div class="position-right">
+                <a href="#">
+                    Help
+                </a>
+            </div>
+        </nav>
+            <div class="bg-dark-transparent width-20 padding-10 forms-container">
+            <form class="">
+            <div>
+              <h3 className="text-center text-success">Signin here</h3>
+              <hr />
+
+              <div>
+                <label for="signin-email">
+                  <span class="hand-cursor">Your Email</span>
+                  <input
+                    type="text"
+                    id="signin-email"
+                    placeholder="Eg.: [email protected]"
+                  />
+                </label>
+              </div>
+              <div>
+                <label class="for="signin-password">
+                  <span className="col-md-4 hand-cursor">Your password</span>
+                  <input
+                    type="password"
+                    id="signin-password"
+                    placeholder="Eg.: myp3a$$%sSwoRD"
+                  />
+                </label>
+              </div>
+              <div>
+
+                  <a href="user-profile.html">
+                    <button
+                  type="button"
+                  class="hand-cursor rounded-corner-30 width-100 bg-dark-transparent text-center text-15"
+                >Signin</button>
+                  </a>
+
+              </div>
+              <div>
+                <span class="margin-left-5">
+                    You don't have account yet? 
+                    <a href="signup.html">Signup</a>
+                </span>
+              </div>
+            </div>
+            </form>
+        </div>
     </div>
 </body>
 </html>
diff --git a/UI/html/user-profile.html b/UI/html/user-profile.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>User Profile</title>
+</head>
+<body>
+   <h1>Hello, this is a user profile</h1> 
+</body>
+</html>
diff --git a/UI/img/signin-signup-bg.webp b/UI/img/signin-signup-bg.webp