assembler-institute · AdrianSerranoRojas · Dec 1, 2021 · Dec 1, 2021 · Dec 1, 2021 · Dec 1, 2021
diff --git a/Index.html b/Index.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
+      defer
+    ></script>
+    <!--script boostrap-->
+    <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>
+    <!--link css boostrap-->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="/assets/style.css" />
+    <link rel="stylesheet" href="assets\modals.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@1,600&family=Cairo:wght@300;400&family=Kreon:wght@300;700&family=Lato:wght@300&family=Literata:ital@1&display=swap"
+      rel="stylesheet"
+    />
+    <script src="/assets/script.js" defer></script>
+    <title>Blog Api</title>
+  </head>
+  <body>
+    <!--HEADER-->
+    <header class="header">
+      <div class="menu">
+        <nav class="navbar navbar-light bg-light">
+          <div class="container-fluid">
+            <span class="navbar-text">
+              <ul>
+                <li>Home</li>
+                <li>Contact</li>
+                <li>FAQ</li>
+              </ul>
+            </span>
+          </div>
+        </nav>
+      </div>
+    </header>
+    <!--BLOG SECTION-->
+    <section class="myBlog">
+      <div class="container">
+        <div class="banner-Blog">
+          <div class="banner-text">
+            <h1 class="textBlog">My Blog</h1>
+            <h4 class="textBlog-1">Blog with Api</h4>
+            <h4 class="textBlog-1">By: Carla & Adrian</h4>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!--Container Carusel-->
+    <section class="carusel-a">
+      <div>
+        <!--Carusel -->
+        <div class="carousel-inner-a">
+          <div class="carousel-item-a">
+            <!--contenedor de cartas del carrusel-->
+            <div class="btnPreNext">
+              <button
+                class="btn btn-outline-primary"
+                id="carousel-control-prev-a"
+              >
+                Previous
+              </button>
+              <button
+                class="btn btn-outline-primary"
+                id="carousel-control-next-a"
+              >
+                Next
+              </button>
+            </div>
+            <div class="row row-cols-1 row-cols-md-3 g-4" id="container-card-a">
+              <!--espacio para cartas de function updatePostList JS-->
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Modal -->
+      <div
+        class="modal fade"
+        id="staticBackdrop"
+        data-bs-backdrop="static"
+        data-bs-keyboard="false"
+        tabindex="-1"
+        aria-labelledby="staticBackdropLabel"
+        aria-hidden="true"
+      >
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h4 class="modal-title" id="staticBackdropLabel">Description</h4>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div id="modal-content" class="modal-body"></div>
+            <div class="modal-footer">
+              <button
+                type="button"
+                id="closeCard"
+                class="btn btn-secondary"
+                data-bs-dismiss="modal"
+              >
+                Close
+              </button>
+              <button
+                id="comments-button"
+                type="button"
+                class="btn btn-primary-com"
+              >
+                Load Comments
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="modal-Edit">
+      <!-- Modal -->
+      <div
+        class="modal fade"
+        id="exampleModalEdit"
+        tabindex="-1"
+        aria-labelledby="exampleModalLabel"
+        aria-hidden="true"
+      >
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h4 class="modal-title" id="exampleModalLabel">Posts Edit</h4>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="modal-body">
+              <div class="mb-3">
+                <label for="exampleFormControlInput1" class="form-label"
+                  >Title:</label
+                >
+                <input
+                  type="text"
+                  class="form-control"
+                  id="exampleFormControlInput1"
+                />
+              </div>
+              <div class="mb-3">
+                <label for="exampleFormControlTextarea1" class="form-label"
+                  >Comment:</label
+                >
+                <textarea
+                  class="form-control"
+                  id="exampleFormControlTextarea1"
+                  rows="3"
+                ></textarea>
+              </div>
+            </div>
+            <div class="modal-footer" id="footerCard">
+              <button
+                type="button"
+                id="btnCloseEdit"
+                class="btn btn-secondary btnCloseEdit"
+                data-bs-dismiss="modal"
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                id="btnSaveEdit"
+                value=""
+                class="btn btn-primary"
+              >
+                Save changes
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/assets/img/cross-delete-or-close-circular-button-interface-symbol.png b/assets/img/cross-delete-or-close-circular-button-interface-symbol.png
diff --git a/assets/img/pen.png b/assets/img/pen.png
diff --git a/assets/img/pencil-on-a-square-outline.png b/assets/img/pencil-on-a-square-outline.png
diff --git a/assets/img/postImg/post-img-1.jpeg b/assets/img/postImg/post-img-1.jpeg
diff --git a/assets/img/postImg/post-img-10.jpeg b/assets/img/postImg/post-img-10.jpeg
diff --git a/assets/img/postImg/post-img-11.jpeg b/assets/img/postImg/post-img-11.jpeg
diff --git a/assets/img/postImg/post-img-12.jpeg b/assets/img/postImg/post-img-12.jpeg
diff --git a/assets/img/postImg/post-img-2.jpeg b/assets/img/postImg/post-img-2.jpeg
diff --git a/assets/img/postImg/post-img-3.jpeg b/assets/img/postImg/post-img-3.jpeg
diff --git a/assets/img/postImg/post-img-4.jpeg b/assets/img/postImg/post-img-4.jpeg
diff --git a/assets/img/postImg/post-img-5.jpeg b/assets/img/postImg/post-img-5.jpeg
diff --git a/assets/img/postImg/post-img-6.jpeg b/assets/img/postImg/post-img-6.jpeg
diff --git a/assets/img/postImg/post-img-7.jpeg b/assets/img/postImg/post-img-7.jpeg
diff --git a/assets/img/postImg/post-img-8.jpeg b/assets/img/postImg/post-img-8.jpeg
diff --git a/assets/img/postImg/post-img-9.jpeg b/assets/img/postImg/post-img-9.jpeg
diff --git a/assets/img/user imgs/user-icon.png b/assets/img/user imgs/user-icon.png
diff --git a/assets/img/user imgs/user1(1).jpg b/assets/img/user imgs/user1(1).jpg
diff --git a/assets/img/user imgs/user1(2).jpg b/assets/img/user imgs/user1(2).jpg
diff --git a/assets/img/user imgs/user1(3).jpg b/assets/img/user imgs/user1(3).jpg
diff --git a/assets/modals.css b/assets/modals.css
@@ -0,0 +1,74 @@
+:root {
+  --color-ppl: #e4dfda;
+  --color-secundario: #3c7595;
+  --color-details: #4595a5;
+  --color-details2: #f89335;
+}
+body,
+header {
+  background-color: var(--color-ppl);
+  font-family: "Literata", serif;
+}
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 150%;
+  pointer-events: auto;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+  outline: 0;
+  cursor: pointer;
+}
+.form-control {
+  display: block;
+  width: 95%;
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.modal-footer {
+  display: flex;
+}
+#text-com {
+  vertical-align: text-top;
+}
+
+/*MODAL EDIT*/
+#footerCard {
+  display: inline-flex;
+  flex-direction: row;
+}
+.btn-secondary,
+.btnCloseEdit {
+  margin-top: 3%;
+  margin-right: 10%;
+  color: #fff;
+  background-color: var(--color-details2);
+  border-color: #6c757d;
+}
+/*COMMENTS MODAL*/
+.modal-header {
+  display: flex;
+  flex-direction: column-reverse;
+}
+/*BTN COMMENTS*/
+.btn-primary-com {
+  margin-top: 3%;
+  vertical-align: text-bottom;
+  color: var(--color-ppl);
+  background-color: var(--color-secundario);
+  text-align: center;
+}