From 3731cabd751b6c0ed4a8a089eea68ed1aeedc3c2 Mon Sep 17 00:00:00 2001
From: Ziedelth <watteaupierre@gmail.com>
Date: Tue, 22 Mar 2022 16:07:39 +0100
Subject: [PATCH] Add icon and change view of row

---
 src/main/webapp/favicon.ico | Bin 0 -> 32742 bytes
 src/main/webapp/index.jsp   |  39 ++++++++++++++++++++++++++++++++++--
 src/main/webapp/js/main.js  |   3 +++
 3 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/main/webapp/favicon.ico
 create mode 100644 src/main/webapp/js/main.js

diff --git a/src/main/webapp/favicon.ico b/src/main/webapp/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..df58ad137015bbb82993984ccc4739eaa6c00afa
GIT binary patch
literal 32742
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

literal 0
HcmV?d00001

diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index d4118c6..d38a7e2 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -14,8 +14,41 @@
         <img class="text-center img-fluid" src="assets/logo.png" alt="FilmFlix logo"/>
     </div>
 
-    <div class="row g-3">
-        <div class="col-lg-3">
+    <div class="row row-cols-lg-4 g-3 d-flex justify-content-center text-center">
+        <div class="col">
+            <div class="border rounded color-border p-2">
+                <h5 class="color-text text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis expedita quaerat? Ad delectus dolorem dolorum excepturi impedit quae recusandae! Alias at aut corporis eius, hic ipsum recusandae sequi velit?</h5>
+                <p class="description mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta necessitatibus sequi. Accusantium architecto corporis, deleniti dolorem eligendi et excepturi fugit id in iste, magni officia quos ut vel velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, numquam quibusdam? Adipisci corporis dicta eos, esse eveniet hic id iusto maxime minima, natus neque nihil, porro quas soluta unde voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto commodi dignissimos dolore ducimus eum fuga hic ipsa laborum minima mollitia, nulla officia quasi recusandae repellendus reprehenderit, sed similique, temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut autem beatae cupiditate hic magnam maxime natus neque odit perferendis porro quaerat quidem repellendus sequi sunt temporibus, ut velit voluptatum!</p>
+
+                <div class="d-flex">
+                    <span class="me-auto text-muted">Il y a 20 minutes</span>
+                    <span class="ms-auto text-muted">1h20min</span>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="border rounded color-border p-2">
+                <h5 class="color-text text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis expedita quaerat? Ad delectus dolorem dolorum excepturi impedit quae recusandae! Alias at aut corporis eius, hic ipsum recusandae sequi velit?</h5>
+                <p class="description mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta necessitatibus sequi. Accusantium architecto corporis, deleniti dolorem eligendi et excepturi fugit id in iste, magni officia quos ut vel velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, numquam quibusdam? Adipisci corporis dicta eos, esse eveniet hic id iusto maxime minima, natus neque nihil, porro quas soluta unde voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto commodi dignissimos dolore ducimus eum fuga hic ipsa laborum minima mollitia, nulla officia quasi recusandae repellendus reprehenderit, sed similique, temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut autem beatae cupiditate hic magnam maxime natus neque odit perferendis porro quaerat quidem repellendus sequi sunt temporibus, ut velit voluptatum!</p>
+
+                <div class="d-flex">
+                    <span class="me-auto text-muted">Il y a 20 minutes</span>
+                    <span class="ms-auto text-muted">1h20min</span>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="border rounded color-border p-2">
+                <h5 class="color-text text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis expedita quaerat? Ad delectus dolorem dolorum excepturi impedit quae recusandae! Alias at aut corporis eius, hic ipsum recusandae sequi velit?</h5>
+                <p class="description mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta necessitatibus sequi. Accusantium architecto corporis, deleniti dolorem eligendi et excepturi fugit id in iste, magni officia quos ut vel velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, numquam quibusdam? Adipisci corporis dicta eos, esse eveniet hic id iusto maxime minima, natus neque nihil, porro quas soluta unde voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto commodi dignissimos dolore ducimus eum fuga hic ipsa laborum minima mollitia, nulla officia quasi recusandae repellendus reprehenderit, sed similique, temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut autem beatae cupiditate hic magnam maxime natus neque odit perferendis porro quaerat quidem repellendus sequi sunt temporibus, ut velit voluptatum!</p>
+
+                <div class="d-flex">
+                    <span class="me-auto text-muted">Il y a 20 minutes</span>
+                    <span class="ms-auto text-muted">1h20min</span>
+                </div>
+            </div>
+        </div>
+        <div class="col">
             <div class="border rounded color-border p-2">
                 <h5 class="color-text text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis expedita quaerat? Ad delectus dolorem dolorum excepturi impedit quae recusandae! Alias at aut corporis eius, hic ipsum recusandae sequi velit?</h5>
                 <p class="description mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta necessitatibus sequi. Accusantium architecto corporis, deleniti dolorem eligendi et excepturi fugit id in iste, magni officia quos ut vel velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, numquam quibusdam? Adipisci corporis dicta eos, esse eveniet hic id iusto maxime minima, natus neque nihil, porro quas soluta unde voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto commodi dignissimos dolore ducimus eum fuga hic ipsa laborum minima mollitia, nulla officia quasi recusandae repellendus reprehenderit, sed similique, temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut autem beatae cupiditate hic magnam maxime natus neque odit perferendis porro quaerat quidem repellendus sequi sunt temporibus, ut velit voluptatum!</p>
@@ -30,5 +63,7 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script src="js/main.js"></script>
 </body>
 </html>
diff --git a/src/main/webapp/js/main.js b/src/main/webapp/js/main.js
new file mode 100644
index 0000000..fba4756
--- /dev/null
+++ b/src/main/webapp/js/main.js
@@ -0,0 +1,3 @@
+$(document).ready(function () {
+  console.log("OK");
+});
\ No newline at end of file