339 lines
13 KiB
HTML
339 lines
13 KiB
HTML
|
<!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>
|