Widgets
Browser Stats
![]() |
Google Chrome | 23% |
![]() |
Mozila Firefox | 15% |
![]() |
Apple Safari | 07% |
![]() |
Internet Explorer | 09% |
![]() |
Opera mini | 23% |
![]() |
Microsoft edge | 09% |
Code Here:
<table class="table browser no-border mb-0">
<tbody>
<tr>
<td style="width:40px">
<img src="../assets/images/browser/chrome-logo.png" alt="logo">
</td>
<td>Google Chrome</td>
<td align="right">
<span class="label label-info">23%</span>
</td>
</tr>
<tr>
<td>
<img src="../assets/images/browser/firefox-logo.png" alt="logo">
</td>
<td>Mozila Firefox</td>
<td align="right">
<span class="label label-success">15%</span>
</td>
</tr>
<tr>
<td>
<img src="../assets/images/browser/safari-logo.png" alt="logo">
</td>
<td>Apple Safari</td>
<td align="right">
<span class="label label-primary">07%</span>
</td>
</tr>
<tr>
<td>
<img src="../assets/images/browser/internet-logo.png" alt="logo">
</td>
<td>Internet Explorer</td>
<td align="right">
<span class="label label-warning">09%</span>
</td>
</tr>
<tr>
<td>
<img src="../assets/images/browser/opera-logo.png" alt="logo">
</td>
<td>Opera mini</td>
<td align="right">
<span class="label label-danger">23%</span>
</td>
</tr>
<tr>
<td>
<img src="../assets/images/browser/internet-logo.png" alt="logo">
</td>
<td>Microsoft edge</td>
<td align="right">
<span class="label label-megna">09%</span>
</td>
</tr>
</tbody>
</table>
Recent Chats
-
James Anderson
Lorem Ipsum is simply dummy text of the printing & type setting industry.10:56 am -
Bianca Doe
It’s Great opportunity to work.10:57 am -
I would love to join the team.
10:58 am -
Whats budget of the new project.
10:59 am -
Angelina Rhodes
Well we have good budget for the project11:00 am
Code Here
<div class="card shadow mb-0">
<div class="card-body">
<div class="chat-box">
<!--chat Row -->
<ul class="chat-list">
<!--chat Row -->
<li>
<div class="chat-img">
<img src="../assets/images/users/1.jpg" alt="user" />
</div>
<div class="chat-content">
<h5>James Anderson</h5>
<div class="box bg-light-info">Lorem Ipsum is simply dummy text of the printing & type setting industry.</div>
</div>
<div class="chat-time">10:56 am</div>
</li>
<!--chat Row -->
<li>
<div class="chat-img">
<img src="../assets/images/users/2.jpg" alt="user" />
</div>
<div class="chat-content">
<h5>Bianca Doe</h5>
<div class="box bg-light-info">It’s Great opportunity to work.</div>
</div>
<div class="chat-time">10:57 am</div>
</li>
<!--chat Row -->
<li class="reverse">
<div class="chat-content">
<div class="box bg-light-inverse">I would love to join the team.</div>
<br/>
</div>
<div class="chat-time">10:58 am</div>
</li>
<!--chat Row -->
<li class="reverse">
<div class="chat-content">
<div class="box bg-light-inverse">Whats budget of the new project.</div>
<br/>
</div>
<div class="chat-time">10:59 am</div>
</li>
<!--chat Row -->
<li>
<div class="chat-img">
<img src="../assets/images/users/3.jpg" alt="user" />
</div>
<div class="chat-content">
<h5>Angelina Rhodes</h5>
<div class="box bg-light-info">Well we have good budget for the project</div>
</div>
<div class="chat-time">11:00 am</div>
</li>
<!--chat Row -->
</ul>
</div>
</div>
<div class="card-body border-top">
<div class="row">
<div class="col-8">
<textarea placeholder="Type your message here" class="form-control border-0"></textarea>
</div>
<div class="col-4 text-end">
<button type="button" class="btn btn-info btn-circle btn-lg text-white">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
Profile Card

