assembler-institute · Sofianct · May 12, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
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
@@ -48,13 +48,15 @@ To create a fork on GitHub is as easy as clicking the “fork” button on the r
 
 \* API
 
-## Project delivery
 
-To deliver this project you must follow the steps indicated in the document:
+## Preview
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+![Blog Main Page.](./src/img/blogMain.png "BlogMain")
+![Blog Post.](./src/img/blogPost.png "BlogPost")
+![Blog Post Comments.](./src/img/blogPostComment.png "BlogPostComments")
 
-## Resources
+## Team Members
 
-- [JSON server](https://github.com/typicode/json-server)
-- [Official Bootstrap](https://getbootstrap.com/)
+\* [Jesús Herrera](https://github.com/Jesusjha/).
+
+\* [Sofía Romera](https://github.com/Sofianct/).
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <title>Blog</title>
+  <link rel="shortcut icon" href="./img/img.png" type="image/x-icon">
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+    crossorigin="anonymous"></script>
+  <script src='./src/js/main.js' type="module"></script>
+  <link rel="stylesheet" href="./src/css/style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
+</head>
+
+<body>
+  <header class="container header__logo">
+    <h1 class="row">
+      <p class="col-5 header__logo--star">STAR</p>
+      <img class="col-2 header__logo--icon" src="./src/img/planet-logo.png" alt="">
+      <p class="col header__logo--blog">BLOG</p>
+    </h1>
+  </header>
+  <main>
+    <div id="cards-container" class="body__card--post">
+    </div>
+    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modal__title-content">Modal title</h5>
+          </div>
+          <div id="modal__body-content" class="modal-body">
+                <!-- Post body -->
+            <p id="user__body--post">
+                <!-- User -->
+            </p>
+          </div>
+          <div class="modal__user--info modal-body">
+            <p id="user__name--post" class="user__name--post"></p>
+            <p id="user__email--post" class="user__email--post"></p>
+          </div>
+          <div class="space__modal--hero--content">
+          <img class="space__modal--hero" src="./src/img/Space_Ghost.svg" alt="Space_Ghost" srcset="">
+          </div>
+          <button class="btn btn-primary btn__comments--users" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"><i class="bi bi-journal-plus"></i> Show comments</button>
+            <div style="min-height: 120px;">
+              <div class="collapse collapse-horizontal" id="collapseWidthExample">
+                  <div id="boxForComments">
+                     <!-- Inject from JS -->
+                  </div>
+
+              </div>
+            </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+  </main>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "blog-with-api",
+  "version": "1.0.0",
+  "description": "`#html` `#css` `#js` `#dom` `#JSON` `#HTTP` `#API` `#Bootstrap` `#master-in-software-development`",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "server": "json-server --watch ./src/data/db.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sofianct/blog-with-api.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Sofianct/blog-with-api/issues"
+  },
+  "homepage": "https://github.com/Sofianct/blog-with-api#readme",
+  "dependencies": {
+    "bootstrap-icons": "^1.8.2",
+    "json": "^11.0.0",
+    "json-server": "^0.17.0"
+  }
+}
diff --git a/src/css/cards.css b/src/css/cards.css
@@ -0,0 +1,28 @@
+.body__card--post {
+    display: flex;
+    flex-direction: column;
+    width: 50rem;
+    height: auto;
+}
+
+.container__card--post {
+    height: 6.7rem;
+    border: none;
+    border-radius: 0.6rem;
+    margin-bottom: 0.7rem;
+    -webkit-box-shadow: 6px 6px 16px -5px rgba(41, 13, 121, 0.2);
+    -moz-box-shadow: 6px 6px 16px -5px rgba(41, 13, 121, 0.2);
+    box-shadow: 6px 6px 16px -5px rgba(41, 13, 121, 0.2);    
+}
+
+.card__title--post {
+
+    font-family: var(--space-font);
+    font-weight: 600;
+    color: var(--secondary-color);
+    text-decoration: none;
+}
+
+.card__title--post:hover {
+    color: var(--tertiary-color);
+}
diff --git a/src/css/modal.css b/src/css/modal.css
@@ -0,0 +1,75 @@
+.modal-content {
+    width: 40rem;
+    height: auto;
+    background: #141E30;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to left, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to left, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+}
+
+.space__modal--hero--content{
+    display: flex;
+    justify-content: flex-end;
+    margin-top: -5rem;
+}
+
+.space__modal--hero {
+    height: 20rem;
+    padding: 0 3rem 2rem 0;
+}
+
+.modal-body {
+    color: #fff;
+    font-family: var(--body-font);
+    font-weight: 300;
+    font-size: 1.2rem;
+}
+
+.modal-title {
+    font-family: var(--space-font);
+    font-size: 1.5rem;
+    color: #fff;
+}
+
+.user__name--post {
+    font-weight: 700;
+    font-size: 1.3rem;
+    margin-bottom: -0.2rem;
+}
+
+.user__email--post {
+    font-weight: 200;
+    font-size: 1.1rem;
+}
+
+.btn__comments--users {
+    width: 12rem;
+    margin: 0 auto;
+    background-color: #c5367d;
+    border: none;
+    animation: boom 1s infinite;
+    color: rgb(255, 255, 255);
+}
+
+@keyframes boom {
+    0% {
+        box-shadow: #c5367d 0 0 0 0;
+    }
+    85% {
+        box-shadow: transparent 0 0 0 0.5rem;
+    }
+}
+
+.btn__comments--users:hover {
+    width: 12rem;
+    margin: 0 auto;
+    background-color: #c5367d;
+    border: none;
+}
+
+.btn__comments--users:focus {
+    width: 12rem;
+    margin: 0 auto;
+    background-color: #c5367d;
+    border: none;
+}