AndreyDiDev · JuanPCF1 · Feb 19, 2023 · Feb 19, 2023 · Feb 19, 2023 · Feb 19, 2023
diff --git a/login.html b/login.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="/Users/zaidpandit/Documents/GitHub/CalgaryHacksProjectX/style.css">
+    </head>
+    <body>
+        <div class="main">
+            <div id="loginTitle">
+                ProjectX
+            </div>
+            <div id="form-container">
+                <form>
+                    <div>
+                        <input type="text" id="username" placeholder="Username">
+                    </div>
+                    <div>
+                        <input type="text" id="password" placeholder="Password">
+                    </div>
+                </form>
+            </div>
+            <div>
+                <button id="signin">Login</button>
+            </div>
+
+            <div id="signup">Don't have an account? <a href="#">Sign up!</a></div>
+
+        </div>
+    </body>
+</html>
diff --git a/main-page.html b/main-page.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href="stylemain.css" rel="stylesheet">
+    </head>
+    <body>
+        <header>
+            <div class="container">
+                <h1 class="left">
+                    PROJECTx
+                    <span class="subheading">Connecting UofC</span>
+                </h1>
+
+                <!-- Site Navigation -->
+                <nav class="right">
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">Schedule</a></li>
+                        <li><a href="#">About</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <div class="post-container">
+            <div class="post">
+              <img src="post1.jpg" alt="Post 1">
+              <div class="caption">This is post 1</div>
+              <div class="likes">50 likes</div>
+            </div>
+            <div class="post">
+              <img src="post2.jpg" alt="Post 2">
+              <div class="caption">This is post 2</div>
+              <div class="likes">25 likes</div>
+            </div>
+            <!-- more posts here -->
+          </div>
+          <script src="/Users/zaidpandit/Documents/GitHub/CalgaryHacksProjectX/mainPage.js"></script>   
+    </body>
+</html>
diff --git a/mainPage.js b/mainPage.js
@@ -0,0 +1,12 @@
+// const postContainer = document.querySelector('.post-container');
+
+// for (let i = 0; i < 10; i++) {
+//   const post = document.createElement('div');
+//   post.classList.add('post');
+//   post.innerHTML = `
+//     <img src="post${i+1}.jpg" alt="Post ${i+1}">
+//     <div class="caption">This is post ${i+1}</div>
+//     <div class="likes">${Math.floor(Math.random()*100)} likes</div>
+//   `;
+//   postContainer.appendChild(post);
+// }
diff --git a/style.css b/style.css
@@ -0,0 +1,46 @@
+html{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.main{
+    margin-top: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: black;
+    background-color: #FBCE2E;
+    width: 350px;
+    height: 350px;
+}
+
+/* #loginTitle{
+   margin-bottom: 20px;
+} */
+#loginTitle{
+    font-size: 30px;
+}
+#form-container{
+    margin-top: 100px;
+    /* margin-bottom: 100px; */
+}
+#username,
+#password{
+    margin-bottom: 10px;
+    border: none;
+    border-radius: 5px;
+    padding: 8px;
+}
+#signin{
+    border-radius: 5px;
+    padding: 10px 60px;
+    border: none;
+    margin-bottom: 70px;
+    background-color: beige;
+}
+#signin:hover{
+    cursor: pointer;
+    background-color: #cfb65c;
+}
diff --git a/stylemain.css b/stylemain.css
@@ -0,0 +1,103 @@
+.post-container {
+    border: 1px solid black;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .post {
+    display: inline-block;
+    border: 1px solid green;
+    width: 33.33%;
+    height: 100%;
+    text-align: center;
+    padding: 10px;
+    box-sizing: border-box;
+    min-height: 400px;
+    min-width: 550px;
+  }
+
+  .post img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+  }
+
+  .caption {
+    margin-top: 10px;
+  }
+
+  .likes {
+    margin-top: 5px;
+    font-size: 0.8em;
+    color: gray;
+  }
+
+  .subheading {
+    display: block;
+    font-size: 1rem;
+    color: #d0aaff;
+}
+header{
+    padding: 1.25em 0;
+    background-color: #f4c818;
+    justify-content: space-between;
+    align-items: center;
+}
+.container {
+    width: 90%;
+    max-width: 800px;
+    margin: 0 auto;
+    justify-content: space-between;
+    align-items: center;
+}
+nav a {
+    color: rgb(73, 61, 61);
+    text-decoration: none;
+    font-size: 1.125rem;
+    padding: 0.85em 0;
+    display: block;
+}
+a {
+    color: #ef5839;
+    text-decoration: underline dotted; 
+}
+
+a:hover, 
+a:active {
+    color: black;
+}
+.container {
+    width: 100%;
+    overflow: hidden; /* This prevents the container from collapsing */
+  }
+
+  .left {
+    float: left;
+    width: 50%; /* Set the width of each div to 50% */
+  }
+
+  .right {
+    float: right;
+    width: 50%;
+  }
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}
+header .container,
+nav ul {
+    display: flex;
+}
+
+nav li {
+    margin-left: 1.25em;
+}
+h1{
+    color: rgb(66, 66, 66);
+}
+.subheading{
+     color: rgb(66, 66, 66);
+}