Currently, I have a simple form set up with the following HTML code:
<div class="card mb-5 card-central-responsive" style="min-height: 579px;">
<div class="card-body">
<form #apkCreationForm="ngForm" class="mt-2" novalidate (ngSubmit)="onSubmitApk()">
<div role="alert" class="mb-& ng-star-inserted" style="padding-bottom: .10rem" ng-reflect-ng-class="">
<h4 class="alert-heading">{{ 'apk.product-description' | translate }}</h4>
</div>
<div class="row">
<div class="col-6">
<label class="form-group has-float-label">
<input class="form-control" required ngModel #name="ngModel" name="name" [(ngModel)]="apkName"/>
<span>{{ 'apk.name' | translate }}</span>
<div *ngIf="!name.valid && apkCreationForm.submitted" class="invalid-tooltip">{{ 'apk.name-required' | translate }}!</div>
</label>
</div>
<div class="col-6">
<label class="form-group has-float-label">
<ng-select
[items]="isFree"
bindLabel="id"
name="isFree"
bindValue="id"
[(ngModel)]="isFreeSelected">
</ng-select>
<span>{{ 'apk.is-free' | translate }}</span>
<div *ngIf="!isFreeSelected && apkCreationForm.submitted" class="invalid-tooltip">{{ 'apk.isfree-required' | translate }}</div>
</label>
</div>
</div>
</div>
</form >
</div>
</div>
My goal is to incorporate a new div image at the top of this form, similar to the design shown in https://i.sstatic.net/CxsnJ.png.
I've attempted various solutions without any luck. Can someone guide me on how to achieve this? I am using ng-bootstrap in my application. Thank you in advance.