<div class="col-sm-12">
    <div class="col-sm-6">
        <div class="row ">
            <div class="col-sm-12 ">
                <div class="col-sm-12 gray" style="padding: 0" >                                 
                    <img src="<?php echo base_url()?>image/view_video.PNG" class="img-responsive" style="width: 100%;height: 500px">
                </div>  
                <div class="col-sm-12 " style="padding: 0" >                                 
                    <br>
                </div>
                <div class="col-sm-12 gray" style="padding: 10" >                                 
                    <div class="col-sm-12 "> <h4 class="text-left">Transcripts</h4></div>
                    <div class="col-sm-12 white" id="demo">

                        <p id="content-2" class="text-justify content" style="padding: 10px;height: 100px;" >Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
                    </div>
                </div>  


                <div class="col-sm-12 " style="padding: 0" >                                 
                    <br>
                </div>
                <div class="col-sm-12 gray" style="padding: 10" >                                 
                    <div class="media col-sm-12">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object " src="<?php echo base_url()?>imgage/logo.png" alt=" " style="width: 30px">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading green text-justify">Learner</h4>
                            <p class="text-justify"> Give us a call, ask us your questions! Need more information?</p>
                        </div>
                        <div class="media-bottom" style="margin-left: 75px" >
                            <p class="text-justify">  
                                <a href="#">Like</a> -
                                <a href="#" onclick="ShowReplyArea()">Reply</a>-
                                <a href="#">Follow</a>-
                                <span>40 Minutes ago near Dhaka</span>
                            </p>
                        </div>
                        <script>
                            function ShowReplyArea() {
                                var reply = document.getElementById('reply');
                                reply.setAttribute('style', 'display:block');
                            }
                        </script>
                        <div class="col-sm-12 " style="padding: 10px;display: none" id="reply" >                                 
                            <span class="col-sm-2" > <img src="<?php echo base_url()?>image/logo.png" class="img-responsive" style="width: 30px"></span>
                            <span class="col-sm-10 " >  <input type="text" placeholder="Write a Reply ..." name="comment" id="comment" class="form-control" autofocus></span>
                        </div> 
                        <div>
                            <hr>
                        </div>


                    </div>
                    <div class="col-sm-12 " style="padding: 10px" >     <br>                            
                        <span class="col-sm-2" > <img src="<?php echo base_url()?>image/logo.png" class="img-responsive" ></span>

                        <span class="col-sm-10 " >  <input type="text" placeholder="Write a Comment ..." name="comment" id="comment" class="form-control"></span>
                    </div> 
                </div>  

                <div class="col-sm-12"><br></div> 

            </div>

        </div>

    </div>
    <div class="col-sm-6 ">

        <div class="row ">


            <div class="col-sm-12 gray">
                <span class="text-center" >
                    <h4>Introduction to Engineering Mechanics</h4> 
                </span>
            </div>

            <div class="col-sm-12"><br></div> 
            <div class="col-sm-12 " id="content-1" style="height: 300px" >  
                <div class="col-sm-12 gray" >

                    <div class="col-sm-8">
                        <address class="text-left">
                            <a href="view_video.html">  Introduction to Engineering Mechanics</a><br>
                            By <a href="#">  Md. Shafiul Alam</a>
                            <!--<span class="col-sm-1" style="padding: 0"> <img src="images/logo-50.png" class="img-responsive" style="width: 20px"></span> Talha Corporation-->
                        </address>
                    </div>
                    <div class="col-sm-4" style="padding: 2px;font-size: 12px" >

                        <address class="text-center" >
                            <span>Uploaded</span><span style="margin-left: 10px">12th June, 2012</span><br>
                            <span>Viewed</span><span style="margin-left: 20px">12987 Times</span>

                        </address>

                    </div>


                </div>  
                <div class="col-sm-12"><br></div>
                <div class="col-sm-12 white" >

                    <div class="col-sm-8">
                        <address class="text-left">
                            <a href="view_video.html">  Introduction to Engineering Mechanics</a><br>
                            By <a href="#">  Md. Shafiul Alam</a>
                            <!--<span class="col-sm-1" style="padding: 0"> <img src="images/logo-50.png" class="img-responsive" style="width: 20px"></span> Talha Corporation-->
                        </address>
                    </div>
                    <div class="col-sm-4" style="padding: 2px;font-size: 12px" >

                        <address class="text-center" >
                            <span>Uploaded</span><span style="margin-left: 10px">12th June, 2012</span><br>
                            <span>Viewed</span><span style="margin-left: 20px">12987 Times</span>

                        </address>

                    </div>


                </div> 
                <div class="col-sm-12"><br></div>
                <div class="col-sm-12 gray" >

                    <div class="col-sm-8">
                        <address class="text-left">
                            <a href="view_video.html">  Introduction to Engineering Mechanics</a><br>
                            By <a href="#">  Md. Shafiul Alam</a>
                            <!--<span class="col-sm-1" style="padding: 0"> <img src="images/logo-50.png" class="img-responsive" style="width: 20px"></span> Talha Corporation-->
                        </address>
                    </div>
                    <div class="col-sm-4" style="padding: 2px;font-size: 12px" >

                        <address class="text-center" >
                            <span>Uploaded</span><span style="margin-left: 10px">12th June, 2012</span><br>
                            <span>Viewed</span><span style="margin-left: 20px">12987 Times</span>

                        </address>

                    </div>


                </div>   
                <div class="col-sm-12"><br></div>
                <div class="col-sm-12 white" >

                    <div class="col-sm-8">
                        <address class="text-left">
                            <a href="view_video.html">  Introduction to Engineering Mechanics</a><br>
                            By <a href="#">  Md. Shafiul Alam</a>
                            <!--<span class="col-sm-1" style="padding: 0"> <img src="images/logo-50.png" class="img-responsive" style="width: 20px"></span> Talha Corporation-->
                        </address>
                    </div>
                    <div class="col-sm-4" style="padding: 2px;font-size: 12px" >

                        <address class="text-center" >
                            <span>Uploaded</span><span style="margin-left: 10px">12th June, 2012</span><br>
                            <span>Viewed</span><span style="margin-left: 20px">12987 Times</span>

                        </address>

                    </div>


                </div>   
                <div class="col-sm-12"><br></div>
                <div class="col-sm-12 gray" >

                    <div class="col-sm-8">
                        <address class="text-left">
                            <a href="view_video.html">  Introduction to Engineering Mechanics</a><br>
                            By <a href="#">  Md. Shafiul Alam</a>
                            <!--<span class="col-sm-1" style="padding: 0"> <img src="images/logo-50.png" class="img-responsive" style="width: 20px"></span> Talha Corporation-->
                        </address>
                    </div>
                    <div class="col-sm-4" style="padding: 2px;font-size: 12px" >

                        <address class="text-center" >
                            <span>Uploaded</span><span style="margin-left: 10px">12th June, 2012</span><br>
                            <span>Viewed</span><span style="margin-left: 20px">12987 Times</span>

                        </address>

                    </div>


                </div>   
            </div>     
            <div class="col-sm-12"><br></div>

            <!--Related video & Discus Message Panel-->

            <div class="col-sm-12" style="padding: 0;">
                <!-- Discus Message Panel-->

                <div class="col-sm-6 " style="padding: 2px;">
                    <span class="bg-primary lead col-sm-12" style="text-align: left;background-color: #8CC73F;font-size: 14px;">Discus with Student / Discus with Teacher</span>
                   
                    <span class="col-sm-3" style="padding: 0">To:</span>
                    <span class="col-sm-9" style="padding: 0"><input type="text" class="form-control"></span>

                    <span class="col-sm-12"><br></span>
                    <span class="col-sm-3" style="padding: 0">Message:</span>
                    <span class="col-sm-9" style="padding: 0"><textarea cols="30" rows="3" class="form-control"></textarea></span>
                    <span class="col-sm-12"><br><br></span>
                    <span class="col-sm-12">
                        <span class="col-sm-3">
                            <script>
                                            $(":file").filestyle({'iconName', 'glyphicon glyphicon-paperclip'});</script>
                            <input title="Upload File" type="file" class="filestyle" data-input="false" data-iconName="glyphicon glyphicon-paperclip" data-buttonText="" ><br>
                        </span>
                        <span class="col-sm-3">
                            <script>
                                                        $(":file").filestyle({'iconName', 'glyphicon glyphicon-camera'});</script>
                            <input title="Upload Image" type="file" class="filestyle" data-input="false" data-iconName="glyphicon glyphicon-camera" data-buttonText="" ><br>
                        </span>
                        <span class="col-sm-3 pull-right">
                            <a href="#">   <i class="fa fa-send fa-2x" title="Send Message"></i></a>
                        </span>
                    </span>

                                    <!--                                    <span class=" col-sm-12" style="text-align: right;font-size: 14px;">
                                                                            <button type="button" class="btn btn-success">Send</button>
                                                                            <a href="#">   <i class="fa fa-send " title="Send Message"></i></a>
                                    
                                                                        </span>-->

                </div>


                <!--Related video Panel-->
                <div class="col-sm-6">
                    <span class="col-sm-12" >
                        <span class="bg-primary lead col-sm-12" style="text-align: center;background-color: #8CC73F;font-size: 14px">Related Video</span>
                        <span class="col-sm-12">
                            <span class="col-sm-6">
                                <a href="#">  Integration (part 1)</a>
                            </span>
                            <span class="col-sm-6">
                                <img src="<?php echo base_url()?>image/upcoming_course.jpg" class="img-responsive">
                            </span>
                        </span>
                        <span class="col-sm-12"><br></span>
                        <span class="col-sm-12">
                            <span class="col-sm-6">
                                <a href="#">  Integration (part 1)</a>
                            </span>
                            <span class="col-sm-6">
                                <img src="<?php echo base_url()?>image/upcoming_course.jpg" class="img-responsive">
                            </span>
                        </span>
                        <span class="col-sm-12"><br></span>
                        <span class="col-sm-12">
                            <span class="col-sm-6">
                                <a href="#">  Integration (part 1)</a>
                            </span>
                            <span class="col-sm-6">
                                <img src="<?php echo base_url()?>image/upcoming_course.jpg" class="img-responsive">
                            </span>
                        </span>
                        <span class="col-sm-12"><br></span>
                        <span class="col-sm-12 text-right"><a href="#">  More ..</a></span>
                    </span>
                </div>


            </div>
        </div>

    </div>

</div>

<script>
            (function($) {
                $(window).load(function() {

                    $("#content-1").mCustomScrollbar({
                        /* keyboard default options */
                        keyboard: {
                            enable: true,
                            scrollType: "stepless",
                            scrollAmount: "auto"
                        }
                    });

                });
            })(jQuery);
        </script>
        <script>
            (function($) {
                $(window).load(function() {

                    $("#content-2").mCustomScrollbar({
                        /* keyboard default options */
                        keyboard: {
                            enable: true,
                            scrollType: "stepless",
                            scrollAmount: "auto"
                        }
                    });

                });
            })(jQuery);
        </script>