Courseherd Acount Settings Page

courseherd.html

<section class="bg-white py-4">
        <div class="container">
            <h1 class="font-weight-bold">Account Settings</h1>
            <div class="row bg-light p-3 border border">
                <div class="card w-100 rounded rounded-2">
                    <div class="card-header font-weight-bold bg-white">
                        My Account
                    </div>
                    <div class="card-body">
                        <button class="btn btn-danger">Deactivate Account <span class="fa fa-trash "></span> </button>                        
                    </div>
                </div>

                <div class="card mt-2 w-100 rounded ">
                    <div class="card-header font-weight-bold bg-white">
                        <span>
                            Change password <span class="fa fa-gear"></span>
                        </span>
                        <button class="float-right py-1 btn btn-primary">Save</button>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <form action="" class="w-100">
                                <div class="form-group">
                                    <div class="font-weight-bold col">
                                        <label for="currentPassword">
                                            Current Password :
                                        </label>
                                    </div>
                                    <div class="col-md-6"> 
                                        <input type="text" class="form-control" id="currentPassword">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="font-weight-bold col">
                                        <label for="newPassword">
                                            New Password :
                                        </label>
                                    </div>
                                    <div class="col-md-6"> 
                                        <input type="text" class="form-control" id="newPassword">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="font-weight-bold col">
                                        <label for="confPassword">
                                            Confirm Password :
                                        </label>
                                    </div>
                                    <div class="col-md-6"> 
                                        <input type="text" class="form-control" id="confPassword">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="card rounded mt-2 w-100">
                    <div class="card-header font-weight-bold bg-white">
                        Contact details
                        <button class="float-right py-1 btn btn-primary">Save</button>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <form action="" class="w-100">
                                <div class="form-group">
                                    <div class="font-weight-bold col">
                                        <label for="contactEmail">
                                            Email :
                                        </label>
                                    </div>
                                    <div class="col-md-6"> 
                                        <input type="text" class="form-control" id="contactEmail" value="fjhhames@gmail.com">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="font-weight-bold col">
                                        <label for="phoneNum">
                                            Phone Number
                                        </label>
                                    </div>
                                    <div class="col-md-6"> 
                                        <input type="text" class="form-control" id="phoneNum" value="098900099000">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="font-weight-bold col">
                                        <label for="confPassword">
                                            SMS Notification
                                        </label>
                                    </div>
                                    <div class="col-md-6"> 
                                        <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
                                        <label class="form-check-label" for="materialInline1">Enabled</label>
                                        </div>
                                        
                                        <!-- Material inline 2 -->
                                        <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
                                        <label class="form-check-label" for="materialInline2">Disabled</label>
                                        </div>
                                        
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>