Daniel Kristeen
UIUX Designer
14
Photos
54
Videos
145
Tasks
Lorem ipsum dolor sit ametetur adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunLorem ipsum dolor sit ametetur adipisicing elit, sed do eiusmod tempor incididuntt
Code Here
<div class="card">
<div class="card-body">
<div class="d-flex flex-row">
<div class=""><img src="../assets/images/users/1.jpg" alt="user" class="img-circle" width="100" /></div>
<div class="p-l-20">
<h3 class="font-medium">Daniel Kristeen</h3>
<h6>UIUX Designer</h6>
<button class="btn btn-success"><i class="ti-plus"></i> Follow</button>
</div>
</div>
<div class="row m-t-40">
<div class="col b-r text-center">
<h2 class="font-light">14</h2>
<h6>Photos</h6></div>
<div class="col b-r text-center">
<h2 class="font-light">54</h2>
<h6>Videos</h6></div>
<div class="col text-center">
<h2 class="font-light">145</h2>
<h6>Tasks</h6></div>
</div>
</div>
<div>
<hr>
</div>
<div class="card-body">
<p class="text-center aboutscroll">
Lorem ipsum dolor sit ametetur adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunLorem ipsum dolor sit ametetur adipisicing elit, sed do eiusmod tempor incididuntt
</p>
<ul class="list-icons d-flex flex-item text-center p-t-10">
<li class="col"><a href="javascript:void(0)" data-bs-toggle="tooltip" title="Website"><i class="fa fa-globe font-20"></i></a></li>
<li class="col"><a href="javascript:void(0)" data-bs-toggle="tooltip" title="twitter"><i class="fab fa-twitter font-20"></i></a></li>
<li class="col"><a href="javascript:void(0)" data-bs-toggle="tooltip" title="Facebook"><i class="fab fa-facebook-square font-20"></i></a></li>
<li class="col"><a href="javascript:void(0)" data-bs-toggle="tooltip" title="Youtube"><i class="fab fa-youtube font-20"></i></a></li>
<li class="col"><a href="javascript:void(0)" data-bs-toggle="tooltip" title="Linkd-in"><i class="fab fa-linkedin font-20"></i></a></li>
</ul>
</div>
</div>
Visits around the countries
-
6350
From India48% -
3250
From UAE98% -
1250
From Australia75% -
1350
From USA48%
Code Here
<div class="card mb-0 shadow">
<div class="card-body">
<ul class="country-state">
<li>
<h2>6350</h2>
<small>From India</small>
<div class="pull-right">48%
<i class="fa fa-level-up text-success"></i>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 48%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li>
<h2>3250</h2>
<small>From UAE</small>
<div class="pull-right">98%
<i class="fa fa-level-up text-success"></i>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 48%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li>
<h2>1250</h2>
<small>From Australia</small>
<div class="pull-right">75%
<i class="fa fa-level-down text-danger"></i>
</div>
<div class="progress">
<div class="progress-bar bg-inverse" role="progressbar" style="width: 48%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li>
<h2>1350</h2>
<small>From USA</small>
<div class="pull-right">48%
<i class="fa fa-level-up text-success"></i>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 48%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
</ul>
</div>
</div>
Weather Report
Weather Report
73°
Saturday
Ahmedabad, IndiaWind | ESE 17 mph |
Humidity | 83% |
Pressure | 28.56 in |
Cloud Cover | 78% |
Ceiling | 25760 ft |
- 09:30
70°
- 11:30
72°
- 13:30
75°
- 15:30
76°
Code Here
<div class="card">
<div class="card-body">
<div class="d-flex no-block align-items-center">
<h4 class="card-title">Weather Report</h4>
<div class="ms-auto">
<select class="form-select">
<option selected="">Today</option>
<option value="1">Weekly</option>
</select>
</div>
</div>
<div class="d-flex align-items-center flex-row m-t-30">
<div class="p-2 display-5 text-info"><i class="wi wi-day-showers"></i> <span>73<sup>°</sup></span></div>
<div class="p-2">
<h3 class="m-b-0">Saturday</h3><small>Ahmedabad, India</small></div>
</div>
<table class="table no-border">
<tbody>
<tr>
<td>Wind</td>
<td class="font-medium">ESE 17 mph</td>
</tr>
<tr>
<td>Humidity</td>
<td class="font-medium">83%</td>
</tr>
<tr>
<td>Pressure</td>
<td class="font-medium">28.56 in</td>
</tr>
<tr>
<td>Cloud Cover</td>
<td class="font-medium">78%</td>
</tr>
<tr>
<td>Ceiling</td>
<td class="font-medium">25760 ft</td>
</tr>
</tbody>
</table>
<hr>
<ul class="list-unstyled row text-center city-weather-days">
<li class="col"><i class="wi wi-day-sunny"></i><span>09:30</span>
<h3>70<sup>°</sup></h3></li>
<li class="col"><i class="wi wi-day-cloudy"></i><span>11:30</span>
<h3>72<sup>°</sup></h3></li>
<li class="col"><i class="wi wi-day-hail"></i><span>13:30</span>
<h3>75<sup>°</sup></h3></li>
<li class="col"><i class="wi wi-day-sprinkle"></i><span>15:30</span>
<h3>76<sup>°</sup></h3></li>
</ul>
</div>
</div>