[[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="skill-1" data-id="skill-1-d">
                <i class="move-handle fa fa-bars" style="cursor: move"></i>
                <div class="m-auto">Skill 1</div>
            </div>
            <div class="order-item btn btn-secondary d-flex align-items-center mb-1" id="skill-2" data-id="skill-2-d">
                <i class="move-handle fa fa-bars" style="cursor: move"></i>
                <div class="m-auto">Main Skill 2</div>
            </div>
            <div class="order-item btn btn-secondary d-flex align-items-center mb-1" id="skill-3" data-id="skill-3-d">
                <i class="move-handle fa fa-bars" style="cursor: move"></i>
                <div class="m-auto">Other Skill 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="skill-1-d">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-end">
                <h5 class="card-title company-name">Skill 1</h5>
            </div>
            <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="rating-bar3">
                <form>
                     <fieldset class="starability-slot">
                        <input type="radio" id="slot-rate5" name="rating" value="5" />
                        <label for="slot-rate5" title="Amazing">5 stars</label>
                     
                        <input type="radio" id="slot-rate4" name="rating" value="4" />
                        <label for="slot-rate4" title="Very good">4 stars</label>
                    
                        <input type="radio" id="slot-rate3" name="rating" value="3" />
                        <label for="slot-rate3" title="Average">3 stars</label>
                     
                        <input type="radio" id="slot-rate2" name="rating" value="2" />
                        <label for="slot-rate2" title="Not good">2 stars</label>
                    
                        <input type="radio" id="slot-rate1" name="rating" value="1" />
                        <label for="slot-rate1" title="Terrible">1 star</label>
                    </fieldset>
                </form>
            </div>
        </div>
        <div class="card py-3 px-3 mb-2 d-flex flex-column" id="skill-2-d">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-end">
                <h5 class="card-title company-name">Main Skill 2</h5>
            </div>
            <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="rating-bar2">
                <form>
                     <fieldset class="starability-grow">
                        <input type="radio" id="growing-rate5" name="rating" value="5" />
                        <label for="growing-rate5" title="Amazing">5 stars</label>
                     
                        <input type="radio" id="growing-rate4" name="rating" value="4" />
                        <label for="growing-rate4" title="Very good">4 stars</label>
                    
                        <input type="radio" id="growing-rate3" name="rating" value="3" />
                        <label for="growing-rate3" title="Average">3 stars</label>
                     
                        <input type="radio" id="growing-rate2" name="rating" value="2" />
                        <label for="growing-rate2" title="Not good">2 stars</label>
                    
                        <input type="radio" id="growing-rate1" name="rating" value="1" />
                        <label for="growing-rate1" title="Terrible">1 star</label>
                    </fieldset>
                </form>
            </div>
        </div>
        <div class="card py-3 px-3 mb-2 d-flex flex-column" id="skill-3-d">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-end">
                <h5 class="card-title company-name">Other Skill 3</h5>
            </div>
            <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="rating-bar1">
                <form>
                     <fieldset class="starability-fade">
                        <input type="radio" id="fading-rate5" name="rating" value="5" />
                        <label for="fading-rate5" title="Amazing">5 stars</label>
                     
                        <input type="radio" id="fading-rate4" name="rating" value="4" />
                        <label for="fading-rate4" title="Very good">4 stars</label>
                    
                        <input type="radio" id="fading-rate3" name="rating" value="3" />
                        <label for="fading-rate3" title="Average">3 stars</label>
                     
                        <input type="radio" id="fading-rate2" name="rating" value="2" />
                        <label for="fading-rate2" title="Not good">2 stars</label>
                    
                        <input type="radio" id="fading-rate1" name="rating" value="1" />
                        <label for="fading-rate1" title="Terrible">1 star</label>
                    </fieldset>
                </form>
            </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 Skill</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="container">
                       <div class="row form-group">
                            <input class="form-control col-12 col-md-8 col-lg-4" placeholder="Enter Skill Title" />
                        </div>
                        <div class="row form-group">
                            <textarea class="form-control" rows="10" placeholder="Enter Description"></textarea>
                        </div>

                        <div class="row">
                            <form>
                                <fieldset class="starability-checkmark">
                                    <input type="radio" id="checkmark-rate5" name="rating" value="5" />
                                    <label for="checkmark-rate5" title="Amazing">5 stars</label>
                                
                                    <input type="radio" id="checkmark-rate4" name="rating" value="4" />
                                    <label for="checkmark-rate4" title="Very good">4 stars</label>
                                
                                    <input type="radio" id="checkmark-rate3" name="rating" value="3" />
                                    <label for="checkmark-rate3" title="Average">3 stars</label>
                                
                                    <input type="radio" id="checkmark-rate2" name="rating" value="2" />
                                    <label for="checkmark-rate2" title="Not good">2 stars</label>
                                
                                    <input type="radio" id="checkmark-rate1" name="rating" value="1" />
                                    <label for="checkmark-rate1" title="Terrible">1 star</label>
                                </fieldset>
                            </form>
                        </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]]