Explain more detail in home.html an

app/templates/home.html

@@ -187,6 +187,7 @@ ul {
                 <hr>
             </div>
         </div>
+        <!-- Code: Each Group of Box-->
         <div class="col-lg-4 col-md-4 col-sm-4">
             <div class="inner_box">
                 <h3>(Group1)</h3>
@@ -212,131 +213,7 @@ ul {
                 <br>
             </div>
         </div>
-        <div class="col-lg-4 col-md-4 col-sm-4">
-            <div class="inner_box">
-                <h3>(Group2)</h3>
-                <hr>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <br>
-            </div>
-        </div>
-        <div class="col-lg-4 col-md-4 col-sm-4">
-            <div class="inner_box">
-                <h3>(Group3)</h3>
-                <hr>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <br>
-            </div>
-        </div>
-        <div class="col-lg-4 col-md-4 col-sm-4">
-            <div class="inner_box">
-                <h3>(Group4)</h3>
-                <hr>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <br>
-            </div>
-        </div>
-        <div class="col-lg-4 col-md-4 col-sm-4">
-            <div class="inner_box">
-                <h3>(Group5)</h3>
-                <hr>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <br>
-            </div>
-        </div>
-        <div class="col-lg-4 col-md-4 col-sm-4">
-            <div class="inner_box">
-                <h3>(Group6)</h3>
-                <hr>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <ul class="list">
-                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
-                    <li class="href_link_button">
-                        <a href="http://127.0.0.1:5000/">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
-                <br>
-            </div>
-        </div>
+        <!--(End) Code: Each Group of Box (End)-->
         <div class="clearfix"></div>
     </div>
     <div class="clearfix"></div>

app/templates/shared.html

@@ -1,11 +1,73 @@
 {% extends "base.html" %}
 
 {% block content %}
+<style>
+    ul {
+  list-style-type: none;
+  float: left;
+}
+
+.href_link_button
+{
+  float: right;
+}
+
+.list li {
+    display:inline-block;
+    vertical-align: middle;
+    list-style-position: outside;
+    list-style-type: disc;
+    margin-right: 1em;
+    text-align: left;
+    white-space: nowrap;
+    list-style-type: none;
+}
+.bull {
+    display:list-item
+}
+</style>
+
+
 <div class="mx-auto text-center">
 <h1>Shared Hometab</h1>
-<p>(list all public bookmark)</p>
-<p>1.Automatic Icon Usage (using links from external icon sites)</p>
-<p>2.website link</p>
-<p>3.description</p>
+<div class="container">
+    <div class="row">
+        <div class="col-md-12 col-sm-12">
+            <div class="section-title">
+                <h1 class="heading bold">List of bookmarks you have created</h1>
+                <hr>
+            </div>
+        </div>
+        <!-- Code: Each Group of Box-->
+        <div class="col-lg-4 col-md-4 col-sm-4">
+            <div class="inner_box">
+                <h3>(Group1)</h3>
+                <hr>
+                <ul class="list">
+                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
+                    <li class="href_link_button">
+                        <a href="http://127.0.0.1:5000/">
+                            <img src="static/logo/link_logo.png"width="25" height="25">
+                        </a>
+                        <button type="submit">Edit</button>
+                    </li>
+                </ul>
+                <ul class="list">
+                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
+                    <li class="href_link_button">
+                        <a href="http://127.0.0.1:5000/">
+                            <img src="static/logo/link_logo.png"width="25" height="25">
+                        </a>
+                        <button type="submit">Edit</button>
+                    </li>
+                </ul>
+                <br>
+            </div>
+        </div>
+        <!--(End) Code: Each Group of Box (End)-->
+        <div class="clearfix"></div>
+    </div>
+    <div class="clearfix"></div>
+</div>
 {% endblock %}
 </div>