font-end: navbar,create,share,home

app/templates/base.html

@@ -45,11 +45,14 @@
         </a>      
             <ul class="navbar-nav">
             {% if user.is_authenticated %} <!-- shows only if user is logged in -->
+            <li class="nav-item">
+                <a class="nav-link" href="/">Home</a>
+              </li>
               <li class="nav-item">
-                <a class="nav-link" href="/create">Create a Bookmark</a>
+                <a class="nav-link" href="/create">New Bookmark</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="/shared">Shared Hometabs</a>
+                <a class="nav-link" href="/shared">Public Bookmarks</a>
               </li>
             </ul>
             <ul class="navbar-nav-right">

app/templates/create_bookmark.html

@@ -27,19 +27,19 @@
                   </div>
 
                   <div class="form-outline mb-4">
-                    <label class="form-label" for="web_name">Name</label>
-                    <input type="text" name="web_name" class="form-control form-control-lg" />
+                    <label class="form-label" for="web_name">Name  <b>(Up to 12 characters in length)</b></label>
+                    <input type="text" name="web_name" maxlength="12" class="form-control form-control-lg" />
                   </div>
 
                   <div class="form-outline mb-4">
-                      <label class="form-label" for="web_group">Existing Groups</label><br>
-                      <select name="web_group" style="padding-right: 30px;"> 
+                      <label class="form-label" for="web_group">Existing Groups  <b>(Up to 12 characters in length)</b></label><br>
+                      <select name="web_group" style="height:47px" required aria-invalid="false"> 
                         <option value="cng-555">Create new group:</option>
                         {% for bg in bgroups %}
                         <option name="web_group" value="{{ bg.group }}">{{ bg.group }}</option>
                         {% endfor %}
                       </select>
-                      <input type="text" name="new_group" style='position:relative; left:40px; padding-right: 0px;' placeholder="Name new group here"/>
+                      <input type="text" name="new_group" maxlength="12" style='position:relative; left:20px; padding-right: 0px; height:47px;' placeholder="Name new group here"/>
                   </div>  
                   
                   <div class="form-outline mb-4">

app/templates/home.html

@@ -63,8 +63,9 @@ body{
     background-color: #fff;
     border-style: inset;
     border-radius: .5rem;
-    background-image: url("static/logo/home_bookmark_logo.jpg");
-    background-repeat: repeat
+    background-image: url("static/logo/home_bookmark_logo.png");
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
 .href_link_button
@@ -181,7 +182,7 @@ body{
                 </div>
               </div>
             </div>
-                <div class="card col-xl-8">
+                <div class="card col-sm-8 col-xl-8">
                     <div class="section-title">
                         <h3 class="heading bold">List of bookmarks you have created</h3>
                         <hr>
@@ -202,12 +203,12 @@ body{
                                 <!-- Code: Each Link in the Box-->
                                 {% for bm in bml: %}
                                 <div class="row">
-                                    <div class="col">
+                                    <div class="col.md-4" >
                                         <ul class="list">
                                             <li><span class="bull">(ICON)</span></li>
                                             <li><span class="bull">{{ bm.name }}</span></li>
                                             </div>
-                                            <div class="col">
+                                            <div class="col.md-4" style="position:absolute; right:0;">
                                             <li class="href_link_button">
                                                 <a href="{{ bm.link }}">
                                                     <img src="static/logo/link_logo.png"width="25" height="25">

app/templates/shared.html

@@ -6,7 +6,7 @@ body{
     color: #1a202c;
     text-align: left;
     background-color: #e2e8f0; 
-    padding-top: 100px; 
+    padding-top: 120px; 
     font-size: 14px;
 
 }
@@ -28,8 +28,9 @@ ul {
     background-color: #fff;
     border-style: inset;
     border-radius: .5rem;
-    background-image: url("static/logo/shared_bookmark_logo.jpg");
-    background-repeat: repeat
+    background-image: url("static/logo/home_bookmark_logo.png");
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
 .href_link_button
@@ -57,6 +58,7 @@ ul {
     border: 3px solid gray;
 }
 
+
 </style>
 
 
@@ -71,18 +73,18 @@ ul {
         </div>
         <!-- Code: Each Group of Box-->
         {% for bg, bml in bdic.items(): %}
-        <div class="col-md-4 bookmark_box_background_color list_li_height" >
-            <div class="inner_box">
+        <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: %}
                 <div class="row">
-                    <div class="col">
+                    <div class="col.md-4">
                         <ul class="list">
                             <li><span class="bull">ICON {{ bm.name }}</span></li>
                             </div>
-                            <div class="col">
+                            <div class="col.md-4" style="position:absolute; right:0;">
                             <li class="href_link_button">
                                 <a href="{{ bm.link }}">
                                     <img src="static/logo/link_logo.png"width="25" height="25">