NoroffFEU · flanderos · Apr 5, 2024 · Apr 14, 2024 · Apr 14, 2024 · May 5, 2024
diff --git a/README.md b/README.md
@@ -1,2 +1,10 @@
 # css-frameworks-ca
-Replace this text with a description of your social media project.
+
+##### This is a simple 3 page social media site built with html and bootstrap. No functionality. 
+
+## Installation
+
+#### git clone
+#### git npm install
+#### npm start
+
diff --git a/feed.html b/feed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/media/avatar.jpg b/media/avatar.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
   "version": "0.0.1",
   "description": "A starting point for the CSS Frameworks CA project",
   "scripts": {
-    "test": "echo \"We will learn more about testing in the Workflow course\" && exit 1"
+    "test": "echo \"We will learn more about testing in the Workflow course\" && exit 1",
+    "build": "sass src/scss/main.scss:public/css/main.css --style compressed --watch"
+
   },
   "repository": {
     "type": "git",
@@ -22,5 +24,9 @@
   "bugs": {
     "url": "https://github.com/NoroffFEU/css-frameworks-ca/issues"
   },
-  "homepage": "https://github.com/NoroffFEU/css-frameworks-ca#readme"
+  "homepage": "https://github.com/NoroffFEU/css-frameworks-ca#readme",
+  "dependencies": {
+    "bootstrap": "^5.3.3",
+    "sass": "^1.74.1"
+  }
 }
diff --git a/profile.html b/profile.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/public/css/main.css b/public/css/main.css
@@ -0,0 +1 @@
+body{background-color:#fff}/*# sourceMappingURL=main.css.map */
diff --git a/public/css/main.css.map b/public/css/main.css.map
diff --git a/src/feed.html b/src/feed.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="/public/css/main.css">
+        <title>CSS Course Assignment</title>
+    </head>
+<body>
+    <h1 class="display-4 text-center mt-4"">CSS framework CA, Social Media Page</h1>
+    <div class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link" href="profile.html">Profile</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">Log out</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="container mt-4">
+        <div class="card postbox shadow">
+            <div class="card-body">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="posttags">
+                        <span class="badge badge-primary">Tags: Cool story, Nice</span>
+                    </div>
+                    <button class="btn btn-sm btn-outline-secondary editbutton">Edit post</button>
+                </div>
+                <h2 class="card-title postpreviewheading">This is a post</h2>
+                <p class="card-text postpreviewtext">Here goes the text, maybe an image also?</p>
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="postdatetime">Posted: 16.08.1987</div>
+                    <div class="likecounter">Reactions: 2 likes</div>
+                </div>
+                <div class="d-flex justify-content-between align-items-center">
+                    <button class="btn btn-sm btn-outline-primary thumbsup" data-post-id="postId">Like <i class="far fa-thumbs-up"></i></button>
+                    <button class="btn btn-sm btn-outline-primary commentbutton" onclick="toggleComments(this)">Comment <i class="far fa-comment"></i></button>
+                    <button class="btn btn-sm btn-outline-danger deletebutton">Delete <i class="far fa-trash"></i></button>
+                </div>
+                <div class="commentsection mt-3">
+                    <textarea class="form-control mb-2 commentbox" placeholder="Write a comment..."></textarea>
+                    <button class="btn btn-primary btn-sm commentpostbutton">Post Comment</button>
+                    <div class="previouscomments mt-2">
+                        <div class="comment">
+                            <strong>Geir Arne:</strong> Nice post!
+                        </div>
+                        <div class="comment">
+                            <strong>Durek:</strong> Great content!
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		body{background-color:#fff}/# sourceMappingURL=main.css.map /