mirror of
https://github.com/stisla/stisla.git
synced 2025-09-02 04:32:55 +02:00
533 lines
28 KiB
HTML
533 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
||
<title>Bootstrap Components › Media Object — Stisla</title>
|
||
|
||
<!-- General CSS Files -->
|
||
<link rel="stylesheet" href="assets/modules/bootstrap/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="assets/modules/fontawesome/css/all.min.css">
|
||
|
||
<!-- CSS Libraries -->
|
||
|
||
<!-- Template CSS -->
|
||
<link rel="stylesheet" href="assets/css/style.css">
|
||
<link rel="stylesheet" href="assets/css/components.css">
|
||
<!-- Start GA -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-94034622-3"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
|
||
gtag('config', 'UA-94034622-3');
|
||
</script>
|
||
<!-- /END GA --></head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<div class="main-wrapper main-wrapper-1">
|
||
<div class="navbar-bg"></div>
|
||
<nav class="navbar navbar-expand-lg main-navbar">
|
||
<form class="form-inline mr-auto">
|
||
<ul class="navbar-nav mr-3">
|
||
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
|
||
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
|
||
</ul>
|
||
<div class="search-element">
|
||
<input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
|
||
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
|
||
<div class="search-backdrop"></div>
|
||
<div class="search-result">
|
||
<div class="search-header">
|
||
Histories
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">How to hack NASA using CSS</a>
|
||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">Kodinger.com</a>
|
||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">#Stisla</a>
|
||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||
</div>
|
||
<div class="search-header">
|
||
Result
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">
|
||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-3-50.png" alt="product">
|
||
oPhone S9 Limited Edition
|
||
</a>
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">
|
||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-2-50.png" alt="product">
|
||
Drone X2 New Gen-7
|
||
</a>
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">
|
||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-1-50.png" alt="product">
|
||
Headphone Blitz
|
||
</a>
|
||
</div>
|
||
<div class="search-header">
|
||
Projects
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">
|
||
<div class="search-icon bg-danger text-white mr-3">
|
||
<i class="fas fa-code"></i>
|
||
</div>
|
||
Stisla Admin Template
|
||
</a>
|
||
</div>
|
||
<div class="search-item">
|
||
<a href="#">
|
||
<div class="search-icon bg-primary text-white mr-3">
|
||
<i class="fas fa-laptop"></i>
|
||
</div>
|
||
Create a new Homepage Design
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<ul class="navbar-nav navbar-right">
|
||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
|
||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||
<div class="dropdown-header">Messages
|
||
<div class="float-right">
|
||
<a href="#">Mark All As Read</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-list-content dropdown-list-message">
|
||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||
<div class="dropdown-item-avatar">
|
||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle">
|
||
<div class="is-online"></div>
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
<b>Kusnaedi</b>
|
||
<p>Hello, Bro!</p>
|
||
<div class="time">10 Hours Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||
<div class="dropdown-item-avatar">
|
||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle">
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
<b>Dedik Sugiharto</b>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
|
||
<div class="time">12 Hours Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||
<div class="dropdown-item-avatar">
|
||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle">
|
||
<div class="is-online"></div>
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
<b>Agung Ardiansyah</b>
|
||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||
<div class="time">12 Hours Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item">
|
||
<div class="dropdown-item-avatar">
|
||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle">
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
<b>Ardian Rahardiansyah</b>
|
||
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
|
||
<div class="time">16 Hours Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item">
|
||
<div class="dropdown-item-avatar">
|
||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle">
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
<b>Alfa Zulkarnain</b>
|
||
<p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
||
<div class="time">Yesterday</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="dropdown-footer text-center">
|
||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
|
||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||
<div class="dropdown-header">Notifications
|
||
<div class="float-right">
|
||
<a href="#">Mark All As Read</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown-list-content dropdown-list-icons">
|
||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||
<div class="dropdown-item-icon bg-primary text-white">
|
||
<i class="fas fa-code"></i>
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
Template update is available now!
|
||
<div class="time text-primary">2 Min Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item">
|
||
<div class="dropdown-item-icon bg-info text-white">
|
||
<i class="far fa-user"></i>
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
<b>You</b> and <b>Dedik Sugiharto</b> are now friends
|
||
<div class="time">10 Hours Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item">
|
||
<div class="dropdown-item-icon bg-success text-white">
|
||
<i class="fas fa-check"></i>
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
<b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
|
||
<div class="time">12 Hours Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item">
|
||
<div class="dropdown-item-icon bg-danger text-white">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
Low disk space. Let's clean it!
|
||
<div class="time">17 Hours Ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item">
|
||
<div class="dropdown-item-icon bg-info text-white">
|
||
<i class="fas fa-bell"></i>
|
||
</div>
|
||
<div class="dropdown-item-desc">
|
||
Welcome to Stisla template!
|
||
<div class="time">Yesterday</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="dropdown-footer text-center">
|
||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
|
||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
|
||
<div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<div class="dropdown-title">Logged in 5 min ago</div>
|
||
<a href="features-profile.html" class="dropdown-item has-icon">
|
||
<i class="far fa-user"></i> Profile
|
||
</a>
|
||
<a href="features-activities.html" class="dropdown-item has-icon">
|
||
<i class="fas fa-bolt"></i> Activities
|
||
</a>
|
||
<a href="features-settings.html" class="dropdown-item has-icon">
|
||
<i class="fas fa-cog"></i> Settings
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a href="#" class="dropdown-item has-icon text-danger">
|
||
<i class="fas fa-sign-out-alt"></i> Logout
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div class="main-sidebar sidebar-style-2">
|
||
<aside id="sidebar-wrapper">
|
||
<div class="sidebar-brand">
|
||
<a href="index.html">Stisla</a>
|
||
</div>
|
||
<div class="sidebar-brand sidebar-brand-sm">
|
||
<a href="index.html">St</a>
|
||
</div>
|
||
<ul class="sidebar-menu">
|
||
<li class="menu-header">Dashboard</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="index-0.html">General Dashboard</a></li>
|
||
<li><a class="nav-link" href="index.html">Ecommerce Dashboard</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-header">Starter</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="layout-default.html">Default Layout</a></li>
|
||
<li><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
|
||
<li><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
|
||
<li class="dropdown active">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
|
||
<li><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
|
||
<li><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
|
||
<li><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
|
||
<li><a class="nav-link" href="bootstrap-card.html">Card</a></li>
|
||
<li><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
|
||
<li><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
|
||
<li><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
|
||
<li><a class="nav-link" href="bootstrap-form.html">Form</a></li>
|
||
<li><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
|
||
<li class=active><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
|
||
<li><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
|
||
<li><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
|
||
<li><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
|
||
<li><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
|
||
<li><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
|
||
<li><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
|
||
<li><a class="nav-link" href="bootstrap-table.html">Table</a></li>
|
||
<li><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
|
||
<li><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-header">Stisla</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="components-article.html">Article</a></li> <li><a class="nav-link beep beep-sidebar" href="components-avatar.html">Avatar</a></li> <li><a class="nav-link" href="components-chat-box.html">Chat Box</a></li> <li><a class="nav-link beep beep-sidebar" href="components-empty-state.html">Empty State</a></li> <li><a class="nav-link" href="components-gallery.html">Gallery</a></li>
|
||
<li><a class="nav-link beep beep-sidebar" href="components-hero.html">Hero</a></li> <li><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
|
||
<li><a class="nav-link beep beep-sidebar" href="components-pricing.html">Pricing</a></li> <li><a class="nav-link" href="components-statistic.html">Statistic</a></li> <li><a class="nav-link" href="components-tab.html">Tab</a></li>
|
||
<li><a class="nav-link" href="components-table.html">Table</a></li>
|
||
<li><a class="nav-link" href="components-user.html">User</a></li> <li><a class="nav-link beep beep-sidebar" href="components-wizard.html">Wizard</a></li> </ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
|
||
<li><a class="nav-link" href="forms-editor.html">Editor</a></li>
|
||
<li><a class="nav-link" href="forms-validation.html">Validation</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="gmaps-advanced-route.html">Advanced Route</a></li>
|
||
<li><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
|
||
<li><a href="gmaps-geocoding.html">Geocoding</a></li>
|
||
<li><a href="gmaps-geolocation.html">Geolocation</a></li>
|
||
<li><a href="gmaps-marker.html">Marker</a></li>
|
||
<li><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
|
||
<li><a href="gmaps-route.html">Route</a></li>
|
||
<li><a href="gmaps-simple.html">Simple</a></li>
|
||
</ul>
|
||
</li> <li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
|
||
<li><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
|
||
<li><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
|
||
<li><a class="nav-link" href="modules-flag.html">Flag</a></li>
|
||
<li><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
|
||
<li><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
|
||
<li><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
|
||
<li><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
|
||
<li><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
|
||
<li><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
|
||
<li><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
|
||
<li><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="menu-header">Pages</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="auth-forgot-password.html">Forgot Password</a></li>
|
||
<li><a href="auth-login.html">Login</a></li>
|
||
<li><a href="auth-register.html">Register</a></li>
|
||
<li><a href="auth-reset-password.html">Reset Password</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="errors-503.html">503</a></li>
|
||
<li><a class="nav-link" href="errors-403.html">403</a></li>
|
||
<li><a class="nav-link" href="errors-404.html">404</a></li>
|
||
<li><a class="nav-link" href="errors-500.html">500</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="nav-link" href="features-activities.html">Activities</a></li>
|
||
<li><a class="nav-link" href="features-post-create.html">Post Create</a></li>
|
||
<li><a class="nav-link" href="features-posts.html">Posts</a></li>
|
||
<li><a class="nav-link" href="features-profile.html">Profile</a></li>
|
||
<li><a class="nav-link" href="features-settings.html">Settings</a></li>
|
||
<li><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
|
||
<li><a class="nav-link" href="features-tickets.html">Tickets</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="utilities-contact.html">Contact</a></li>
|
||
<li><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
|
||
<li><a href="utilities-subscribe.html">Subscribe</a></li>
|
||
</ul>
|
||
</li> <li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
|
||
</ul>
|
||
|
||
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
|
||
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
|
||
<i class="fas fa-rocket"></i> Documentation
|
||
</a>
|
||
</div> </aside>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="main-content">
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<h1>Media Object</h1>
|
||
<div class="section-header-breadcrumb">
|
||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||
<div class="breadcrumb-item">Media Object</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-body">
|
||
<h2 class="section-title">Media Object</h2>
|
||
<p class="section-lead">
|
||
Examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-12 col-md-6 col-lg-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4>Simple</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="media">
|
||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||
<div class="media-body">
|
||
<h5 class="mt-0">Media heading</h5>
|
||
<p class="mb-0">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.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4>List</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<ul class="list-unstyled">
|
||
<li class="media">
|
||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||
<div class="media-body">
|
||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus oringilla. Donec lacinia congue felis in faucibus.</p>
|
||
</div>
|
||
</li>
|
||
<li class="media my-4">
|
||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||
<div class="media-body">
|
||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus oringilla. Donec lacinia congue felis in faucibus.</p>
|
||
</div>
|
||
</li>
|
||
<li class="media">
|
||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||
<div class="media-body">
|
||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus oringilla. Donec lacinia congue felis in faucibus.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4>Nesting</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="media">
|
||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||
<div class="media-body">
|
||
<h5 class="mt-0">Media heading</h5>
|
||
<p>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.</p>
|
||
|
||
<div class="media mt-3">
|
||
<a class="pr-3" href="#">
|
||
<img src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||
</a>
|
||
<div class="media-body">
|
||
<h5 class="mt-0">Media heading</h5>
|
||
<p class="mb-0">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.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4>Order</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="media">
|
||
<div class="media-body">
|
||
<h5 class="mt-0 mb-1">Media object</h5>
|
||
<p>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.</p>
|
||
</div>
|
||
<img class="ml-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<footer class="main-footer">
|
||
<div class="footer-left">
|
||
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
||
</div>
|
||
<div class="footer-right">
|
||
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- General JS Scripts -->
|
||
<script src="assets/modules/jquery.min.js"></script>
|
||
<script src="assets/modules/popper.js"></script>
|
||
<script src="assets/modules/tooltip.js"></script>
|
||
<script src="assets/modules/bootstrap/js/bootstrap.min.js"></script>
|
||
<script src="assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
|
||
<script src="assets/modules/moment.min.js"></script>
|
||
<script src="assets/js/stisla.js"></script>
|
||
|
||
<!-- JS Libraies -->
|
||
|
||
<!-- Page Specific JS File -->
|
||
|
||
<!-- Template JS File -->
|
||
<script src="assets/js/scripts.js"></script>
|
||
<script src="assets/js/custom.js"></script>
|
||
</body>
|
||
</html> |