hometab/app/templates/shared.html

{% extends "base.html" %}

{% block content %}
<style>
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;
}

.href_link_button
{
  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;
    text-align: left;
    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">
<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-->
        {% for bg, bml in bdic.items(): %}
        <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">
                        <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>
        </div>
        <!--(End) Code: Each Group of Box (End)-->
        {% endfor %}
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="clearfix"></div>
{% endblock %}
</div>