Added Sign in Page

Made the css for the sign in page! Feel free to edit for the backend stuff
Rayliable · Mar 20, 2024 · b11f903 · b11f903
1 parent c673b9f
commit b11f903
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 0 deletions.
diff --git a/SignIn/index.html b/SignIn/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+    <header>
+        <div class="left-header">
+            <img src="portfolioLogo.png" alt="Logo">
+            <h1>Sign Up</h1>
+        </div>
+        <div class="user">
+            <p>Username</p>
+            <img src="userIcon.png" alt="User Icon">
+        </div>
+    </header>
+    <main>
+        <div class="left">
+            <h2>Create An Account</h2>
+            <form>
+                <label for="username">Username</label>
+                <input type="text" id="username">
+                <label for="email">Email</label>
+                <input type="email" id="email">
+                <label for="password">Create a Password</label>
+                <input type="password" id="password">
+                <label for="confirm-password">Confirm password</label>
+                <input type="password" id="confirm-password">
+                <p>* Minimum 8 characters</p>
+                <label for="terms">Accept Terms and Conditions</label>
+                <input type="checkbox" id="terms">
+                <button>SIGN UP</button>
+            </form>
+        </div>
+        <div class="right">
+            <h2>Already a User?</h2>
+            <p>Click here to log in</p>
+            <div class="images">
+                <img src="image1.png" alt="Image 1">
+                <img src="image2.png" alt="Image 2">
+                <img src="image3.png" alt="Image 3">
+            </div>
+            <button>LOG IN</button>
+        </div>
+    </main>
+    <footer>
+        <button>←</button>
+        <button>ABOUT</button>
+        <button>FAQ</button>
+        <button>ACCOUNT</button>
+        <button>TERMS</button>
+    </footer>
+</body>
+</html>
diff --git a/SignIn/portfolioLogo.png b/SignIn/portfolioLogo.png
diff --git a/SignIn/portfolioNameLogo.png b/SignIn/portfolioNameLogo.png
diff --git a/SignIn/styles.css b/SignIn/styles.css
@@ -0,0 +1,184 @@
+body {
+    position: relative;
+
+    margin: 0;
+    background-color: #02C4B5;
+
+    /*this forcves it to be 1920 1080, not sure if its a good idea though*/
+    width: 1920px;
+    height: 1080px;
+}
+
+header {
+    background-color: #2B2525;
+    height: 108px;
+    width: 1920px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+}
+
+.left-header {
+    /* took me longer than it should have tbh */
+    display: flex;
+    align-items: center;
+}
+
+.left-header h1 {
+    margin-left: 30px;
+}
+
+header img {
+    height: 80px;
+    width: auto;
+}
+
+header h1 {
+    color: #FFFFFF;
+    font-family: 'Rockwell';
+    font-size: 54px;
+    text-align: left;
+    margin-left: 10px;
+
+}
+
+header .user {
+    display: flex;
+    align-items: center;
+}
+
+header .user p {
+    color: #FFFFFF;
+    font-family: 'Rockwell';
+    font-size: 18px;
+    margin-right: 10px;
+}
+
+main {
+
+    display: flex;
+    justify-content: space-between;
+    height: 660px;
+    margin-top: 75px;
+    margin-left: 110px;
+}
+
+main .left {
+    position: relative;
+    text-align: left;
+}
+
+main .left::after {
+    /* pain */
+    content: "";
+    position: absolute;
+    height: 600px;
+    border-right: 8px solid #EFFFC8;
+    top: 70px;
+    right: -475px; /* PUNCHNIG A HOLE IN THE CIELING ****WHHHYYY**** IS THAT THE RIGHT ANSWER */
+
+}
+
+main .left h2 {
+    color: #EFFFC8;
+    font-family: 'Rockwell';
+    font-size: 50px;
+}
+
+main .left form label {
+    color: #100B00;
+    font-family: 'Rockwell';
+    font-size: 19px;
+}
+
+main .left form input {
+    height: 38px;
+    width: 300px;
+    border: 2px solid #CCF5AC;
+    background-color: #02C4B5;
+    margin-bottom: 18px;
+    display: block;
+    font-size: 18px;
+    outline: none;
+}
+main .left form input[type="checkbox"] {
+    width: 30px;
+    height: 30px;
+}
+
+main .left form button {
+    border-radius: 40px;
+    width: 290px;
+    height: 64px;
+    background-color: #100B00;
+    color: #FFFFFF;
+    font-family: 'Rockwell';
+    font-size: 31px;
+    margin-top: 50px;
+    border: none; /*default border did kinda look cool tho */
+}
+
+main .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-top: 100px;
+    margin-right: 200px;/*ngl didnt know how to center it naturally */
+}
+
+main .right h2 {
+    color: #EFFFC8;
+    font-family: 'Rockwell';
+    font-size: 50px;
+    margin-bottom: 30px;
+}
+
+main .right p {
+    color: #EFFFC8;
+    font-family: 'Rockwell';
+    font-size: 20px;
+    margin-bottom: 130px;
+}
+
+main .right .images img {
+    width: 111px;
+    height: 85px;
+    margin: 0 30px;
+}
+
+main .right button {
+    width: 275px;
+    border-radius: 40px;
+    border: none;
+    height: 50px;
+    background-color: #CCF5AC;
+    color: #100B00;
+    font-family: 'Rockwell';
+    font-size: 30px;
+    margin-top: 100px;
+}
+
+footer {
+    position: absolute;
+    bottom: 0;
+    background-color: #2B2525;
+    height: 108px;
+    width: 1920px;
+    display: flex;
+    justify-content: flex-start;
+    padding: 0 20px;
+}
+
+footer button {
+    color: #FFFFFF;
+    font-family: 'Rockwell';
+    font-size: 35px;
+    font-weight: bold;
+    background: none;
+    border: none;
+    margin-right: 114px;
+
+}