[[MAIN]]
<div class="profile-experience container-fluid d-sm-flex flex-row-reverse justify-content-end" style="overflow: auto">
    <div class="right-area col-12 col-sm-4 d-flex flex-column">
        <div class="card py-4 px-3" id="order-items">
            <div class="order-item btn btn-secondary d-flex align-items-center mb-1" id="experience-1" data-id="experience-1-d">
                <i class="move-handle fa fa-bars" style="cursor: move"></i>
                <div class="m-auto">Compnay Name 1</div>
            </div>
            <div class="order-item btn btn-secondary d-flex align-items-center mb-1" id="experience-2" data-id="experience-2-d">
                <i class="move-handle fa fa-bars" style="cursor: move"></i>
                <div class="m-auto">Compnay Name 2</div>
            </div>
            <div class="order-item btn btn-secondary d-flex align-items-center mb-1" id="experience-3" data-id="experience-3-d">
                <i class="move-handle fa fa-bars" style="cursor: move"></i>
                <div class="m-auto">Compnay Name 3</div>
            </div>
        </div>
        <button class="btn btn-primary my-3" data-toggle="modal" data-target="#myModal"> Add New (+) </button>
    </div>
    <div class="left-area col-12 col-sm-8 col-lg-7 col-xl-6 px-3" style="overflow: auto">
        <div class="card py-3 px-3 mb-2 d-flex flex-column" id="experience-1-d">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-end">
                <h5 class="card-title company-name">Company Name 1</h5>
                <p>Jan 2013 - Mar 2016</p>
            </div>
            <h6 class="card-subtitle text-bold title py-1">Title</h6>
            <p>
                Lorem ipsum dolor sit amet, ut rebum habemus apeirian mel, quas similique reprehendunt no sea. In brute postulant cotidieque est. Id nam saperet efficiendi, vis in prima corrumpit. Ut has dico omittam. Ius torquatos prodesset ea, nisl legimus propriae eam no. Et vix brute labore tractatos, mea no stet noluisse probatus.
            </p>
            <div class="d-flex flex-column flex-sm-row align-items-start">
                <div class="star-ratings-sprite">
                    <span 
                        style="width:85%"
                        class="star-ratings-sprite-rating">
                    </span>
                </div>
                <div class="ml-0 ml-sm-4 mt-2 mt-sm-0">
                    <p class="btn p-0">Read Full Review</p>
                </div>
            </div>
        </div>
        <div class="card py-3 px-3 mb-2 d-flex flex-column" id="experience-2-d">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-end">
                <h5 class="card-title company-name">Company Name 2</h5>
                <p>Jan 2013 - Mar 2016</p>
            </div>
            <h6 class="card-subtitle text-bold title py-1">Title</h6>
            <p>
                Lorem ipsum dolor sit amet, ut rebum habemus apeirian mel, quas similique reprehendunt no sea. In brute postulant cotidieque est. Id nam saperet efficiendi, vis in prima corrumpit. Ut has dico omittam. Ius torquatos prodesset ea, nisl legimus propriae eam no. Et vix brute labore tractatos, mea no stet noluisse probatus.
            </p>
            <div class="d-flex flex-column flex-sm-row align-items-start">
                <div class="star-ratings-sprite">
                    <span 
                        style="width:85%"
                        class="star-ratings-sprite-rating">
                    </span>
                </div>
                <div class="ml-0 ml-sm-4 mt-2 mt-sm-0">
                    <p class="btn p-0">Read Full Review</p>
                </div>
            </div>
        </div>
        <div class="card py-3 px-3 mb-2 d-flex flex-column" id="experience-3-d">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-end">
                <h5 class="card-title company-name">Company Name 3</h5>
                <p>Jan 2013 - Mar 2016</p>
            </div>
            <h6 class="card-subtitle text-bold title py-1">Title</h6>
            <p>
                Lorem ipsum dolor sit amet, ut rebum habemus apeirian mel, quas similique reprehendunt no sea. In brute postulant cotidieque est. Id nam saperet efficiendi, vis in prima corrumpit. Ut has dico omittam. Ius torquatos prodesset ea, nisl legimus propriae eam no. Et vix brute labore tractatos, mea no stet noluisse probatus.
            </p>
            <div class="d-flex flex-column flex-sm-row align-items-start">
                <div class="star-ratings-sprite">
                    <span 
                        style="width:85%"
                        class="star-ratings-sprite-rating">
                    </span>
                </div>
                <div class="ml-0 ml-sm-4 mt-2 mt-sm-0">
                    <p class="btn p-0">Read Full Review</p>
                </div>
            </div>
        </div>
    </div>

    <!-- The Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
            
                <!-- Modal Header -->
                <div class="modal-header">
                <h4 class="modal-title">Add Experience</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="container">
                        <div class="row justify-content-between">
                            <input class="form-control form-group col-12 col-md-8 col-lg-4" placeholder="Enter Compnay Name" />
                            <div class="d-flex flex-column flex-lg-row">
                                <div class="d-flex flex-column flex-sm-row align-item-center">
                                    <div class="form-group d-flex align-items-center">
                                        <span class="px-2">FROM</span>
                                        <input id="startDateExperience" type="date" name="bday" max="3000-12-31" 
                                                min="1000-01-01" value="2019-01-01" class="form-control">
                                    </div>
                                    <div class="form-group d-flex align-items-center">
                                        <span class="px-2">TO</span>
                                        <input id="endDateExperience" type="date" name="bday" min="1000-01-01"
                                                max="3000-12-31" value="2019-01-01" class="form-control">
                                    </div>
                                </div>
                                <div class="d-flex align-items-center ml-auto form-group">
                                    <input type="checkbox" class="ml-1" id="experienceNow"><span class="ml-1">Present</span>     
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <input class="form-control col-12 col-md-8 col-lg-4" placeholder="Enter Title" />
                        </div>
                        <div class="row">
                            <textarea class="form-control" rows="10" placeholder="Enter Description"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">SUBMIT</button>
                </div>
                
            </div>
        </div>
    </div>
</div>
[[MAIN]]