135 lines
2.7 KiB
HTML
135 lines
2.7 KiB
HTML
<div class="card shadow-sm border-0 rounded-4 mt-4">
|
|
|
|
<div class="card-body p-4">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
|
|
<h4 class="fw-bold mb-0">
|
|
IELTS Skill Progress
|
|
</h4>
|
|
|
|
<span class="text-muted">
|
|
Current level
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Reading -->
|
|
|
|
<div class="mb-4">
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
|
<span>
|
|
<i class="bi bi-book text-primary"></i>
|
|
Reading
|
|
</span>
|
|
|
|
<span class="fw-semibold">
|
|
80%
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="progress" style="height:10px;">
|
|
|
|
<div class="progress-bar"
|
|
style="width:80%">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Listening -->
|
|
|
|
<div class="mb-4">
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
|
<span>
|
|
<i class="bi bi-headphones text-primary"></i>
|
|
Listening
|
|
</span>
|
|
|
|
<span class="fw-semibold">
|
|
90%
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="progress" style="height:10px;">
|
|
|
|
<div class="progress-bar"
|
|
style="width:90%">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Writing -->
|
|
|
|
<div class="mb-4">
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
|
<span>
|
|
<i class="bi bi-pencil-square text-primary"></i>
|
|
Writing
|
|
</span>
|
|
|
|
<span class="fw-semibold">
|
|
65%
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="progress" style="height:10px;">
|
|
|
|
<div class="progress-bar"
|
|
style="width:65%">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Speaking -->
|
|
|
|
<div>
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
|
|
<span>
|
|
<i class="bi bi-mic text-primary"></i>
|
|
Speaking
|
|
</span>
|
|
|
|
<span class="fw-semibold">
|
|
70%
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="progress" style="height:10px;">
|
|
|
|
<div class="progress-bar"
|
|
style="width:70%">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div> |