share story frontend design

{% extends 'main/base.html' %}

{% block 'content' %}
<div class="col-12 col-md-8 col-lg-6 p-1 m-auto">
    <h1 class="p-2 text-primary text-center border-bottom">
        Share Story
    </h1>

    <div class="col mb-3 p-3">

        <form action="{% url 'create' %}" method="post">
            {% csrf_token %}
            <div class="input-group">
                <input type="text" name="username" class="form-control mb-3" placeholder="Your nickname">
                <input type="password" name="password" class="form-control mb-3" placeholder="Your password">
            </div>
            <textarea name="story" class="form-control mb-3"></textarea>
            <input type="submit" value="Share This Story" class="btn btn-primary col-12">
        </form>

    </div>

    <div class="col p-4 mb-3 border rounded-3 shadow">
        <div class="d-flex justify-content-between">
            <p>username|date</p>
            <p>edited at date</p>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, veritatis animi placeat doloribus et eius ipsa a commodi assumenda consectetur deleniti neque? Similique dolore assumenda nulla adipisci? Magni culpa voluptatibus ex eius id maxime aut, sit exercitationem dolorum accusamus quo quisquam odit nostrum totam ut minima recusandae esse explicabo voluptates.</p>
    </div>
</div>


{% endblock 'content' %}