FIC_Solar/SolarPower/Views/PowerStation/_UploadImage.cshtml

<div class="row mb-5">
    <div class="card border mb-5 w-100">
        <!-- notice the additions of utility paddings and display properties on .card-header -->
        <div class="card-header bg-fusion-50 pr-3 d-flex align-items-center flex-wrap justify-content-between">
            <!-- we wrap header title inside a div tag with utility padding -->
            <div class="card-title font-weight-bold">圖片上傳</div>
            <div class="text-right">
                <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed">
                    <span class="fal fa-plus mr-1"></span> 上傳圖片
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row d-flex justify-content-between">
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                        <a href="javascript:void(0);" class="btn btn-danger btn-lg btn-icon rounded-circle waves-effect waves-themed position-absolute pos-top pos-right">
                            <i class="fal fa-times"></i>
                        </a>
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <hr>
        <div class="card-body">
            <form action="/upload" class="dropzone needsclick dz-clickable" style="min-height: 7rem;">
                <div class="dz-message needsclick">
                    <i class="fal fa-cloud-upload text-muted mb-3"></i> <br>
                    <span class="text-uppercase">Drop files here or click to upload.</span>
                    <br>
                    <span class="fs-sm text-muted">This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.</span>
                </div>
            </form>
        </div>

    </div>
</div>

<div class="row mb-5">
    <div class="card border mb-g w-100">
        <!-- notice the additions of utility paddings and display properties on .card-header -->
        <div class="card-header bg-fusion-50 pr-3 d-flex align-items-center flex-wrap justify-content-between">
            <!-- we wrap header title inside a div tag with utility padding -->
            <div class="card-title font-weight-bold">單線圖</div>
            <div class="text-right">
                <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed">
                    <span class="fal fa-plus mr-1"></span> 上傳圖片
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row d-flex justify-content-between">
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                        <a href="javascript:void(0);" class="btn btn-danger btn-lg btn-icon rounded-circle waves-effect waves-themed position-absolute pos-top pos-right">
                            <i class="fal fa-times"></i>
                        </a>
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl">
                    <div class="card border m-auto m-lg-0" style="padding: 9.5px;">
                        <img src="~/img/blank.gif" class="card-img-top" alt="...">
                        <div class="card-body">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">
                                <label class="custom-control-label" for="defaultUnchecked">卡片顯示圖</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <hr>
        <div class="card-body">
            <form action="/upload" class="dropzone needsclick dz-clickable" style="min-height: 7rem;">
                <div class="dz-message needsclick">
                    <i class="fal fa-cloud-upload text-muted mb-3"></i> <br>
                    <span class="text-uppercase">Drop files here or click to upload.</span>
                    <br>
                    <span class="fs-sm text-muted">This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.</span>
                </div>
            </form>
        </div>

    </div>

</div>