<!--View Information-->
<!--View name : Online Course-->
<!--State name : app.onlineCourse-->
<!--URL : #app/onlineCourse-->

<!--Online course section-->
<ion-view title="Material School" id="online-course">
    <ion-content id="online-course-content">
        <!--toolbar section-->
        <md-toolbar class="bar-subheader md-tall md-primary toolbar-online-course ">
            <div>
                <img src="img/profileAvatar.jpg" class="user-img"/>

                <h1>John Able</h1>

                <h2>johnable@material.com</h2>
            </div>

        </md-toolbar> <!--end toolbar section-->
        <div class="course-list">

            <!--content item section-->
            <div class="course-item">
                <div class="title angular-course-background">
                    Javascript
                </div>
                <div class="content">
                    <h1>
                        AngularJs Basic
                    </h1>

                    <p>
                        Getting started with Angularjs and Bootstrap. Awesome javascript framework
                    </p>

                    <p>
                        <a href="" class="md-raised md-button md-default-theme angular-course-background">
                            <i class="fa fa-play"></i> 90 min</a>
                        <a href="" class="md-raised md-button md-default-theme angular-course-background">
                            <i class="fa fa-bookmark"></i>Save</a>
                    </p>
                </div>
            </div> <!--end content item section-->

            <!--content item section-->
            <div class="course-item">
                <div class="title ionic-course-background">
                    Ionic Framework
                </div>
                <div class="content">
                    <h1>
                        Ionic Framework Basic
                    </h1>

                    <p>
                        Getting started with Ionic Framework. You will know how to create a mobile app super fast.
                    </p>

                    <p>
                        <a href="" class="md-raised md-button md-default-theme ionic-course-background">
                            <i class="fa fa-play"></i> 120 min</a>
                        <a href="" class="md-raised md-button md-default-theme ionic-course-background">
                            <i class="fa fa-bookmark"></i>Save</a>
                    </p>
                </div>
            </div><!--end content item section-->

            <!--content item section-->
            <div class="course-item">
                <div class="title ios-course-background">
                    IOS Development
                </div>
                <div class="content">
                    <h1>
                        IOS Basic
                    </h1>

                    <p>
                        Getting started with IOS Development and start your first mobile app.
                    </p>

                    <p>
                        <a href="" class="md-raised md-button md-default-theme ios-course-background">
                            <i class="fa fa-play"></i> 180 min</a>
                        <a href="" class="md-raised md-button md-default-theme ios-course-background">
                            <i class="fa fa-bookmark"></i>Save</a>
                    </p>
                </div>
            </div><!--end content item section-->

            <!--content item section-->
            <div class="course-item">
                <div class="title android-course-background">
                    Android Development
                </div>
                <div class="content">
                    <h1>
                        Android Basic
                    </h1>

                    <p>
                        Getting started with Android Development and start your first mobile app.
                    </p>

                    <p>
                        <a href="" class="md-raised md-button md-default-theme android-course-background">
                            <i class="fa fa-play"></i> 124 min</a>
                        <a href="" class="md-raised md-button md-default-theme android-course-background">
                            <i class="fa fa-bookmark"></i>Save</a>
                    </p>
                </div>
            </div><!--end content item section-->

        </div>
    </ion-content>
    <div class="footer-fab-bar">
        <a class="md-button md-accent md-fab fab-footer" aria-label="Add">
            <i class="ion-android-star"></i>
        </a>
    </div>

</ion-view><!--end online course section-->