NoroffFEU · OJOverby · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 node_modules/
 .DS_Store
-dist/
+dist/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,41 @@
 # css-frameworks-ca
-Replace this text with a description of your social media project.
+Pictroid is a social media site from photo enthusiast. It is a site where you can post your photos and share them with enthusiast who enjoy the photos more then the profiles who is sharing them. The site is a part of learning bootstrap so I tried to use as little custom css as possible on this site.
+
+The design is trying to stay inline with other social media sites for easy usability for the user. The site has a top header on desktop but a footer navbar for mobile, for easier accessibilty when using thumbs on mobile devices. 
+
+
+## Built With
+
+- HTML
+- CSS
+- Boostrap
+- SASS
+
+### Installing
+
+
+1. Clone the repo:
+
+```bash
+git clone https://github.com/OJOverby/css-frameworks.git
+```
+
+2. Install the dependencies:
+
+```
+npm install bootstrap@5.2.0
+npm install -D sass
+npm install -D live-server
+
+```
+### Running
+
+To run the app, run the following commands:
+
+```bash
+npm run start
+```
+
+## Contact
+
+[Email](mailto:mail@olejorgen.no)
diff --git a/dist/css/styles.css b/dist/css/styles.css
diff --git a/dist/css/styles.css.map b/dist/css/styles.css.map
diff --git a/feed/index.html b/feed/index.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Feed - Pictroid</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
+      crossorigin="anonymous"
+    />
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="../dist/css/styles.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-md bg-lightblue fixed-top">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="../feed/index.html"
+          ><i class="bi bi-camera"></i> Pictroid</a
+        >
+        <div class="collapse navbar-collapse d-none d-lg-flex" id="navbarNav">
+          <ul class="navbar-nav me-auto">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                aria-current="page"
+                href="../feed/index.html"
+                >Home</a
+              >
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                aria-current="page"
+                data-bs-toggle="collapse"
+                href="#postCollapse"
+                role="button"
+                aria-expanded="false"
+                aria-controls="postCollapse"
+                >New Post</a
+              >
+            </li>
+          </ul>
+          <form class="d-flex me-3">
+            <input
+              class="form-control me-2"
+              type="search"
+              placeholder="Search"
+              aria-label="Search"
+            />
+          </form>
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link p-0" href="../profile/index.html"
+                ><img
+                  src="/images/abouthero.jpg"
+                  class="rounded-circle profile-icon"
+                  alt="Profile picture"
+              /></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <div class="collapse fixed-top mt-5" id="postCollapse">
+      <div class="bg-lightblue p-3">
+        <div class="row justify-content-center">
+          <div class="col-lg-6">
+            <form class="d-flex flex-column">
+              <div class="mb-3">
+                <label for="postInfo" class="form-label"></label>
+                <textarea
+                  class="form-control"
+                  rows="3"
+                  placeholder="Image text"
+                ></textarea>
+              </div>
+              <div class="mb-3">
+                <label for="postImage" class="form-label">Upload Image</label>
+                <input
+                  type="file"
+                  class="form-control"
+                  id="postImage"
+                  accept="image/*"
+                />
+              </div>
+              <button type="submit" class="btn btn-primary">Post</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="collapse fixed-top mt-5" id="searchCollapse">
+      <div class="bg-lightblue p-3">
+        <form class="d-flex">
+          <input
+            class="form-control me-2"
+            type="search"
+            placeholder="Search"
+            aria-label="Search"
+          />
+        </form>
+      </div>
+    </div>
+
+    <nav class="navbar fixed-bottom bg-lightblue d-md-none">
+      <div class="container-fluid d-flex justify-content-around">
+        <a class="nav-link text-center" href="../feed/index.html">
+          <i class="bi bi-house-fill"></i><br />Home
+        </a>
+        <a
+          class="nav-link text-center"
+          href="#searchCollapse"
+          data-bs-toggle="collapse"
+          role="button"
+          aria-expanded="false"
+          aria-controls="searchCollapse"
+        >
+          <i class="bi bi-search"></i><br />Search
+        </a>
+        <a
+          class="nav-link text-center"
+          href="#postCollapse"
+          data-bs-toggle="collapse"
+          href="#postCollapse"
+          role="button"
+          aria-expanded="false"
+          aria-controls="postCollapse"
+        >
+          <i class="bi bi-plus-circle-fill"></i><br />New Post
+        </a>
+
+        <a class="nav-link text-center" href="../profile/index.html">
+          <i class="bi bi-person-fill"></i><br />Profile
+        </a>
+      </div>
+    </nav>
+
+    <div class="row w-100 mt-1 m-0">
+      <div class="container-fluid col-10 mt-6 d-flex justify-content-end">
+        <div class="dropdown">
+          <button
+            class="btn btn-primary dropdown-toggle"
+            type="button"
+            id="sortDropdown"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            Sort by
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="sortDropdown">
+            <li><a class="dropdown-item" href="#">Newest</a></li>
+            <li><a class="dropdown-item" href="#">Oldest</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="container-fluid col-10 mt-4">
+        <div class="row">
+          <div class="col-12 col-md-4 p-1 hover-element position-relative">
+            <img class="img-fluid" src="/images/placeholder.jpeg" alt="" />
+            <div class="hidden">
+              <h3>Username</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </div>
+          </div>
+          <div class="col-12 col-md-4 p-1 hover-element position-relative">
+            <img class="img-fluid" src="/images/placeholder.jpeg" alt="" />
+            <div class="hidden">
+              <h3>Username</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </div>
+          </div>
+          <div class="col-12 col-md-4 p-1 hover-element position-relative">
+            <img class="img-fluid" src="/images/placeholder.jpeg" alt="" />
+            <div class="hidden">
+              <h3>Username</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </div>
+          </div>
+          <div class="col-12 col-md-4 p-1 hover-element position-relative">
+            <img class="img-fluid" src="/images/placeholder.jpeg" alt="" />
+            <div class="hidden">
+              <h3>Username</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </div>
+          </div>
+          <div class="col-12 col-md-4 p-1 hover-element position-relative">
+            <img class="img-fluid" src="/images/placeholder.jpeg" alt="" />
+            <div class="hidden">
+              <h3>Username</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </div>
+          </div>
+          <div class="col-12 col-md-4 p-1 hover-element position-relative">
+            <img class="img-fluid" src="/images/placeholder.jpeg" alt="" />
+            <div class="hidden">
+              <h3>Username</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/images/abouthero.jpg b/images/abouthero.jpg
diff --git a/images/alif-ngoylung-jg-6ARMiaPM-unsplash.jpg b/images/alif-ngoylung-jg-6ARMiaPM-unsplash.jpg
diff --git a/images/placeholder.jpeg b/images/placeholder.jpeg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto