<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Micon -->
<link rel="stylesheet" href="../../dev/css/micon.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/micon@3.0.168/micon.min.css" />
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container my-5">
<div class="row">
<div class="col-md-4 mb-5">
<div class="card">
<div class="card-body">
<h4 class="semibold mb-3">Card title</h4>
<p class="mb-4">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h4 class="semibold mb-3">Card title</h4>
<p class="mb-4">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card text-center">
<div class="card-header py-3">Featured</div>
<div class="card-body">
<h4 class="semibold mb-3">Special title treatment</h4>
<p class="mb-4">
With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="card-footer text-muted py-3">2 days ago</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-5">
<div class="card border shadow-0 rounded-0">
<img
src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/document-preview.png"
class="card-img-top"
alt="..."
/>
<div class="card-body p-3">
<h5 class="mb-3">Large_file_name_…s_truncating.pptx</h5>
<div class="d-flex">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (28).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3">
<div class="w-100">
<h6 class="link-dark mb-0">Annie Lindqvist</h6>
<a href="#!" class="stretched-link text-muted"
><p class="mb-0 small">Created a few minutes ago</p></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 mb-5">
<div class="card border shadow-0 rounded-0 mb-3">
<div class="d-flex g-0">
<div class="col-md-4">
<img
src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/document-preview.png"
class="w-100"
alt="..."
/>
</div>
<div class="col-md-8">
<div class="card-body px-3 pt-2">
<h5 class="mb-3">Revenue stream proposal fiscal year 2016 version02.pptx</h5>
<div class="d-flex position-absolute" style="bottom: 0;">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (29).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3 pb-2">
<div class="w-100">
<h6 class="link-dark mb-0">Roko Kolar</h6>
<a href="#!" class="stretched-link text-muted"
><p class="mb-0 small">Created a few minutes ago</p></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border shadow-0 rounded-0 mb-3">
<div class="d-flex g-0">
<div
class="col-md-4 d-flex justify-content-center align-items-center bg-primary"
style="height: 131px;"
>
<i class="mi mi-OpenFile mi-3x text-white"></i>
</div>
<div class="col-md-8">
<div class="card-body px-3 pt-2">
<h5 class="mb-3">View and share files</h5>
<div class="d-flex position-absolute" style="bottom: 0;">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3 pb-2">
<div class="w-100">
<h6 class="link-dark mb-0">Aaron Reid</h6>
<a href="#!" class="stretched-link text-muted"
><p class="mb-0 small">Created a few minutes ago</p></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border shadow-0 rounded-0">
<div class="d-flex g-0">
<div
class="col-md-4 d-flex justify-content-center align-items-center bg-light"
style="height: 131px;"
>
<i class="mi mi-MailReply mi-3x text-secondary"></i>
</div>
<div class="col-md-8">
<div class="card-body px-3 pt-2">
<h5 class="mb-3">
Conversation about takeaways from annual SharePoint conference
</h5>
<div class="d-flex position-absolute" style="bottom: 0;">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (26).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3 pb-2">
<div class="w-100">
<h6 class="link-dark mb-0">Christina Bergqvist</h6>
<a href="#!" class="stretched-link text-muted"
><p class="mb-0 small">Sent a few minutes ago</p></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-md-4 mb-5">
<div class="card">
<img
src="https://mdbootstrap.com/img/Photos/new-templates/linkedin/img3.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<span class="badge bg-primary mb-3">NEW</span>
<h4 class="semibold mb-3">Card title</h4>
<p class="mb-3">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#" class="text-primary d-flex align-items-center"
>Call to action
<i class="mi mi-ChevronRight ms-2"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card">
<div
class="py-3 w-100"
style="
background-color: #b4009e;
height: 9rem;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
"
></div>
<div class="position-relative h-100" style="margin-top: -4.5rem;">
<div class="w-50 mx-auto position-relative">
<img
class="img-fluid"
src="https://mdbootstrap.com/img/Photos/Others/men.jpg"
alt="Card image"
/>
</div>
</div>
<div class="card-body">
<div class="text-center">
<h5 class="card-title semibold mb-2 pb-1">Jim Lohan</h5>
<p class="card-subtitle semibold mb-2">UX Designer</p>
<p class="card-text mb-4 pb-1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, deserunt.
</p>
</div>
<ul class="ps-2 mb-1">
<li class="d-flex justify-content-between mb-1">
<i class="mi mi-MapPin2"></i>
<span>Ellsworth , ME</span>
</li>
<li class="d-flex justify-content-between mb-1">
<i class="mi mi-Phone"></i>
<span>123 456 789</span>
</li>
<li class="d-flex justify-content-between mb-0">
<i class="mi mi-Mail"></i>
<span>exmaple@exmaple.com</span>
</li>
</ul>
</div>
<div class="card-footer d-flex justify-content-between py-4">
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-instagram mi-lg" style="color: #bf0077;"></i>
</a>
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-dribbble mi-lg" style="color: #e3008c;"></i>
</a>
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-vimeo mi-lg" style="color: #0078d7;"></i>
</a>
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-reddit-alien mi-lg" style="color: #ef6950;"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card text-center">
<div
class="bg-primary d-flex justify-content-center align-items-center"
style="height: 9rem; border-top-left-radius: 2px; border-top-right-radius: 2px;"
>
<i class="mi mi-5x mi-facebook text-white"></i>
</div>
<div class="card-body">
<h4 class="card-title semibold pt-0">Lorem, ipsum.</h4>
<p class="card-subtitle">Lorem, ipsum.</p>
<hr class="border-dark w-25 mx-auto" />
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere facilis ullam est
velit corporis corrupti nisi dolore soluta fugit provident!
</p>
<div class="d-flex justify-content-center">
<ul class="ps-0 mb-0">
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-DeviceLaptopNoPic"></i>Lorem ipsum dolor sit.
</li>
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-telegram"></i>Lorem ipsum dolor sit.
</li>
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-Phone"></i>Lorem ipsum dolor sit.
</li>
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-MobAirplane"></i>Lorem ipsum dolor sit.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>