responsive radio customize design for address

This commit is contained in:
Amirul Amin
2021-08-04 00:18:00 +08:00
parent fe52f0471b
commit cc9bb9976f
+76
View File
@@ -0,0 +1,76 @@
<div class="d-flex flex-column">
<div class="shadow p-3 mb-3 bg-white rounded">
<div class="d-flex flex-column flex-md-row align-items-center">
<div class="flex-row align-self-start pb-2 pb-sm-0">
<input type="radio" name="answer" id="answer-1">
<label for="answer-1" data-question-number="1" class="mb-0 pl-2 pl-md-2 bold">Jacob Arlington</label>
</div>
<div>
<span class="fs-12 pl-sm-3 pl-lg-5" style="color: #a6a6a6;">Malaysian Global Innovation, 63000 Cyberjaya, Selangor</span>
</div>
</div>
</div>
<div class="shadow p-3 bg-white rounded">
<div class="d-flex flex-row align-items-center">
<input type="radio" name="answer" id="answer-2">
<label for="answer-2" data-question-number="2" class="mb-0 pl-2 pl-md-2 bold">Add New Address</label>
</div>
<div class="col-0">
<div class="d-flex flex-column flex-sm-row">
<div class="col px-0 pr-sm-2">
<label class="text-primary fs-12">First Name</label>
<div class="controls">
<input type="text" class="form-control fs-12">
</div>
</div>
<div class="col px-0 pl-sm-2">
<label class="text-primary fs-12">Last Name</label>
<div class="controls">
<input type="text" class="form-control fs-12">
</div>
</div>
</div>
<label class="text-primary fs-12">Street Address</label>
<div class="controls">
<input type="text" class="form-control fs-12">
</div>
<div class="d-flex flex-column flex-sm-row">
<div class="col px-0 pr-sm-2">
<label class="text-primary fs-12">Country</label>
<div class="controls">
<a class="btn form-control dropdown-toggle text-left" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Please Choose
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Malaysia</a>
<a class="dropdown-item" href="#">Singapore</a>
<a class="dropdown-item" href="#">Brunei</a>
<a class="dropdown-item" href="#">Indonesia</a>
</div>
</div>
</div>
<div class="col px-0 pl-sm-2">
<label class="text-primary fs-12">State</label>
<div class="controls">
<input type="text" class="form-control fs-12">
</div>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between">
<div class="col px-0 pr-sm-2">
<label class="text-primary fs-12">City</label>
<div class="controls">
<input type="text" class="form-control fs-12">
</div>
</div>
<div class="col px-0 pl-sm-2">
<label class="text-primary fs-12">Postcode</label>
<div class="controls">
<input type="text" class="form-control fs-12">
</div>
</div>
</div>
</div>
</div>
</div>