mirror of
https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
synced 2026-01-21 05:40:35 +08:00
519 lines
34 KiB
HTML
519 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<title>Stexo - Responsive Admin & Dashboard Template | Themesdesign</title>
|
|
<meta content="Responsive admin theme build on top of Bootstrap 4" name="description" />
|
|
<meta content="Themesdesign" name="author" />
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Begin page -->
|
|
<div id="wrapper">
|
|
|
|
<!-- Top Bar Start -->
|
|
<div class="topbar">
|
|
|
|
<!-- LOGO -->
|
|
<div class="topbar-left">
|
|
<a href="index.html" class="logo">
|
|
<span class="logo-light">
|
|
<i class="mdi mdi-camera-control"></i> Stexo
|
|
</span>
|
|
<span class="logo-sm">
|
|
<i class="mdi mdi-camera-control"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="navbar-custom">
|
|
<ul class="navbar-right list-inline float-right mb-0">
|
|
|
|
<!-- language-->
|
|
<li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
|
|
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
|
<img src="assets/images/flags/us_flag.jpg" class="mr-2" height="12" alt=""/> English <span class="mdi mdi-chevron-down"></span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated language-switch">
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/french_flag.jpg" alt="" height="16" /><span> French </span></a>
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/spain_flag.jpg" alt="" height="16" /><span> Spanish </span></a>
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/russia_flag.jpg" alt="" height="16" /><span> Russian </span></a>
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/germany_flag.jpg" alt="" height="16" /><span> German </span></a>
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/italy_flag.jpg" alt="" height="16" /><span> Italian </span></a>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- full screen -->
|
|
<li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
|
|
<a class="nav-link waves-effect" href="#" id="btn-fullscreen">
|
|
<i class="mdi mdi-arrow-expand-all noti-icon"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- notification -->
|
|
<li class="dropdown notification-list list-inline-item">
|
|
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
|
<i class="mdi mdi-bell-outline noti-icon"></i>
|
|
<span class="badge badge-pill badge-danger noti-icon-badge">3</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-menu-lg px-1">
|
|
<!-- item-->
|
|
<h6 class="dropdown-item-text">
|
|
Notifications
|
|
</h6>
|
|
<div class="slimscroll notification-item-list">
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item active">
|
|
<div class="notify-icon bg-success"><i class="mdi mdi-cart-outline"></i></div>
|
|
<p class="notify-details"><b>Your order is placed</b><span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon bg-danger"><i class="mdi mdi-message-text-outline"></i></div>
|
|
<p class="notify-details"><b>New Message received</b><span class="text-muted">You have 87 unread messages</span></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon bg-info"><i class="mdi mdi-filter-outline"></i></div>
|
|
<p class="notify-details"><b>Your item is shipped</b><span class="text-muted">It is a long established fact that a reader will</span></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon bg-success"><i class="mdi mdi-message-text-outline"></i></div>
|
|
<p class="notify-details"><b>New Message received</b><span class="text-muted">You have 87 unread messages</span></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon bg-warning"><i class="mdi mdi-cart-outline"></i></div>
|
|
<p class="notify-details"><b>Your order is placed</b><span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
|
|
</a>
|
|
|
|
</div>
|
|
<!-- All-->
|
|
<a href="javascript:void(0);" class="dropdown-item text-center notify-all text-primary">
|
|
View all <i class="fi-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dropdown notification-list list-inline-item">
|
|
<div class="dropdown notification-list nav-pro-img">
|
|
<a class="dropdown-toggle nav-link arrow-none nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
|
<img src="assets/images/users/user-4.jpg" alt="user" class="rounded-circle">
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
|
|
<!-- item-->
|
|
<a class="dropdown-item" href="#"><i class="mdi mdi-account-circle"></i> Profile</a>
|
|
<a class="dropdown-item" href="#"><i class="mdi mdi-wallet"></i> My Wallet</a>
|
|
<a class="dropdown-item d-block" href="#"><span class="badge badge-success float-right">11</span><i class="mdi mdi-settings"></i> Settings</a>
|
|
<a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline"></i> Lock screen</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item text-danger" href="#"><i class="mdi mdi-power text-danger"></i> Logout</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<ul class="list-inline menu-left mb-0">
|
|
<li class="float-left">
|
|
<button class="button-menu-mobile open-left waves-effect">
|
|
<i class="mdi mdi-menu"></i>
|
|
</button>
|
|
</li>
|
|
<li class="d-none d-md-inline-block">
|
|
<form role="search" class="app-search">
|
|
<div class="form-group mb-0">
|
|
<input type="text" class="form-control" placeholder="Search..">
|
|
<button type="submit"><i class="fa fa-search"></i></button>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
<!-- Top Bar End -->
|
|
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|
<div class="left side-menu">
|
|
<div class="slimscroll-menu" id="remove-scroll">
|
|
|
|
<!--- Sidemenu -->
|
|
<div id="sidebar-menu">
|
|
<!-- Left Menu Start -->
|
|
<ul class="metismenu" id="side-menu">
|
|
<li class="menu-title">Menu</li>
|
|
<li>
|
|
<a href="index.html" class="waves-effect">
|
|
<i class="icon-accelerator"></i><span class="badge badge-success badge-pill float-right">9+</span> <span> Dashboard </span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-mail-open"></i><span> Email <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
|
|
<ul class="submenu">
|
|
<li><a href="email-inbox.html">Inbox</a></li>
|
|
<li><a href="email-read.html">Email Read</a></li>
|
|
<li><a href="email-compose.html">Email Compose</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="calendar.html" class="waves-effect"><i class="icon-calendar"></i><span> Calendar </span></a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-paper-sheet"></i><span> Pages <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
|
|
<ul class="submenu">
|
|
<li><a href="pages-pricing.html">Pricing</a></li>
|
|
<li><a href="pages-invoice.html">Invoice</a></li>
|
|
<li><a href="pages-timeline.html">Timeline</a></li>
|
|
<li><a href="pages-faqs.html">FAQs</a></li>
|
|
<li><a href="pages-maintenance.html">Maintenance</a></li>
|
|
<li><a href="pages-comingsoon.html">Coming Soon</a></li>
|
|
<li><a href="pages-starter.html">Starter Page</a></li>
|
|
<li><a href="pages-login.html">Login</a></li>
|
|
<li><a href="pages-register.html">Register</a></li>
|
|
<li><a href="pages-recoverpw.html">Recover Password</a></li>
|
|
<li><a href="pages-lock-screen.html">Lock Screen</a></li>
|
|
<li><a href="pages-404.html">Error 404</a></li>
|
|
<li><a href="pages-500.html">Error 500</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title">Components</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-pencil-ruler"></i> <span> UI Elements <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span> </a>
|
|
<ul class="submenu">
|
|
<li><a href="ui-alerts.html">Alerts</a></li>
|
|
<li><a href="ui-badge.html">Badge</a></li>
|
|
<li><a href="ui-buttons.html">Buttons</a></li>
|
|
<li><a href="ui-cards.html">Cards</a></li>
|
|
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
|
|
<li><a href="ui-navs.html">Navs</a></li>
|
|
<li><a href="ui-tabs-accordions.html">Tabs & Accordions</a></li>
|
|
<li><a href="ui-modals.html">Modals</a></li>
|
|
<li><a href="ui-images.html">Images</a></li>
|
|
<li><a href="ui-progressbars.html">Progress Bars</a></li>
|
|
<li><a href="ui-pagination.html">Pagination</a></li>
|
|
<li><a href="ui-popover-tooltips.html">Popover & Tooltips</a></li>
|
|
<li><a href="ui-spinner.html">Spinner</a></li>
|
|
<li><a href="ui-carousel.html">Carousel</a></li>
|
|
<li><a href="ui-video.html">Video</a></li>
|
|
<li><a href="ui-typography.html">Typography</a></li>
|
|
<li><a href="ui-grid.html">Grid</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-diamond"></i> <span> Advanced UI <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span> </a>
|
|
<ul class="submenu">
|
|
<li><a href="advanced-alertify.html">Alertify</a></li>
|
|
<li><a href="advanced-rating.html">Rating</a></li>
|
|
<li><a href="advanced-nestable.html">Nestable</a></li>
|
|
<li><a href="advanced-rangeslider.html">Range Slider</a></li>
|
|
<li><a href="advanced-sweet-alert.html">Sweet-Alert</a></li>
|
|
<li><a href="advanced-lightbox.html">Lightbox</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-todolist-check"></i><span> Forms <span class="badge badge-pill badge-danger float-right">8</span> </span></a>
|
|
<ul class="submenu">
|
|
<li><a href="form-elements.html">Form Elements</a></li>
|
|
<li><a href="form-validation.html">Form Validation</a></li>
|
|
<li><a href="form-advanced.html">Form Advanced</a></li>
|
|
<li><a href="form-editors.html">Form Editors</a></li>
|
|
<li><a href="form-uploads.html">Form File Upload</a></li>
|
|
<li><a href="form-mask.html">Form Mask</a></li>
|
|
<li><a href="form-summernote.html">Summernote</a></li>
|
|
<li><a href="form-xeditable.html">Form Xeditable</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-graph"></i><span> Charts <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
|
|
<ul class="submenu">
|
|
<li><a href="charts-morris.html">Morris Chart</a></li>
|
|
<li><a href="charts-chartist.html">Chartist Chart</a></li>
|
|
<li><a href="charts-chartjs.html">Chartjs Chart</a></li>
|
|
<li><a href="charts-flot.html">Flot Chart</a></li>
|
|
<li><a href="charts-c3.html">C3 Chart</a></li>
|
|
<li><a href="charts-other.html">Jquery Knob Chart</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-spread"></i><span> Tables <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
|
|
<ul class="submenu">
|
|
<li><a href="tables-basic.html">Basic Tables</a></li>
|
|
<li><a href="tables-datatable.html">Data Table</a></li>
|
|
<li><a href="tables-responsive.html">Responsive Table</a></li>
|
|
<li><a href="tables-editable.html">Editable Table</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-coffee"></i> <span> Icons <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span></span> </a>
|
|
<ul class="submenu">
|
|
<li><a href="icons-material.html">Material Design</a></li>
|
|
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
|
|
<li><a href="icons-outline.html">Outline Icons</a></li>
|
|
<li><a href="icons-themify.html">Themify Icons</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-map"></i><span> Maps <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
|
|
<ul class="submenu">
|
|
<li><a href="maps-google.html"> Google Map</a></li>
|
|
<li><a href="maps-vector.html"> Vector Map</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="icon-share"></i><span> Multi Level <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span> </span></a>
|
|
<ul class="submenu">
|
|
<li><a href="javascript:void(0);"> Menu 1</a></li>
|
|
<li>
|
|
<a href="javascript:void(0);">Menu 2 <span class="float-right menu-arrow"><i class="mdi mdi-chevron-right"></i></span></a>
|
|
<ul class="submenu">
|
|
<li><a href="javascript:void(0);">Menu 2.1</a></li>
|
|
<li><a href="javascript:void(0);">Menu 2.1</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
<!-- Sidebar -->
|
|
<div class="clearfix"></div>
|
|
|
|
</div>
|
|
<!-- Sidebar -left -->
|
|
|
|
</div>
|
|
<!-- Left Sidebar End -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="content-page">
|
|
<!-- Start content -->
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="page-title-box">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-6">
|
|
<h4 class="page-title">Images</h4>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-right">
|
|
<li class="breadcrumb-item"><a href="javascript:void(0);">Stexo</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li>
|
|
<li class="breadcrumb-item active">Images</li>
|
|
</ol>
|
|
</div>
|
|
</div> <!-- end row -->
|
|
</div>
|
|
<!-- end page-title -->
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="card m-b-30">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Image thumbnails</h4>
|
|
<p class="sub-title">In addition to our border-radius utilities, you can use
|
|
<code class="highlighter-rouge">.img-thumbnail</code> to give an image a
|
|
rounded 1px border appearance.</p>
|
|
|
|
<div class="">
|
|
<img class="img-thumbnail" alt="200x200" style="width: 200px; height: 200px;" src="assets/images/small/img-3.jpg" data-holder-rendered="true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card m-b-30">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Image Rounded & Circle</h4>
|
|
<p class="sub-title">Use classes
|
|
<code>.rounded</code> and <code>.rounded-circle</code>.</p>
|
|
|
|
<div class="">
|
|
<img class="rounded mr-2" alt="200x200" style="width: 200px;" src="assets/images/small/img-4.jpg" data-holder-rendered="true">
|
|
<img class="rounded-circle" alt="200x200" src="assets/images/users/user-4.jpg" data-holder-rendered="true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card m-b-30">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Responsive images</h4>
|
|
<p class="sub-title">Images in Bootstrap are made responsive
|
|
with <code class="highlighter-rouge">.img-fluid</code>. <code
|
|
class="highlighter-rouge">max-width: 100%;</code> and <code
|
|
class="highlighter-rouge">height: auto;</code> are applied to
|
|
the image so that it scales with the parent element.</p>
|
|
|
|
<div class="">
|
|
<img src="assets/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card m-b-30">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Default media object</h4>
|
|
<p class="sub-title">The default media displays a media
|
|
object (images, video, audio) to the left or right of a content
|
|
block.</p>
|
|
|
|
<div class="media m-b-30">
|
|
<img class="d-flex mr-3 rounded-circle" src="assets/images/users/user-6.jpg" alt="" height="64">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 font-14">Media heading</h5>
|
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="media m-b-30">
|
|
<img class="d-flex mr-3 rounded-circle" src="assets/images/users/user-2.jpg" alt="" height="64">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 font-14">Media heading</h5>
|
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|
|
|
<div class="media mt-3">
|
|
<a class="d-flex pr-3" href="#">
|
|
<img src="assets/images/users/user-3.jpg" alt="" height="64" class="rounded-circle">
|
|
</a>
|
|
<div class="media-body">
|
|
<h5 class="mt-0 font-14">Media heading</h5>
|
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="media">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1 font-14">Media object</h5>
|
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
|
</div>
|
|
<img class="d-flex ml-3 rounded-circle" src="assets/images/users/user-4.jpg" alt="" height="64">
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card m-b-30">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Media alignment</h4>
|
|
<p class="sub-title">The images or other media can be
|
|
aligned top, middle, or bottom. The default is top aligned.</p>
|
|
|
|
<div class="media m-b-30">
|
|
<img class="d-flex align-self-start rounded mr-3" src="assets/images/users/user-3.jpg" alt="" height="64">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 font-14">Top-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media m-b-30">
|
|
<img class="d-flex align-self-center rounded mr-3" src="assets/images/users/user-5.jpg" alt="" height="64">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 font-14">Center-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media">
|
|
<img class="d-flex align-self-end rounded mr-3" src="assets/images/users/user-1.jpg" alt="" height="64">
|
|
<div class="media-body">
|
|
<h5 class="mt-0 font-14">Bottom-aligned media</h5>
|
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
|
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--end row-->
|
|
|
|
|
|
</div>
|
|
<!-- container-fluid -->
|
|
|
|
</div>
|
|
<!-- content -->
|
|
|
|
<footer class="footer">
|
|
© 2019 Stexo <span class="d-none d-sm-inline-block"> - Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesdesign</span>.
|
|
</footer>
|
|
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Right content here -->
|
|
<!-- ============================================================== -->
|
|
|
|
</div>
|
|
<!-- END wrapper -->
|
|
|
|
<!-- jQuery -->
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/metismenu.min.js"></script>
|
|
<script src="assets/js/jquery.slimscroll.js"></script>
|
|
<script src="assets/js/waves.min.js"></script>
|
|
|
|
<!-- App js -->
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |