Create Font-end Shared Page

app/templates/home.html

@@ -70,6 +70,7 @@ body{
 .href_link_button
 {
   float: right;
+  list-style-type: none;
 }
 
 .list li {

app/templates/shared.html

@@ -2,7 +2,18 @@
 
 {% block content %}
 <style>
-    ul {
+body{
+    color: #1a202c;
+    text-align: left;
+    background-color: #e2e8f0; 
+    padding-top: 100px; 
+    font-size: 14px;
+
+}
+.main-body {
+    padding: 15px; } .card { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
+}
+ul {
   list-style-type: none;
   float: left;
 }
@@ -12,24 +23,44 @@
   float: right;
 }
 
+
+.bookmark_box_background_color {
+    background-color: #fff;
+    border-style: inset;
+    border-radius: .5rem;
+    background-image: url("static/logo/shared_bookmark_logo.jpg");
+    background-repeat: repeat
+}
+
+.href_link_button
+{
+  float: right;
+  list-style-type: none;
+}
+
 .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;
 }
+.list_li_height {
+    height: nowrap;
+}
 .bull {
     display:list-item
 }
+
+.text_border {
+    border: 3px solid gray;
+}
+
 </style>
 
 
 <div class="mx-auto text-center">
-<h1>Shared Hometab</h1>
 <div class="container">
     <div class="row">
         <div class="col-md-12 col-sm-12">
@@ -40,22 +71,28 @@
         </div>
         <!-- Code: Each Group of Box-->
         {% for bg, bml in bdic.items(): %}
-        <div class="col-lg-4 col-md-4 col-sm-4">
+        <div class="col-md-4 bookmark_box_background_color list_li_height" >
             <div class="inner_box">
                 <h3>{{ bg }}</h3>
                 <hr>
                 <!-- Code: Each Link in the Box-->
                 {% for bm in bml: %}
-                <ul class="list">
-                    <li><span class="bull">ICON {{ bm.name }} {{ bm.status }}</span></li>
-                    <li class="href_link_button">
-                        <a href="{{ bm.link }}">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
+                <div class="row">
+                    <div class="col">
+                        <ul class="list">
+                            <li><span class="bull">ICON {{ bm.name }}</span></li>
+                            </div>
+                            <div class="col">
+                            <li class="href_link_button">
+                                <a href="{{ bm.link }}">
+                                    <img src="static/logo/link_logo.png"width="25" height="25">
+                                </a>
+                                <button type="submit">Edit</button>
+                            </li>
+                            </div>
+                        </ul>
                 {% endfor %}
+               </div>
                 <!-- (End) Code: Each Link in the Box (End)-->
                 <br>
             </div>