first commit

mishalsheza · Feb 3, 2024 · 6eec295 · 6eec295
commit 6eec295
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 0 deletions.
diff --git a/SST_Logo.png b/SST_Logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
+    <title>Document</title>
+</head>
+<body>
+    <div id="navbar">
+        <div class="logo">
+            <img src="/home/sheza/finals/SST_Logo.png">
+       </div>
+       <div class="logo2">
+            <img src="/home/sheza/finals/scaler-social.png">
+        </div>
+    </div>
+
+    <div class="post-container">
+        <div class="post">
+            <h2>Post your Thoughts here!</h2>
+            <div class="textArea">
+            <input type= "text" placeholder="Enter your Thoughts here!">
+        </div>
+            <button class="postbtn">Post</button>
+
+
+
+        </div>
+        </div>
+
+    <div class="main-cont">
+        <div class="feed-ticket">
+
+        </div>
+    </div>
+
+
+
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/scaler-social.png b/scaler-social.png
diff --git a/script.js b/script.js
@@ -0,0 +1,21 @@
+let post=document.querySelector(".post");
+post.addEventListener("click",function(e){
+    console.log("button was clicked");
+    generateFeed(user);
+})
+textArea.addEventListener('keydown',function(e){
+    generateTicket(user); // generating ticket from UI 
+        textArea.value = "";
+        modal.style.display = 'none'
+
+})
+
+function generateFeed(){
+let feedCont = document.createElement("div");
+feedCont.className = "feed-cont";
+feedCont.innerHTML = `<div class="name ${user}"></div>
+                        <div class="heart"><i class="fa-solid fa-heart"></i></div>
+                        <div class="comment"><i class="fa-regular fa-comment"></i></div>`
+console.log(feedCont)
+mainCont.appendChild(feedCont);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,91 @@
+*{
+    margin:0;
+    padding: 0;
+}
+
+#navbar{
+    background-color: white;
+    height:100px;
+    width:100vw;
+    z-index:1;
+    position: fixed;
+    border-bottom: 3px solid lightslategrey;
+
+}
+.logo{
+    margin-left: 100px;
+    margin-top: 30px;
+
+
+
+}
+.logo2{
+    margin-left: 80vw;
+    margin-bottom: 100vh;
+
+}
+.post-container{
+    height:100vh;
+    width:50%;
+    border-left: 2px solid black;
+    background-color:powderblue;
+    display: flex;
+    z-index: 2;
+
+}
+h2{
+    color: black;
+    margin-top: 30px;
+    margin-left: 15px;
+
+
+}
+.post{
+    height:300px;
+    width:700px;
+    background-color: whitesmoke;
+    border: 2px solid lightgray;
+    margin-top: 50vh;
+    margin-left: 40px;
+}
+.main-cont{
+    margin:2rem 0rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: space-evenly;
+}
+
+.feed-cont{
+    height: 10rem;
+    width: 15rem;
+    background-color:cornsilk;
+    position: relative;
+}
+.textArea input{
+    height:100px;
+    width:500px;
+    margin-left: 80px;
+    margin-top: 25px;
+    font-size: 20px;
+
+}
+.postbtn{
+    height:40px;
+    width:80px;
+    border-radius:25px;
+    background-color: rgb(26, 26, 121);
+    color: white;
+    margin-left: 500px;
+    margin-top: 15px;
+    font-size: 20px;
+}
+.feed-ticket{
+    height: 100vh;
+    width:60vw;
+    float:right;
+    background-color: black;
+    z-index: auto;
+
+
+}