VeronicaOS · VeronicaOS · Jan 23, 2024 · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024
diff --git a/README.md b/README.md
@@ -1,2 +1,47 @@
-# css-frameworks-ca
-Replace this text with a description of your social media project.
+# BookBlend (css-frameworks-ca)
+
+For this project I was tasked to create a social media application and I could choose the design and the topic. I chose to create a page for book lovers and named it BookBlend. This is a social media application for all the book lovers who want to share their passion and thoughts on books.
+
+## Description
+
+This was the first project where we were tasked to use Bootstrap and SASS. I started off with a rough wireframe and noted down colours, then got started on the "bones" in HTML and then I added everything Bootstrap and SASS has to offer to make this site liked I imagined.
+
+## Brief
+
+You are tasked with creating 3 pages in HTML using Bootstrap and SASS. The goal is to apply knowledge of Bootstrap and SASS to build a responsive front end for a social media application.
+
+### Site architecture
+
+-   Authentication page (/index.html)
+-   Feed Page (/feed/index.html)
+-   Profile page (/profile/index.html)
+
+## Built With
+
+-   HTML
+-   Bootstrap
+-   SASS
+
+## Getting Started
+
+### Installing
+
+1. Clone the repo:
+
+```bash
+git clone git@github.com:VeronicaOS/css-frameworks.git
+```
+
+### Running
+
+To run the app, run the following commands:
+
+Add the Live Server extension in VS Code or simply drag the index.html file into an open browser.
+
+## Contact
+
+My email address:
+
+```bash
+verols51029@stud.noroff.no
+```
diff --git a/feed/index.html b/feed/index.html
diff --git a/images/Screenshot 2023-12-17 at 16.48.47 (1).png b/images/Screenshot 2023-12-17 at 16.48.47 (1).png
diff --git a/images/books.jpg b/images/books.jpg
diff --git a/images/pngfind.com-user-icon-png-938537.png b/images/pngfind.com-user-icon-png-938537.png
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="This is the login page for the social media application BookBlend."
+        />
+        <title>Veronica O. Svensson | BookBlend</title>
+        <link rel="stylesheet" href="dist/css/index.css" />
+    </head>
+    <body class="vh-100 text-white bg-secondary">
+        <header>
+            <div class="container-fluid py-3 bg-primary">
+                <h1 class="text-center m-0 fs-4">BookBlend</h1>
+            </div>
+        </header>
+        <main>
+            <div
+                class="container p-5 d-flex flex-column justify-content-center align-items-center"
+            >
+                <h2 class="text-black mt-5">Welcome</h2>
+                <form action="/profile/" class="mt-5 p-4 rounded-2 bg-primary">
+                    <div class="mb-3">
+                        <label for="exampleInputEmail1" class="form-label"
+                            >Email address</label
+                        >
+                        <input
+                            type="email"
+                            class="form-control"
+                            id="exampleInputEmail1"
+                            aria-describedby="emailHelp"
+                            required
+                        />
+                        <div id="emailHelp" class="form-text">
+                            We'll never share your email with anyone else.
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="exampleInputPassword1" class="form-label"
+                            >Password</label
+                        >
+                        <input
+                            type="password"
+                            class="form-control"
+                            id="exampleInputPassword1"
+                            minlength="8"
+                            required
+                        />
+                        <a id="passwordHelp" class="form-text" href="#"
+                            >Forgot your password?</a
+                        >
+                    </div>
+                    <button type="submit" class="btn btn-customwhite mt-2">
+                        Log in
+                    </button>
+                </form>
+            </div>
+        </main>
+        <footer></footer>
+    </body>
+</html>